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">
×
</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">
×
</button>
Info! take this info.
</div>
<div class = "alert alert-warning alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Warning ! Dont submit this.
</div>
<div class = "alert alert-danger alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</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>