Bootstrap4 基本チュートリアル

Bootstrap4 ドロップダウンメニュー

ユーザーがマウスをホバーまたはクリックしてトリガー要素を起動したとき、通常ナビゲーションタイトル内でドロップダウンメニューを使用して関連リンクの一覧を表示します。 Bootstrap ドロップダウンプラグインを使用して、リンク、ボタンやボタングループ、ナビゲーションバー、タブ、パイプラインナビゲーションなど、ほぼすべてのコンテンツに切り替え可能なドロップダウンメニューを追加できます（クリックで開閉）。JavaScript コードを書かずに済みます。

Bootstrap4 ドロップダウンメニューは popper.min.js に依存しています。

ドロップダウンメニューは切り替え可能で、リンクをリスト形式で表示するコンテキストメニューです。

例

<!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>.dropdown クラスを使用してドロップダウンメニューを指定。</p>
　　<p>.dropdown-menu クラスを使用して実際のドロップダウンメニューを設定。</p>
　　<p>我们可以使用一个按钮或链接来打开下拉菜单，　按钮或链接需要添加　.dropdown-toggle と　data-toggle="dropdown" 属性。</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary ドロップダウン-toggle"　data-toggle="dropdown">
　　　　　　Dropdown　button
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">リンク　1</a>
　　　　　　<a　class="dropdown-item"　href="#">リンク　2</a>
　　　　　　<a　class="dropdown-item"　href="#">リンク　3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通りです:

示例解析

.dropdown クラスを使用してドロップダウンメニューを指定します。

我们可以使用一个按钮或链接来打开下拉菜单，按钮或链接需要添加 .dropdown-toggle と data-toggle="dropdown" 属性を追加します。

<div> 要素に .dropdown-menu クラスを使用して実際のドロップダウンメニューを設定し、その後、ドロップダウンメニューのオプションに追加 .dropdown-item クラス。

我们也可以在 <a> 标签中使用：

例

<!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">
	<div　class="dropdown">
	　　<a　class="btn　btn-secondary ドロップダウン-toggle"　href="#"　role="button"　id="dropdownMenuLink"　data-toggle="dropdown"　aria-haspopup="true"　aria-expanded="false">
		Dropdown　link
	　　</a>
	　　<div　class="dropdown-menu"　aria-labelledby="dropdownMenuLink">
		<a　class="dropdown-item" href="#">アクション</a>
		<a　class="dropdown-item" href="#">別のアクション</a>
		<a　class="dropdown-item" href="#">ここに何か</a>
	　　</div>
	</div>
</div>
</body>
</html>

テストしてみてください ‹/›

ドロップダウンメニューの分割線

.dropdown-divider クラスは、ドロップダウンメニューに水平の分割線を作成するために使用されます：

例

<!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>.dropdown-divider クラスは、ドロップダウンメニューに水平の分割線を作成するために使用されます：</p>
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary ドロップダウン-toggle"　data-toggle="dropdown">
　　　　　　Dropdown　button
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">リンク　1</a>
　　　　　　<a　class="dropdown-item"　href="#">リンク　2</a>
　　　　　　<a　class="dropdown-item"　href="#">リンク　3</a>
　　　　　　<div　class="dropdown-divider"></div>
　　　　　　<a　class="dropdown-item"　href="#">Another　link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

テストしてみてください ‹/›

ドロップダウンメニューのタイトル

.dropdown-header クラスは、ドロップダウンメニューにタイトルを追加するために使用されます：

例

<!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>.dropdown-header クラスは、ドロップダウンメニューにタイトルを追加するために使用されます：</p>
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary ドロップダウン-toggle"　data-toggle="dropdown">
　　　　　　Dropdown　button
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<h5　class="dropdown-header">Dropdown　header</h5>
　　　　　　<a　class="dropdown-item"　href="#">リンク　1</a>
　　　　　　<a　class="dropdown-item"　href="#">リンク　2</a>
　　　　　　<a　class="dropdown-item"　href="#">リンク　3</a>
　　　　　　<h5　class="dropdown-header">Dropdown　header</h5>
　　　　　　<a　class="dropdown-item"　href="#">Another　link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

テストしてみてください ‹/›

ドロップダウンメニューの有効なアイテムと無効なアイテム

.active クラスは、ドロップダウンメニューのオプションをハイライト表示します（青色の背景を追加）。

ドロップダウンメニューのオプションを無効にするには、.disabled クラスを使用できます。

