Bootstrap ナビゲーションバーについて1

Facebook にシェア
Pocket
LINEで送る
このエントリーを Google ブックマーク に追加

Bootstrapといったらナビゲーションバーと思っているのは私だけでしょうか。

シンプルなナビゲーションバーを設置する

以下の様なソースコードでナビゲーションバーを設置できる。

<!-- ナビゲーションバー -->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- ヘッダ情報 -->
        <div class="navbar-header">
            <a class="navbar-brand">ナビゲーションバー</a>
        </div>
        <!-- リストの配置 -->
        <ul class="nav navbar-nav">
            <li class="active">
              <a href="#">
                リスト1
              </a>
            </li>
            <li>
              <a href="#">
                リスト2
              </a>
            </li>
            <li>
              <a href="#">
                リスト3
              </a>
            </li>
        </ul>
          <!-- お問い合わせボタン -->
        <div class="pull-right">
          <button type="button" class="btn btn-success navbar-btn">
              <span class="glyphicon glyphicon-envelope">
                お問い合わせ
              </span>
          </button>
        </div>
    </div>
</nav>

 

大雑把な解説

<nav class="navbar navbar-default">

ナビゲーションバーを使うことの宣言。

    <div class="container-fluid">

ウィンドウサイズに応じてナビゲーションバーのサイズを流動的に変えたい場合の宣言。
固定にしたい場合は class=”container” とすればいい。

        <div class="navbar-header">
            <a class="navbar-brand">ナビゲーションバー</a>
        </div>

タイトル部分にしたいときに記述する。

        <ul class="nav navbar-nav">
            <li class="active">
              <a href="#">
                リスト1
              </a>
            </li>
            <li>
              <a href="#">
                リスト2
              </a>
            </li>
            <li>
              <a href="#">
                リスト3
              </a>
            </li>
        </ul>

ナビゲーションバー上にリンクを横並びに載せたいときに記述。
liタグで追加していく。

        <div class="pull-right">

右寄せにしたい部分に指定。

          <button type="button" class="btn btn-success navbar-btn">
              <span class="glyphicon glyphicon-envelope">
                お問い合わせ
              </span>
          </button>

ボタンの設置と、ボタン内にアイコンを設置して文字を挿入。

気が向いたら引き続きナビゲーションバーに関して更新していく予定。

Follow me!

コメントを残す

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