Bootstrap 3.3.7 アラート、ダイアログ、折りたたみ

メッセージを必要に応じて表示するには、アラートやダイアログが使われる。Bootstrapにはこのような必要に応じて表示するコンポーネントが多く含まれている。その方法を見ていく。

アラート

アプリケーションには、各種情報を表示したり、ユーザーに確認や入力を促したりするためのインターフェースが用意されている。アラートとダイアログである。Bootstrapにもこれらを実現する機能が含まれている。

まず最も簡単なアラートから説明する。Bootstrapでは、次のようにアラート表示を用意できる。

<div class="alert アラートクラス">
    ...アラート内容...
</div>

classにalertを指定するとアラート表示になる。ただしそれだけでは枠だけなので、実際には次のいずれかのクラスを追加する。

クラス	説明
alert-info	ちょっとした情報などを表示する。
alert-success	何らかの操作が成功したときに使用する。
alert-warning	警告表示である。
alert-danger	危険を伝えるための表示である。

これらを使ってアラートを作成できる。

<div class="alert alert-info">
    <h4>Alert!</h4>
    これはアラート表示です。
</div>
<div class="alert alert-success">
    <h4>Alert!</h4>
    これはアラート表示です。
</div>
<div class="alert alert-warning">
    <h4>Alert!</h4>
    これはアラート表示です。
</div>
<div class="alert alert-danger">
    <h4>Alert!</h4>
    これはアラート表示です。
</div>

4つのアラートが表示される。

アラート表示のON/OFF

アラートはページに最初から表示される単純なデザインである。しかし実際には、必要に応じて画面に表示したり、閉じるボックスで閉じられたりする必要がある。

閉じるボックス

<a href="#" data-dismiss="alert">×</a>

閉じるボックスは<a>タグで作成できる。data-dismiss="alert"属性を必ず指定する。これによりアラートの右上に閉じるボックスを表示できる。×は<a>タグ内に書く。

閉じるときにフェード効果を付けるには、アラートの<div>タグにfade inクラスを追加する。

アラート表示の制御

アラートを非表示にしておき、ボタンなどをクリックしたときに表示するには、アラート<div>に次のスタイルを設定する。

style="display:none;"

表示するには、非表示の<div>を表示させればよい。jQueryのshowメソッドを使うと便利である。

$('アラートタグ指定').show();

たとえばボタンのonclickから実行する。

<button class="btn btn-default" onclick="$('#alert').show()">Show Alert</button>

<div id="alert" class="alert alert-success fade in" style="display:none;">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
    <h4>Alert!</h4>
    これはアラート表示です。
</div>

ページでShow Alertボタンを押すとアラートが表示され、閉じるボックスをクリックすると閉じられる。

モーダルダイアログ

アラートがコンテンツ内にメッセージとして挿入されるものだとすれば、ダイアログは画面上に別のウィンドウとして何かを表示するために使われる。これはモーダルダイアログとも呼ばれる。

ダイアログは少し複雑なタグ構造を持つ。アラートと同じく、事前に表示する内容をHTMLタグで用意しておき、ボタンクリックなどで表示する。

<div class="modal fade" id="ダイアログID" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ...ヘッダー表示...
            </div>
            <div class="modal-body">
                ...本文表示...
            </div>
            <div class="modal-footer">
                ...フッター表示...
            </div>
        </div>
    </div>
</div>

class="modal-dialog"の<div>でダイアログ全体を作り、その中にmodal-content、さらにヘッダー、本文、フッターを用意する。

ダイアログを開く、閉じる

ダイアログは表示タグを用意しただけでは使えない。開く仕組みと閉じる仕組みも必要である。

ダイアログを開く

ダイアログを開くには<a>タグを使う。

<a href="ダイアログの指定" data-toggle="modal"> ...... </a>

hrefには開くダイアログの<div>タグをIDなどで指定し、data-toggle="modal"属性を付ける。

ダイアログを閉じる

ダイアログを閉じるには、通常フッター内にdata-dismiss="modal"を持つ<a>タグを用意する。

<a href="#" data-dismiss="modal"> ...... </a>

簡単な例は次のとおりである。

<a href="#dialog" role="button" class="btn btn-default" data-toggle="modal">Show Dialog</a>

<div class="modal fade" id="dialog" role="dialog" aria-labelledby="dlogLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                 <h4 class="modal-title" id="dlogLabel">Dialog!</h4>
            </div>
            <div class="modal-body">
                これはダイアログのメッセージです。
            </div>
            <div class="modal-footer">
                <a href="#" role="button" class="btn btn-default" data-dismiss="modal">Close</a>
            </div>
        </div>
    </div>
</div>

Show Dialogボタンをクリックするとダイアログが表示され、Closeボタンをクリックすると閉じられる。

折りたたみ

アラートは必要に応じて表示され、閉じられる。必要に応じて表示や非表示を切り替える別のインターフェースとして、Collapseがある。

<div class="collapse">
    ...表示内容...
</div>

class="collapse"を指定した<div>タグを用意すると、折りたたみ表示できるタグになる。これを開閉するには<a>タグを用意する。

<a data-toggle="collapse" href="折りたたむ対象の指定"> ...... </a>

hrefにはclass="collapse"を指定したタグをIDなどで指定する。リンクをクリックするたびに、折りたたみ対象が表示または非表示になる。

<a role="button" class="btn btn-default" data-toggle="collapse" href="#panel">Show Collapse</a>

<div id="panel" class="collapse">
    <div class="panel panel-default">
        <div class="panel-body">
            表示するパネルです。
        </div>
    </div>
</div>

ボタンをクリックするとメッセージが表示されたり消えたりする。簡単に折りたたみ表示を作れるコンポーネントとして覚えておこう。