例

<!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>.active クラスは、ドロップダウンメニューのオプションをハイライト表示します（青色の背景を追加）。/p>
　　<p>下拉メニューのオプションを無効にするには、.disabled　クラスを使用します。</p>
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary ドロップダウン-toggle"　data-toggle="dropdown">
　　　　　　Dropdown　button
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Normal</a>
　　　　　　<a　class="dropdown-item　active"　href="#">Active</a>
　　　　　　<a　class="dropdown-item　disabled"　href="#">Disabled</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

テストしてみてください ‹/›

下拉メニューの配置

下拉メニューを右に揃えたい場合は、要素の .dropdown-menu　クラスの後に .dropdown-menu-right　クラスを追加します。

例

<!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>下拉メニューを右に揃えたい場合は、要素の　.dropdown-menu　クラスの後に　.dropdown-menu-right　クラス。</p>
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary ドロップダウン-toggle"　data-toggle="dropdown">
　　　　　　Dropdown　button
　　　　</button>
　　　　<div　class="dropdown-menu　dropdown-menu-right">
　　　　　　<a　class="dropdown-item"　href="#">リンク　1</a>
　　　　　　<a　class="dropdown-item"　href="#">リンク　2</a>
　　　　　　<a　class="dropdown-item"　href="#">リンク　3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

テストしてみてください ‹/›

下拉メニューの弹出方向設定

下拉メニューの弹出方向はデフォルトで下向きですが、異なる方向に設定することもできます。

右に弹出させる下拉メニューを指定します

もし下拉メニューを右に弹出させたい場合は、div要素に「dropright」クラスを追加することができます：

例

<!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>　.dropright　クラスは、下拉メニューを右に弹出させるために使用されます：</p><br>
　　<!--　Default　dropright　button　-->
	<div　class="btn-group　dropright">
	　　<button　type="button"　class="btn　btn-secondary ドロップダウン-toggle"　data-toggle="dropdown"　aria-haspopup="true"　aria-expanded="false">
		Dropright
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　ドロップダウンメニューのリンク　-->
		<a　class="dropdown-item" href="#">アクション</a>
　　　　　　　　<a　class="dropdown-item" href="#">別のアクション</a>
　　　　　　　　<a　class="dropdown-item" href="#">ここに何か</a>
　　　　　　　　<div　class="dropdown-divider"></div>
　　　　　　　　<a　class="dropdown-item" href="#">分離リンク</a>
　　　　　　　　</div>
	</div>
	<!--　Split　dropright　button　-->
	<div　class="btn-group　dropright">
	　　<button　type="button"　class="btn　btn-secondary">
		Split　dropright
	　　</button>
	　　<button　type="button"　class="btn　btn-secondary ドロップダウン-toggle　dropdown-toggle-split"　data-toggle="dropdown"　aria-haspopup="true"　aria-expanded="false">
		<span class="sr-only">Toggle　Dropright</span>
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　ドロップダウンメニューのリンク　-->
		　<a　class="dropdown-item" href="#">アクション</a>
　　　　　　　　<a　class="dropdown-item" href="#">別のアクション</a>
　　　　　　　　<a　class="dropdown-item" href="#">ここに何か</a>
　　　　　　　　<div　class="dropdown-divider"></div>
　　　　　　　　<a　class="dropdown-item" href="#">分離リンク</a>
	　　</div>
	</div>
</div>
</body>
</html>

テストしてみてください ‹/›

上に弹出させる上拉メニューを指定します

もし上拉メニューを上に弹出させたい場合は、div要素に「dropup」クラスを追加することができます：

例

