ブートストラップ4アラート
ブートストラップ4アラート
Bootstrap 4は、事前定義されたアラートメッセージを作成する簡単な方法を提供します。
成功！このアラートボックスは、成功または肯定的なアクションを示します。
情報！このアラートボックスは、中立的な有益な変更またはアクションを示します。
警告！このアラートボックスは、注意が必要な可能性のある警告を示します。
危険！このアラートボックスは、危険または潜在的に否定的なアクションを示します。
主要な！このアラートボックスは、重要なアクションを示します。
二次！このアラートボックスは、重要度の低いアクションを示します。
闇！ダークグレーのアラートボックス。
光！ライトグレーのアラートボックス。
アラートはクラスで作成され、その後
にコンテキスト.alertクラス、、、、、、、、または：のいずれかが続きます。.alert-success.alert-info.alert-warning.alert-danger.alert-primary.alert-secondary.alert-light.alert-dark
例
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive 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">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
ヒント：＆times; （×）は、文字「x」ではなく、閉じるボタンの優先アイコンであるHTMLエンティティです。
すべてのHTMLエンティティのリストについては、HTMLエンティティリファレンスにアクセスしてください。
アニメーションアラート
××
右側の「x」記号をクリックして閉じます。私は「フェードアウト」します。
.fadeandクラスは.show、アラートメッセージを閉じるときにフェード効果を追加します。
例
<div class="alert alert-danger
alert-dismissible fade show">
完全なブートストラップ4アラートリファレンス
すべてのアラートオプション、メソッド、およびイベントの完全なリファレンスについては、 Bootstrap 4JSアラートリファレンスにアクセスしてください。