Bootstrap-CL:下拉菜单
ylbtech-Bootstrap-CL:下拉菜单 |
1.返回顶部 |
Bootstrap 下拉菜单(Dropdowns)
本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。
如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单:
实例
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
结果如下所示:

选项
对齐
通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点:
实例
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
结果如下所示:

标题
您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的实例演示了这点:
实例
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
结果如下所示:

更多实例
类 | 描述 | 实例 |
---|---|---|
.dropdown | 指定下拉菜单,下拉菜单都包裹在 .dropdown 里 | 尝试一下 |
.dropdown-menu | 创建下拉菜单 | 尝试一下 |
.dropdown-menu-right | 下拉菜单右对齐 | 尝试一下 |
.dropdown-header | 下拉菜单中添加标题 | 尝试一下 |
.dropup | 指定向上弹出的下拉菜单 | 尝试一下 |
.disabled | 下拉菜单中的禁用项 | 尝试一下 |
.divider | 下拉菜单中的分割线 | 尝试一下 |
2.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
11.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
Bootstrap-CL:下拉菜单的更多相关文章
- Bootstrap按钮式下拉菜单
前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...
- bootstrap多级下拉菜单
只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...
- 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉 ...
- Bootstrap的下拉菜单float问题
在学习bootstrap中的下拉菜单时,遇到下面情况: <div class="dropdown"> <button class="btn btn-de ...
- bootstrap的下拉菜单组件与导航条
前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...
- bootstrap悬停下拉菜单显示
使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
- Bootstrap 按钮下拉菜单
向下拉 <div class="dropdown"> <button class="btn btn-default" data-toggle= ...
- bootstrap 多级下拉菜单
如上效果: 实现代码: 导入js和css: <link rel="stylesheet" href="http://cdn.static.runoob.com/li ...
- bootstrap垂直下拉菜单默认展开
HTML: <div class="col-md-3"> <nav class="navbar"> <div class=&quo ...
- Bootstrap <基础十二>下拉菜单(Dropdowns)
Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...
随机推荐
- Java服务器获取客户端的ip
原文:http://www.open-open.com/code/view/1454133120089 /** * 获取登录用户IP地址 * * @param request * @return */ ...
- Android命令行下蓝牙使用
注意:此部分仅仅适用于broadcom 系列蓝牙芯片,比如RK903, AP6xxx 系列 通过su 命令切换到root 用户 1.先确认RFKILL 驱动已经载入 ls /sys/class/rfk ...
- 走入asp.net mvc不归路:[2]控制器概览
asp.net mvc中最灵活的地方就是控制器,这里可以验证数据,可以跳转视图,还可以访问数据库等等.所以,我们要先从这里说起. 1 控制器就是继承了Controller的类,一般来说,类名后面都会增 ...
- 1 npoi 网上 不用模板 设置密码 workbook.WriteProtectWorkbook("password", "admin"); 、、 2 locked.IsLocked = true; sheet1.ProtectSheet("password");NPOI操作EXCEL--设置密码才可以修改单元格内容 3 模板设置密码 确定原密码 设置新密码
1 workbook.WriteProtectWorkbook("password", "admin"); 还是可以进去 只读进去 可以编辑 编辑就另存为 ...
- Sublime Text使用
安装Sublime Text Sublime 的安装比較简单,我们能够直接去官网http://www.sublimetext.com/,点击Download菜单.进入之后选择自己操作系统的进行下载安装 ...
- iOS 身份证验证
- (void)onClickButton:(id) sender{ || tmp_txt.text.length == ) { NSString *emailRegex = @"^[0-9 ...
- java乱炖
--------------------------------------------------------- ArrayList<String> arrayList = new Ar ...
- linux UDP,TCP相关特性
好长时间没使用网络编程忘得差不多了,写了TCP,UDP测试代码,得出以下结论: 一:UDP特性 1. UDP sendto函数不管对端是否存在(即使对端原本存在,现在已经关闭了),都义无反顾的发送 ...
- 项目Beta冲刺(团队7/7)
项目Beta冲刺(团队7/7) 团队名称: 云打印 作业要求: 项目Beta冲刺(团队) 作业目标: 完成项目Beta版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 陈宇 ...
- HDOJ 5045 Contest
状压DP.. . . Contest Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Other ...