Bootstrap で警告ボックス (アラート) をポップアップ表示するにはどうすればよいですか?次の記事では、Bootstrap5 の警告ボックス コンポーネントの使用方法をコード例を通して説明します。
「アラート」という単語を見た場合、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>アラート ボックスは比較的単純で、次のもので構成されています。コンテナと閉じるボタンで構成されており、省略可能で、表示後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>上記の例では、コンテナ内でアラートを使用してこれを警告ボックスとしてマークすることに加えて、 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>.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>「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 番目の背景を黒に設定します。そうしないと、区別が難しくなります。
アラートには、タイトル、段落、区切り文字などの他の 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>
見た目は良いですが、レイアウトや組版用のコンポーネントとして使用することはお勧めできません。組版には、後で紹介するグリッドとより強力なカードの方が適しています。
最初の例では、閉じるボタンを使用しました。その原理についてもう一度話しましょう。このセクションを詳しく調べたくない場合は、例をコピーしてください。直接できます。
アラート JavaScript プラグインを使用すると、インライン アラート (つまり、警告ボックス) をオフにすることができます。方法は次のとおりです。
アラートがクリアされると、要素はページ構造から完全に削除されます。キーボード ユーザーが [閉じる] ボタンを使用してアラートを閉じると、フォーカスが突然失われ、ブラウザによってはページ/ドキュメントの先頭にリセットされます。したがって、closed.bs.alert イベントをリッスンし、プログラムで focus() をページ内の最適な位置に設定する追加の JavaScript を含めることをお勧めします。通常はフォーカスを受け取らない非インタラクティブな要素にフォーカスを移動する予定がある場合は、必ずその要素に tabindex="-1" を追加してください。
ブートストラップの詳細については、ブートストラップの基本チュートリアルをご覧ください。 ！
以上がBootstrap の警告ボックス コンポーネントの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
