Bootstrap组件

1 Glyphicons 字体图标

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的?<span>?标签，并将图标类应用到这个?<span>?标签上。

图标类只能应用在不包含任何文本内容或子元素的元素上。

<button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> </button> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button> 

<div class="alert alert-danger" role="alert"> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span class="sr-only">Error:</span> Enter a valid email address </div> 

2 下拉菜单

2.1 基本使用

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> 

通过为下拉菜单的父元素设置?.dropup?类，可以让菜单向上弹出（默认是向下弹出的）

<div class="dropup"> ... </div> 

2.2 对齐

默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为?.dropdown-menu?添加?.dropdown-menu-right?类可以让菜单右对齐。

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel"> ... </ul> 

2.3 标题

在任何下拉菜单中均可通过添加标题来标明一组动作。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3"> ... <li class="dropdown-header">Dropdown header</li> ... </ul> 

2.4 分割线

为下拉菜单添加一条分割线，用于将多个链接分组

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider"> ... <li role="separator" class="divider"></li> ... </ul> 

2.5 禁用的菜单项

为下拉菜单中的?<li>?元素添加?.disabled?类，从而禁用相应的菜单项

3 按钮组

3.1 基本使用

<div class="btn-group" role="group" aria-label="..."> <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> 

3.2 按钮工具栏

把多个按钮组 嵌套在一个工具栏里面

<div class="btn-toolbar" role="toolbar" aria-label="..."> <div class="btn-group" role="group" aria-label="...">...</div> <div class="btn-group" role="group" aria-label="...">...</div> <div class="btn-group" role="group" aria-label="...">...</div> </div> 

3.3 尺寸

只要给?.btn-group?加上?.btn-group-*?类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div> <div class="btn-group" role="group" aria-label="...">...</div> <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div> <div class="btn-group btn-group-xs" role="group" aria-label="...">...</div> 

3.4 嵌套下拉菜单

想要把下拉菜单混合到一系列按钮中，只须把?.btn-group?放入另一个?.btn-group?中

<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> 

3.5 垂直排列

让一组按钮垂直堆叠排列显示而不是水平排列

<div class="btn-group-vertical" role="group" aria-label="..."> ... </div> 

3.6 两端对齐排列的按钮组

<a>元素

只须将一系列?.btn?元素包裹到?.btn-group.btn-group-justified?中即可

<div class="btn-group btn-group-justified" role="group" aria-label="..."> ... </div> 

<button>元素

<div class="btn-group btn-group-justified" role="group" aria-label="..."> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Left</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Middle</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Right</button> </div> </div> 

4 按钮式下拉菜单

前面的下拉菜单，重点介绍下拉菜单。 本部分介绍下拉菜单的按钮

4.1 单按钮下拉菜单

<!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> 

4.2 分列式按钮下拉菜单

<!-- Split button --> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> 

4.3 尺寸

按钮式下拉菜单适用所有尺寸的按钮。

<!-- Large button group --> <div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Large button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> <!-- Small button group --> <div class="btn-group"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Small button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> <!-- Extra small button group --> <div class="btn-group"> <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Extra small button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> 

4.4 向上弹出菜单

给父元素添加?.dropup?类就能使触发的下拉菜单朝上方打开。

<div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <!-- Dropdown menu links --> </ul> </div> 

5 输入框组

通过在文本输入框?<input>?前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为?.input-group?赋予?.input-group-addon?或?.input-group-btn?类，可以给?.form-control?的前面或后面添加额外的元素。

5.1 基本使用

<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient‘s username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">@example.com</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-addon">.00</span> </div> <label for="basic-url">Your vanity URL</label> <div class="input-group"> <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> </div> 

5.2 尺寸

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

5.3 作为额外元素的多选框和单选框

<div class="input-group"> <span class="input-group-addon"> <input type="checkbox" aria-label="..."> </span> <input type="text" class="form-control" aria-label="..."> </div><!-- /input-group --> <div class="input-group"> <span class="input-group-addon"> <input type="radio" aria-label="..."> </span> <input type="text" class="form-control" aria-label="..."> </div><!-- /input-group --> 

5.4 作为额外元素的按钮

<div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text" class="form-control" placeholder="Search for..."> </div><!-- /input-group --> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div><!-- /input-group --> 

5.5 作为额外元素的按钮式下拉菜单

<div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <input type="text" class="form-control" aria-label="..."> </div><!-- /input-group --> 

5.6 作为额外元素的分裂式按钮下拉菜单

<div class="input-group"> <div class="input-group-btn"> <!-- Button and dropdown menu --> </div> <input type="text" class="form-control" aria-label="..."> </div> <div class="input-group"> <input type="text" class="form-control" aria-label="..."> <div class="input-group-btn"> <!-- Button and dropdown menu --> </div> </div> 

5.7 一个方向多个按钮

<div class="input-group"> <div class="input-group-btn"> <!-- Buttons --> </div> <input type="text" class="form-control" aria-label="..."> </div> <div class="input-group"> <input type="text" class="form-control" aria-label="..."> <div class="input-group-btn"> <!-- Buttons --> </div> </div> 

6 导航Tab

6.1 标签页

<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> 

6.2 胶囊式标签页

<ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> 

胶囊式标签页垂直

<ul class="nav nav-pills nav-stacked"> ... </ul> 

6.3 两端对齐的标签页

<ul class="nav nav-tabs nav-justified"> ... </ul> <ul class="nav nav-pills nav-justified"> ... </ul> 

6.4 禁用的链接

对任何导航组件（标签页、胶囊式标签页），都可以添加?.disabled?类，从而实现链接为灰色且没有鼠标悬停效果。

6.5 带下拉菜单的标签页

<ul class="nav nav-tabs"> ... <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> ... </ul> </li> ... </ul> 

<!--胶囊式标签页--> <ul class="nav nav-pills"> ... <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> ... </ul> </li> ... </ul> 

7 导航条

7.1 基本使用

<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links,forms,and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <