Bootstrap3のNavbarはグローバルナビゲーション部分に使える大変便利なコンポーネント。デフォルトのシンプルなデザインでも使えますが、CSSをカスタマイズすればどんなデザインにでも変更できます。
Navbarはレスポンシブ対応で、スマートフォンサイズになったとき開閉ボタンを押すことでメニューを閉じたり開いたり出来ます。
このページではBootstrap3のグローバルナビゲーションである、Navbarコンポーネントの簡単な使い方を紹介します。
Bootstrap3のNavbarの使い方
Navbarのコンテナとパーツ
Navbarのコードは公式ドキュメントのサンプルを見るとすごく長いので、何が何だか分からなくなるかもしれません。まずはコンテナ(入れ物)とパーツに分けてみるとわかりやすいかもしれません。
Navbarのコンテナ部分は、全体を囲む.navbar
、ロゴを入れる.navbar-header
、メニューやフォームを入れる.navbar-collapse
の3つでできてます。また、Navbarのスタイルはdefault
とinverse
の2つが用意されているのでデザインに応じて使い分けるようにしましょう。
.navbar-collapse
はスマホ画面で折りたたむことができます。折りたたむ場合はjavascriptのcollapse
が必要なのでbootstrap.js
を読み込んでおくようにしましょう。
Class名 | 概要 |
---|---|
.navbar.navbar-default |
navbarをデフォルトスタイルで作成 |
.navbar.navbar-inverse |
navbarを黒いスタイルで作成 |
.navbar-header |
navbarのヘッダー、モバイルサイズでも表示 |
.collapse.navbar-collapse |
navbarのボディ、モバイルサイズで閉じられる |
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<!-- ここにヘッダーパーツを入れる -->
</div>
<div class="collapse navbar-collapse" id="navbar-collapse1">
<!-- ここにボディパーツを入れる -->
</div>
</div>
</nav>
Navbarのパーツ
パーツは大きく分けて、ヘッダー用パーツとボディー用パーツがあります。それぞれのパーツは入れる場所が決まってるので間違えないように注意。
Class名 | 概要 |
---|---|
.navbar-toggle |
ヘッダー用パーツ、collapseの開閉ボタンを表示 |
.navbar-brand |
ヘッダー用パーツ、サイトタイトルやロゴを表示 |
ul.nav.navbar-nav |
ナビゲーションメニューを表示 |
form.navbar-form |
フォームを表示 |
.navbar-btn |
ボタンを表示 |
.navbar-text |
テキストを表示 |
.navbar-link |
リンクを表示 |
<!-- toggle -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- brand -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- navbar-nav -->
<div class="collapse navbar-collapse" id="navbar-collapse1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</li>
</ul>
</div>
<!-- navbar-form -->
<div class="collapse navbar-collapse" id="navbar-collapse1">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- navbar-btn -->
<div class="collapse navbar-collapse" id="navbar-collapse1">
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
</div>
<!-- navbar-text -->
<div class="collapse navbar-collapse" id="navbar-collapse1">
<p class="navbar-text">Signed in as Mark Otto</p>
</div>
<!-- navbar-link -->
<div class="collapse navbar-collapse" id="navbar-collapse1">
<p class="navbar-text"><a href="#" class="navbar-link">link</a></p>
</div>
Navbarのポジション
最後はNavbarのポジション。Navbar全体を上下にぴったりくっつけたり、画面幅いっぱいの表示にしたりできます。また、.collapse
内のパーツを左右に寄せることもできるので、デザインに合わせて使い分けることができます。
Class名 | 概要 |
---|---|
.navbar-fixed-top |
画面トップにくっつくnavbarを表示 |
.navbar-fixed-bottom |
画面下にくっつくnavbarを表示 |
.navbar-static-top |
横幅いっぱいのnavbarを表示 |
.navbar-left |
ボディパーツを左揃えにする |
.navbar-right |
ボディパーツを右揃えにする |
<!-- ボディーパーツのポジション -->
<div class="collapse navbar-collapse" id="navbar-collapse1">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- navbarのポジション -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>