Bootstrapを使ってみる。グローバルナビゲーションバー編(Navbar)


Bootstrapを使ってみよう。グローバルナビゲーションバー編

前回まででBootstrapを使う準備ができているので、今回はグローバルナビゲーションバー部分を付けてみたい。
とくに難しいことはなくBootstrapのサイトに用意されたHTMLタグを貼り付けるだけでカタチは出来上がるはず。
また、Bootstrapには最初からサイト全体を整えるテンプレートタグも用意されいるが、ひとつひとつ組み立てていきたいと思う。
Bootstrap
*この記事はHTML・CSSの基本知識がある前提での備忘録のため説明に至らない部分があります、あしからず。

Bootstrapのサイトからコピー&ペーストする

Bootstrapのサイトの上部メニューよりGetting startedを開く

Bootstrap
ページを下にスクロールすると「examples」の項目内に「Navbar」があるので今回はこれを使ってみたい。
(Getting started画面右サイドメニューから「examples」の項目内に「Navbar」でもOK)
Bootstrap


Navbarの画像をクリックするとサインプルのサイトが表示される。
画面を右クリックして「ページのソースを表示」をクリック。
Bootstrap
ソース画面
Bootstrap
この中のナビゲーション部分
navから/navタグまでをコピーする。
ナビゲーション部分のタグを記載。

これをこのままコピーしてサイトに貼り付けてみると・・・

Bootstrap
これだけでレスポンシブに対応したナビゲーションを使うことが出来る。
あとはリストの中などを自分用に変更するだけ。

もう少しわかりやすいものに変更してみた。(主要な部分へのコメントアウト追加)

  • ナビゲーション右サイドの項目を削除。
  • カフェショップを想定したナビゲーションメニューへ変更
  • デザインを黒ベースに変更

コメントアウトした部分の説明

ナビの色

“navbar-default”を”navbar-inverse”で黒色のナビゲーションへ変更。

画面幅に合わせて可変するナビ

スマホ用トグルボタンの設置

ここはこういうものだと覚えてしまおう。
buttonタグでボタンを配置している。([三]のようなボタン)
data-target=”#navbar”でID:navbarを対象に表示・非表示に。
span class=”sr-only”は音声ブラウザを対象にしたクラス。ブラウザには表示はされず、音声ブラウザのみ読み上げの対象となる。
span class=”icon-bar”は[三]のようなボタンの横棒。

ロゴ表示の指定

スマホ用の画面幅が小さいときの表示を非表示にする

ボタンのtargetでも指定したdiv#navbarの中身を非表示にする。
また、初期表示アコーディオンを展開されたままにするには下記inを追加して設定。

ドロップダウンメニューの作成

ここもこういうものだと覚えてしまおう。
“divider”は区切り線。
“dropdown-header”は見出し。

最後にロゴ部分を画像にしたい時の設定。

この記述をしてと解説ありますが、ずれるとの記事も見つけました。
それによると

として、aタグの背景にbackgroundとして画像を表示させると良いらしい。

今回出来たナビゲーション
PC版
Bootstrap


スマホ版
Bootstrap



今回のデモ画面を表示

サイトに余白がありナビゲーションを中央に配置したい場合

divにclass=”container”をつけて囲ってあげればよい。

デモ画面を表示(中央配置)

サイトをスクロールしても上部または下部に固定配置したい場合

上部固定
navのclassに[navbar-fixed-top]をつける。

下部固定
navのclassに[navbar-fixed-bottom]をつける。

上部固定ナビとbodyが重なるので、bodyにpadding-topをつける。
デモ画面を表示(固定配置)

次回はJumbotronでヘッダー部分を作ってみる!


この投稿へのコメント

  1. beginner_n said on 2015年12月3日 at 10:56 AM

    みずかずさん

    ほとんど常連になりつつある、beginner_nです。(^^)v
    ナビメニューの項目 …を増やすと崩れてしまうのですが、メニュー項目を追加できるようにするにはどうしたらいいんでしょう?ナビメニューをコントロールしているのは、bootstrap.min.css なんですが、どこを変えればいいのかわからないです。
    新しくナビ用のCSSを作るべきなのでしょうけど。

    • MizuKazu said on 2015年12月3日 at 10:48 PM

      beginner_nさんこんにちは。

      Bootstrapのnavbarは私も苦手です;
      デフォルトのnavbarだと「.navbar-default」以下となります。
      Bootstrap.min.cssを直接編集するか、または新たにCSSファイルを作成して上書きします。

      簡単にですが、navbarを編集してみましたので参考にしてみて下さい。
      bootstrap.min.cssは編集せず、style.cssを付け加えています。
      http://mizukazu.16mb.com/navbartest/index.html

      navbar均等配置のクラスがBootstrap公式で用意されていますのでそちらも参照してみてください。
      http://getbootstrap.com/examples/justified-nav/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL