ボタン

ベーシックなボタン

#button_basic
#button_basic_primary
#button_basic_info
#button_basic_warning
#button_basic_danger
#button_basic_disabled 
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-primary" disabled>Disabled</button>
ボタンのサイズ
#button_basic_hg
#button_basic_lg
#button_basic
#button_basic_sm
#button_basic_xs 
<button type="button" class="btn btn-default btn-hg">btn-hg</button>
<button type="button" class="btn btn-default btn-lg">btn-lg</button>
<button type="button" class="btn btn-default">通常サイズ</button>
<button type="button" class="btn btn-default btn-sm">btn-sm</button>
<button type="button" class="btn btn-default btn-xs">btn-xs</button>
親要素に対して幅いっぱいにする

.btn-blockを付加します。グリッドシステムの.col-*-*と組み合わせて、幅や位置を揃えるなどしてください。

#button_inverse_block
#button_basic_primary_block 
<button class="btn btn-inverse btn-block ">キャンセル</button>
<button class="btn btn-primary btn-block ">削除</button>
横並び時縦位置合わせ用ヘルパークラス

他のコンポーネントと横並びにした際、buttonに.btn--lsを追加して、ラベル分の高さを確保し位置を揃えます。

#button_ls 
<button class="btn btn-block btn-primary btn--ls">ボタン</button>

反転

#button_inverse
#button_inverse_primary
#button_inverse_info
#button_inverse_warning
#button_inverse_danger
#button_inverse_disabled 
<button class="btn btn-inverse">Inverse</button>
<button class="btn btn-inverse-primary">Inverse Primary</button>
<button class="btn btn-inverse-info">Inverse Info</button>
<button class="btn btn-inverse-warning">Inverse Warning</button>
<button class="btn btn-inverse-danger">Inverse Danger</button>
<button class="btn btn-inverse-primary" disabled>Disabled</button>

枠なし

#button_flat
#button_flat_primary
#button_flat_info
#button_flat_warning
#button_flat_danger
#button_flat_disabled 
<button class="btn btn-flat-default">Flat Default</button>
<button class="btn btn-flat-primary">Flat Primary</button>
<button class="btn btn-flat-info">Flat Info</button>
<button class="btn btn-flat-warning">Flat Warning</button>
<button class="btn btn-flat-danger">Flat Danger</button>
<button class="btn btn-flat-default" disabled>Disabled</button>

ホバー

通常Default、Hover時に色付きです。

#button_hover_primary
#button_hover_info
#button_hover_warning
#button_hover_danger 
<button class="btn btn-hover-primary">Hover Primary</button>
<button class="btn btn-hover-info">Hover Info</button>
<button class="btn btn-hover-warning">Hover Warning</button>
<button class="btn btn-hover-danger">Hover Danger</button>

反転ホバー

通常Inverse、Hover時に色付きです。

#button_inverseHover_primary
#button_inverseHover_info
#button_inverseHover_warning
#button_inverseHover_danger 
<button class="btn btn-inverse-hover-primary">Inverse Hover Primary</button>
<button class="btn btn-inverse-hover-info">Inverse Hover Info</button>
<button class="btn btn-inverse-hover-warning">Inverse Hover Warning</button>
<button class="btn btn-inverse-hover-danger">Inverse Hover Danger</button>

アイコン付き

アイコンの前や後ろにテキストを入れる場合には、アイコンのタグにそれぞれ.plx、.prxを追加して、アイコンとテキストの間に適切なスペースを設けます。

#button_icon 
<button type="button" class="btn btn-default"><span class="icon-abui-check"></span></button>
<button type="button" class="btn btn-danger"><span class="icon-abui-heart"></span></button>
<button type="button" class="btn btn-flat-default mrs mbs">次へ<span class="icon-abui-arrow-right plx"></span></button>
<button type="button" class="btn btn-primary"><span class="icon-abui-download prx"></span>ダウンロード</button>

ドロップダウンボタン

