概要

こちらのページに記載した Bootstrap 3 公式ドキュメントのうち JavaScript に依存した動的な部品をコード例とともに列挙します。公式ページは JavaScript です。いずれの部品を使用する場合でも以下のように jQuery と Bootstrap (JS) の読み込みが必要です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

ツールチップ

空白なしの長い英数字続き文字列は正しく表示されないことに注意してください。途中で切れてしまいます。半角スペースなどを適度に含めることで対応します。

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="ツールチップ文字列">
  ボタン
</button>

<script>
 $(function(){
   /* 初期化が必要です */
   $('[data-toggle="tooltip"]').tooltip();
 });
</script>

モーダル

<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">
  モーダルボタン
</button>

<div class="modal fade" id="mymodal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- ヘッダー -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">タイトル</h4>
      </div>

      <!-- ボディ -->
      <div class="modal-body">
        <p>本文</p>
      </div>

      <!-- フッター -->
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>

リストグループの折り畳み (アコーデォン)

こちらで紹介したリストグループをパネル内に含めて開いたり閉じたりします。

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a data-toggle="collapse" href="#collapseListGroup">
        ログを展開表示したい場合はクリック
      </a>
    </h4>
  </div>
  <div class="panel-collapse collapse" id="collapseListGroup">
    <ul class="list-group">
      <li class="list-group-item">04:00 イベント A</li>
      <li class="list-group-item">12:10 イベント B</li>
      <li class="list-group-item">13:00 イベント C</li>
    </ul>
  </div>
</div>

トグルボタン

こちらのページに記載した「グループ化されたボタン」と同じデザインのラジオボタンおよびチェックボックスを作成できます。既定値を用意するためには、以下の例のように active および checked の両方を指定する必要があることに注意します。

一つだけ選択 (ラジオボタン)

<div class="btn-group" data-toggle="buttons">

  <label class="btn btn-default active">
    <input type="radio" name="name_common" checked>
    ラジオ A
  </label>
  <label class="btn btn-default">
    <input type="radio" name="name_common">
    ラジオ B
  </label>
</div>

複数選択 (チェックボックス)

<div class="btn-group" data-toggle="buttons">

  <label class="btn btn-default active">
    <input type="checkbox" name="name_a" checked>
    チェックボックス A
  </label>
  <label class="btn btn-default">
    <input type="checkbox" name="name_b">
    チェックボックス B
  </label>
</div>

処理中に無効化されるボタン

<button type="button" id="mybutton" class="btn btn-default" data-loading-text="処理中...">実行開始</button>

<script>
 $(function(){
   $('#mybutton').click(function(){
     var btn = $(this);
     btn.button('loading');

     /* 何らかのタイミングで以下に相当する処理を実行 */
     var timeoutTime = 2000; //msec
     var timeoutFunc = function(){
       btn.button('reset');
     };
     setTimeout(timeoutFunc, timeoutTime);
   });
 });
</script>

AngularJS での対応

UI Bootstrap を利用することで AngularJS でも上記 JavaScript に依存したコンポーネントを扱えるようになります。jQuery を別途インストールする必要もありません。