English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 基礎チュートリアル

Bootstrap プラグイン

Bootstrap ナビゲーションバー

ナビゲーションバーは素晴らしい機能で、Bootstrap ウェブサイトの目立った特徴です。ナビゲーションバーはアプリケーションやウェブサイトでナビゲーションヘッダーのレスポンシブな基本コンポーネントとして機能します。ナビゲーションバーはモバイルデバイスのビューポートでは折り畳まれており、利用可能なビューポートの幅が増えると水平に展開します。Bootstrap ナビゲーションバーの核心では、ナビゲーションバーにはサイト名と基本的なナビゲーション定義スタイルが含まれています。

デフォルトのナビゲーションバー

デフォルトのナビゲーションバーを作成する手順は以下の通りです：

  • を <nav> タグに class .navbar、.navbar-default。

  • 上記の要素に role="navigation"を追加することで、アクセス性が向上します。

  • を <div> 要素にタイトル class .navbar-header、内部には class navbar-brand を持つ <a> 要素を追加するだけで、テキストが少し大きく見えます。

  • ナビゲーションバーにリンクを追加するには、シンプルに class .nav、.navbar-nav の無序列表で十分です。

以下の例がその点を示しています：

オンラインサンプル

!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>
<nav　class="navbar　navbar-default"　role="navigation">
	<div　class="container-fluid">
	<div　class="navbar-ヘッダー>
		<a　class="navbar-brand"　href="#">基本チュートリアルウェブ</a>
	</div>
	<div>
		<ul　class="nav　navbar-ナビゲーション>
			<li　class="active"><a　href="#">iOS</a></li>
			<li><a　href="#">SVN</a></li>
			<li　class="dropdown">
				<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">
					Java
					<b　class="caret"></b>
				</a>
				<ul　class="dropdown-メニュー>
					<li><a　href="#">jmeter</a></li>
					<li><a　href="#">EJB</a></li>
					<li><a　href="#">Jasper　Report</a></li>
					<li　class="divider"></li>
					<li><a　href="#">分離されたリンク</a></li>
					<li　class="divider"></li>
					<li><a　href="#">別の分離されたリンク</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>
</body>
</html>
テストを見てみましょう ‹/›

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

レスポンシブなナビゲーションバー

を含まれます。ナビゲーション バーにレスポンシブ 特性を追加するために、折り畳む内容は classを持つ .collapse、.navbar-collapse の<div>内です。折り畳まれたナビゲーション バーは、classを持つ .navbar-toggle 及び2つの- 要素のボタンです。1つ目は data-toggle、JavaScriptがボタンに対して何を行うべきかを教えます。2つ目は data-targetに切り替わります。classを持つ3つの .icon-bar の <span> でハンバーガー ボタンと呼ばれるものを作成します。これらは .nav-collapse <div>内の要素。これらの機能を実現するために、以下を含める必要があります Bootstrap フェールダウン（Collapse）プラグイン。

以下の例がその点を示しています：

!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>
<nav　class="navbar　navbar-default"　role="navigation">
　　　　<div　class="container-fluid">　
　　　　<div　class="navbar-ヘッダー>
　　　　　　　　<button　type="button"　class="navbar-toggle"　data-toggle="collapse"
　　　　　　　　　　　　　　　　data-target="#example-navbar-collapse">
　　　　　　　　　　　　<span　class="sr-only">ナビゲーション 切り替え</span>
　　　　　　　　　　　　<span　class="icon-bar"></span>
　　　　　　　　　　　　<span　class="icon-bar"></span>
　　　　　　　　　　　　<span　class="icon-bar"></span>
　　　　　　　　</button>
　　　　　　　　<a　class="navbar-brand"　href="#">基本のガイド</a>
　　　　</div>
　　　　<div　class="collapse　navbar-collapse"　id="example-navbar-collapse">
　　　　　　　　<ul　class="nav　navbar-ナビゲーション>
　　　　　　　　　　　　<li　class="active"><a　href="#">iOS</a></li>
　　　　　　　　　　　　<li><a　href="#">SVN</a></li>
　　　　　　　　　　　　<li　class="dropdown">
　　　　　　　　　　　　　　　　<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java　<b　class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul　class="dropdown-メニュー>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">Jasper　Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">分離されたリンク</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">別の分離されたリンク</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
　　　　</div></nav>
</body>
</html>
テストを見てみましょう ‹/›

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

