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

  1. <link href="css/bootstrap.min.css" rel="stylesheet"> 

  1. <script src="jquery-3.1.0.min.js" type="text/javascript"></script>
  2. <script src="bootstrap.min.js" type="text/javascript"></script>
 
下拉菜单，首先，在容器div中创建一个class为dropdown的div

  1.         <div class="dropdown">
  2.           ...
  3.         </div>
 
1.为下拉菜单添加内容
点击的下拉菜单，触发器是一个按钮，而下拉菜单的详细内容有<ul><li> 标签的组合来完成

  1. 　　　　<div class="dropdown">
  2.             <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  3.                 Dropdown
  4.                 <span class="caret"></span>
  5.             </button>
  6.             <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  7.                 <li><a href="#">Action</a></li>
  8.                 <li><a href="#">Another action</a></li>
  9.                 <li><a href="#">Something else here</a></li>
  10.                 <li><a href="#">Separated link</a></li>
  11.             </ul>
  12.         </div>
 
效果

2.有时候我们希望分类放，那就需要一条线来分割，新添加
 
  1. <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 属性 会使点击后，会出现内容遮挡住按钮的情况）
修改为：
 

  1. 　　　 　<div class="dropdown pull-right">
  2.             <button class="btn btn-default dropdown-togglet" type="button" id="dropdownMenu1" data-toggle="dropdown">
  3.                 右边显示
  4.                 <span class="caret"></span>
  5.             </button>
  6.             <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
  7.                 <li><a href="#">Action</a></li>
  8.                 <li><a href="#">Another action</a></li>
  9.                 <li><a href="#">Something else here</a></li>
  10.                 <li role="presentation" class="divider"></li>
  11.                 <li><a href="#">Separated link</a></li>
  12.             </ul>
  13.         </div>
效果为：

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

  1. 　　　　<div class="dropdown">
  2.             <button class="btn btn-default dropdown-togglet" type="button" id="dropdownMenu1" data-toggle="dropdown">
  3.                 带标题显示
  4.                 <span class="caret"></span>
  5.             </button>
  6.             <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  7.                 <li role="presentation" class="dropdown-header">标题1</li>
  8.                 <li><a href="#">Action</a></li>
  9.                 <li><a href="#">Another action</a></li>
  10.                 <li><a href="#">Something else here</a></li>
  11.                 <li role="presentation" class="dropdown-header">标题2</li>
  12.                 <li><a href="#">Action2</a></li>
  13.                 <li><a href="#">Another action2</a></li>
  14.                 <li><a href="#">Something else here2</a></li>
  15.                 <li role="presentation" class="divider"></li>
  16.                 <li><a href="#">Separated link</a></li>
  17.             </ul>
  18.         </div>
 
效果为：

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

  1. 　　　　<div class="dropdown">
  2.             <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  3.                 一些不可用
  4.                 <span class="caret"></span>
  5.             </button>
  6.             <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  7.                 <li class="disabled"><a href="#">Action</a></li>
  8.                 <li class="disabled"><a href="#">Another action</a></li>
  9.                 <li><a href="#">Something else here</a></li>
  10.                 <li role="presentation" class="divider"></li>
  11.                 <li><a href="#">Separated link</a></li>
  12.             </ul>
  13.         </div>
效果为，禁用内容显示淡灰色，鼠标移动上去显示一个禁止的符号
 

 
 
 
 
 
 
 
 
 

Bootstrap入门（八）组件2：下拉菜单的更多相关文章

  1. Bootstrap<基础十四> 按钮下拉菜单

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

  2. Bootstrap历练实例：带有下拉菜单的标签和胶囊导航

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. 用bootstrap和css3制作按钮式下拉菜单

    利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：内嵌下拉菜单的按钮组

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Bootstrap之样式风格与下拉菜单

    背景颜色 bg-primary 字体颜色 text-primary 文字居中 text-center 按钮 btn btn-primary btn-default默认 btn-link链接 按钮大小 ...

  6. ⑨bootstrap组件 按钮式下拉菜单 输入框 使用基础案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  7. Bootstrap <基础十二>下拉菜单（Dropdowns）

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

  8. 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉 ...

  9. Bootstrap-CL：按钮下拉菜单

    ylbtech-Bootstrap-CL:按钮下拉菜单 1.返回顶部 1. Bootstrap 按钮下拉菜单 本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉 ...

随机推荐

  1. JS查找和替换字符串列子

    依赖 工具函数库 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. cocos2dx 3.2 的中国象棋游戏

    改编来源:http://cn.cocos2d-x.org/tutorial/lists?id=103 在cocos2dx官网看到了这么个教程,是cocos2dx 2.x版本的,于是用 cocos2dx ...

  3. ip识别运用

    tcp/ip协议中,专门保留了三个IP地址区域作为私有地址,其地址范围如下: 10.0.0.0/8:10.0.0.0-10.255.255.255 172.16.0.0/12:172.16.0.0-1 ...

  4. 产品需求文档写作方法（三）用例文档(UML用例图、流程图)

    在产品和技术领域里都有UML的技能知识,而对于产品人员的UML则更多的是指用例图,也就是我所称呼的用户流程图.在讲PRD文档写作的第二篇文章里,我提到了用户流程图的制作,实际上用户流程图是我在产品规则 ...

  5. HTML学习（八）列表和块

    无序列表无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记.无序列表始于 <ul> 标签.每个列表项始于 <li>.<ul type=“”> ...

  6. Linux下网络流量实时监控工具大全

    在工作中发现,经常因为业务的原因,需要即时了解某台服务器网卡的流量,虽然公司也部署了cacti软件,但cacti是五分钟统计的,没有即时性,并且有时候打开监控页面不方便,个人喜欢随手在某台服务器上输入 ...

  7. 关于IP网段间互访的问题—路由是根本（转）

    源: 关于IP网段间互访的问题—路由是根本

  8. 【转】10个重要的Linux ps命令实战

    Linux作为Unix的衍生操作系统,Linux内建有查看当前进程的工具ps.这个工具能在命令行中使用. PS 命令是什么 查看它的man手册可以看到,ps命令能够给出当前系统中进程的快照.它能捕获系 ...

  9. Nginx 在configure时的参数

    Nginx 使用 Unix 下常用的 './configure && make && make install' 过程来编译安装. configure 脚本确定系统所具 ...

  10. 使用Cookie记住用户名和密码

    Login.jsp <form name = "f1" method="get" action="servlet/LoginServlet&qu ...