Bootstrap基本教程

Bootstrapプラグイン

Bootstrap ナビゲーション要素

この章では、Bootstrapが提供するナビゲーション要素を定義するためのオプションについて説明します。これらは同じタグとベースクラスを使用しています .nav。Bootstrapは、共有タグと状態のヘルパークラスも提供しています。修飾されたclassを変更することで、異なるスタイル間で切り替えることができます。

テーブルナビゲーションまたはタグ

タグ式のナビゲーションメニューを作成する：

class を持つ .nav の無効リストを開始します。
class を追加 .nav-tabs。

以下の例を参照してください：

オンラインサンプル

例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　例　-　<p>タブ型のナビゲーションメニュー</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>タブ型のナビゲーションメニュー</p>
<ul　class="nav　nav-tabs">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li><a　href="#">Java</a></li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>

テストをしてみる‹/›

以下の結果が表示されます：

カプセル型のナビゲーションメニュー

基本的なカプセル型ナビゲーションメニュー

タブをカプセルのスタイルに変更する必要がある場合は、 .nav-pills に置き換えると .nav-tabs で十分です。他の手順は上記と同じです。

以下の例を参照してください：

オンラインサンプル

例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　例　-　<p>基本的なカプセル型ナビゲーションメニュー</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>基本的なカプセル型ナビゲーションメニュー</p>
<ul　class="nav　nav-pills">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li><a　href="#">Java</a></li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>

テストをしてみる‹/›

以下の結果が表示されます：

垂直のカプセル型ナビゲーションメニュー

を使用して .nav、.nav-pills と同時に class .nav-stacked、カプセルを垂直に積み重ねます。

以下の例を参照してください：

オンラインサンプル

例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　例　-　<p>垂直のカプセル型ナビゲーションメニュー</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>垂直のカプセル型ナビゲーションメニュー</p>
<ul　class="nav　nav-pills　nav-stacked">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li><a　href="#">Java</a></li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>

テストをしてみる‹/›

以下の結果が表示されます：

中央寄せのナビゲーション

スクリーン幅が 768pxの場合、 .nav、.nav-tabs を使用して .nav、.nav-pills と同時に class .nav-justified、タブやカプセル型ナビゲーションメニューが親要素と同じ幅になるようにします。より小さいスクリーンでは、ナビゲーションリンクが積み重なります。

以下の例を参照してください：

オンラインサンプル

例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　例　-　<p>中央寄せのナビゲーション要素</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>中央寄せのナビゲーション要素</p>
<ul　class="nav　nav-pills　nav-justified">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li><a　href="#">Java</a></li>
	<li><a　href="#">PHP</a></li>
</ul><br><br><br>
<ul　class="nav　nav-tabs　nav-justified">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li><a　href="#">Java</a></li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>

テストをしてみる‹/›

以下の結果が表示されます：

無効リンク

各 .nav classが追加されると、 .disabled classが追加されると、灰色のリンクが作成され、リンクの :hover 状態は以下の例を参照してください：

オンラインサンプル

例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　例　-　<p>ナビゲーション要素の無効リンク</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>ナビゲーション要素の無効リンク</p>
<ul　class="nav　nav-pills">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li　class="disabled"><a　href="#">iOS（無効リンク）</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li><a　href="#">Java</a></li>
	<li><a　href="#">PHP</a></li>
</ul><br><br>
<ul　class="nav　nav-tabs">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li　　class="disabled"><a　href="#">VB.Net（無効リンク）</a></li>
	<li><a　href="#">Java</a></li>
	<li><a　href="#">PHP</a></li>
</ul>	
</body>
</html>

テストをしてみる‹/›

以下の結果が表示されます：

このclassは<a>の外観のみを変更し、機能は変更しません。ここでは、カスタムJavaScriptを使用してリンクを無効にする必要があります。

ドロップダウンメニュー

ナビゲーションメニューとドロップダウンメニューは似た構文を使用します。デフォルトでは、リスト項目のアンカーとデータ属性が協力して、 .dropdown-menu class の無効リスト。

ドロップダウンメニュー付きのタブ

タブにドロップダウンメニューを追加する手順は以下の通りです：

class を持つ .nav の無効リストを開始します。
class を追加 .nav-tabs。
ドロップダウンメニュー付きの .dropdown-menu class の無効リスト。

オンラインサンプル

例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　例　-　<p>ドロップダウンメニュー付きのタブ</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>ドロップダウンメニュー付きのタブ</p>
<ul　class="nav　nav-tabs">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li　class="dropdown">
		<a　class="dropdown-toggle"　data-toggle="dropdown"　href="#">
			Java　<span　class="caret"></span>
		</a>
		<ul　class="dropdown-menu">
			<li><a　href="#">Swing</a></li>
			<li><a　href="#">jMeter</a></li>
			<li><a　href="#">EJB</a></li>
			<li　class="divider"></li>
			<li><a　href="#">分離のリンク</a></li>
		</ul>
	</li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>

テストをしてみる‹/›

以下の結果が表示されます：

ドロップダウンメニュー付きのタブ

ステップは、ドロップダウンメニュー付きのタブを作成するステップと同じですが、 .nav-tabs class を .nav-pills、以下の例を参照してください：

オンラインサンプル

例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　例　-　下拉メニュー付きのボタンスタイルの胶囊</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>下拉メニュー付きのボタンスタイルの胶囊</p>
<ul　class="nav　nav-pills">
	<li　class="active"><a　href="#">Home</a></li>
	<li><a　href="#">SVN</a></li>
	<li><a　href="#">iOS</a></li>
	<li><a　href="#">VB.Net</a></li>
	<li　class="dropdown">
		<a　class="dropdown-toggle"　data-toggle="dropdown"　href="#">
			Java　<span　class="caret"></span>
		</a>
		<ul　class="dropdown-menu">
			<li><a　href="#">Swing</a></li>
			<li><a　href="#">jMeter</a></li>
			<li><a　href="#">EJB</a></li>
			<li　class="divider"></li>
			<li><a　href="#">分離のリンク</a></li>
		</ul>
	</li>
	<li><a　href="#">PHP</a></li>
</ul>
</body>
</html>

テストをしてみる‹/›

以下の結果が表示されます：

さらに多くのナビゲーション要素コンポーネントの例

タブとボタンスタイルのタブ

クラス	説明	例
.nav nav-tabs	タブ	試してみてください
.nav nav-pills	ボタンスタイルのタブ	試してみてください
.nav nav-pills nav-stacked	垂直方向にスタック配置されたボタンスタイルのタブ	試してみてください
.nav-justified	両端揃えのタブ、大きさが 768pxのスクリーン上、.navを通じて-justified クラスを使うと、タブやボタンスタイルのタブを等幅に簡単に設定できます。小画面では、ナビゲーションリンクがスタックスタイルで表示されます。	試してみてください
.disabled	無効なタブ	試してみてください
タグ追加下拉メニュー		試してみてください
ドロップダウンメニュー付きのキャプセルタブ		試してみてください
.tab-content	と .tab-pane および data-toggle="tab" (data-toggle="pill" )と一緒に使用して、タブの切り替えに応じてタブに対応する内容を変更する設定を行います	試してみてください
.tab-pane	と .tab-content および data-toggle="tab" (data-toggle="pill")と一緒に使用して、タブの切り替えに応じてタブに対応する内容を変更する設定を行います	試してみてください

Bootstrap ナビゲーションバー Bootstrap インプットグループ