コンポーネント

ボタン、ドロップダウン、入力フォーム、ナビゲーション、アラートなどのコンポーネント。

アラート

目次

適切なスタイリングのために、4つのうちいずれかの必須クラスを使用します。(例 .alert-success)

<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
    <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

.alert-linkクラスを使用すれば、どのアラートにも適切な色のリンクを表示することができます。

<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
    <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
    <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
    <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>

閉じる

アラート JavaScript プラグインを使えば、アラートを閉じることができます。

  • アラートプラグイン、またはコンパイルしたBootstrap JavaScriptを必ずロードしてください。
  • .closeクラスを持たせた閉じるボタンを追加します。すべてのデバイスで正常に機能させるために<button>要素を使用してください。
  • 閉じるボタンには、JavaScriptの機能のトリガーとなるdata-dismiss="alert"属性を追加します。
  • アラートに.alert-dismissibleクラスを追加します。これはアラートの右側に余白を与え、.closeボタンの配置を行うものです。
  • 閉じる際のアニメーションのために、 .fade.inクラスを必ず追加してください。

デモ:

<div class="alert alert-warning alert-dismissible fade in" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>

アラートを閉じると、DOMから削除されることに注意してください。

JavaScriptの振る舞い

トリガー

JavaScriptでアラートの閉じるを有効にできます:

$(".alert").alert()

または、上のデモにあったように、アラート内のボタンにdata属性を指定することで閉じるを有効にします。

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>

メソッド

メソッド 説明
$().alert() data-dismiss="alert"を持つ子孫要素のclickイベントを検知するようにします。(データAPIの自動初期化を使用した場合は不要。)
$().alert('close') DOMから削除することでアラートを閉じます。もし .fadeクラスと .inクラスが要素に付与されていれば、アラートは削除される前にフェードアウトします。
$(".alert").alert('close')

イベント

Bootstrapのアラートプラグインには、アラート機能のイベントがいくつかあります。

イベント 説明
close.bs.alert closeメソッドが呼び出されたときに、直ちに発火するイベント。
closed.bs.alert アラートが閉じられたときに発火するイベント。 (CSSトランジションの完了を待ちます。)
$('#myAlert').on('closed.bs.alert', function () {
    // do something…
})