Bootstrap_按鈕工具欄

單個按鈕在Web頁面中的運用有時候並不能滿足我們的業務需求，常常會看到將多個按鈕組合在一起使用，比如富文本編輯器里的一組小圖標按鈕等。

　　Bootstrap框架為大家提供了按鈕組組件。

<div class="btn-toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
  </div>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
  </div>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
  </div>
  <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
  </div>
</div>

1、對於結構方面，非常的簡單。使用一個名為“.btn-group”的容器，把多個按鈕放到這個容器中（按鈕組）。

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

除了可以使用<button>元素之外，還可以使用其他標簽元素，比如<a>標簽。

　　唯一要保證的是：不管使用什么標簽，“.btn-group”容器里的標簽元素需要帶有類名“.btn”。

 

2、在富文本編輯器中，將按鈕組分組排列在一起，比如說復制、剪切和粘貼一組；左對齊、中間對齊、右對齊和兩端對齊一組。

　　那么Bootstrap框架按鈕工具欄也提供了這樣的制作方法，你只需要將按鈕組“.btn-group”按組放在一個大的容器“.btn-toolbar”中。

<div class="btn-toolbar">
  <div class="btn-group">…</div>
</div>

3、按鈕組大小

　　按鈕組的大小，我們也可以通過以下方法：

　　☑ .btn-group-lg:大按鈕組

　　☑ .btn-group-sm:小按鈕組

　　☑ .btn-group-xs:超小按鈕組

　　只需要在“.btn-group”類名上追加對應的類名，就可以得到不同大小的按鈕組。

<div class="btn-toolbar">
  <div class="btn-group btn-group-lg">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group btn-group-sm">
    …
  </div>
  <div class="btn-group btn-group-xs">
   …
  </div>
</div>