Bootstrap组件

图标

可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

下拉菜单

菜单向下弹出：.dropdown
菜单向上弹出：.dropup
下拉菜单：.dropdown-menu

<div class="dropdown"> //向下弹出
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" >// data-toggle:相关js事件。
         Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#" class="dropdown-header">Action</a></li> //标题动作
        <li><a href="#">Another action</a></li>
        <li class="disabled"><a href="#">Something else here</a></li> //禁用相应的菜单项
        <li role="separator" class="divider"></li> //分割线
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

按钮组

.btn-group按钮组容器把一组按钮放在同一行里。
.btn-toolbar包裹在多个按钮组外

<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>

.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">//把一个btn-group放入另一个btn-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>

.btn-group-vertical让一组按钮垂直堆叠排列显示而不是水平排列

输入框组

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

<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>

添加多选框和单选框：

<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-addon，而是添加 .input-group-btn 来包裹按钮元素：

<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-btn 来包裹下拉菜单：

<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>
    <input type="text" class="form-control" aria-label="...">
</div>

导航

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

标签页

<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>

胶囊式标签页

HTML 标记相同，但使用 .nav-pills 类；
胶囊是标签页也是可以垂直方向堆叠排列的。只需再添加 .nav-stacked 类。

导航条

务必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的话，务必为导航条设置 role=”navigation” 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域

将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
</nav>

对于不包含在<form>中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中.
把文本包裹在 .navbar-text中时，为了有正确的行距和颜色.
使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置
添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐
.navbar-fixed-top 类可以让导航条固定在顶部.
.navbar-fixed-bottom 类可以让导航条固定在底部
.navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失

路径导航

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

分页

利用.pagination类分页。

<nav aria-label="Page navigation">
    <ul class="pagination pagination-lg">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li class="disabled"><a href="#">1</a></li>
        <li class="active"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

翻页

利用.pager类翻页。在默认的翻页中，链接居中对齐

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    //.previous左边对齐 .disabled禁用状态
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

标签

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

徽章

给链接、导航等元素嵌套<span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button

巨幕

延伸至整个浏览器视口来展示网站上的关键内容

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

警告框

将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。
警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。
为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

进度条

<div class="progress">
  <div class="progress-bar" style="width: 60%;">
  //在展示很低的百分比时style="min-width: 2em; width: 2%;"
    60%
  </div>
</div>

情景效果：在.progress-bar基类上添加.progress-bar-success等修饰类。
条纹效果：.progress-bar-striped修饰类。
动画效果：为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。
堆叠效果：把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。

媒体对象

一边多媒体内容（头像，音频等），相应另一边内容块；

<div class="media">
  <div class="media-left media-middle">//图片放左边，中部对齐
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

可以应用到列表中：ul class=”media-list” li class=”media”

列表组

列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。

面板

默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。
标题+内容样式。

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

把 Well 用在元素上，就能有嵌入（inset）的简单效果。

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