Bootstrap内置组件.docx

下拉菜单
例子
可切换的链接列表. 互动式的下拉菜单需要dropdown JavaScript 插件.
行为
其它行为
特别行为
分割链接
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">行为</a></li>
<li><a tabindex="-1" href="#">其它行为</a></li>
<li><a tabindex="-1" href="#">特别行为</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">分割链接</a></li>
</ul>
用法
以下是下拉菜单所需的HTML. , 或者声明 position: relative;; 其他元素. 然后, 只需创建菜单.
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a tabindex="-1" href="#">行为</a></li>
<li><a tabindex="-1" href="#">其它行为</a></li>
<li><a tabindex="-1" href="#">特别行为</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">分割链接</a></li>
</ul>
</div>
选项
列表右对齐, 和包括一个多级的下拉菜单.
对齐
在 .dropdown-menu 添加 .pull-right , 让下拉列表右对齐.
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
...
</ul>
禁用菜单选项
在下拉菜单<li>.
注册
修改
退出
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">注册</a></li>
<li class="disabled"><a tabindex="-1" href="#">修改</a></li>
<li><a tabindex="-1" href="#">退出</a></li>
</ul>
下拉菜单的子列表
添加一些简单的标记, 让下拉菜单拥有一个二级菜单, 停选效果类似OS X. 在任意的 li 添加 .dropdown-submenu 就会自动获得一个额外的菜单.
默认
行为
其它行为
特别行为
更多选项
向上显示
行为
其它行为
特别行为
更多选项
左边显示
行为
其它行为
特别行为
更多选项
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
按钮组
例子
两个基本选项, 带有两个更明确的变化.
单一按钮组
带有 .btn 的按钮, 都放在 .btn-group 里面.
<div class="btn-group">
<button class="btn">左</button>
<button class="btn">中</button>
<button class="btn">右</button>
</div>
多个按钮组组合成工具条
集合几组 <div class="btn-group"> ,再用 <div class="btn-toolbar"> 包装就可以合成工具条组件。
<div class="btn-toolbar">
<div class="btn-group">
...
</div>
</