Bootstrap系列 -- 30. 按鈕工具欄

 

　　在富文字編輯器中，將按鈕組分組排列在一起，比如說複製、剪下和貼上一組；左對齊、中間對齊、右對齊和兩端對齊一組.Bootstrap框架按鈕工具欄也提供了這樣的製作方法，你只需要將按鈕組“btn-group”按組放在一個大的容器“btn-toolbar”中.

　　如果按鈕組中需要改變大小，可以使用 .btn-group-lg:大按鈕組 ，.btn-group-sm:小按鈕組， .btn-group-xs:超小按鈕組

<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">
    <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">
    <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">
    <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>
<br />
<br />
<div class="btn-toolbar">
  <div class="btn-group btn-group-lg">
    <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">
    <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>


<div class="btn-toolbar">
        <div class="btn-group btn-group-lg">
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-step-backward"></span>
            </button>
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-fast-backward"></span>
            </button>
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-fast-forward"></span>
            </button>
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-step-forward"></span>
            </button>
        </div>

        <div class="btn-group">
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-step-backward"></span>
            </button>
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-fast-backward"></span>
            </button>
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-fast-forward"></span>
            </button>
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-step-forward"></span>
            </button>
        </div>

        <div class="btn-group btn-group-sm">
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-step-backward"></span>
            </button>
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-fast-backward"></span>
            </button>
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-fast-forward"></span>
            </button>
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-step-forward"></span>
            </button>
        </div>
</div>