Glyphicons 字体图标
1.图标需要一个基类和对应图标的类,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。
2.和<span>标签联合使用,不能直接放在组件上
<span class="glyphicon glyphicon-search"></span>
3.实例:
<button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> Star </button>
下拉菜单
1.将下拉菜单触发器和下拉菜单都包裹在 .dropdown
里。
<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" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
2.添加标题
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> ... <li role="presentation" class="dropdown-header">Dropdown header</li> ... </ul>
3.添加分割线
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider"> ... <li role="presentation" class="divider"></li> ... </ul>
4.禁用菜单项
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
按钮组
1.基本实例
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>
2.按钮工具栏
<div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> <div class="btn-group">...</div> </div>
3.尺寸
<div class="btn-group btn-group-lg">...</div> <div class="btn-group">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div>
4.嵌套
<div class="btn-group">
<button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div>
5.垂直排列
<div class="btn-group-vertical">
...
</div>
6.两端对齐
<div class="btn-group btn-group-justified">
...
</div>
按钮式下拉菜单
1.单按钮下拉菜单
<div class="btn-group">
<button <