ナビゲーション バーの中のボタン

classを使用して .navbar-btn フォーム内にない <button> 元素にボタンを追加し、ボタンはナビゲーション バーで垂直に中央に配置されます。.navbar-btn 可被使用在 <a> と <input> 元素上。

以下に使用しないでください .navbar-nav 内の <a> 元素に使用します .navbar-btn、それは標準のものではありません button class。

以下の例がその点を示しています：

オンラインサンプル

!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>
<nav　class="navbar　navbar-default"　role="navigation">
	<div　class="container-fluid">
　　　　<div　class="navbar-ヘッダー>
　　　　　　　　<a　class="navbar-brand"　href="#">基本チュートリアルウェブ</a>
　　　　</div>
　　　　<div>
　　　　　　　　<form　class="navbar-form　navbar-left"　role="search">
　　　　　　　　　　　　<div　class="form-group">
　　　　　　　　　　　　　　　　<input　type="text"　class="form-control"　placeholder="検索">
　　　　　　　　　　　　</div>
　　　　　　　　　　　　<button　type="submit"　class="btn　btn-default">送信 ボタン</button>
　　　　　　　　</form>
　　　　　　　　<button　type="button"　class="btn　btn-default　navbar-btn">
　　　　　　　　　　　　ナビゲーション バー ボタン
　　　　　　　　</button>
　　　　</div>
	</div>
</nav>
</body>
</html>
テストを見てみましょう ‹/›

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

ナビゲーション バーの中のテキスト

ナビゲーションにテキスト文字列を含めたい場合は、classを使用してください .navbar-text。これは通常 <p> タグと一緒に使用され、適切な先頭と色を確保します。以下の例がその点を示しています：

オンラインサンプル

!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>
<nav　class="navbar　navbar-default"　role="navigation">
	<div　class="container-fluid">　
　　　　<div　class="navbar-ヘッダー>
　　　　　　　　<a　class="navbar-brand"　href="#">基本チュートリアルウェブ</a>
　　　　</div>
　　　　<div>
　　　　　　　　<p　class="navbar-text">w3codebox ユーザー ログイン</p>
　　　　</div>
	</div>
</nav>
</body>
</html>
テストを見てみましょう ‹/›

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

アイコンと組み合わせたナビゲーションリンク

アイコンを使用して通常のナビゲーションバーのコンポーネント内でナビゲーションリンクを使用したい場合は、以下の class を使用してください glyphicon glyphicon-* を使用してアイコンを設定します、詳細は Bootstrap アイコン 、以下の例を参照してください：

オンラインサンプル

!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>
<nav　class="navbar　navbar-default"　role="navigation">
　　<div　class="container-fluid">
　　　　<div　class="navbar-ヘッダー>
　　　　　　<a　class="navbar-brand"　href="#">基本チュートリアルウェブ</a>
　　　　</div>
　　　　<ul　class="nav　navbar-nav　navbar-right">
　　　　　　<li><a　href="#"><span　class="glyphicon　glyphicon-user"></span>　新規登録</a></li>
　　　　　　<li><a　href="#"><span　class="glyphicon　glyphicon-log-in"></span>　ログイン</a></li>
　　　　</ul>
　　</div>
</nav>
</body>
</html>
テストを見てみましょう ‹/›

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

コンポーネントのアライメント方式

ユーティリティークラスを使用して .navbar-left または .navbar-right ナビゲーションバー内の左または右に揃え ナビゲーションリンク、フォーム、ボタン、またはテキスト これらのコンポーネント。これらの class は指定された方向に CSS フロートを追加します。以下の例ではこの点を示しています：

オンラインサンプル

