Bootstrap-alerts

提供:Dev Guides
移動先:案内検索

ブートストラップ-アラート

この章では、アラートと、Bootstrapがアラートに提供するクラスについて説明します。 アラートは、ユーザーへのメッセージのスタイルを設定する方法を提供します。 これらは、一般的なユーザーアクションのコンテキストフィードバックメッセージを提供します。

アラートにオプションの閉じるアイコンを追加できます。 インラインで閉じるには、リンクを使用します:/bootstrap/bootstrap_alert_plugin [アラートjQueryプラグイン]。

ラッパー<div>を作成し、。alert *のクラスと4つのコンテキストクラスの1つ(たとえば、。alert-success、.alert-info、.alert-warning、.alert)を追加することにより、基本的なアラートを追加できます。 -危険*)。 次の例はこれを示しています-

<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>

解雇アラート

解雇アラートを作成するには-

  • ラッパー<div>を作成し、。alert *のクラスと4つのコンテキストクラス( *.alert-success、.alert-info、.alert-warning、.alert-dangerのいずれか)を追加して、基本的なアラートを追加します。
  • また、オプションの .alert-dismissable を上記の<div>クラスに追加します。
  • 閉じるボタンを追加します。

次の例はこれを示しています-

<div class = "alert alert-success alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>

   Success! Well done its submitted.
</div>

<div class = "alert alert-info alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>

   Info! take this info.
</div>

<div class = "alert alert-warning alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>

   Warning ! Dont submit this.
</div>

<div class = "alert alert-danger alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>

   Error ! Change few things.
</div>

'__data-dismiss = "alert" _ data属性を指定した<button>要素を必ず使用してください。_

アラート内のリンク

アラートのリンクを取得するには-

  • ラッパー<div>を作成し、。alert *のクラスと4つのコンテキストクラス( *.alert-success、.alert-info、.alert-warning、.alert-dangerのいずれか)を追加して、基本的なアラートを追加します。
  • .alert-link ユーティリティクラスを使用して、アラート内で一致する色付きのリンクをすばやく提供します。
<div class = "alert alert-success">
   <a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>

<div class = "alert alert-info">
   <a href = "#" class = "alert-link">Info! take this info.</a>
</div>

<div class = "alert alert-warning">
   <a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>

<div class = "alert alert-danger">
   <a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>