ホームページ > 記事 > ウェブフロントエンド > Bootstrap の警告ボックス コンポーネントの使用方法の詳細な説明
Bootstrap の警告ボックス コンポーネントの使用方法の詳細な説明
- 青灯夜游転載
- 2021-11-29 19:13:072601ブラウズ
Bootstrap で警告ボックス (アラート) をポップアップ表示するにはどうすればよいですか?次の記事では、Bootstrap5 の警告ボックス コンポーネントの使用方法をコード例を通して説明します。
1 警告ボックス (アラート)
「アラート」という単語を見た場合、js のアラート警告ウィンドウと混同しないでください。この 2 つは、お互いに何の関係もありません。 Bootstrap5 警告ボックスの公式の定義は、一般的なユーザー操作に対して状況に応じたフィードバック メッセージを提供し、利用可能な少数の柔軟な警告メッセージを提供することです。公式の定義は少し混乱しています。一般的に、警告ボックスは実際にはメッセージ リマインダーという名前の方が適切です。通常、ウィンドウの右下隅または右上隅に「未読のメッセージがいくつかあります」ということを通知します。 [関連する推奨事項: "ブートストラップ チュートリアル "]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>警告窗口组件</title>
</head>
<body>
<div>
<br><br><br>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>老刘!</strong> 你收到一条站内短信，<a href="#">点此查看</a>
<button type="button" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
2 アラート ボックスの構成
アラート ボックスは比較的単純で、次のもので構成されています。コンテナと閉じるボタンで構成されており、省略可能で、表示後30秒後に閉じるなどjsで定期的に閉じることができます。以下はメッセージ ボックスの最も単純な例です。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>警告窗口组件</title>
</head>
<body>
<div class="alert alert-primary">
老刘!你收到一条站内短信。
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
3 アラート ボックスの色
上記の例では、コンテナ内でアラートを使用してこれを警告ボックスとしてマークすることに加えて、 alert-primary クラスでは、警告ボックスの背景色を設定します。アラート ボックスの一般的な色をすべて以下に示します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>警告窗口组件</title>
</head>
<body>
<div>
<br><br><br>
<div class="alert alert-primary" role="alert">
alert-primary
</div>
<div class="alert alert-secondary" role="alert">
alert-secondary
</div>
<div class="alert alert-success" role="alert">
alert-success
</div>
<div class="alert alert-danger" role="alert">
alert-danger
</div>
<div class="alert alert-warning" role="alert">
alert-warning
</div>
<div class="alert alert-info" role="alert">
alert-info
</div>
<div class="alert alert-light" role="alert">
alert-light
</div>
<div class="alert alert-dark" role="alert">
alert-dark
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
4 アラート ボックスのリンクの色
4.1 自動マッチング
.alert-link ユーティリティ クラスの使用は、任意の場所で使用できます。アラート 一致する色のリンクをすぐに提供します。以下では 3 つの色の比較のみを示します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>彩色链接</title>
</head>
<body>
<div>
<br><br><br>
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<br><br>
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
4.2 色付きリンク クラスを使用する
「Bootstrap5 中国語マニュアル」のアシスタント カテゴリにある色付きリンクでは、link を使用できます。 -* クラスの色のリンク。 text-* クラスとは異なり、これらのクラスには :hover 状態と :focus 状態があります。色付きのリンクは警告ボックスに固有のものではなく、すべてのリンクに有効であるため、以下では警告ボックスの色は使用されません。次はさまざまな色です:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>彩色链接</title>
</head>
<body>
<div>
<br><br><br>
<div><a href="#">Primary link</a></div>
<div><a href="#">Secondary link</a></div>
<div><a href="#">Success link</a></div>
<div><a href="#">Danger link</a></div>
<div><a href="#">Warning link</a></div>
<div><a href="#">Info link</a></div>
<div><a href="#" class="bg-dark link-light">Light link</a></div>
<div><a href="#">Dark link</a></div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
最後から 2 番目の背景を黒に設定します。そうしないと、区別が難しくなります。
5 追加コンテンツ
アラートには、タイトル、段落、区切り文字などの他の HTML 要素を含めることもできます。
<div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div>
見た目は良いですが、レイアウトや組版用のコンポーネントとして使用することはお勧めできません。組版には、後で紹介するグリッドとより強力なカードの方が適しています。
6 閉じる
最初の例では、閉じるボタンを使用しました。その原理についてもう一度話しましょう。このセクションを詳しく調べたくない場合は、例をコピーしてください。直接できます。
アラート JavaScript プラグインを使用すると、インライン アラート (つまり、警告ボックス) をオフにすることができます。方法は次のとおりです。
- bootstrap.bundle.min.js がロードされていることを確認します。
- 閉じるボタンと .alert-dismissible クラスを追加します。これにより、アラートの右側に余分なパディングが追加され、閉じるボタンが配置されます。
- 閉じるボタンに、JavaScript 関数をトリガーする data-bs-dismiss="alert" 属性を追加します。すべてのデバイスで正しく操作するには、必ずボタン要素を使用してください。
- アラームが解除されたときにアラームをアニメーション化するには、.fade クラスと .show クラスを必ず追加してください。
アラートがクリアされると、要素はページ構造から完全に削除されます。キーボード ユーザーが [閉じる] ボタンを使用してアラートを閉じると、フォーカスが突然失われ、ブラウザによってはページ/ドキュメントの先頭にリセットされます。したがって、closed.bs.alert イベントをリッスンし、プログラムで focus() をページ内の最適な位置に設定する追加の JavaScript を含めることをお勧めします。通常はフォーカスを受け取らない非インタラクティブな要素にフォーカスを移動する予定がある場合は、必ずその要素に tabindex="-1" を追加してください。
ブートストラップの詳細については、ブートストラップの基本チュートリアルをご覧ください。 ！
以上がBootstrap の警告ボックス コンポーネントの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。