Bootstrap 警告ボックスの詳細な紹介

アラートメッセージは、主に、警告や確認メッセージなどの情報をエンドユーザーに表示するために使用されます。アラート プラグインを使用すると、すべてのアラート メッセージに削除機能を追加できます。

使用法

次の 2 つの方法で警告ボックスの消去機能を有効にすることができます:

data 属性を使用: Data API (Data API) を使用して消去機能を追加します。閉じるボタンに data-dismiss を追加するだけです。 ="alert" を指定すると、警告ボックスに閉じる機能が自動的に追加されます。

デフォルトの使用法

警告ボックスコンポーネントは、いくつかの柔軟な定義済みメッセージを提供することで、一般的なユーザーアクションに対するフィードバックメッセージを提供します

警告ボックスは、任意のテキストとオプションの閉じるボタンを組み合わせて形成できます.alert 类是必须要设置的，另外还提供了有特殊意义的4个类（例如，.alert-success)、さまざまな警告メッセージを表します

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}.alert h4 {
  margin-top: 0;
  color: inherit;
}.alert .alert-link {
  font-weight: bold;
}.alert > p,
.alert > ul {
  margin-bottom: 0;
}.alert > p + p {
  margin-top: 5px;
}

警告ボックスにはデフォルトのクラスはなく、基本クラスと変更されたクラスのみがあります。デフォルトの灰色の警告ボックスはあまり意味がありません。したがって、意味のある警告クラスを使用します。現在、成功、メッセージ、警告、危険が提供されています

1. 成功警告ボックス: 操作が成功したことをユーザーに通知し、「アラート」スタイルに基づいて「アラート-成功」スタイルを追加します。具体的には、背景です。境界線とテキストはすべて緑色です。

2. 情報警告ボックス: ユーザーにプロンプ​​ト情報を提供し、「alert」スタイルに基づいて「alert-info」スタイルを追加します。枠線とテキストはすべて水色です。

3. 警告 警告ボックス: ユーザーに注意して操作するよう促します (警告情報を提供します)。また、「alert」スタイルに「alert-warning」スタイルを追加します。ボーダーとテキストはすべて薄黄色です。

4. エラー警告ボックス: 「アラート」スタイルに基づいて「アラート - 危険」スタイルを追加します。テキストはすべて薄赤色です

<div class="alert" role="alert">基类</div><div class="alert alert-success" role="alert">成功</div><div class="alert alert-info" role="alert">信息提示</div><div class="alert alert-warning" role="alert">警告</div><div class="alert alert-danger" role="alert">错误</div>

はオフにすることができます

Web を閲覧すると、一部の警告ボックスには閉じるボタンがあることがわかりました。ユーザーが閉じるボタンをクリックすると、表示された警告ボックスが自動的に閉じられることがあります。閉じられています (つまり、警告ボックスは非表示になり、表示されません)。 Bootstrapフレームワークのアラートボックスにもそのような機能があります

デフォルトのアラートボックスに閉じるボタンを追加するだけです。次に 3 つのステップに進みます:

1. 基本的な警告ボックス「アラート」に基づいて「アラート解除可能」スタイルを追加する必要があります。

2. buttonタグにclass="close"を追加して、警告ボックスの閉じるボタンのスタイルを実装します。

3. 閉じるボタン要素にカスタム属性が設定されていることを確認します: data-dismiss="alert" (閉じることが可能なアラート ボックスでは、アラート ボックスの閉じるを制御するためにこの属性を検出する Javascript が必要なため)

.alert-dismissable {
  padding-right: 35px;
}.alert-dismissable .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

リンク

アラート ボックスにリンク アドレスを追加して、ユーザーに特定の場所または新しいページにジャンプするように指示したい場合があります。このとき、これがリンクアドレスであることがユーザーに明確にわかるようにしたいと考えています。 Bootstrap フレームワークでは、アラート ボックス内のリンク スタイルが強調表示されます。さまざまなタイプのアラート ボックスのリンクは太字になり、それに応じて色が濃くなります

Bootstrap フレームワークは、「alert-link」スタイルを通じて、アラート ボックス内のリンクに「alert-link」というクラス名を追加します。

りー

りー

以上がBootstrap 警告ボックスの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。