1、Bootstrap下拉菜单的使用,源代码如下：（如有不当之处，还望大佬们指出哈……）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Bootstrap下拉菜单</title>

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

     <script src="js/jquery-3.2.1.min.js"></script>

     <script src="js/bootstrap.min.js"></script>

 </head>

 <body>

 <div class="container">

     <div class="dropdown">

         <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">

             <span class="glyphicon glyphicon-user"></span>&nbsp;用户<!--glyphicon glyphicon-user是图标的css样式-->

             <span class="caret"></span>

         </button>

         <ul class="dropdown-menu">

             <li class="dropdown-header">这一项是标题</li>

             <li><a href="#">普通菜单</a></li>

             <li class="active"><a href="#">菜单激活状态</a></li>

             <li class="disabled"><a href="#">禁用菜单</a></li>

             <li class="divider"><a href="#">分隔线</a></li>

             <li><a href="#">普通菜单</a></li>

         </ul>

     </div>

 </div>

 </body>

 </html>

Effect Picture:

源码文件下载：Bootstrap下拉菜单.zip

2、以下内容列出的是各个类选择器设定的内容以及在标签起到的作用。

(1) Bootstrap中的下拉菜单需要用到jQuery.js和bootstrap.js，所以这两个文件都要引用进去。注意引用的先后顺序，需要先引用jQuery，再应用bootstrap.js。

如果先引用bootstrap.js后引用jQuery.js，就会出错，Console会输出错误提示信息：

(2) class="dropdown"&class="dropup"    　 <div></div>起到定位的效果

　　.dropup,.dropdown {
　　　　position: relative;
　　}

(3) class="btn"、class="btn-denger" 　<button></button>设置按钮样式，按钮颜色为红色

　　.btn {
　　　　display: inline-block;
　　　　padding: 6px 12px;
　　　　margin-bottom: 0;
　　　　font-size: 14px;
　　　　font-weight: normal;
　　　　line-height: 1.42857143;
　　　　text-align: center;
　　　　white-space: nowrap;
　　　　vertical-align: middle;
　　　　-ms-touch-action: manipulation;
　　　　touch-action: manipulation;
　　　　cursor: pointer;
　　　　-webkit-user-select: none;
　　　　-moz-user-select: none;
　　　　-ms-user-select: none;
　　　　user-select: none;
　　　　background-image: none;
　　　　border: 1px solid transparent;
　　　　border-radius: 4px;
　　}

　　.btn-danger {
　　　　color: #fff;
　　　　background-color: #d9534f;
　　　　border-color: #d43f3a;
　　}

(4) class="caret"　　　<span></span>设置（下拉小图标）图标

　　.dropup .caret,
　　.navbar-fixed-bottom .dropdown .caret {
　　　　content: "";
　　　　border-top: 0;
　　　　border-bottom: 4px dashed;
　　　　border-bottom: 4px solid \9;
　　}

(5) class="dropdown-menu"         <ul></ul>可以隐藏ul，一开始是隐藏状态

　　.dropup .dropdown-menu,
　　.navbar-fixed-bottom .dropdown .dropdown-menu {
　　　　top: auto;
　　　　bottom: 100%;
　　　　margin-bottom: 2px;
　　}

(6) class="dropdown-menu-right"

　  class="dropdown-menu-left"     <ul></ul>设置ul相对<div class="dropdown"></div>的位置

　　.dropdown-menu-right {
　　　　right: 0;
　　　　left: auto;
　　}
　　.dropdown-menu-left {
　　　　right: auto;
　　　　left: 0;
　　}

(7) class="dropdown-header"　　<li></li>（不用超链接）在下拉菜单中不能选中，代表标题

　　.dropdown-header {
　　　　display: block;
　　　　padding: 3px 20px;
　　　　font-size: 12px;
　　　　line-height: 1.42857143;
　　　　color: #777;
　　　　white-space: nowrap;　　}

(8) data-toggle="dropdown"属性　　<button><button>在按钮上这个属性可实现下拉显示子菜单

(9) class="disabled "      　　　<li></li>使放在<a></a>上显示禁用图标

　　.nav > li.disabled > a {

　　　　color: #777;
　　}
　　.nav > li.disabled > a:hover,
　　.nav > li.disabled > a:focus {
　　　　color: #777;
　　　　text-decoration: none;
　　　　cursor: not-allowed;
　　　　background-color: transparent;
　　}

(10) class="active" 　　　<li></li>使放在<a></a>上显示激活状态

