編集 Github

アラート

少数の利用可能で柔軟な警告メッセージを使用して、一般的なユーザー操作のためのコンテキストフィードバックメッセージを提供します。

例

アラートは任意の長さのテキストとオプションの却下ボタンで利用できます。適切なスタイリングのために、8つの必須コンテキストクラスのうちの1つを使用してください（例えば、 .alert-success）。インラインで却下するには、[alerts jQuery plugin]を使用します（＃却下）。

<div class="alert alert-primary" role="alert">
  これは 一次 アラート-見てみな!
</div>
<div class="alert alert-info" role="alert">
  これは 情報 アラート-見てみな!
</div>
<div class="alert alert-success" role="alert">
  これは 成功 アラート-見てみな!
</div>
<div class="alert alert-danger" role="alert">
  これは 危険 アラート-見てみな!
</div>
<div class="alert alert-warning" role="alert">
  これは 警告 アラート-見てみな!
</div>
<div class="alert alert-default" role="alert">
  これは デフォルト アラート-見てみな!
</div>

リンクカラー

アラート内で一致する色付きリンクをすばやく表示するには、 .alert-linkユーティリティクラスを使用してください。

<div class="alert alert-primary" role="alert">
  これは 一次 と警告する
    <a href="#" class="alert-link">リンク例</a>.
  あなたが好きならそれをクリックしてください。
</div>
<div class="alert alert-info" role="alert">
  これは 情報 と警告する
    <a href="#" class="alert-link">リンク例</a>.
  あなたが好きならそれをクリックしてください。
</div>
<div class="alert alert-success" role="alert">
  これは 成功 と警告する
    <a href="#" class="alert-link">リンク例</a>.
  あなたが好きならそれをクリックしてください。
</div>
<div class="alert alert-danger" role="alert">
  これは 危険 と警告する
    <a href="#" class="alert-link">リンク例</a>.
  あなたが好きならそれをクリックしてください。
</div>
<div class="alert alert-warning" role="alert">
  これは 警告 と警告する
    <a href="#" class="alert-link">リンク例</a>.
  あなたが好きならそれをクリックしてください。
</div>
<div class="alert alert-default" role="alert">
  これは デフォルト と警告する
    <a href="#" class="alert-link">リンク例</a>.
  あなたが好きならそれをクリックしてください。
</div>

分裂

alert JavaScriptプラグインを使用すると、アラートをインラインで閉じることができます。 方法は次のとおりです。

  • アラートプラグイン、またはコンパイル済みのBootstrap JavaScriptをロードしたことを確認してください。
  • JavaScriptをソースから構築している場合、[util.jsが必要]です（{{site.baseurl}} / docs / {{site.docs_version}} / Getting-started / javascript /＃util）。 コンパイル済みバージョンにはこれが含まれています。
  • dismissボタンと .alert-dismissibleクラスを追加します。これは警告の右側に余分なパディングを追加し、 .closeボタンを配置します。
  • アラートを閉じるときにアニメーション化するには、必ず .fadeクラスと .showクラスを追加してください。

ライブデモでこれを実際に見ることができます：:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>聖なるワカモレ！</strong> あなたはそれらのフィールドのいくつかをチェックインするべきです
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

あなたがより多くの例と特性を見たいと思うならば、公式をチェックしてください Bootstrap Documentation.