ナビゲーションバー
ナビゲーションバーは、ページの上部に配置されたナビゲーションヘッダであります：
Bootstrap 、ナビゲーションバーは、拡張したり折りたたんだり、画面サイズに応じてすることができます。
標準のナビゲーションバーは使用して作成された<nav class="navbar navbar-default">
次の例では、ページの上部にナビゲーションバーを追加する方法を示しています。
例
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
»それを自分で試してみてください このページ上のすべての例は、小さな画面上で場所を取りすぎるナビゲーションバーが（ただし、ナビゲーションバーは、大画面で一つの行になります-ので、表示されますBootstrap応答します）。 （小さな画面での）この問題は、このページの最後の例で解決されます。
倒立ナビゲーションバー
デフォルトのナビゲーションバーのスタイルが気に入らない場合、 Bootstrap 、代替、黒のナビゲーションバーを提供しています。
ただ、変更.navbar-defaultにクラスを.navbar-inverse ：
例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
»それを自分で試してみてください 修正されたナビゲーションバー
ナビゲーションバーは、トップで、またはページの下部に固定することができます。
固定ナビゲーションバーには、ページスクロールの独立した固定位置（上または下）に表示のまま。
.navbar-fixed-topクラスでは、最上部に固定されたナビゲーションバーを行います。
例
<nav class="navbar navbar-inverse
navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav> »それを自分で試してみてください .navbar-fixed-bottomクラスは、下部のナビゲーションバーの滞在になります：
例
<nav class="navbar navbar-inverse
navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav> »それを自分で試してみてください ドロップダウンでナビゲーションバー
ナビゲーションバーはまた、ドロップダウンメニューを保持することができます。
次の例では、「1ページ」ボタンのドロップダウンメニューを追加します。
例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Page
1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Page
1-1</a></li>
<li><a href="#">Page
1-2</a></li>
<li><a href="#">Page
1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav> »それを自分で試してみてください 右揃えナビゲーションバー
.navbar-rightクラスは右揃えナビゲーションバーのボタンに使用されます。
次の例では、ナビゲーションバーの右側にある「サインアップ」ボタンと「ログイン」ボタンを挿入します。 我々はまた、2つの新しいボタンのそれぞれにglyphiconを追加します。
例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav
navbar-right">
<li><a href="#"><span
class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</nav> »それを自分で試してみてください ナビゲーションバーを折りたたみ
ナビゲーションバーは、小さな画面上で場所を取りすぎます。
私たちは、ナビゲーションバーを非表示にする必要があります。 それが必要なときにのみそれを示します。
次の例では、ナビゲーションバーには、右上にあるボタンに置き換えられます。 ボタンがクリックされたときのみ、ナビゲーションバーが表示されます。
例
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav
navbar-right">
<li><a href="#"><span
class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</div>
</nav> »それを自分で試してみてください