最新のWeb開発のチュートリアル
 

Bootstrap Alerts


アラート

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>
»それを自分で試してみてください

閉会アラート

、警告メッセージを閉じる追加するにはclass="close"し、 data-dismiss="alert"リンクやボタンエレメント:

<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
»それを自分で試してみてください

aria-*属性と&times; 説明

スクリーンリーダーを使っている人のアクセシビリティを改善するには、含まれている必要がありaria-label="close"閉じるボタンを作成するときに、属性を。

&times; (×) &times; (×)閉じるボタンのための好適なアイコンではなく、文字であるHTMLエンティティである"x"


アニメーションアラート

.fade.in警告メッセージを閉じるときのクラスは、フェージング効果を追加します。

<div class="alert alert-success fade in">
»それを自分で試してみてください

練習で自分自身をテスト!

演習1» 演習2» 演習3»


完了してBootstrap警告リファレンス

すべてのアラートオプション、メソッドおよびイベントの完全なリファレンスについては、当社に行くBootstrap JSアラートリファレンス