ブートストラップアラート
アラート
Bootstrapは、事前定義されたアラートメッセージを作成する簡単な方法を提供します。
××
成功！このアラートボックスは、成功または肯定的なアクションを示します。
××
情報！このアラートボックスは、中立的な有益な変更またはアクションを示します。
××
警告！このアラートボックスは、注意が必要な可能性のある警告を示します。
××
危険！このアラートボックスは、危険または潜在的に否定的なアクションを示します。
アラートは.alertクラスで作成され、その後に4つのコンテキストクラス、、、.alert-successまたは：
の.alert-infoいずれかが続きます。.alert-warning.alert-danger
例
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
アラートリンク
アラートボックス内のリンクにクラスを追加して、alert-link「一致する色のリンク」を作成します。
成功！このメッセージを読む必要があります。
情報！このメッセージを読む必要があります。
警告！このメッセージを読む必要があります。
危険！このメッセージを読む必要があります。
例
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
クロージングアラート
××
右側の「x」記号をクリックして閉じます。
.alert-dismissible
アラートメッセージを閉じるには、アラートコンテナにクラスを追加します。
次に、リンクまたはボタン要素にclass="close"とを追加します（これをクリックすると、アラートボックスが消えます）。data-dismiss="alert"
例
<div class="alert alert-success alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
aria- *属性と＆times; 説明
スクリーンリーダーを使用しているユーザーのアクセシビリティを向上させるために、閉じるボタンを作成するときにaria-label = "close"属性を含める必要があります。
＆times; （×）は、文字「x」ではなく、閉じるボタンの優先アイコンであるHTMLエンティティです。
すべてのHTMLエンティティのリストについては、HTMLエンティティリファレンスにアクセスしてください。
アニメーションアラート
××
右側の「x」記号をクリックして閉じます。私は「フェードアウト」します。
.fadeandクラスは.in、アラートメッセージを閉じるときにフェード効果を追加します。
例
<div class="alert alert-danger fade in">
完全なブートストラップアラートリファレンス
すべてのアラートオプション、メソッド、およびイベントの完全なリファレンスについては、 BootstrapJSアラートリファレンスにアクセスしてください。