Symfoware

Symfowareについての考察blog

プログラマのためのBootstrap入門 その6 ナビゲーションバー

Bootstrapの使い方を勉強中です。
プログラマのためのBootstrap入門 その5 タブ

今回はナビゲーションバーについて調べてみます。

こちらを参考にしました。
http://getbootstrap.com/components/


ナビゲージョンバーの基本形



ナビゲーションバーを作成するにはお作法があるようです。

html5で追加された「nav」タグを使用する。
navの中にdivを定義。クラス名を「container-fluid」とする。

divの中にさらにdivを定義。
「navbar-header」でサイトのタイトルを表示する領域を定義。
「collapse navbar-collapse」でコンテンツへのリンクを定義。

最小限のサンプルはこうなりました。

439_01.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <nav class="navbar navbar-default" role="navigation">
  13.     
  14.      <div class="container-fluid">
  15.         <div class="navbar-header">
  16.          <a class="navbar-brand" href="#">サイト名</a>
  17.         </div>
  18.         <div class="collapse navbar-collapse">
  19.          <ul class="nav navbar-nav">
  20.             <li class="active"><a href="#">コンテンツ1</a></li>
  21.             <li><a href="#">コンテンツ2</a></li>
  22.             <li><a href="#">コンテンツ3</a></li>
  23.          </ul>
  24.         </div><!-- /.navbar-collapse -->
  25.         
  26.      </div><!-- /.container-fluid -->
  27.     </nav>
  28.     
  29.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  30.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  31. </body>
  32. </html>








モバイル対応



上記のナビゲーションバー、通常のPCで使用するには問題ありません。
しかし、画面サイズを小さくすると、コンテンツへのリンクが消えてしまいます。

439_02.png


画面サイズが狭まると、右上にボタンを表示。
ボタンをクリック(タップ)するとコンテンツリンクを表示。

ということが行えるようにします。

PCでの表示に変更はありません。
モバイルサイズで表示した時、ボタンが表示されます。

439_03.png

クリックすると、メニューが表示されます。

439_04.png


ボタンの「data-tar-get」にコンテンツメニューのdivのidを指定すること。
こうしないと、ボタンを押しても何も表示されません。

icon-barを指定したspanが3つあります。
これでボタンの3本線を表現しています。


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <nav class="navbar navbar-default" role="navigation">
  13.     
  14.      <div class="container-fluid">
  15.         <div class="navbar-header">
  16.          <!-- 画面サイズが小さい時に表示されるボタン -->
  17.          <!-- data-targetにollapseを指定したdivのidを指定すること -->
  18.          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-id">
  19.             <span class="sr-only">Toggle navigation</span>
  20.             <span class="icon-bar"></span>
  21.             <span class="icon-bar"></span>
  22.             <span class="icon-bar"></span>
  23.          </button>
  24.          <a class="navbar-brand" href="#">サイト名</a>
  25.         </div>
  26.         <!-- idは、上記ボタンのdata-targetに指定したものと揃えること -->
  27.         <div class="collapse navbar-collapse" id="collapse-id">
  28.          <ul class="nav navbar-nav">
  29.             <li class="active"><a href="#">コンテンツ1</a></li>
  30.             <li><a href="#">コンテンツ2</a></li>
  31.             <li><a href="#">コンテンツ3</a></li>
  32.          </ul>
  33.         </div><!-- /.navbar-collapse -->
  34.         
  35.      </div><!-- /.container-fluid -->
  36.     </nav>
  37.     
  38.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  39.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  40. </body>
  41. </html>







検索フォーム



ナビゲーションバーに検索フォームを配置してみます。

439_05.png

439_06.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <nav class="navbar navbar-default" role="navigation">
  13.     
  14.      <div class="container-fluid">
  15.         <div class="navbar-header">
  16.          <!-- 画面サイズが小さい時に表示されるボタン -->
  17.          <!-- data-targetにollapseを指定したdivのidを指定すること -->
  18.          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-id">
  19.             <span class="sr-only">Toggle navigation</span>
  20.             <span class="icon-bar"></span>
  21.             <span class="icon-bar"></span>
  22.             <span class="icon-bar"></span>
  23.          </button>
  24.          <a class="navbar-brand" href="#">サイト名</a>
  25.         </div>
  26.         <!-- idは、上記ボタンのdata-targetに指定したものと揃えること -->
  27.         <div class="collapse navbar-collapse" id="collapse-id">
  28.          <form class="navbar-form navbar-left" role="search">
  29.             <div class="form-group">
  30.              <input type="text" class="form-control" placeholder="キーワード">
  31.             </div>
  32.             <button type="submit" class="btn btn-default">検索</button>
  33.          </form>
  34.         </div><!-- /.navbar-collapse -->
  35.         
  36.      </div><!-- /.container-fluid -->
  37.     </nav>
  38.     
  39.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  40.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  41. </body>
  42. </html>








