ナビゲーションバーは、ページの上部に配置されたナビゲーションヘッダです:
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>
...
Try it Yourself »
このページのすべての例は、小型画面では場所を取りすぎるナビゲーションバーが表示されます (しかし、大型画面でのナビゲーションバーは 1 行になります - 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>
Try it Yourself »
ナビゲーションバーは、ページの上部または下部に固定することができます。
固定ナビゲーションバーは、ページスクロールから独立して、固定位置(上部または下部)に表示されたままになります。
.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>
Try it Yourself »
.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>
Try it Yourself »
ナビゲーションバーには、ドロップダウンメニューも持たせることができます。
次の例は、"Page 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>
Try it Yourself »
.navbar-right
クラスは、右揃えのナビゲーションバーボタンに使用します。
次の例では、ナビゲーションバーの右に "Sign Up" ボタンと "Login" ボタンを挿入します。 また、2 つの新しいボタンにグリフアイコンを追加します:
<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>
</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>
Try it Yourself »
ナビゲーションバーは、小型画面では場所を取りすぎます。
ナビゲーションバーを非表示にして、必要なときにのみ表示する必要があります。
次の例では、ナビゲーションバーは右上隅にあるボタンに置き換えられています。 ボタンがクリックされたときのみ、ナビゲーションバーが表示されます:
<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>
Try it Yourself »
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »