阅读(703)
赞(0)
Bootstrap 下拉菜单之按钮组
2016-09-09 17:36:46 更新
按钮组(Button Groups)
单个按钮组
用.btn-group封装多个带.btn的<button>
<div class="btn-group"> <button class="btn">1</button> <button class="btn">2</button> <button class="btn">3</button> </div>
多个按钮组
将多个<div class="btn-group">放进<div class="btn-toolbar">中。
<div class="btn-toolbar"> <div class="btn-group"> ... </div> <div class="btn-group"> ... </div> </div>
垂直按钮组
向.btn-group添加.btn-group-vertical。
<div class="btn-group btn-group-vertical"> ... </div>
下拉按钮(Button Dropdowns)
例子
<div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Action <span class="caret"></span> </a> <ul class="dropdown-menu"> <!-- dropdown menu links --> </ul> </div>
控制大小
同样使用.btn-large、.btn-small、.btn-mini控制大小。
分割的下拉按钮
<div class="btn-group"> <button class="btn">Action</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <!-- dropdown menu links --> </ul> </div>
向上出现的菜单
<div class="btn-group dropup"> <button class="btn">Dropup</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <!-- dropdown menu links --> </ul> </div>
下拉菜单基本用法
在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文件。而Bootstrap.js 是依赖jQuery库的。所以在引入Bootstrap.js之前要引入jQuery.js。 这里请注意版本问题。
基本使用方式如下:
(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>