ブートストラップ ドロップダウン メニュー


この章では、Bootstrap ドロップダウン メニューに焦点を当てます。ドロップダウン メニューは切り替え可能で、リンクをリスト形式で表示するコンテキスト メニューです。これは、Dropdown JavaScript プラグイン と対話することによって実現されます。

次のメニューを使用する必要がある場合は、クラス .dropdown にドロップダウン メニューを追加するだけです。以下の例は、基本的なドロップダウン メニューを示しています:

<!DOCTYPE html>
<html>
<head>
<title>ブートストラップ 实例 - 下拉菜单（ドロップダウン）</title>
<link href="http://libs.baidu .com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min .js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>< /head>
<body>

<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown" >
主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> ;
<li role="プレゼンテーション">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role ="プレゼンテーション">
<a role="menuitem" tabindex="-1" href="#">数架挖調査</a>
</li>
<li role="プレゼンテーション" >
<a role="menuitem" tabindex="-1" href="#">
データ通信/网络
</a>
</li>
& lt;li role="プレゼンテーション" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接< /a>
</li>
</ul>
</div>


</body>
</html>

インスタンス

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 下拉菜单（Dropdowns）</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
			data-toggle="dropdown">
		主题
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
		</li>
	</ul>
</div>

</body>
</html>

実行中のインスタンス»

「実行」をクリックします「例」ボタンをクリックしてオンライン例を表示します

オプション

配置

クラス.pull-rightを.dropdown-menuに追加して、ドロップダウンメニューを右に配置します。次の例はこれを示しています:

<!DOCTYPE html>
<html>
<head>
<title>ブートストラップ 实例 - 向右对齐下拉菜单</title>
<link href="http://libs.baidu .com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min .js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>< /head>
<body>

<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown" >主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu"
aria-labelledby=" dropdownMenu1">
<li role="プレゼンテーション">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
< ;li role="プレゼンテーション">
<a role="menuitem" tabindex="-1" href="#">数据挖調査</a>
</li>
<li role= "プレゼンテーション">
<a role="menuitem" tabindex="-1" href="#">
データ通信/网络
</a>
</li>
  • <li role="プレゼンテーション">
             <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
    </li>
    </ul>
    </div>


    </body>
    </html>

    • インスタンス

    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 向右对齐下拉菜单</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
			data-toggle="dropdown">主题
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu pull-right" role="menu" 
		aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
		</li>
	</ul>
</div>


</body>
</html>

    実行中のインスタンス»

    「実行」をクリックします「例」ボタンをクリックしてオンライン例を表示します

    Header

    クラスdropdown-headerを使用して、ドロップダウンメニューのラベル領域にヘッダーを追加できます。次の例はこれを示しています:

    <!DOCTYPE html>
    <html>
    <head>
    <title>ブートストラップ 实例 - 下拉菜单标题</title>
    <link href="http://libs.baidu.com /bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js "></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head> ;
    <body>

    <div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
    data-toggle="dropdown">
    主题
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="プレゼンテーション" class="dropdown-header">下拉菜单标题</li>
    <li role="プレゼンテーション" >
    <a role="menuitem" tabindex="-1 " href="#">Java</a>
    </li>
    <li role="プレゼンテーション">
    <a role="menuitem" tabindex="-1" href="#" >データベース挖調査</a>
    </li>
    <li role="プレゼンテーション">
    <a role="menuitem" tabindex="-1" href="#">
    データ通信/网络
    </a>
    </li>
    <li role="presentation" class="divider"></li>
          <li role="presentation" class="dropdown-header">下拉菜单标题</li>
          <li role="presentation">
             <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
    </li>
    </ul>
    </div>


    </body>
    </html>

    インスタンス

    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 下拉菜单标题</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
			data-toggle="dropdown">
		主题
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation" class="dropdown-header">下拉菜单标题</li>
		<li role="presentation" >
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">
				数据通信/网络
			</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation" class="dropdown-header">下拉菜单标题</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
		</li>
	</ul>
</div>

</body>
</html>

    実行中のインスタンス»

    「実行」をクリックします「例」ボタンをクリックしてオンライン例を表示します