#button_basic_dropdown 
<div class="form-group">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#fakelink">Action A</a></li>
      <li><a href="#fakelink">Action B</a></li>
      <li><a href="#fakelink">Action C</a></li>
    </ul>
  </div>
</div>
親要素に対して幅いっぱいにする

.btn-groupに.btn-blockを付加します。グリッドシステムの.col-*-*と組み合わせて、幅や位置を揃えるなどしてください。また、ボタンのテキストがない場合は.btn-groupを.dropdownに変更し、button要素に.btn-blockを付与してください。

#button_basic_dropdown_block
#button_basic_dropdownNoText_block 
<div class="form-group">
  <div class="btn-group btn-block">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#fakelink">Action A</a></li>
      <li><a href="#fakelink">Action B</a></li>
      <li><a href="#fakelink">Action C</a></li>
    </ul>
  </div>
</div>

/**
 * テキストなしの場合
 */
<div class="form-group">
  <div class="dropdown">
    <button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#fakelink">Action A</a></li>
      <li><a href="#fakelink">Action B</a></li>
      <li><a href="#fakelink">Action C</a></li>
    </ul>
  </div>
</div>

ドロップダウン兼用ボタン

ドロップダウンボタンの機能と、通常のボタン同様クリックで実行する部分をあわせもったボタンです。左側のメインアクションのためのボタンは通常のボタンと同じ動作になります。

#button_basic_primary_splitDropdown
#button_inverse_splitDropdown 
<div class="form-group">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Main Action</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu dropdown-inverse" role="menu">
      <li><a href="#fakelink">Sub Action</a></li>
      <li><a href="#fakelink">Sub Action</a></li>
      <li><a href="#fakelink">Sub Action</a></li>
      <li class="divider"></li>
      <li><a href="#fakelink">Special Action</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-inverse">Action</button>
    <button type="button" class="btn btn-inverse 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="#fakelink">Sub Action</a></li>
      <li><a href="#fakelink">Sub Action</a></li>
      <li><a href="#fakelink">Sub Action</a></li>
      <li class="divider"></li>
      <li><a href="#fakelink">Special Action</a></li>
    </ul>
  </div>
</div>
親要素に対して幅いっぱいにする

.btn-groupに.btn-blockを付加します。グリッドシステムの.col-*-*と組み合わせて、幅や位置を揃えるなどしてください。

#button_basic_primary_splitDropdown_block 
<div class="form-group">
  <div class="btn-group btn-block">
    <button type="button" class="btn btn-primary">Main Action</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu dropdown-inverse" role="menu">
      <li><a href="#fakelink">Sub Action</a></li>
      <li><a href="#fakelink">Sub Action</a></li>
      <li><a href="#fakelink">Sub Action</a></li>
      <li class="divider"></li>
      <li><a href="#fakelink">Special Action</a></li>
    </ul>
  </div>
</div>

ボタングループ

#button_group_inverse 
<div class="form-group">
  <div class="btn-group">
    <button type="button" class="btn btn-inverse">Left</button>
    <button type="button" class="btn btn-inverse">Middle</button>
    <button type="button" class="btn btn-inverse">Right</button>
  </div>
</div>
幅いっぱいのボタングループ

.btn-group-justifiedのなかでさらに各buttonを.btn-groupで囲みます。

#button_groupJustified 
<div class="form-group">
  <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>
</div>
ボタングループのグループ
#button_groupInGroup 
<div class="form-group">
  <div class="btn-group">
    <button type="button" class="btn btn-inverse">1</button>
    <button type="button" class="btn btn-inverse">2</button>
    <button type="button" class="btn btn-inverse">3</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">4</button>
    <button type="button" class="btn btn-default">5</button>
    <button type="button" class="btn btn-default">6</button>
    <button type="button" class="btn btn-default">7</button>
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#fakelink">Link</a></li>
        <li><a href="#fakelink">Link</a></li>
      </ul>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">9</button>
    <button type="button" class="btn btn-primary">10</button>
  </div>
</div>