Bootstrap-navbar

ブートストラップ-Navbar

navbarは、Bootstrapサイトの顕著な特徴の1つです。 Navbarは、アプリケーションまたはサイトのナビゲーションヘッダーとして機能する応答性の高い「メタ」コンポーネントです。 ナビゲーションバーは、モバイルビューで折りたたまれ、利用可能なビューポートの幅が増えると水平になります。 基本的に、navbarには、サイト名のスタイリングと基本的なナビゲーションが含まれています。

デフォルトのナビゲーションバー

デフォルトのナビゲーションバーを作成するには-

• クラス .navbar、.navbar-default を<nav>タグに追加します。
• 上記の要素に role = "navigation" を追加して、アクセシビリティを支援します。
• ヘッダークラ​​ス .navbar-header を<div>要素に追加します。 クラス navbar-brand の<a>要素を含めます。 これにより、テキストのサイズがわずかに大きくなります。
• navbarにリンクを追加するには、*。nav、.navbar-nav *のクラスを持つ順序付けられていないリストを追加するだけです。

次の例はこれを示しています-

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">finddevguides</a>
   </div>

   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>

         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>

            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>

               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>

               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

レスポンシブNavbar

レスポンシブ機能をnavbarに追加するには、折りたたむコンテンツをクラス .collapse、.navbar-collapse の<div>でラップする必要があります。 折りたたみの性質は、。navbar-toggle *のクラスを持つボタンによって作動し、2つのデータ要素を備えています。 最初の *data-toggle はJavaScriptにボタンの処理を指示するために使用され、2番目の data-target はどの要素を切り替えるかを示します。 次に、。icon-bar *クラスを使用して、ハンバーガーボタンと呼ぶものを作成します。 これにより、。nav-collapse * <div>にある要素が切り替わります。 この機能を動作させるには、リンクを含める必要があります：/bootstrap/bootstrap_collapse_plugin [Bootstrap Collapse Plugin]。

次の例はこれを示しています-

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <button type = "button" class = "navbar-toggle"
         data-toggle = "collapse" data-target = "#example-navbar-collapse">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>

      <a class = "navbar-brand" href = "#">finddevguides</a>
   </div>

   <div class = "collapse navbar-collapse" id = "example-navbar-collapse">

      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>

         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>

            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>

               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>

               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

Navbarのフォーム

Chapter link：/bootstrap/bootstrap_forms [Bootstrap Forms]のデフォルトのクラスベースのフォームではなく、ナビゲーションバーにあるフォームを使用する代わりに、*。navbar-form *クラスを使用します。 これにより、フォームの適切な垂直方向の整列と狭いビューポートでの折りたたみ動作が保証されます。 配置オプション（コンポーネントの配置セクションで説明）を使用して、ナビゲーションバーのコンテンツ内の配置場所を決定します。

次の例はこれを示しています-

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">finddevguides</a>
   </div>

   <div>
      <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>

</nav>

Navbarのボタン

クラス .navbar-btn を使用して、ボタンを<form>にない<button>要素に追加して、navbarの垂直方向の中央に配置できます。 .navbar-btn は、<a>および<input>要素で使用できます。

'_.navbar-nav 内の<a>要素では、*。navbar-btn *や標準リンク：/bootstrap/bootstrap_buttons [button classes]を使用しないでください。_

次の例はこれを示しています-

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">finddevguides</a>
   </div>

   <div>
      <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</button>
      </form>

      <button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
   </div>
</nav>

Navbarのテキスト

要素内のテキスト文字列をラップするには、クラス .navbar-text を使用します。 これは通常、適切な行送りと色のために<p>タグとともに使用されます。 次の例はこれを示しています-

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">finddevguides</a>
   </div>

   <div>
      <p class = "navbar-text">Signed in as Thomas</p>
   </div>
</nav>

非ナビゲーションリンク

通常のnavbarナビゲーションコンポーネント内にない標準リンクを使用する場合は、クラス navbar-link を使用して、次の例に示すように、デフォルトおよび逆navbarオプションに適切な色を追加します-

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">finddevguides</a>
   </div>

   <div>
      <p class = "navbar-text navbar-right">
         Signed in as
         <a href = "#" class = "navbar-link">Thomas</a>
      </p>
   </div>
</nav>

コンポーネントの配置

ユーティリティクラス .navbar-left または .navbar-right を使用して、_navリンク、フォーム、ボタン、またはtext_などのコンポーネントをnavbarの左または右に揃えることができます。 両方のクラスは、指定された方向にCSSフロートを追加します。 次の例はこれを示しています-

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">finddevguides</a>
   </div>

   <div>

      <!--Left Align-->
      <ul class = "nav navbar-nav navbar-left">
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>

            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>

               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>

               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>

         </li>
      </ul>

      <form class = "navbar-form navbar-left" role = "search">
         <button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
      </form>

      <p class = "navbar-text navbar-left">Left align-Text</p>

      <!--Right Align-->
      <ul class = "nav navbar-nav navbar-right">
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>

            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>

               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>

               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>

         </li>
      </ul>

      <form class = "navbar-form navbar-right" role = "search">
         <button type = "submit" class = "btn btn-default">
            Right align-Submit Button
         </button>
      </form>

      <p class = "navbar-text navbar-right">Right align-Text</p>

   </div>
</nav>

上に固定

Bootstrap navbarは、位置を動的に変更できます。 デフォルトでは、HTML内の配置に基づいて配置を行うブロックレベルの要素です。 いくつかのヘルパークラスを使用して、ページの上部または下部に配置するか、ページで静的にスクロールすることができます。

navbarを上部に固定する場合は、。navbar-fixed-top *クラスを .navbarクラス*に追加します。 次の例はこれを示しています-

'_navbarがページ本文の他のコンテンツの上に置かれないようにするには、<body>タグに少なくとも50ピクセルのパディングを追加するか、独自の値を試してください。_

<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">finddevguides</a>
   </div>

   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>

         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>

            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>

               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>

               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>

         </li>
      </ul>
   </div>

</nav>

下に固定

ページの下部にnavbarを固定する場合は、。navbar-fixed-bottom *クラスを .navbarクラス*に追加します。 次の例はこれを示しています-

<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">finddevguides</a>
   </div>

   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href="#">SVN</a></li>

         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class ="caret"></b>
            </a>

            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>

               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>

               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>

         </li>
      </ul>
   </div>
</nav>

静的トップ

ページでスクロールするnavbarを作成するには、*。navbar-static-top *クラスを追加します。 このクラスでは、<body>にパディングを追加する必要はありません。

<nav class = "navbar navbar-default navbar-static-top" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">finddevguides</a>
   </div>

   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>

         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>

            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>

               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>

               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>

         </li>
      </ul>
   </div>
</nav>

反転ナビバー

背景が黒でテキストが白の反転navbarを作成するには、次の例に示すように .navbar クラスに .navbar-inverse クラスを追加するだけです-

'_navbarがページ本文の他のコンテンツの上に置かれないようにするには、<body>タグに少なくとも50ピクセルのパディングを追加するか、独自の値を試してください。_

<nav class = "navbar navbar-inverse" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">finddevguides</a>
   </div>

   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>
         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </a>

            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>

               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>

               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>

         </li>
      </ul>
   </div>
</nav>