Bootstrap4 基礎教程

Bootstrap4 バッジ

バッジは、重要なタイトル、警告メッセージ、通知カウンタなど、価値のある情報をウェブページ上で示すために通常使用されます。バッジは、新しいまたは未読のアイテムを強調表示するために主に使用されます。バッジを使用するには、.badge クラスと指定された意味を持つ色のクラス（例：.badge）を追加するだけで十分です。-secondary) を <span> に追加します要素に適用すると、バッジは親要素のサイズの変更に応じて変更されます：

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>バッジ</h2>
<h1>Bootstrap　heading　<span　class="badge　badge-secondary">New</span></h1>
<h2>Bootstrap　heading　<span　class="badge　badge-secondary">New</span></h2>
<h3>Bootstrap　heading　<span　class="badge　badge-secondary">New</span></h3>
<h4>Bootstrap　heading　<span　class="badge　badge-secondary">New</span></h4>
<h5>Bootstrap　heading　<span　class="badge　badge-secondary">New</span></h5>
<h6>Bootstrap　heading　<span　class="badge　badge-secondary">New</span></h6>
</div>
</body>
</html>

テストを見てみる ‹/›

様々な色の種類のバッジ

以下に、すべての色の種類のバッジが示されています：

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>様々な色の種類のバッジ</h2>
　　<span　class="badge　badge-primary">主要</span>
　　<span　class="badge　badge-secondary">サブ</span>
　　<span　class="badge　badge-success">成功</span>
　　<span　class="badge　badge-danger">危険</span>
　　<span　class="badge　badge-warning">警告</span>
　　<span　class="badge　badge-info">情報</span>
　　<span　class="badge　badge-light">ライト</span>
　　<span　class="badge　badge-dark">ダーク</span>
</div>
</body>
</html>

テストを見てみる ‹/›

丸形バッジ

使用 .badge-pill　class　を使って丸形バッジを設定します：

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>丸形バッジ</h2>
　　<span　class="badge　badge-pill　badge-default">デフォルト</span>
　　<span　class="badge　badge-pill　badge-primary">主要</span>
　　<span　class="badge　badge-pill　badge-success">成功</span>
　　<span　class="badge　badge-pill　badge-info">情報</span>
　　<span　class="badge　badge-pill　badge-warning">警告</span>
　　<span　class="badge　badge-pill　badge-danger">危険</span>
</div>
</body>
</html>

テストを見てみる ‹/›

徽章插入到元素内

以下示例将徽章嵌入到按钮内：

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>ボタン内にバッジを埋め込む</h2>
　　<button　type="button"　class="btn　btn-primary">
　　　　Messages　<span　class="badge　badge-light">4</span>
　　</button>
　　<button　type="button"　class="btn　btn-danger">
　　　　Notifications　<span　class="badge　badge-light">7</span>
　　</button>
</div>
</body>
</html>

テストを見てみる ‹/›

Bootstrap4 プログレスバー Bootstrap4 ボタングループ