サインインボタン



ログインだとか、サインインのボタンを配置してみます。

439_07.png

439_08.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <nav class="navbar navbar-default" role="navigation">
  13.     
  14.      <div class="container-fluid">
  15.         <div class="navbar-header">
  16.          <!-- 画面サイズが小さい時に表示されるボタン -->
  17.          <!-- data-targetにollapseを指定したdivのidを指定すること -->
  18.          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-id">
  19.             <span class="sr-only">Toggle navigation</span>
  20.             <span class="icon-bar"></span>
  21.             <span class="icon-bar"></span>
  22.             <span class="icon-bar"></span>
  23.          </button>
  24.          <a class="navbar-brand" href="#">サイト名</a>
  25.         </div>
  26.         <!-- idは、上記ボタンのdata-targetに指定したものと揃えること -->
  27.         <div class="collapse navbar-collapse" id="collapse-id">
  28.          <button type="button" class="btn btn-default navbar-btn">ログイン</button>
  29.         </div><!-- /.navbar-collapse -->
  30.         
  31.      </div><!-- /.container-fluid -->
  32.     </nav>
  33.     
  34.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  35.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  36. </body>
  37. </html>








説明文のテキスト



サイトの説明など、テキストを配置してみます。

439_09.png

439_10.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <nav class="navbar navbar-default" role="navigation">
  13.     
  14.      <div class="container-fluid">
  15.         <div class="navbar-header">
  16.          <!-- 画面サイズが小さい時に表示されるボタン -->
  17.          <!-- data-targetにollapseを指定したdivのidを指定すること -->
  18.          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-id">
  19.             <span class="sr-only">Toggle navigation</span>
  20.             <span class="icon-bar"></span>
  21.             <span class="icon-bar"></span>
  22.             <span class="icon-bar"></span>
  23.          </button>
  24.          <a class="navbar-brand" href="#">サイト名</a>
  25.         </div>
  26.         <!-- idは、上記ボタンのdata-targetに指定したものと揃えること -->
  27.         <div class="collapse navbar-collapse" id="collapse-id">
  28.          <p class="navbar-text">Symfowareでログインしています。</p>
  29.         </div><!-- /.navbar-collapse -->
  30.         
  31.      </div><!-- /.container-fluid -->
  32.     </nav>
  33.     
  34.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  35.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  36. </body>
  37. </html>








メニューにしたくないリンクの配置



ログインユーザー名を詳細表示へのリンクにしたい場合のパターン。

439_11.png

439_12.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <nav class="navbar navbar-default" role="navigation">
  13.     
  14.      <div class="container-fluid">
  15.         <div class="navbar-header">
  16.          <!-- 画面サイズが小さい時に表示されるボタン -->
  17.          <!-- data-targetにollapseを指定したdivのidを指定すること -->
  18.          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-id">
  19.             <span class="sr-only">Toggle navigation</span>
  20.             <span class="icon-bar"></span>
  21.             <span class="icon-bar"></span>
  22.             <span class="icon-bar"></span>
  23.          </button>
  24.          <a class="navbar-brand" href="#">サイト名</a>
  25.         </div>
  26.         <!-- idは、上記ボタンのdata-targetに指定したものと揃えること -->
  27.         <div class="collapse navbar-collapse" id="collapse-id">
  28.          <ul class="nav navbar-nav">
  29.             <li class="active"><a href="#">コンテンツ1</a></li>
  30.             <li><a href="#">コンテンツ2</a></li>
  31.             <li><a href="#">コンテンツ3</a></li>
  32.          </ul>
  33.         
  34.          <!-- 右寄せ表示 ここにリンクを配置 -->
  35.          <p class="navbar-text navbar-right"><a href="#" class="navbar-link">Symfo</a>でログインしています</p>
  36.         </div><!-- /.navbar-collapse -->
  37.         
  38.      </div><!-- /.container-fluid -->
  39.     </nav>
  40.     
  41.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  42.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  43. </body>
  44. </html>







常にメニューを上に表示



メニューはスクロールしても上に表示して欲しい場合があります。
navタグに「navbar-fixed-top」を指定すれば、常に画面上に表示されるようになります。

439_13.png

