Bootstrap系列 -- 24. 下拉菜单基本用法
2015-06-25 22:20
507 查看
在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文件。而Bootstrap.js 是依赖jQuery库的。所以在引入Bootstrap.js之前要引入jQuery.js。 这里请注意版本问题
基本使用方式如下:
(1) 使用一个名为“dropdown”的容器包裹了整个下拉菜单元素
(2) 使用了一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致
(3) 下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”
完整实现代码如下:
基本使用方式如下:
(1) 使用一个名为“dropdown”的容器包裹了整个下拉菜单元素
<div class="dropdown"></div>
(2) 使用了一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button>
(3) 下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”
<ul class="dropdown-menu"></ul>
完整实现代码如下:
<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" role="menu" aria-labelledby="dropdownMenu1">
<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"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
相关文章推荐
- Bootstrap系列 -- 23. 图片
- Bootstrap系列 -- 22. 按钮详解
- Bootstrap系列 -- 22. 按钮
- 利用bootstrap中tooltip的使用,弹出微信二维码
- bootstrap 禁用 modal 点击空白处关闭事件
- Bootstrap系列 -- 21. 表单提示信息
- 《Bootstrap实战》
- Bootstrap系列 -- 20. 禁用状态
- Bootstrap系列 -- 19. 焦点状态
- Bootstrap系列 -- 18. 表单控件大小
- Bootstrap-Datatable学习笔记整理第1节
- Bootstrap系列 -- 17. 复选框checkbox和单选择按钮radio
- Bootstrap系列 -- 16. 文本域textarea
- bootstrap小技巧
- Bootstrap系列 -- 15. 下拉选择框select
- Bootstrap系列 -- 14. 表单控件输入框input
- Bootstrap系列 -- 13. 内联表单
- Bootstrap系列 -- 12. 水平表单
- Bootstrap系列 -- 11. 基础表单
- piwik学习2(bootstrap.php)