ホームページ > 記事 > ウェブフロントエンド > Bootstrap でバッジ アイコン コンポーネントを使用する方法の簡単な分析
Bootstrap でバッジ アイコン コンポーネントを使用する方法の簡単な分析
- 青灯夜游転載
- 2021-11-30 19:07:322775ブラウズ
Bootstrap でバッジ アイコン コンポーネントを使用するにはどうすればよいですか?次の記事では、Bootstrap5 Badge バッジ アイコン コンポーネントの使用方法をコード例を通して説明します。
1 バッジの構造
バッジは通常、カウントのためにナビゲーション バー、タイトル、ボタン、アバターの右側の小さな領域で使用されます。 . (n 件の未読メッセージなど) を確認したり、新しいリリースや人気の話題などを特定したりできます。相対フォント サイズと em 単位を使用すると、バッジを直接の親要素のサイズに合わせて拡大縮小できます。 Bootstrap 5 以降、バッジにはリンク フォーカスまたはホバー スタイルがなくなりました。 [関連する推奨事項: "ブートストラップ チュートリアル"]
バッジの構造は非常に単純です。これは 2 つのクラスを含む Span タグです。バッジはバッジであることを示します。 bg-* は背景色です。 text-* を使用してフォントの色を設定することもできます。
<span class="badge bg-secondary">文字内容</span>
2 バッジをテキストに使用する場合
バッジをテキストに使用すると、テキストに合わせてサイズが自動的に調整されます。
<!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>
<h1>Example heading <span class="badge bg-info ">New</span></h1>
<h2>Example heading <span class="badge bg-danger ">Hot</span></h2>
<h3>Example heading <span class="badge bg-info ">New</span></h3>
<h4>Example heading <span class="badge bg-info ">New</span></h4>
<h5>Example heading <span class="badge bg-info ">New</span></h5>
<h6>Example heading <span class="badge bg-info ">New</span></h6>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
3 ボタンの場合
バッジには、リンクまたはボタンの一部としてカウンターを提供できます。
<button type="button" class="btn btn-primary"> 未读消息 <span class="badge bg-secondary">4</span> </button>
バッジは、使用方法によっては、スクリーン リーダーや同様の支援技術のユーザーを混乱させる可能性があることに注意してください。バッジのスタイルはその目的に関する視覚的な手がかりを提供しますが、これらのユーザーにはバッジの内容のみが表示されます。コンテキストによっては、これらのバッジは、文、リンク、ボタンの末尾にランダムに追加された単語や数字のように見える場合があります。
コンテキストが明確でない限り (「未読メッセージ」の例のように、「4」が通知の数であることが理解されている場合)、視覚的に非表示になっている追加のテキスト スニペットに追加のコンテキストを含めることを検討してください。
<button type="button" class="btn btn-primary">
个人中心 <span class="badge bg-secondary">9</span>
<span class="visually-hidden">未读消息</span>
</button>
この非表示のラベルはユーザーの目の前には表示されず、マウスをホバーしてもプロンプトは表示されないことに注意してください。マウスをホバリングすると、ボタンまたはバッジを追加できます。違いは、ボタンに追加した場合、ボタン全体の上にマウスをホバリングしたときにプロンプトが表示されることです。スパン ラベルに追加した場合、マウスを移動したときにのみプロンプトが表示されます。ホバリング時に遅延が発生するため、秒より数日上に配置する必要があります。
<button type="button" class="btn btn-primary">
个人中心 <span class="badge bg-secondary" title="您有9条未读消息" >9</span>
</button>
<button type="button" class="btn btn-primary" title="您有9条未读消息" >
个人中心 <span class="badge bg-secondary" >9</span>
</button>
4 背景色
提供されたユーティリティ クラスを使用して、バッジの外観をすばやく変更します。 Bootstrap のデフォルトの .bg-light を使用する場合、正しいスタイルを取得するために .text-dark のようなテキスト カラー ユーティリティが必要になる場合があることに注意してください。これは、背景ユーティリティが背景色を設定するだけであるためです。
<span class="badge bg-primary">Primary</span> <span class="badge bg-secondary">Secondary</span> <span class="badge bg-success">Success</span> <span class="badge bg-danger">Danger</span> <span class="badge bg-warning text-dark">Warning</span> <span class="badge bg-info text-dark">Info</span> <span class="badge bg-light text-dark">Light</span> <span class="badge bg-dark">Dark</span>
5 カプセル バッジ
.rounded-pill ユーティリティ クラスを使用して、バッジをより丸く、境界線の半径を大きくします。
<span class="badge rounded-pill bg-primary">Primary</span> <span class="badge rounded-pill bg-secondary">Secondary</span> <span class="badge rounded-pill bg-success">Success</span> <span class="badge rounded-pill bg-danger">Danger</span> <span class="badge rounded-pill bg-warning text-dark">Warning</span> <span class="badge rounded-pill bg-info text-dark">Info</span> <span class="badge rounded-pill bg-light text-dark">Light</span> <span class="badge rounded-pill bg-dark">Dark</span>
ブートストラップの詳細については、ブートストラップの基本チュートリアルを参照してください。 ！
以上がBootstrap でバッジ アイコン コンポーネントを使用する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。