BootStrap3.0学习--组件

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 <