快捷導(dǎo)航

Bootstrap導(dǎo)航條的使用和理解3

更新時間：2016年12月14日 08:40:44 作者：浪跡灬天涯

這篇文章主要為大家詳細(xì)介紹了關(guān)于Bootstrap導(dǎo)航條的使用和理解的學(xué)習(xí)記錄，具有一定的參考價值，感興趣的小伙伴們可以參考一下

以下理論內(nèi)容copy自Bootstrap中文網(wǎng) （一個不錯的bootstrap學(xué)習(xí)網(wǎng)站）

導(dǎo)航條

默認(rèn)樣式的導(dǎo)航條

導(dǎo)航條是在您的應(yīng)用或網(wǎng)站中作為導(dǎo)航頁頭的響應(yīng)式基礎(chǔ)組件。它們在移動設(shè)備上可以折疊（并且可開可關(guān)），且在視口（viewport）寬度增加時逐漸變?yōu)樗秸归_模式。

以下代碼和注釋是我學(xué)習(xí)過程中的理解

（注意引入必要的.css 和 .js查看）

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap 導(dǎo)航條模板</title>
 <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
 <!--[if lt IE 9]>
 <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
 </head>
 <body>

 <nav class="navbar navbar-default">
 <!-- <div class="container-fluid"> -->
 <!-- 將 100% 寬度的布局轉(zhuǎn)換為固定寬度的柵格布局。 -->
 <div class="container">

 <!-- 品牌商標(biāo) 和 獲得更好的移動分組顯示-->
 <!-- .navbar-header元素里放了一個button按鈕和一個a鏈接
  先說簡單的a鏈接，用于放置網(wǎng)頁logo，導(dǎo)航欄上通常都需要
  button按鈕 是一個開關(guān)，當(dāng)在移動設(shè)備上顯示是，導(dǎo)航條一行顯示不完，導(dǎo)航具體內(nèi)容部分變會崩塌原有的顯示形式，收集為多行顯示，并隱藏，使用button 按鈕可控制其（顯示/隱藏）
  -->
 <!-- Brand and toggle get grouped for better mobile display -->

<!-- 以下導(dǎo)航頭部 -->
 <div class="navbar-header">
  <!-- 當(dāng)屏幕縮小時 id為bs-example-navbar-collapse-1的元素隱藏，使用下面這個button 調(diào)出 #bs-example-navbar-collapse-1元素 -->
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  <!-- <span class="sr-only">Toggle navigation</span> -->

  <!-- 下面三個span 只是用來顯示 三條 橫線樣式，可以清除注釋看看 -->
  <!-- <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span> -->
  更多
  </button>

  <!-- 將導(dǎo)航條內(nèi)放置品牌標(biāo)志的地方替換為 <img> 元素即可展示自己的品牌圖標(biāo)。由于 .navbar-brand 已經(jīng)被設(shè)置了內(nèi)補（padding）和高度（height），你需要根據(jù)自己的情況添加一些 CSS 代碼從而覆蓋默認(rèn)設(shè)置。 -->
  <!-- 放置商標(biāo)的地方 -->
  <a class="navbar-brand" href="#">Brand</a>
  <!-- a鏈接里當(dāng)然也可以圖片 或 字體圖標(biāo) -->
 </div>


<!-- 以下為導(dǎo)航具體內(nèi)容，身體部分 -->

 <!-- 收集導(dǎo)航鏈接、表單和其他內(nèi)容 方便移動設(shè)備時。收集隱藏 -->
 <!-- Collect the nav links, forms, and other content for toggling -->
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 <!-- 導(dǎo)航條的內(nèi)容里有五部分 根據(jù)需求更改-->
 <!-- 第一部分 -->
  <ul class="nav navbar-nav">
  <li class="active"><a href="#">鏈接<span class="sr-only">(current)</span></a></li>
  <li><a href="#">鏈接</a></li>
  <li class="dropdown">
  <!-- 用來控制 下拉列表顯示/隱藏 -->
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉 <span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="#">一個行為</a></li>
  <li><a href="#">另一個行為</a></li>
  <li><a href="#">其他的行為</a></li>
  <!-- .divider 分隔器 與上面分隔一條線 -->
  <li role="separator" class="divider"></li>
  <li><a href="#">分隔開的鏈接</a></li>
  <li role="separator" class="divider"></li>
  <li><a href="#">另一個分隔開的鏈接</a></li>
  </ul>
  </li>
  </ul>
  
  <!-- 第二部分 一個文本 -->
  <!-- 把文本包裹在 .navbar-text中時，為了有正確的行距和顏色，通常使用 <p> 標(biāo)簽。 -->
  <p class="navbar-text">文本內(nèi)容</p>

  <!-- 第三部分 是一個表單-->
  <!-- 將表單放置于 .navbar-form 之內(nèi)可以呈現(xiàn)很好的垂直對齊，并在較窄的視口（viewport）中呈現(xiàn)折疊狀態(tài)。 使用對齊選項可以規(guī)定其在導(dǎo)航條上出現(xiàn)的位置。 -->
  <form class="navbar-form navbar-left" role="search">
  <div class="form-group">
  <input type="text" class="form-control" placeholder="請輸入內(nèi)容">
  </div>
  <button type="submit" class="btn btn-default">提交</button>
  </form>

  <!-- 第四部分是一個獨立按鈕 -->
  <!-- 對于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以讓它在導(dǎo)航條里垂直居中。有一些對于為輔助設(shè)備提供可識別標(biāo)簽的方法，例如， aria-label、aria-labelledby 或者 title 屬性。如果這些方法都沒有，屏幕閱讀器將使用 placeholder 屬性（如果這個屬性存在的話），但是請注意，使用 placeholder 代替其他識別標(biāo)簽的方式是不推薦的。 -->
  <button type="button" class="btn btn-default navbar-btn">獨立按鈕</button>

  <!-- 第五部分 -->
  <!-- 或許你希望在標(biāo)準(zhǔn)的導(dǎo)航組件之外添加標(biāo)準(zhǔn)鏈接，那么，使用 .navbar-link 類可以讓鏈接有正確的默認(rèn)顏色和反色設(shè)置。 -->
  <p class="navbar-text">正常文本<a href="#" class="navbar-link"> 非導(dǎo)航鏈接</a></p>
  
  

 </div><!-- /.navbar-collapse -->

 </div><!-- /.container-fluid -->
 </nav>



 <script src="lib/jquery/jquery.js"></script>
 <script src="lib/bootstrap/js/bootstrap.js"></script>
 </body>
