Bootstrap入门（八）组件2：下拉菜单
先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>当中添加） 
<link href="css/bootstrap.min.css" rel="stylesheet"> 

<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>

下拉菜单，首先，在容器div中创建一个class为dropdown的div 
        <div class="dropdown">...</div>

1.为下拉菜单添加内容
点击的下拉菜单，触发器是一个按钮，而下拉菜单的详细内容有<ul><li> 标签的组合来完成 
　　　　<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li><a href="#">Separated link</a></li></ul></div>

效果
2.有时候我们希望分类放，那就需要一条线来分割，新添加 
<li role="presentation" class="divider"></li>

效果：（可能看的不清楚，可以先尝试）
3.下拉菜单的对齐
比如说希望按钮和按钮内容都在右边，可以在<div>和<button>的class添加一个pull-right 属性，在<ul>标签中的class添加一个 dropdown-menu-right属性。（在<button> 中添加pull-right 属性 是为了让按钮移动到右边，，在<ul>添加一个 dropdown-menu-right属性 是为了把内容移动到右边，而如果没有在<div>添加pull-right 属性 会使点击后，会出现内容遮挡住按钮的情况）
修改为： 
　　　 　<div class="dropdown pull-right"><button class="btn btn-default dropdown-togglet" type="button" id="dropdownMenu1" data-toggle="dropdown">右边显示<span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="presentation" class="divider"></li><li><a href="#">Separated link</a></li></ul></div>

效果为：
4.给下拉菜单内容添加标题
当下拉菜单内容多了之后，希望添加标题对他进行说明或者引导，可以添加标题
新添加 
<li role="presentation" class="dropdown-header">标题内容</li>

操作： 
　　　　<div class="dropdown"><button class="btn btn-default dropdown-togglet" type="button" id="dropdownMenu1" data-toggle="dropdown">带标题显示<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li role="presentation" class="dropdown-header">标题1</li><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="presentation" class="dropdown-header">标题2</li><li><a href="#">Action2</a></li><li><a href="#">Another action2</a></li><li><a href="#">Something else here2</a></li><li role="presentation" class="divider"></li><li><a href="#">Separated link</a></li></ul></div>

效果为：
5.部分下拉菜单不可用
只需要在需要禁用的内容添加disabled 
<li class="disabled"><a href="#">内容</a></li>

操作： 
　　　　<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">一些不可用<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li class="disabled"><a href="#">Action</a></li><li class="disabled"><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="presentation" class="divider"></li><li><a href="#">Separated link</a></li></ul></div>

效果为，禁用内容显示淡灰色，鼠标移动上去显示一个禁止的符号

转载于:https://www.cnblogs.com/hnnydxgjj/p/5858313.html

Bootstrap入门（八）组件2：下拉菜单相关推荐

  1. Bootstrap导航条鼠标悬停下拉菜单

    Bootstrap导航条鼠标悬停下拉菜单 Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹 ...

  2. Bootstrap组件_下拉菜单

    下拉菜单<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...

  3. Bootstrap使用 .dropdown-menu 类创建下拉菜单

    下拉菜单 下拉菜单是一种非常常见的效果,用于展示可切换.有关联的一组链接,它可以节省网页排版空间,使网页布局简洁有序. Bootstrap内置了一套完整的下拉菜单组件,可用于不同的元素,如导航.按钮等 ...

  4. Element-UI组件之 — — 下拉菜单

    :label="item.label"   下拉菜单列表中要显示的内容 :value="item.value"  选中后显示的内容 注::value和v-mod ...

  5. Bootstrap 下拉菜单

    下拉菜单 Bootstrap中,可以将下拉菜单添加到任何其他组件中,包括导航条.胶囊式导航.标签导航.按钮导航等. 下拉菜单插件需要 bootstrap-dropdown.js 文件支持,在使用该插件 ...

  6. 鼠标点击出现下拉菜单html,Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...

  7. Bootstrap—解决下拉菜单不弹出问题

    最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,对照教程感觉代码没错. 我的代码如下: &l ...

  8. WEB前端网页设计-Bootstrap 按钮下拉菜单

    目录 Bootstrap 按钮下拉菜单 分割的按钮下拉菜单 按钮下拉菜单的大小 按钮上拉菜单 Bootstrap 按钮下拉菜单 本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单. ...

  9. bootstrap按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.向按钮添加下拉菜单,只需要简单地在一个 .btn-group 中放置按钮和下拉菜单即可.您也可以使用 <span class=" ...

  10. html 下拉框设置名称,html下拉菜单怎么做？高手教你如何在HTML和CSS中创建下拉菜单...

    html下拉菜单怎么做?html下拉菜单代码是什么?这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单? 很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出 ...

最新文章

  1. 秦州：西瓜书 + 南瓜书 吃瓜系列 13. 降维与度量学习（上）
  2. Day 10： PhoneGap —— 开发手机应用如此简单
  3. CodeForces - 1366D Two Divisors(数论)
  4. 数据结构与算法常见笔试题 .
  5. SQL Server 2012如何打开2016的profiler文件
  6. [Vue.js] 模块化 -- 前端模块化
  7. Javascript函数调用的四种方法
  8. 随想一·杨柳岸晓风残月
  9. GridView网格控件
  10. 项目管理软件之禅道和JIRA的共同点与区别
  11. -------已搬运------BUUCTF：[RootersCTF2019]ImgXweb --- jwt --寻找secret，easy
  12. 设置字根，配合rem适配（多尺寸屏幕的适配）
  13. aspose导出word转pdf并加水印
  14. 思科交换机指示灯详解
  15. 清华大学交叉信息研究院姚班修改培养模式：姚班、智班、量信班全合并
  16. The remote end hung up unexpectedly The remote end hung up unexpectedly RPC failed；
  17. echarts 3d柱状图(bar3D)默认缩放大小
  18. 本地计算机 feifei pc,局域网中其它计算机对共享打印机的访问方法
  19. 【原创】HTML学习（2020.2.4）
  20. vue中v-if 不重新渲染组件的问题

热门文章

  1. 阿里巴巴开发规范集合处理
  2. 网络知识：内网、外网、宽带、带宽、流量、网速之间的联系？
  3. 数据结构基础：算法的基础知识笔记
  4. mysql字符集说明
  5. 安卓应用部件_设计应用程序小部件的痛苦和喜悦
  6. v-charts加载动画_加载动画-用户体验写作练习
  7. .NET实现之(WebBrowser数据采集—续篇)
  8. jfinal使用shiro注解大体流程
  9. 从如何优化SQL入手，提高数据仓库的ETL效率
  10. [转]Android中pendingIntent的深入理解