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>

• 效果圖

  
  

• 按鈕工具欄

• 釋義：把一組 <div class="btn-group"> 放進(jìn)一個(gè) <div class="btn-toolbar"> 中就可以做成更復(fù)雜的組件

• 示例

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

• 效果圖

• <a> 元素

• 釋義：只須將一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中就可以達(dá)到<a>的效果

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

• <button> 元素
• 釋義：為了將 <button> 元素用于兩端對(duì)齊的按鈕組中，必須將每個(gè)按鈕包裹進(jìn)一個(gè)按鈕組中
• 示例

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

• 效果圖

  
  

• 分裂式按鈕下拉菜單

• 釋義：分裂式按鈕下拉菜單需要改變一些標(biāo)記，即多一個(gè)分開的按鈕

• 示例

<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">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>                //分割線
        <li><a href="#">Separated link</a></li>
      </ul>
</div>

• 效果圖

  
  

• 向上彈出式菜單

• 釋義：給父元素添加 .dropup 類就能使觸發(fā)的下拉菜單朝上方打開

• 示例

<div class="btn-group dropup"> ....</div>

• 效果圖

  
  

2、輸入框

• 輸入框組
• 示例

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

• 效果圖

  
  

官方網(wǎng)站：
Bootstrap組件