</html>

組件排列

通過添加 .navbar-left 和 .navbar-right 工具類讓導(dǎo)航鏈接、表單、按鈕或文本對齊。兩個類都會通過 CSS 設(shè)置特定方向的浮動樣式。例如，要對齊導(dǎo)航鏈接，就要把它們放在個分開的、應(yīng)用了工具類的 <ul> 標(biāo)簽里。

這些類是 .pull-left 和 .pull-right 的 mixin 版本，但是他們被限定在了媒體查詢（media query）中，這樣可以更容易的在各種尺寸的屏幕上處理導(dǎo)航條組件。

向右側(cè)對齊多個組件
導(dǎo)航條目前不支持多個 .navbar-right 類。為了讓內(nèi)容之間有合適的空隙，我們?yōu)樽詈笠粋€ .navbar-right 元素使用負(fù)邊距（margin）。如果有多個元素使用這個類，它們的邊距（margin）將不能按照你的預(yù)期正常展現(xiàn)。

我們將在 v4 版本中重寫這個組件時重新審視這個功能。

固定在頂部

添加 .navbar-fixed-top 類可以讓導(dǎo)航條固定在頂部，還可包含一個 .container 或 .container-fluid 容器，從而讓導(dǎo)航條居中，并在兩側(cè)添加內(nèi)補（padding）。

需要為 body 元素設(shè)置內(nèi)補（padding）
這個固定的導(dǎo)航條會遮住頁面上的其它內(nèi)容，除非你給 <body> 元素底部設(shè)置了 padding。用你自己的值，或用下面給出的代碼都可以。提示：導(dǎo)航條的默認(rèn)高度是 50px。

body { padding-top: 70px; }

 <nav class="navbar navbar-default navbar-fixed-top">
 <div class="container">
 ...
 </div>
 </nav>

固定在底部

添加 .navbar-fixed-bottom 類可以讓導(dǎo)航條固定在底部，并且還可以包含一個 .container 或 .container-fluid 容器，從而讓導(dǎo)航條居中，并在兩側(cè)添加內(nèi)補（padding）。

需要為 body 元素設(shè)置內(nèi)補（padding）
這個固定的導(dǎo)航條會遮住頁面上的其它內(nèi)容，除非你給 <body> 元素底部設(shè)置了 padding。用你自己的值，或用下面給出的代碼都可以。提示：導(dǎo)航條的默認(rèn)高度是 50px。

body { padding-bottom: 70px; }

<nav class="navbar navbar-default navbar-fixed-bottom">
 <div class="container">
 ...
 </div>
 </nav>

靜止在頂部

通過添加 .navbar-static-top 類即可創(chuàng)建一個與頁面等寬度的導(dǎo)航條，它會隨著頁面向下滾動而消失。還可以包含一個 .container 或 .container-fluid 容器，用于將導(dǎo)航條居中對齊并在兩側(cè)添加內(nèi)補（padding）。

通過添加 .navbar-static-top 類即可創(chuàng)建一個與頁面等寬度的導(dǎo)航條，它會隨著頁面向下滾動而消失。還可以包含一個 .container 或 .container-fluid 容器，用于將導(dǎo)航條居中對齊并在兩側(cè)添加內(nèi)補（padding）。to center and pad navbar content.

 <nav class="navbar navbar-default navbar-static-top">
 <div class="container">
 ...
 </div>
</nav>

反色的導(dǎo)航條

通過添加 .navbar-inverse 類可以改變導(dǎo)航條的外觀。

<nav class="navbar navbar-inverse">
 ...
</nav>

如果大家還想深入學(xué)習(xí)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附3個精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實戰(zhàn)教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Bootstrap導(dǎo)航條的使用和理解3

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具