<!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>　.dropup　クラスは、下拉メニューを上に弹出させるために使用されます：</p><br><br><br><br><br><br><br><br>
　　<!--　Default　dropup　button　-->
　　　　<div　class="btn-group　dropup">
　　　　<button　type="button"　class="btn　btn-secondary ドロップダウン-toggle"　data-toggle="dropdown"　aria-haspopup="true"　aria-expanded="false">
　　　　　　　　Dropup
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　　　<!--　ドロップダウンメニューのリンク　-->
　　　　　　　　<a　class="dropdown-item" href="#">アクション</a>
　　　　　　　　<a　class="dropdown-item" href="#">別のアクション</a>
　　　　　　　　<a　class="dropdown-item" href="#">ここに何か</a>
　　　　　　　　<div　class="dropdown-divider"></div>
　　　　　　　　<a　class="dropdown-item" href="#">分離リンク</a>
　　　　</div>
　　　　</div>
　　　　
　　　　<!--　Split　dropup　button　-->
　　　　<div　class="btn-group　dropup">
　　　　<button　type="button"　class="btn　btn-secondary">
　　　　　　　　Split　dropup
　　　　</button>
　　　　<button　type="button"　class="btn　btn-secondary ドロップダウン-toggle　dropdown-toggle-split"　data-toggle="dropdown"　aria-haspopup="true"　aria-expanded="false">
　　　　　　　　<span class="sr-only">Toggle　Dropdown</span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　　　<!--　ドロップダウンメニューのリンク　-->
　　　　　　　　<a　class="dropdown-item" href="#">アクション</a>
　　　　　　　　<a　class="dropdown-item" href="#">別のアクション</a>
　　　　　　　　<a　class="dropdown-item" href="#">ここに何か</a>
　　　　　　　　<div　class="dropdown-divider"></div>
　　　　　　　　<a　class="dropdown-item" href="#">分離リンク</a>
　　　　</div>
　　　　</div>
</div>
</body>
</html>

テストしてみてください ‹/›

左に弹出させる下拉メニューを指定します

もし下拉メニューを上に弹出させたい場合は、div要素に「dropleft」クラスを追加することができます：

例

<!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"　style="text-align:center;">
　　<h2下拉メニュー</h2>
　　<p>　.dropleft　クラスは、下拉メニューを左に弹出させるために使用されます：</p><br>
　　<!--　デフォルトドロップレフトボタン　-->
	<div　class="btn-グループドロップレフト">
	　　<button　type="button"　class="btn　btn-secondary ドロップダウン-toggle"　data-toggle="dropdown"　aria-haspopup="true"　aria-expanded="false">
		ドロップレフト
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　ドロップダウンメニューのリンク　-->
		<a　class="dropdown-item" href="#">アクション</a>
　　　　　　　　<a　class="dropdown-item" href="#">別のアクション</a>
　　　　　　　　<a　class="dropdown-item" href="#">ここに何か</a>
　　　　　　　　<div　class="dropdown-divider"></div>
　　　　　　　　<a　class="dropdown-item" href="#">分離リンク</a>
	　　</div>
	</div>
<br><br><br>
	<!--　スプリットドロップレフトボタン　-->
	<div　class="btn-グループドロップレフト">
	　　<button　type="button"　class="btn　btn-secondary">
		スプリットドロップレフト
	　　</button>
	　　<button　type="button"　class="btn　btn-secondary ドロップダウン-toggle　dropdown-toggle-split"　data-toggle="dropdown"　aria-haspopup="true"　aria-expanded="false">
		<span class="sr-only">ドロップレフト切り替え</span>
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　ドロップダウンメニューのリンク　-->
		<a　class="dropdown-item" href="#">アクション</a>
　　　　　　　　<a　class="dropdown-item" href="#">別のアクション</a>
　　　　　　　　<a　class="dropdown-item" href="#">ここに何か</a>
　　　　　　　　<div　class="dropdown-divider"></div>
　　　　　　　　<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">
　　　　<button　type="button"　class="btn　btn-primary">プライマリ</button>
　　　　<button　type="button"　class="btn　btn-primary ドロップダウン-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">リンク　1</a>
　　　　　　<a　class="dropdown-item"　href="#">リンク　2</a>
　　　　</div>
　　</div>
　　
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-secondary">サブシクリアリー</button>
　　　　<button　type="button"　class="btn　btn-secondary ドロップダウン-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">リンク　1</a>
　　　　　　<a　class="dropdown-item"　href="#">リンク　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-success">成功</button>
　　　　<button　type="button"　class="btn　btn-success ドロップダウン-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">リンク　1</a>
　　　　　　<a　class="dropdown-item"　href="#">リンク　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-info">情報</button>
　　　　<button　type="button"　class="btn　btn-info　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">リンク　1</a>
　　　　　　<a　class="dropdown-item"　href="#">リンク　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-warning">警告</button>
　　　　<button　type="button"　class="btn　btn-warning　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">リンク　1</a>
　　　　　　<a　class="dropdown-item"　href="#">リンク　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-danger">危険</button>
　　　　<button　type="button"　class="btn　btn-danger　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">リンク　1</a>
　　　　　　<a　class="dropdown-item"　href="#">リンク　2</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通りです:

Bootstrap4 フラップ Bootstrap4 カード