Bootstrap入门(八)组件2:下拉菜单
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<div class="dropdown">
...
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

.png)
<li role="presentation" class="divider"></li>

.png)
<div class="dropdown pull-right">
<button class="btn btn-default dropdown-togglet" type="button" id="dropdownMenu1" data-toggle="dropdown">
右边显示
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

.png)
<li role="presentation" class="dropdown-header">标题内容</li>
<div class="dropdown">
<button class="btn btn-default dropdown-togglet" type="button" id="dropdownMenu1" data-toggle="dropdown">
带标题显示
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">标题1</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="presentation" class="dropdown-header">标题2</li>
<li><a href="#">Action2</a></li>
<li><a href="#">Another action2</a></li>
<li><a href="#">Something else here2</a></li>
<li role="presentation" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

.png)
<li class="disabled"><a href="#">内容</a></li>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
一些不可用
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="disabled"><a href="#">Action</a></li>
<li class="disabled"><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
.png)

Bootstrap入门(八)组件2:下拉菜单的更多相关文章
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
- Bootstrap历练实例:带有下拉菜单的标签和胶囊导航
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 用bootstrap和css3制作按钮式下拉菜单
利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:内嵌下拉菜单的按钮组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap之样式风格与下拉菜单
背景颜色 bg-primary 字体颜色 text-primary 文字居中 text-center 按钮 btn btn-primary btn-default默认 btn-link链接 按钮大小 ...
- ⑨bootstrap组件 按钮式下拉菜单 输入框 使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- Bootstrap <基础十二>下拉菜单(Dropdowns)
Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...
- 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉 ...
- Bootstrap-CL:按钮下拉菜单
ylbtech-Bootstrap-CL:按钮下拉菜单 1.返回顶部 1. Bootstrap 按钮下拉菜单 本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉 ...
随机推荐
- angularJs-UI-bootstrap系列教程2(According)
废话不说上代码 angular.module('MyApp', ['ngAnimate', 'ngTouch', 'ui.bootstrap']) .controller('accordionCtrl ...
- fuel 6.1自动推送3控高可用centos 6.5 juno环境排错(一)
查看fuel日志: # less /var/log/docker-logs/remote/node-1.domain.tld/puppet-apply.log 2015-12-25T17:26:22. ...
- Eclipse 快捷键使用
ctrl+shift+T //查找当前工程下的某个类 实时提示 ctrl+shift+R//查找当前工程下的某个文件 实时提示 ctrl+/添加注释 Ctrl+1 快速修复(最经典的快捷键,就 ...
- iOS开发之隐藏tabbar--解决隐藏后依然不能响应对应位置事件的问题
状态条StatusBar 1 [UIApplication sharedApplication].statusBarHidden = YES; 导航条NavigationBar 1 [self.nav ...
- C语言实现求字符串子集问题
这个问题在于实现Apriori算法的时候需要求各个频繁集的关联规则,而这时需要在求得最大的频繁集中求各个频繁集的真子集.然后在实现这一步的时候被卡主了,第一反应是用递归完成,但是面对数据挖掘中庞大的项 ...
- Salesforce开发者学习笔记之二:Salesforce开发平台应用场景
Salesforce作为一个全方位的CRM系统可以应用于企业中的各个不同部门以取代手工的,耗时的以及低效的业务流程,例如 基于报表的数据管理和分析 基于电子邮件的协同合作 本地的文件共享 各种手工操作 ...
- jQuery 页面加载事件
页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload ...
- js函数——setinterval和setTimeout
1.window.setTimeout方法 该方法可以延时执行一个函数,例如: <script language="JavaScript" type="text/j ...
- FZU 2112 Tickets
这个问题可以转变一下,先要知道有几个连通块,连通块之间肯定需要添加一条边, 还需要知道每个连通块内部需要添加几条边,这个问题等价于求一张图至少需要几笔画成,这个问题的答案是度为奇数的点的个数/2 #i ...
- jQuery EasyUI学习资源汇总
jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的 ...