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. ASP.NET Core 发布 centos7 配置守护进程

    ASP.NET Core应用程序发布linux在shell中运行是正常的.可一但shell关闭网站也就关闭了,所以要配置守护进程, 用的是Supervisor,本文主要记录配置的过程和过程遇到的问题 ...

  2. 开发板访问linux方法

    1.使用网线分别将 PC 机与开发板连接到交换机. 2.保证 windows能 ping通 Linux. 2.1.关闭 windows 系统中的其他网络连接,只保留用来和交换机连接的网卡. 2.2.网 ...

  3. Node.js爬取豆瓣数据

    一直自以为自己vue还可以,一直自以为webpack还可以,今天在慕课逛node的时候,才发现,自己还差的很远.众所周知,vue-cli基于webpack,而webpack基于node,对node不了 ...

  4. .NET Core UI框架Avalonia

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

  5. PHPStorm 常用 设置配置 和快捷键大全 Win/Mac

    [转自 http://blog.csdn.net/fenglailea/article/details/53350080] PHPStorm 下载及主题样式下载 http://www.lanmps.c ...

  6. Treap-平衡树学习笔记

    平衡树-Treap学习笔记 最近刚学了Treap 发现这种数据结构真的是--妙啊妙啊~~ 咳咳.... 所以发一发博客,也是为了加深蒟蒻自己的理解 顺便帮助一下各位小伙伴们 切入正题 Treap的结构 ...

  7. 隱藏在素數規律中的Pi -- BZOJ1041解題報告

    退役狗在刷程書的過程中看到了一個有趣的視頻, 講解了一個有趣的問題. 在網上隨便搜索了一下居然還真的找到了一道以它爲背景的OI題目, BZOJ1041. 下面的內容會首先回顧一下視頻所討論的知識, 有 ...

  8. Arbiter 系统使用说明

    Arbiter 系统使用说明 Overview Arbiter是NOI系列赛事的官方评测软件, 由北航的相关人员开发. 在OIer会经历的几场大型比赛中, 除了省选和PKUSC/THUSC不使用Arb ...

  9. 5、flask之信号和mateclass元类

    本篇导航: flask实例化参数 信号 metaclass元类解析 一.flask实例化参数 instance_path和instance_relative_config是配合来用的:这两个参数是用来 ...

  10. 💈 A Cross-Thread Call Helper Class

    Conmajia © 2012, 2018 Introduction When you are working on background threads and call frontend GUI ...