CSS組件

1、字體

bootstrap自帶的Glyphicons 字體圖標，還有是font awesome

2、下拉菜單

.dropdown 最大作用給了父級position: relative; 菜單向下彈出
.dropup 菜單向上彈出
.dropdown-toggle data-target=”dropdown” .caret 按鈕及下拉圖標
.dropdown-menu 下拉菜單
.dropdown-header 標題
.divider 分割線
.disabled 禁用項
爲 .dropdown-menu 添加 .dropdown-menu-right 類可以讓菜單右對齊。

<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 dropdown-menu-right" >
    <li class="dropdown-header">Dropdown header</li>
    <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 class="disabled"><a href="#">Separated link</a></li>
  </ul>
</div>

默認下：下拉菜單是隱藏的，如果給父元素加上一個.open的類，就會顯示。

3、按鈕組 btn-group

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-group"> 組合進一個 <div class="btn-toolbar"> 中做成更復雜的組件。

<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">  //類名必須爲btn-group，如果是dropdown則會佈局錯亂
    <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、按鈕組垂直排列

.btn-group-vertical

4、按鈕式下拉菜單

外部容器的樣式.dropdown換爲了.btn-group

<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、分裂式按鈕下拉菜單

<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、尺寸
不管是組合式下拉菜單還是分離式下拉下單，都可以使用.btn原來的附加樣式.btn-lg,.btn-sm,.btn-xs；

4.4、向上彈起的下拉菜單
在.btn-group裏附加一個.dropup即可；

5、輸入框組

輸入框組可以嵌套到表單組或柵格相關元素的內部，反之不行！！
5.1、基本用法
在容器上應用.input-group， 然後在個性元素上應用.input-group-addon
。

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

5.2、尺寸大小
只有input-group-lg和input-group-sm

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

5.3、複選框與單選框作爲addon
只要在.input-group-addon樣式內放置checkbox和radio類型的input即可。

<div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" />
      </span>
      <input type="text" class="form-control" />
</div>

5.4、按鈕作爲addon
需要用.input-group-btn 替換 .input-group-addon

<div class="row">
  <div class="col-lg-6">
    <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><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <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 -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

5.5、下拉菜單作爲addon