Bootstrap 警告(Alerts)
この章では、警告(Alerts)と、Bootstrap が提供する警告用の class について説明します。警告(Alerts)は、ユーザーにメッセージスタイルを定義する方法を提供します。それらは、典型的なユーザー操作に対してコンテキスト情報のフィードバックを提供します。
警告ボックスに、オプションの閉じるボタンを追加できます。インラインのキャンセル可能な警告ボックスを作成するには、次を使用してください。警告(Alerts) jQuery 插件。
<div> を作成し、それに ... を追加することで.alertclass と 4 つのコンテキストクラス(すなわち .alert-success、.alert-info、.alert-warning、.alert-danger)のいずれかを使用して、基本的な警告ボックスを追加します。次の例はこれを示しています。
实例
<div class="alert alert-success">成功しました!送信が正常に完了しました。</div>
<div class="alert alert-info">情報!この情報に注意してください。</div>
<div class="alert alert-warning">警告!请不要提交。</div>
<div class="alert alert-danger">错误!请进行一些更改。</div>
尝试一下 »
結果は次のとおりです:
閉じることができる警告(Dismissal Alerts)
キャンセル可能な警告(Dismissal Alert)を作成する手順は、次のとおりです。
- <div> を作成し、それに(.alertclass と 4 つのコンテキストクラス(すなわち .alert-success、.alert-info、.alert-warning、.alert-danger)のいずれかを追加して、基本的な警告ボックスを追加します。
- 同時に、上記の <div> クラスに、オプションの ... を追加します.alert-dismissable。
- 閉じるボタンを追加します。
以下の例はこれを示しています:
实例
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>成功しました!送信が正常に完了しました。</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>情報!この情報に注意してください。</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>警告!请不要提交。</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>错误!请进行一些更改。</div>
必ず、data 属性を持つdata-dismiss="alert"<button> 要素を使用してください。尝试一下 »
結果は次のとおりです:
警告(Alerts)内のリンク
警告(Alerts)内にリンクを作成する手順は、次のとおりです。
- <div> を作成し、それに(.alertclass と 4 つのコンテキストクラス(すなわち .alert-success、.alert-info、.alert-warning、.alert-danger)のいずれかを追加して、基本的な警告ボックスを追加します。
- 使用.alert-linkユーティリティクラスを使用して、一致する色のリンクをすばやく提供します。
实例
<div class="alert alert-success">
<a href="#" class="alert-link">成功しました!送信が正常に完了しました。</a>
</div>
<div class="alert alert-info">
<a href="#" class="alert-link">情報!この情報に注意してください。</a>
</div>
<div class="alert alert-warning">
<a href="#" class="alert-link">警告!请不要提交。</a>
</div>
<div class="alert alert-danger">
<a href="#" class="alert-link">错误!请进行一些更改。</a>
</div>
尝试一下 »
結果は次のとおりです: