聊聊Bootstrap中的導航條

導航條（navbar）和導航（nav），就相差一個字，多了一個「條」字。其實在Bootstrap框架中他們還是明顯的差別。在導航條(navbar)中有一個背景色、而且導航條可以是純連結（類似導航），也可以是表單，還有就是表單和導航一起結合等多種形式。本文將詳細介紹Bootstrap導航條。

基礎導航條

　　在Bootstrap框架中，導航條和導航從外觀上差別不是太多，但在實際使用中導航條比導航複雜得多。

　　導覽條是在應用程式或網站中作為導覽頁​​頭的響應式基礎元件。它們在行動裝置上可以折疊（並且可開可關），且​​在視窗（viewport）寬度增加時逐漸變為水平展開模式 

　　在製作一個基礎導航條時，主要分以下幾步：

　　1、首先在製作導覽的清單(

)基礎上新增類別名稱「navbar-nav」

　　2、在清單外部新增一個容器（p），並且使用類別名稱“navbar”和“navbar-default”

【原理分析】

　　“.navbar”樣式的主要功能就是設定左右padding和圓角等效果，但它和顏色相關的樣式沒有進行任何的設定

.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

　　導航條的顏色都是透過「.navbar-default」來進行控制

.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}

　　navbar-nav樣式是在導覽.nav的基礎上重新調整了選單項目的浮動與內外邊距。同時也不包含顏色等樣式設置，而顏色和其他樣式是透過配合父容器「navbar-default」來一起實現

　　[注意]最好使用 <nav></nav> 元素，如果使用的是通用的 <p></p> 元素的話，務必為導航條設定 role="navigation" 屬性，這樣能夠讓使用輔助設備的使用者明確知道這是一個導航區域

<div>
     <ul>
         <li><a>网站首页</a></li>
        <li><a>系列教程</a></li>
        <li><a>名师介绍</a></li>
        <li><a>成功案例</a></li>
        <li><a>关于我们</a></li>
     </ul>
</div>

相關推薦：《bootstrap教學》

導航條元件

【標題】

　　在Web頁面製作中，常常在選單前面都會有一個標題（文字字號比其它文字稍大一些），其實在Bootstrap框架也做了這方面考慮，其透過「navbar-header」和「navbar-brand」來實現

<div>
  　<div>
  　    <a>小火柴的蓝色理想</a>
  　</div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
       <li><a>Bootstrap</a></li>
       <li><a>jQuery</a></li>
     </ul>
</div>

##【品牌圖示】

　　將導航條內放置品牌標誌的地方替換為 

 元素即可展示自己的品牌圖示。由於 .navbar-brand 已經被設定了內補（padding）和高度（height），需要根據自己的情況添加一些CSS 程式碼從而覆蓋預設值

<div>
   <div>
      <a>
        <img  src="/static/imghwm/default1.png" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmHCiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh3ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7VhxCRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSMeVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC" class="lazy" alt="聊聊Bootstrap中的導航條" >
      </a>
    </div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
       <li><a>Bootstrap</a></li>
       <li><a>jQuery</a></li>
     </ul>
</div>

【二級選單】

　　在基礎導覽列中對選單提供了目前狀態，停用狀態，懸浮狀態等效果，而且也可以有二級選單的導覽列

<div>
    <ul>
         <li><a>网站首页</a></li>
        <li>
          <a>系列教程<span></span></a>
          <ul>
            <li><a>CSS3</a></li>
            <li><a>JavaScript</a></li>
            <li><a>PHP</a></li>
          </ul>
       </li>
       <li><a>关于我们</a></li>
    </ul>
</div>

【零件排列】

#　　透過新增 .navbar-left 和 .navbar-right工具類別讓導覽連結、表單、按鈕或文字對齊。兩個類別都會透過 CSS 設定特定方向的浮動樣式。例如，要對齊導航鏈接，就要把它們放在個分開的、應用了工具類的

標籤裡<p></p>　　這些類是 .pull-left 和 .pull-right 的 mixin 版本，但是他們被限定在了媒體查詢（media query）中，這樣可以更容易的在各種尺寸的屏幕上處理導航條組件<p></p>　　[注意]導航條目前不支援多個

. navbar-right類別。為了讓內容之間有適當的空隙，最後一個.navbar-right元素使用負邊距(margin)。如果有多個元素使用這個類，它們的邊距(margin)將無法按照預期正常展現

【表單】

　　有的導航條中會帶有搜尋表單，Bootstrap框架中提供了一個“navbar-form”，使用方法很簡單，在navbar容器中放置一個帶有navbar-form類別名稱的表單即可<p></p>　　navbar-left實現左浮動，navbar-right實現右浮動<p></p>

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
       <li><a>Bootstrap</a></li>
       <li><a>jQuery</a></li>
     </ul>
     <form>
           <div>
              <input>
           </div>
        <button>搜索</button>
     </form>
</div>

#

【按钮】

　　对于不包含在 <form></form> 中的 <button></button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法，例如， aria-label、aria-labelledby 或者 title 属性。如果这些方法都没有，屏幕阅读器将使用 placeholder 属性（如果这个属性存在的话），但是请注意，使用 placeholder 代替其他识别标签的方式是不推荐的

　　[注意]就像标准的 按钮类 一样，.navbar-btn 可以被用在 <a></a> 和 <input> 元素上。然而，在 .navbar-nav 内，.navbar-btn 和标准的按钮类都不应该被用在 <a></a> 元素上。

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
    <button>Sign in</button>
</div>

【文本】

　　把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p></p> 标签

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
    <p>Signed in as huochai</p>
</div>

【非导航链接】

　　可以在标准的导航组件之外添加标准链接，使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
    <p>Signed in as <a>huochai</a></p>
</div>

导航条位置

　　很多情况下，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了g两种固定导航条的方式：

   ☑  .navbar-fixed-top：导航条固定在浏览器窗口顶部

   ☑  .navbar-fixed-bottom：导航条固定在浏览器窗口底部

　　使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可

　　这个固定的导航条会遮住页面上的其它内容，除非给  元素底部设置了 padding。提示：导航条的默认高度是 50px

body { padding-top: 70px; }
body { padding-bottom: 70px; }

<nav>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</nav>
<p>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容</p>
<nav>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</nav>

【静止在顶部】

　　通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失

<nav>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</nav>
<p>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容</p>

响应式导航条

　　Bootstrap的响应式导航条实现如下：

　　1、保证在窄屏时需要折叠的内容必须包裹在带一个p内，并且为这个p加入collapse、navbar-collapse两个类名。最后为这个p添加一个class类名或者id名

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</div>

　　或者

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</div>

　　2、保证在窄屏时要显示的图标样式（固定写法）：

<button>
  <span>Toggle Navigation</span>
  <span></span>
  <span></span>
  <span></span>
</button>

　　3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的p来决定。如

<button>
  <span>Toggle Navigation</span>
  <span></span>
  <span></span>
  <span></span>
</button>

　　或者，对应class="example"

<button>
  <span>Toggle Navigation</span>
  <span></span>
  <span></span>
  <span></span>
</button>

<div>
  <div>
       <button>
         <span>Toggle Navigation</span>
         <span></span>
         <span></span>
         <span></span>
       </button>
  </div>
  <div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
  </div>
</div>

反色导航条

　　反色导航条其实是Bootstrap框架提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改

<div>
    <ul>
       <li><a>HTML</a></li>
       <li><a>CSS</a></li>
       <li><a>Javascript</a></li>
     </ul>
</div>

更多编程相关知识，请访问：编程视频！！

以上是聊聊Bootstrap中的導航條的詳細內容。更多資訊請關注PHP中文網其他相關文章！