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 MVC中使用Web API和EntityFramework构建应用程序

    最近做了一个项目技术预研:在ASP.NET MVC框架中使用Web API和EntityFramework,构建一个基础的架构,并在此基础上实现基本的CRUD应用. 以下是详细的步骤. 第一步 在数据 ...

  2. 福建百度seo和推广，关键词排名优化，网络营销推广培训

    福建百度seo和推广,关键词排名优化,网络营销推广培训 福建百度seo和推广,关键词排名优化,网络营销推广培训,那么如何才能够让自己的文章信息被百度收录呢?只要说自己的文章能够被百度收录,那么你的信息 ...

  3. 使用ssh 登录Linux 文件上传下载方法

    最简单的方法: 安装WinSCP或者Filezilla, 启动该程序,然后自己输入输入主机名.端口.用户名.密码登录,然后在putty里面用pwd命令看看当前目录,再在WinSCP/Filezilla ...

  4. 【翻译】CSS Animations VS the Web Animations API：案例学习

    原文地址:CSS Animations vs the Web Animations API: A Case Study May 03, 2017 css, javascript 上周我写了我如何使用C ...

  5. Centos 7系统优化脚本

    脚本如下,后续继续优化 #!/bin/bash #author junxi by #this script is only for CentOS 7.x #check the OS platform= ...

  6. 洛谷P1879 [USACO06NOV]玉米田Corn Fields【状压DP】题解+AC代码

    题目描述 Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ M ≤ 12; 1 ≤ N ...

  7. 接口测试基础（fiddler、postman的使用、python实现测试接口程序）

    写在前面:本文主要的章节规划: 1.什么是接口测试    另外,有的时候会直接调用别的公司的接口,比如银行的.淘宝的.支付宝的,此时也需要做接口测试以及验证数据: 做接口测试的好处:      其中, ...

  8. java中的Collection集合类

    随着1998年JDK 1.2的发布,同时新增了常用的Collections集合类,包含了Collection和Map接口.而Dictionary类是在1996年JDK 1.0发布时就已经有了.它们都可 ...

  9. 《android开发艺术探索》读书笔记（十一）--Android的线程和线程池

    接上篇<android开发艺术探索>读书笔记(十)--Android的消息机制 No1: 在Android中可以扮演线程角色的有很多,比如AsyncTask.IntentService.H ...

  10. mysql 学习心得5

    常用函数 字符串函数 concat(S1,S2....,Sn) 链接s1 s2 ...... 任何字符串和null链接显示为null insert(str,x,y,instr)  将str从x位开始y ...