最新的Web開發教程
 

Bootstrap Button Groups


按鈕組

Bootstrap允許您將一個按鈕組中的一系列按鈕在一起(在一行中):

使用<div>與類元素.btn-group創建一個按鈕組:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
試一試»

提示:除了一組在應用按鈕大小到每個按鈕,使用類.btn-group-*大小組中的所有按鈕:

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
試一試»

垂直按鈕組

Bootstrap還支持垂直按鈕組:

使用類.btn-group-vertical創建垂直按鈕組:

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
試一試»

對齊按鈕組

以跨越屏幕的整個寬度,使用.btn-group-justified類:

例如與<a>元素:

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>
試一試»

注意:對於<button>元素,必須在包裝的每個按鈕.btn-group類:

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Samsung</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>
試一試»

嵌套按鈕組和下拉菜單

鳥巢按鈕組創建下拉菜單:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>
試一試»

拆分按鈕下拉框

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
  </ul>
</div>
試一試»

自測練習用!

練習1» 練習2» 練習3» 練習4» 練習5»