Bootstrap下拉菜单的使用(附源码文件)--Bootstrap
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> 用户<!--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的更多相关文章
- Bootstrap表格样式(附源码文件)--Bootstrap
1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...
- Bootstrap下拉菜单
前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...
- 第二百四十四节，Bootstrap下拉菜单和滚动监听插件
Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...
- 第八篇.Bootstrap下拉菜单
给div一个class “dropdown”,将下拉菜单放在这个div里就可以显示bootstrap的下拉菜单. <div class="dropdown"> < ...
- bootstrap 下拉菜单不显示的解决办法
bootstrap 下拉菜单不显示,最后改成如下正常显示: <div class="btn-group open"> <ul class="dropdo ...
- Bootstrap -- 下拉菜单、输入框组、导航菜单
Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...
- bootstrap下拉菜单(Dropdowns)
本章将重点讲解bootstrap下拉菜单(Dropdowns),下拉菜单是可切换的,是以列表格式显示链接的上下文菜单. <!DOCTYPE html><html><hea ...
- Bootstrap 下拉菜单和滚动监听插件
一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
- 详解Bootstrap下拉菜单组件
bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的源码文件为:dropdowns.less sass对应的源码文件为:_dropdowns.scs ...
随机推荐
- JAVAEE——BOS物流项目03：学习计划、messager、menubutton、登陆拦截器、信息校验和取派员添加功能
1 学习计划 1.jQuery easyUI messager使用方式 n alert方法 n confirm方法 n show方法 2.jQuery easyUI menubutton使用方式 3. ...
- 如何在Python中从零开始实现随机森林
欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 决策树可能会受到高度变异的影响,使得结果对所使用的特定测试数据而言变得脆弱. 根据您的测试数据样本构建多个模型(称为套袋)可以减少这种差异,但是 ...
- 初学Python（第二课）
一.列表.元组的操作 1.定义:列表类似于C中的数组,使用方法也相似.它的定义举例如下:letter = ['A','B','C','D','E','F']; 2.列表的切片 (1)访问一个元素且知道 ...
- 集成 solr6.5.1到 tomcat7（8） 中 （解决java.lang.NoSuchMethodError问题）
♣下载solr安装包 ♣安装solr ♣solr应用部署到tomcat下 ♣配置web.xml ♣在tomcat7启动 ♣改为在tomcat8启动 ♣在自带的Jetty里启动 ♣建立第一个Core 安 ...
- angular aot编译报错 ERROR in ./src/main.ts 解决方法
昨天打包项目时遇到下图这样的错误: 开始以为了某些模块存在但未使用,折腾一番无果,后来升级angular-cli就搞定了,方法很简单: 1.删掉node_modules 2.更改package.jso ...
- nyoj161 取石子 (四） 威佐夫博弈
思路:详细证明见博弈总结 如何判断威佐夫博弈的奇异局势? 对于状态(a, b),c = b - a,如果是奇异局势必定满足 a == c * (1+√5)/ 2. AC代码 #include < ...
- nyoj281 整数中的1（二） 数位DP
和整数中的1一毛一样.就是输入时改了一下罢了. AC代码: #include<cstdio> const int maxn = 35; int w[maxn], h[maxn]; void ...
- Hive命令及操作
1.hive表操作 复制表结构 create table denserank_amt like otheravgrank_amt;修改表名 alter table tmp rename to cred ...
- JLINK 10针J和20针JTAG接口连接方法
我的JLINK终于用上了,哈哈,好开心,终于不用考虑是不是要借用别人的PC机了,昨天到城隍庙电子市场忙活了一下午,终于算是满载而归,呵呵,好了,下面说一下接法,其实根本不需要什么转接板什么的,直接把相 ...
- 利用squid 搭建简单的代理服务器
在虚拟机下做的测试. 虚拟主机1:(双网卡) eth0连接内网 ip地址为 192.168.0.100/24 eth1配置一个虚拟外网的ip 200.168.0.100/24 虚拟主机2: ip:20 ...