Bootstrap - Components (1/2)


Glyphicon

class="glyphicon glyphicon-*****" を指定するとアイコンを表示できる。

<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-euro"></span>
<span class="glyphicon glyphicon-minus"></span>
<span class="glyphicon glyphicon-cloud"></span>
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-pencil"></span>

DropDown

DropDown はボタンとリンクのリストからなる。ボタンをクリックするとメニューのリストが表示・非表示する。カスタマイズはボタンの表示文字列とメニューのリストを変更すればよい。

 <div class="dropdown">
   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
     Dropdown
     <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
     <li><a href="#">メニュー1</a></li>
     <li><a href="#">メニュー2</a></li>
     <li><a href="#">メニュー3</a></li>
     <li role="separator" class="divider"></li>
     <li><a href="#">メニュー4</a></li>
     <li class="disabled"><a href="#">メニュー5</a></li>
   </ul>
 </div>
 

オプションとして、よく使われるものとしてメニューのセパレータがある。これは li タグで role="separator" class="divider" を指定する。リンクを無効にするには、class="disabled" を指定する。


ButtonGroup

ButtonGroup はツールボタンのように複数のボタンを並べたコンポーネントである。ボタンは横方向だけでなく、縦方向にも並べることができる。

基本的なボタングループ


  <div class="btn-group" role="group" aria-label="...">
   <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-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
   <button type="button" class="btn btn-default">L0</button>
   <button type="button" class="btn btn-default">L1</button>
   <button type="button" class="btn btn-default">L2</button>
  </div>
  <div class="btn-group" role="group" aria-label="...">
   <button type="button" class="btn btn-default">M0</button>
   <button type="button" class="btn btn-default">M1</button>
  </div>
  <div class="btn-group" role="group" aria-label="...">
   <button type="button" class="btn btn-default">R0</button>
   <button type="button" class="btn btn-default">R1</button>
   <button type="button" class="btn btn-default">R2</button>
  </div>
 </div> 

ボタンのサイズを変更するには

btn-group-lg, btn-group-sm, btn-group-xs クラスを追加するとそれぞれ大、小、極小のボタンになる。何も指定しないと標準の大きさである。

 <div class="btn-group btn-group-xs" role="group" aria-label="...">
  <button type="button" class="btn btn-default">XS0</button>
  <button type="button" class="btn btn-default">XS1</button>
  <button type="button" class="btn btn-default">XS2</button>
 </div> 

他のコンポーネントをグループに入れるには

 <div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
 </div> 

縦方向のボタングループ

  <div class="btn-group-vertical" role="group" aria-label="...">
   <button type="button" class="btn btn-primary">ファイルを開く</button>
   <button type="button" class="btn btn-info">ファイルを上書き保存</button>
   <button type="button" class="btn btn-info">名前を付けてファイル保存</button>
   <button type="button" class="btn btn-warning">終了</button>
  </div>

ButtonDropDown

ButtonDropDown コンポーネントはボタンをクリックするとメニューリストを表示する。2つのタイプがあり、ボタンのみのタイプとラベル+ボタンのタイプがある。

  <div class="btn-group">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     ファイル <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
     <li><a href="#">ファイルを開く</a></li>
     <li><a href="#">ファイルを閉じる</a></li>
     <li><a href="#">名前を付けて保存</a></li>
     <li role="separator" class="divider"></li>
     <li><a href="#">終了</a></li>
   </ul>
  </div>
  <div class="btn-group">
   <button type="button" class="btn">表示</button>
   <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <span class="caret"></span>
     <span class="sr-only">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
     <li><a href="#">アイコン</a></li>
     <li><a href="#">一覧</a></li>
     <li><a href="#">詳細</a></li>
     <li role="separator" class="divider"></li>
     <li><a href="#">最新の状態を表示</a></li>
   </ul>
 </div> 

InputGroup

InputGroup はテキストボックスとラベルをグループ化したコンポーネントである。

@
@example.com
$ .00
 <div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
 </div>
 <div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
 </div>
 <div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
 </div> 

Nav

Nav は class="nav nav-***" を設定する。*** は tab, pills のどちらかを指定する。

Tab

  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
  </ul> 

Pills

  <ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
  </ul> 

Navbar

Navbar はコンテナで、その中にコントロールを横方向に置くことでメニューバーのようになる。全体は class="navbar navbar-default" を指定した nav と class="container-fluid" を指定した div で囲み、内部に class="navbar-header" を指定したヘッダと class="collapse navbar-collapse" を指定した本体を置く。

class="navbar-header" を設定したヘッダ部はボタン (button) で内部に span をリンクの数だけ置く。class="collapse navbar-collapse" を指定した本体にはリンクやフォームを置く。

   <nav class="navbar navbar-default">
    <div class="container-fluid">
     <div class="navbar-header">
      <!-- ヘッダ部 -->
     </div>
     <div class="collapse navbar-collapse">
       <!-- 本体部 -->
     </div>
    </div> 
   </nav>

  <nav class="navbar navbar-default">
   <div class="container-fluid">
     <div class="navbar-header">
       <!-- ヘッダ部 -->
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
         <span class="sr-only"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <!-- 左端に表示される -->
       <a class="navbar-brand" href="#">Brand</a>
     </div>
     <div id="navbar-collapse-1" class="collapse navbar-collapse">
       <!-- 本体部 -->
       <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 0<span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
       </ul>
     </div>
    </div>
  </nav> 

  <nav class="navbar navbar-default">
   <div class="container-fluid">
     <div class="navbar-header">
       <!-- ヘッダ部 -->
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
         <span class="sr-only"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <!-- 左端に表示される -->
       <a class="navbar-brand" href="#">Brand</a>
     </div>
     <div id="navbar-collapse-1" class="collapse navbar-collapse">
       <!-- 本体部 -->
       <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 0<span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link 1</a></li>
       </ul>
       <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
       </form>
     </div>
    </div>
  </nav>