JS組件Bootstrap導航條使用方法詳解_javascript技巧-js教程-PHP中文網

JS組件Bootstrap導航條使用方法詳解_javascript技巧

WBOY

發布： 2016-05-16 15:02:56

原創

1681 人瀏覽過

導航條是在您的應用程式或網站中作為導航標頭的響應式元元件。

1、預設的導航條

導航條在行動裝置上可以折疊（並且可開可關），且在可用的視口寬度增加時變為水平展開模式
客製化摺疊模式與水平模式的閾值
根據你所放在導航條上的內容的長度，也許你需要調整導航條進入折疊模式和水平模式的閾值。透過改變@grid-float-breakpoint變數的值或加入您自己的媒體查詢CSS程式碼均可實現你的需求。
第一步：
最外面的容器nav標籤，並添加nav-bar樣式類，表示這裡面屬於導航條

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

登入後複製

效果：

第二步：增加header

<nav class="navbar navbar-default" role="navigation"> 
   <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
   <a href="#" class="navbar-brand">品牌</a> 
   </div> 
  </nav>

登入後複製

按鈕標籤裡嵌套了三個span的icon。然後給與navbar-toggle樣式類別和屬性collapse(收起)，點擊的時候目標為data-target。
當視窗縮小到一定程度，右側的效果顯現。

第三步：巢狀下拉選單，form表單，下拉選單。
代碼：

<h1 class="page-header">导航条</h1> 
  <nav class="navbar navbar-default" role="navigation"> 
   <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
   <a href="#" class="navbar-brand">品牌</a> 
   </div> 
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <!--嵌套下拉菜单--> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      下拉<b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
      </ul> 
     </li> 
    </ul> 
     
    <!--嵌套表单--> 
    <form action="" class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
     <input type="text" class="form-control" /> 
     </div> 
     <button type="button" class="btn btn-default">Submit</button> 
     
    </form> 
    <!----> 
   </div> 
  </nav>

登入後複製

預覽：

增強導航條的可及性
要增強可訪問性，請務必為每個導航條加上role="navigation"。

2、表單
將表單置於.navbar-form之內可以呈現良好的垂直對齊，並在較窄的viewport中呈現折疊狀態。使用對齊選項可以確定其在導航條上出現的位置。

透過使用mixin，.navbar-form和 .form-inline共享了許多程式碼。

代碼

<form action="" class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
     <input type="text" class="form-control" /> 
     </div> 
     <button type="button" class="btn btn-default">Submit</button> 
     
    </form>

登入後複製

為輸入框新增label標籤
如果你沒有為輸入框加上label標籤，螢幕閱讀器將會遇到問題。對於導航條內的表單，可以透過.sr-only class隱藏label標籤。

3、按鈕
代碼：

預覽：

4、文字
把文字包裹在.navbar-text中時，為了有正確的行距和顏色，通常使用

標籤。
程式碼段：

5、非導航的連結
或許你希望在標準的導航組件之外添加標準鏈接，那麼，使用.navbar-link class可以讓鏈接有正確的預設顏色和反色。
程式碼段：

複製程式碼

程式碼如下:
6. コンポーネントの位置合わせ
.navbar-left または .navbar-right ツールクラスを使用して、ナビゲーションリンク、フォーム、ボタン、またはテキストを配置します。どちらのクラスも、特定の方向で CSS float スタイルを使用します。たとえば、ナビゲーションリンクを整列するには、ユーティリティクラスが適用された別の

これらのクラスは .pull-left および .pull-right の mixin バージョンですが、メディアクエリに限定されているため、さまざまな画面サイズでナビゲーションバーコンポーネントを簡単に処理できます。

7. 上部に固定
ナビゲーションバーを上部に固定するには、.navbar-fixed-top を追加します。効果はなくなりました。
bodyタグのパディングを設定する必要があります

ボディ { パディングトップ: 70px }
Bootstrap CSS のコアファイルの後に配置する必要があります。 (報道問題)
8. 下部に固定
代わりに .navbar-fixed-bottom を使用してください。
bodyタグのインナー（パディング）を設定する必要があります

ボディ { パディングボトム: 70px }
必ずBootstrap CSSのコアを読み込んでから使用してください。
9. まだトップです
.navbar-static-top を追加して、ページにナビゲーションバーを作成します。ページを下にスクロールしていくと消えてしまいます。 .navbar-fixed-* クラスとは異なり、本文にパディングを追加する必要はありません。
10. 反転ナビゲーションバー
ナビゲーションバーの外観は、.navbar-inverse クラスを追加することで変更できます。

上記は、Bootstrap ナビゲーションバーの使用方法について詳しく説明したもので、皆さんの学習に役立つことを願っています。