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. .NET Core UI框架Avalonia

    .NET Core UI框架Avalonia,Avalonia是一个基于WPF XAML的跨平台UI框架,并支持多种操作系统:Windows(.NET Framework,.NET Core),Lin ...

  2. 关于CSS的外边距合并问题

    首先,需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 而在普通文档流中,这又分两种情况,分别是父子元素之间和相邻元素之间. <!D ...

  3. linux下双网卡的绑定

    如果服务器上有两快网卡就可以把它绑定为一块虚拟的网卡,如果一块网卡坏了另一块还可以继续工作,增加了冗余度和负载,具体做法如下: 新建一个虚拟的网卡,命令如下: iv /etc/sysconfig/ne ...

  4. PHP die与exit的区别

    最近听见有人说die和exit区别,bula~bula.决心一探究竟. 翻了翻PHP 5.6的源码(源码的位置为zend目录下zend_language_scanner.l大约是1014~1020行) ...

  5. Vue.js响应式原理

      写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:answershuto/learnV ...

  6. （一）《Maven实战》读书笔记 —— Maven简介

    第一章:Maven简介 一.何为Maven? Maven这个词可以翻译为"知识的积累",本书将介绍Maven这一跨平台的项目管理工具.作为Apache组织中的一个个颇为成功的开源项 ...

  7. Egret学习笔记 (Egret打飞机-9.子弹对敌机和主角的碰撞)

    运行起来,虽然主角飞机和敌机都在互相发射子弹,但是子弹打中了就和没打中效果是一样的.. 这一章我们就来处理子弹和飞机的碰撞问题. 我们所有的操作都是基于Main这个容器来做的.所以我就把这个处理放到M ...

  8. #pragma预处理命令

    #pragma comment(lib,"XXX.lib") 表示链接XXX.lib这个库,和在工程设置里写上XXX.lib的效果一样. #pragma comment(linke ...

  9. python 垃圾回收机制的思考

    一.前言 Python 是一门高级语言,使用起来类似于自然语言,开发的时候自然十分方便快捷,原因是Python在背后为我们默默做了很多事情,其中一件就是垃圾回收,来解决内存管理,内存泄漏的问题. 内存 ...

  10. UVA - 11292 Dragon of Loowater 贪心

    贪心策略:一个直径为X的头颅,应该让雇佣费用满足大于等于X且最小的骑士来砍掉,这样才能使得花费最少. AC代码 #include <cstdio> #include <cmath&g ...