!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>
<nav　class="navbar　navbar-default"　role="navigation">
	<div　class="container-fluid">　
　　　　<div　class="navbar-ヘッダー>
　　　　　　　　<a　class="navbar-brand"　href="#">基本チュートリアルウェブ</a>
　　　　</div>
　　　　<div>
　　　　　　　　<!--左に揃え-->
　　　　　　　　<ul　class="nav　navbar-nav　navbar-left">
　　　　　　　　　　　　<li　class="dropdown">
　　　　　　　　　　　　　　　　<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java
　　　　　　　　　　　　　　　　　　　　<b　class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul　class="dropdown-メニュー>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">Jasper　Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">分離されたリンク</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">別の分離されたリンク</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　　　　　<form　class="navbar-form　navbar-left"　role="search">
　　　　　　　　　　　　<button　type="submit"　class="btn　btn-default">
　　　　　　　　　　　　　　　　左に揃え-送信ボタン
　　　　　　　　　　　　</button>
　　　　　　　　</form>
　　　　　　　　<p　class="navbar-text　navbar-left">左に揃え-テキスト</p>
　　　　　　　　<!--右に揃え-->
　　　　　　　　<ul　class="nav　navbar-nav　navbar-right">
　　　　　　　　　　　　<li　class="dropdown">
　　　　　　　　　　　　　　　　<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java　<b　class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul　class="dropdown-メニュー>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">Jasper　Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">分離されたリンク</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">別の分離されたリンク</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　　　　　<form　class="navbar-form　navbar-right"　role="search">
　　　　　　　　　　　　<button　type="submit"　class="btn　btn-default">
　　　　　　　　　　　　　　　　右に揃え-送信ボタン
　　　　　　　　　　　　</button>
　　　　　　　　</form>
　　　　　　　　<p　class="navbar-text　navbar-right">右に揃え-テキスト</p>
　　　　</div>
	</div>
</nav>
</body>
</html>
テストを見てみましょう ‹/›

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

上部に固定

Bootstrap ナビゲーションバーは動的に位置を調整できます。デフォルトでは、ブロック要素であり、HTML 内の位置に基づいて位置を設定されます。ヘルパークラスを使用すると、ページの上部や下部に配置したり、ページとともにスクロールする静的なナビゲーションバーにすることができます。

ナビゲーションバーをページの上部に固定したい場合は、以下に追加してください .navbar class class を追加 .navbar-fixed-top。以下の例ではこの点を示しています：

ナビゲーションバーがページのメインコンテンツの上部に重ならないようにするためには、<body>タグに少なくとも以下の 50 ピクセルのインセット（padding）があり、インセットの値は必要に応じて設定できます。

オンラインサンプル

!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>
<nav　class="navbar　navbar-default　navbar-fixed-top"　role="navigation">　
　　　　<div　class="container-fluid">　
　　　　<div　class="navbar-ヘッダー>　
　　　　　　　　<a　class="navbar-brand"　href="#">基本チュートリアルウェブ</a>　
　　　　</div>　
　　　　<div>　
　　　　　　　　<ul　class="nav　navbar-ナビゲーション>　
　　　　　　　　　　　　<li　class="active"><a　href="#">iOS</a></li>　
　　　　　　　　　　　　<li><a　href="#">SVN</a></li>　
　　　　　　　　　　　　<li　class="dropdown">　
　　　　　　　　　　　　　　　　<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">　
　　　　　　　　　　　　　　　　　　　　Java　<b　class="caret"></b>　
　　　　　　　　　　　　　　　　</a>　
　　　　　　　　　　　　　　　　<ul　class="dropdown-メニュー>　
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">jmeter</a></li>　
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">EJB</a></li>　
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">Jasper　Report</a></li>　
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>　
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">分離されたリンク</a></li>　
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>　
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">別の分離されたリンク</a></li>　
　　　　　　　　　　　　　　　　</ul>　
　　　　　　　　　　　　</li>　
　　　　　　　　</ul>　
　　　　</div>　
　　　　</div>　
</nav>
</body>
</html>
テストを見てみましょう ‹/›

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

