モーダル・ドロップダウン・タブ

ドロップダウン

.dropdownクラスを設定したタグで、ドロップダウンの表示を切り替えるリンク（またはボタン）およびメニューで括る。
表示を切り替えるリンク・ボタンにはdata-toggle="dropdown"を設定する。
メニューは.dropdown-menuを設定したulタグで作成する。
各メニュー項目はaタグで括る。
.dividerクラスを設定したliタグを挟むことで区切り線を設けることができる。
.dropdown-headerクラスを設定したliで、メニューにヘッダーラベルを追加できる。
liタグに.disabledクラスを設定された項目は選択できなくなる。

<div class="dropdown">
    <a data-toggle="dropdown" href="#">Dropdown Link</a>
    <ul class="dropdown-menu">
        <li class="dropdown-header">メニューヘッダ</li>
        <li ><a href="#">リスト１</a></li>
        <li ><a href="#">リスト２</a></li>
        <li class="divider"></li>
        <li ><a href="#">リスト３</a></li>
        <li class="disabled"><a href="#">無効のリスト項目</a></li>
    </ul>
</div>

タブ

.nav-jasutifiedクラスを追加すると、各タブの幅が親要素いっぱいに均等割になるように拡張される。

<ul class="nav nav-tabs">
    <li><a href="#">hoge</a></li>
    <li class="active"><a href="#">fuga</a></li>
    <li><a href="#">piyo</a></li>
</ul>
<ul class="nav nav-tabs nav-justified">
    <li><a href="#">hoge</a></li>
    <li><a href="#">fuga</a></li>
    <li><a href="#">piyo</a></li>
</ul>

<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">タブ1</a></li>
<li><a href="#tab2" data-toggle="tab">タブ2</a></li>
</ul>
<!-- / タブ-->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab1">
    <p>コンテンツ1</p>
</div>
<div class="tab-pane fade" id="tab2">
    <p>コンテンツ2</p>
</div>
</div>

モーダル

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    モーダル画面表示
</button>
<div id="myModal" class="modal fade">
    <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">
                モーダルボディ部分
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
                <button type="button" class="btn btn-primary">確認</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">$(document).ready(function(){
    //モーダル表示
    $('#myModal').modal('show');
    //Modalが閉じられたらイベント発動
    $('#myModal').on('hidden.bs.modal', function (e) {
        //アラート表示
        alert("モーダル閉じました");
    });
});
</script>