439_14.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <!-- navbar-fixed-topを指定して、常に最上部に表示 -->
  13.     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  14.     
  15.      <div class="container-fluid">
  16.         <div class="navbar-header">
  17.          <!-- 画面サイズが小さい時に表示されるボタン -->
  18.          <!-- data-targetにollapseを指定したdivのidを指定すること -->
  19.          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-id">
  20.             <span class="sr-only">Toggle navigation</span>
  21.             <span class="icon-bar"></span>
  22.             <span class="icon-bar"></span>
  23.             <span class="icon-bar"></span>
  24.          </button>
  25.          <a class="navbar-brand" href="#">サイト名</a>
  26.         </div>
  27.         <!-- idは、上記ボタンのdata-targetに指定したものと揃えること -->
  28.         <div class="collapse navbar-collapse" id="collapse-id">
  29.          <ul class="nav navbar-nav">
  30.             <li class="active"><a href="#">コンテンツ1</a></li>
  31.             <li><a href="#">コンテンツ2</a></li>
  32.             <li><a href="#">コンテンツ3</a></li>
  33.          </ul>
  34.         </div><!-- /.navbar-collapse -->
  35.         
  36.      </div><!-- /.container-fluid -->
  37.     </nav>
  38.     
  39.     <!-- スクロール表示用のダミー -->
  40.     <div style="height:1000px"></div>
  41.     
  42.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  43.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  44. </body>
  45. </html>






常に最下層に表示



ナビゲーションを画面下に表示したい場合は、
navタグに「navbar-fixed-bottom」を指定します。

439_15.png

439_16.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <!-- navbar-fixed-bottomを指定して、常に最下部に表示 -->
  13.     <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  14.     
  15.      <div class="container-fluid">
  16.         <div class="navbar-header">
  17.          <!-- 画面サイズが小さい時に表示されるボタン -->
  18.          <!-- data-targetにollapseを指定したdivのidを指定すること -->
  19.          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-id">
  20.             <span class="sr-only">Toggle navigation</span>
  21.             <span class="icon-bar"></span>
  22.             <span class="icon-bar"></span>
  23.             <span class="icon-bar"></span>
  24.          </button>
  25.          <a class="navbar-brand" href="#">サイト名</a>
  26.         </div>
  27.         <!-- idは、上記ボタンのdata-targetに指定したものと揃えること -->
  28.         <div class="collapse navbar-collapse" id="collapse-id">
  29.          <ul class="nav navbar-nav">
  30.             <li class="active"><a href="#">コンテンツ1</a></li>
  31.             <li><a href="#">コンテンツ2</a></li>
  32.             <li><a href="#">コンテンツ3</a></li>
  33.          </ul>
  34.         </div><!-- /.navbar-collapse -->
  35.         
  36.      </div><!-- /.container-fluid -->
  37.     </nav>
  38.     
  39.     <!-- スクロール表示用のダミー -->
  40.     <div style="height:1000px"></div>
  41.     
  42.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  43.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  44. </body>
  45. </html>







ナビゲーションの丸っぽいのを排除



差がわかりにくいのですが、通常のナビゲーション

439_17.png


「navbar-static-top」を指定したナビゲーション

439_18.png

縁の丸みがなくなります。


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body style="padding-top:50px">
  12.     <nav class="navbar navbar-default navbar-static-top" role="navigation">
  13.     
  14.      <div class="container-fluid">
  15.         <div class="navbar-header">
  16.          <!-- 画面サイズが小さい時に表示されるボタン -->
  17.          <!-- data-targetにollapseを指定したdivのidを指定すること -->
  18.          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-id">
  19.             <span class="sr-only">Toggle navigation</span>
  20.             <span class="icon-bar"></span>
  21.             <span class="icon-bar"></span>
  22.             <span class="icon-bar"></span>
  23.          </button>
  24.          <a class="navbar-brand" href="#">サイト名</a>
  25.         </div>
  26.         <!-- idは、上記ボタンのdata-targetに指定したものと揃えること -->
  27.         <div class="collapse navbar-collapse" id="collapse-id">
  28.          <ul class="nav navbar-nav">
  29.             <li class="active"><a href="#">コンテンツ1</a></li>
  30.             <li><a href="#">コンテンツ2</a></li>
  31.             <li><a href="#">コンテンツ3</a></li>
  32.          </ul>
  33.         </div><!-- /.navbar-collapse -->
  34.         
  35.      </div><!-- /.container-fluid -->
  36.     </nav>
  37.     
  38.     
  39.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  40.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  41. </body>
  42. </html>


関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2014/08/03(日) 17:12:39|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<プログラマのためのBootstrap入門 その7 アラート、プログレスバー、パンくずリスト | ホーム | プログラマのためのBootstrap入門 その5 タブ>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1452-c0627935
この記事にトラックバックする(FC2ブログユーザー)