下部に固定

ナビゲーションバーをページの下部に固定したい場合は、以下に追加してください .navbar class class を追加 .navbar-fixed-bottom。以下の例ではこの点を示しています：

オンラインサンプル

!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>
<nav　class="navbar　navbar-default　navbar-fixed-bottom"　role="navigation">
	<div　class="container-fluid">　
　　　　<div　class="navbar-ヘッダー>
　　　　　　　　<a　class="navbar-brand"　href="#">基本チュートリアルウェブ</a>
　　　　</div>
　　　　<div>
　　　　　　　　<ul　class="nav　navbar-ナビゲーション>
　　　　　　　　　　　　<li　class="active"><a　href="#">iOS</a></li>
　　　　　　　　　　　　<li><a　href="#">SVN</a></li>
　　　　　　　　　　　　<li　class="dropdown">
　　　　　　　　　　　　　　　　<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java　<b　class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul　class="dropdown-メニュー>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">Jasper　Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">分離されたリンク</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">別の分離されたリンク</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
	</div>
</nav>
</body>
</html>
テストを見てみましょう ‹/›

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

静的なトップ

ページとともにスクロールするナビゲーションバーを作成するには、追加してください .navbar-static-top class。この class は <body> に内側余白（padding）を追加する必要はありません。

オンラインサンプル

!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>
<nav　class="navbar　navbar-default　navbar-static-top"　role="navigation">
	<div　class="container-fluid">　
　　　　<div　class="navbar-ヘッダー>
　　　　　　　　<a　class="navbar-brand"　href="#">基本チュートリアルウェブ</a>
　　　　</div>
　　　　<div>
　　　　　　　　<ul　class="nav　navbar-ナビゲーション>
　　　　　　　　　　　　<li　class="active"><a　href="#">iOS</a></li>
　　　　　　　　　　　　<li><a　href="#">SVN</a></li>
　　　　　　　　　　　　<li　class="dropdown">
　　　　　　　　　　　　　　　　<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java　<b　class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul　class="dropdown-メニュー>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">Jasper　Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">分離されたリンク</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">別の分離されたリンク</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
	</div>
</nav>
</body>
</html>
テストを見てみましょう ‹/›

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

逆転のナビゲーションバー

逆転のナビゲーションバーを作成するには、ただ以下に .navbar class を追加してください。 .navbar-inverse class を追加してください。以下の例を参照してください：

ナビゲーションバーがページのメインコンテンツの上部に重ならないようにするためには、<body>タグに少なくとも以下の 50 ピクセルのインセット（padding）があり、インセットの値は必要に応じて設定できます。

オンラインサンプル

!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>
<nav　class="navbar　navbar-inverse"　role="navigation">
	<div　class="container-fluid">
　　　　<div　class="navbar-ヘッダー>
　　　　　　　　<a　class="navbar-brand"　href="#">基本チュートリアルウェブ</a>
　　　　</div>
　　　　<div>
　　　　　　　　<ul　class="nav　navbar-ナビゲーション>
　　　　　　　　　　　　<li　class="active"><a　href="#">iOS</a></li>
　　　　　　　　　　　　<li><a　href="#">SVN</a></li>
　　　　　　　　　　　　<li　class="dropdown">
　　　　　　　　　　　　　　　　<a　href="#"　class="dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　　　　　　　　　　　　　Java　<b　class="caret"></b>
　　　　　　　　　　　　　　　　</a>
　　　　　　　　　　　　　　　　<ul　class="dropdown-メニュー>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">jmeter</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">EJB</a></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">Jasper　Report</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">分離されたリンク</a></li>
　　　　　　　　　　　　　　　　　　　　<li　class="divider"></li>
　　　　　　　　　　　　　　　　　　　　<li><a　href="#">別の分離されたリンク</a></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
	</div>
</nav>
</body>
</html>
テストを見てみましょう ‹/›

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

Bootstrap パンくずリストナビゲーションBootstrap ナビゲーション要素