　　.nav-tabs > li.active > a,
　　.nav-tabs > li.active > a:hover,
　　.nav-tabs > li.active > a:focus {
　　　　color: #555;
　　　　cursor: default;
　　　　background-color: #fff;
　　　　border: 1px solid #ddd;
　　　　border-bottom-color: transparent;
　　}

(11) classs="divider " 　　　<li></li>使放在<a></a>上显示分隔线

　　.nav .nav-divider {
　　　　height: 1px;
　　　　margin: 9px 0;
　　　　overflow: hidden;
　　　　background-color: #e5e5e5;
　　}

下拉菜单要注意的：{基本语法、对齐、标题、分隔线、禁用菜单}

文章系作者原创，转载请注明出处，感谢合作!

Bootstrap下拉菜单的使用(附源码文件)--Bootstrap的更多相关文章

  1. Bootstrap表格样式(附源码文件)--Bootstrap

    1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...

  2. Bootstrap下拉菜单

    前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...

  3. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

  4. 第八篇.Bootstrap下拉菜单

    给div一个class “dropdown”,将下拉菜单放在这个div里就可以显示bootstrap的下拉菜单. <div class="dropdown"> < ...

  5. bootstrap 下拉菜单不显示的解决办法

    bootstrap 下拉菜单不显示,最后改成如下正常显示: <div class="btn-group open"> <ul class="dropdo ...

  6. Bootstrap -- 下拉菜单、输入框组、导航菜单

    Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...

  7. bootstrap下拉菜单(Dropdowns)

    本章将重点讲解bootstrap下拉菜单(Dropdowns),下拉菜单是可切换的,是以列表格式显示链接的上下文菜单. <!DOCTYPE html><html><hea ...

  8. Bootstrap 下拉菜单和滚动监听插件

    一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

  9. 详解Bootstrap下拉菜单组件

    bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的源码文件为:dropdowns.less sass对应的源码文件为:_dropdowns.scs ...

随机推荐

  1. DaemonSet 案例分析 - 每天5分钟玩转 Docker 容器技术（130）

    本节详细分析两个 k8s 自己的 DaemonSet:kube-flannel-ds 和 kube-proxy . kube-flannel-ds 下面我们通过分析 kube-flannel-ds 来 ...

  2. 使用IntelliJ IDEA（PHPStorm）和xdebug在firefox、chrome中远程调试PHP

    很多PHP程序员都习惯于使用echo.var_dump和exit来中断和调试web应用程序,本文主要介绍结合xdebug.IntelliJ IDEA.Firefox/chrome/IE来远程调试PHP ...

  3. mongodb 学习二

    基本操作 增删改查实一个数据库必备的操作,接下来我们就说说怎么在shell下进行增删改查. 我们另外打开一个"命令指示符"窗口(注意:之前的不能关闭),输入mongo打开Mongo ...

  4. Phone文件备份

    一 把照片导入到本地 连接手机和PC,插上数据线后PC上会自动检测并弹出对话框,提示导入 可以指定导入的目录.确定之后点击导入即可开始执行导入操作. 二 把语音备忘录导入到本地 需要借助iTunes联 ...

  5. yml 文件操作方法

    文件读取方法示例: import yaml fr = open('yml_file_address', 'r',encoding='utf-8') data = yaml.load(fr) print ...

  6. Tomcat输出保存JVM GC日志文件

    当系统出现问题时,分析java虚拟机GC日志可以帮助我们定位问题,一般来说, 我们可以通过制定JVM参数使tomcat保存GC日志文件,具体实现如下: Windows下: 找到tomcat的解压目录, ...

  7. Hibernate Error: a different object with the same identifier value was already associated with the session

    在执行Hibernate的Update操作时,报错:a different object with the same identifier value was already associated w ...

  8. Angular CurrencyPipe货币管道关于人民币符号￥的问题

    做项目(Angular项目)时经常需要处理金额的显示,需要在金额前面加上￥,但又不想用简单在前面加"￥"这么不优雅的方式,于是想到了CurrencyPipe.毕竟,Currency ...

  9. Windows10系统故障检测你知道多少-上海IT33

    Windows 10作为微软公司最新的一款操作系统,从使用的方便和界面的整洁上来说,固然是很好的,但是其因为隐私问题,致使很多人不惜一切代价想要远离Windows 10这款操作系统.尽管Windows ...

  10. 网络基础tcp/ip协议二

    物理层解析: 物理层是TCP/IP模型的最低层,物理层为数据提供数据传输可靠通路. 物理层关心的介质: 信号 接口 传输介质 信号的分类:(信号是信息传递的媒介.) 模拟信号:连续变化的物理量 数字信 ...