Bootstrap4 基本教程

Bootstrap4 ボタンのグループ

　　前章では、異なるタイプの単一のボタンを作成する方法や、プレデファインドのクラスを使用してそれらを変更する方法について学びました。しかし、Bootstrapはボタンのグループコンポーネントを使用して、一列に一連のボタンを組み合わせることも許可しています。

Bootstrap 4 中でボタンを同一行に配置できます。．btnを<div>要素に追加して、-group　クラスを適用するだけで、ボタンのグループを作成できます。

ボタンのグループを作成するには、．btnクラスを持つ一連のボタンを要素にラップして、その上に．btn-group　クラス、以下の例を参照してください：

示例

<!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>
　　<p>　.btn-group　クラスを使用してボタンのグループを作成します:</p>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">アップル</button>
　　　　<button　type="button"　class="btn　btn-primary">サムスン</button>
　　　　<button　type="button"　class="btn　btn-primary">ソニー</button>
　　</div>
</div>
</body>
</html>

テストをしてみる‹/›

ヒント: ．btnを使用することができます-group-lg|sm　クラスを使用してボタンのサイズを設定します。

示例

<!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>
　　<p>．btnを使用することができます-group-lg|sm|xs　クラスを使用してボタンのサイズを設定します。</p>
　　<h2>大ボタン:</h2>
　　<div　class="btn-group　btn-group-lg">
　　　　<button　type="button"　class="btn　btn-primary">アップル</button>
　　　　<button　type="button"　class="btn　btn-primary">サムスン</button>
　　　　<button　type="button"　class="btn　btn-primary">ソニー</button>
　　</div>
　　<h2>デフォルトボタン:</h2>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">アップル</button>
　　　　<button　type="button"　class="btn　btn-primary">サムスン</button>
　　　　<button　type="button"　class="btn　btn-primary">ソニー</button>
　　</div>
　　<h2>小按钮:</h2>
　　<div　class="btn-group　btn-group-sm">
　　　　<button　type="button"　class="btn　btn-primary">アップル</button>
　　　　<button　type="button"　class="btn　btn-primary">サムスン</button>
　　　　<button　type="button"　class="btn　btn-primary">ソニー</button>
　　</div>
</div>
</body>
</html>

テストをしてみる‹/›

垂直ボタングループ

可以使用 .btn-group-vertical　クラスを使用して垂直のボタングループを作成します：

示例

<!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>
　　<p>Uは　.btn-group-vertical　クラスを使用して垂直のボタングループを作成します：</p>
　　<div　class="btn-group-vertical">
　　　　<button　type="button"　class="btn　btn-primary">アップル</button>
　　　　<button　type="button"　class="btn　btn-primary">サムスン</button>
　　　　<button　type="button"　class="btn　btn-primary">ソニー</button>
　　</div>
</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>
　　<p>ボタングループの設定でドロップダウンメニュー:</p>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">アップル</button>
　　　　<button　type="button"　class="btn　btn-primary">サムスン</button>
　　　　<div　class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　ソニー
　　　　　　</button>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#">タブレット</a>
　　　　　　　　<a　class="dropdown-item"　href="#">スマートフォン</a>
　　　　　　</div>
　　　　</div>
　　</div>
</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>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">ソニー</button>
　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">タブレット</a>
　　　　　　<a　class="dropdown-item"　href="#">スマートフォン</a>
　　　　</div>
　　</div>
</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>
　　<div　class="btn-group-vertical">
　　　　<button　type="button"　class="btn　btn-primary">アップル</button>
　　　　<button　type="button"　class="btn　btn-primary">サムスン</button>
　　　　<div　class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　ソニー
　　　　　　</button>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#">タブレット</a>
　　　　　　　　<a　class="dropdown-item"　href="#">スマートフォン</a>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

テストをしてみる‹/›

创建按钮工具栏

您还可以将按钮组的集合组合在一起，以创建更复杂的组件，例如按钮工具栏。要创建按钮工具栏，只需将按钮组的集合包装在一个

元素中，然后.btn-toolbar在其上应用类，如以下示例所示：

示例

<!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>
　　　　<link　rel="stylesheet"　href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="bs-example">
　　　　<div　class="btn-group　mr-2">
　　　　　　　　<button　type="button"　class="btn　btn-primary">
　　　　　　　　　　　　<i　class="fa　fa-font"></i>
　　　　　　　　</button>
　　　　　　　　<button　type="button"　class="btn　btn-primary">
　　　　　　　　　　　　<i　class="fa　fa-bold"></i>
　　　　　　　　</button>
　　　　　　　　<button　type="button"　class="btn　btn-primary">
　　　　　　　　　　　　<i　class="fa　fa-italic"></i>
　　　　　　　　</button>
　　　　</div>
　　　　<div　class="btn-group　mr-2">
　　　　　　　　<button　type="button"　class="btn　btn-primary">
　　　　　　　　　　　　<i　class="fa　fa-align-left"></i>
　　　　　　　　</button>
　　　　　　　　<button　type="button"　class="btn　btn-primary">
　　　　　　　　　　　　<i　class="fa　fa-align-center"></i>
　　　　　　　　</button>
　　　　　　　　<button　type="button"　class="btn　btn-primary">
　　　　　　　　　　　　<i　class="fa　fa-align-right"></i>
　　　　　　　　</button>
　　　　　　　　<button　type="button"　class="btn　btn-primary">
　　　　　　　　　　　　<i　class="fa　fa-align-justify"></i>
　　　　　　　　</button>
　　　　</div>
　　　　<div　class="btn-group">
　　　　　　　　<button　type="button"　class="btn　btn-primary">
　　　　　　　　　　　　<i　class="fa　fa-undo"></i>
　　　　　　　　</button>
　　　　</div>
</div>
</body>
</html>

テストをしてみる‹/›

効果は以下の通り:

Bootstrap4 バッジ Bootstrap4 ボタン