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>

尝试一下 »

結果は次のとおりです:

警告(Alerts)

閉じることができる警告(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"> &times; </button>成功しました!送信が正常に完了しました。</div> <div class="alert alert-info alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>情報!この情報に注意してください。</div> <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>警告!请不要提交。</div> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>错误!请进行一些更改。</div>

必ず、data 属性を持つdata-dismiss="alert"<button> 要素を使用してください。
尝试一下 »

結果は次のとおりです:

可取消的警告(Dismissal Alerts)

警告(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>

尝试一下 »

結果は次のとおりです:

警告(Alerts)中的链接
其他扩展