文章出處

前面的話

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

 

基礎導航條

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

　　導航條是在應用或網站中作為導航頁頭的響應式基礎組件。它們在移動設備上可以折疊（并且可開可關），且在視口（viewport）寬度增加時逐漸變為水平展開模式 

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

　　1、首先在制作導航的列表(<ul class=”nav”>)基礎上添加類名“navbar-nav”

　　2、在列表外部添加一個容器（div），并且使用類名“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> 元素，如果使用的是通用的 <div> 元素的話，務必為導航條設置 role="navigation" 屬性，這樣能夠讓使用輔助設備的用戶明確知道這是一個導航區域

<div class="navbar navbar-default" role="navigation">
     <ul class="nav navbar-nav">
         <li class="active"><a href="##">網站首頁</a></li>
        <li><a href="##">系列教程</a></li>
        <li><a href="##">名師介紹</a></li>
        <li><a href="##">成功案例</a></li>
        <li><a href="##">關于我們</a></li>
     </ul>
</div>

 

導航條部件

【標題】

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

<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">小火柴的藍色理想</a>
  　</div>
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">HTML</a></li>
       <li><a href="##">CSS</a></li>
       <li><a href="##">Javascript</a></li>
       <li><a href="##">Bootstrap</a></li>
       <li><a href="##">jQuery</a></li>
     </ul>
</div>

【品牌圖標】

　　將導航條內放置品牌標志的地方替換為 <img> 元素即可展示自己的品牌圖標。由于 .navbar-brand 已經被設置了內補（padding）和高度（height），需要根據自己的情況添加一些 CSS 代碼從而覆蓋默認設置

<div class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" style="margin-top:-10px" href="#">
        <img alt="Brand" 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">
      </a>
    </div>
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">HTML</a></li>
       <li><a href="##">CSS</a></li>
       <li><a href="##">Javascript</a></li>
       <li><a href="##">Bootstrap</a></li>
       <li><a href="##">jQuery</a></li>
     </ul>
</div>

【二級菜單】

　　在基礎導航條中對菜單提供了當前狀態，禁用狀態，懸浮狀態等效果，而且也可以帶有二級菜單的導航條

<div class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
         <li class="active"><a href="##">網站首頁</a></li>
        <li class="dropdown">
          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            <li><a href="##">JavaScript</a></li>
            <li class="disabled"><a href="##">PHP</a></li>
          </ul>
       </li>
       <li><a href="##">關于我們</a></li>
    </ul>
</div>

【部件排列】

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

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

　　[注意]導航條目前不支持多個.navbar-right類。為了讓內容之間有合適的空隙，最后一個.navbar-right元素使用負邊距(margin)。如果有多個元素使用這個類，它們的邊距(margin)將不能按照預期正常展現

【表單】

　　有的導航條中會帶有搜索表單，Bootstrap框架中提供了一個“navbar-form”，使用方法很簡單，在navbar容器中放置一個帶有navbar-form類名的表單即可

　　navbar-left實現左浮動，navbar-right實現右浮動

<div class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">HTML</a></li>
       <li><a href="##">CSS</a></li>
       <li><a href="##">Javascript</a></li>
       <li><a href="##">Bootstrap</a></li>
       <li><a href="##">jQuery</a></li>
     </ul>
     <form action="##" class="navbar-form navbar-left" rol="search">
           <div class="form-group">
              <input type="text" class="form-control" placeholder="請輸入關鍵詞" />
           </div>
        <button type="submit" class="btn btn-default">搜索</button>
     </form>
</div>

【按鈕】

　　對于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以讓它在導航條里垂直居中。有一些對于為輔助設備提供可識別標簽的方法，例如， aria-label、aria-labelledby 或者 title 屬性。如果這些方法都沒有，屏幕閱讀器將使用 placeholder 屬性（如果這個屬性存在的話），但是請注意，使用 placeholder 代替其他識別標簽的方式是不推薦的

　　[注意]就像標準的 按鈕類 一樣，.navbar-btn 可以被用在 <a> 和 <input> 元素上。然而，在 .navbar-nav 內，.navbar-btn 和標準的按鈕類都不應該被用在 <a> 元素上。

<div class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">HTML</a></li>
       <li><a href="##">CSS</a></li>
       <li><a href="##">Javascript</a></li>
     </ul>
    <button type="button" class="btn btn-default navbar-btn">Sign in</button>
</div>

【文本】

　　把文本包裹在 .navbar-text中時，為了有正確的行距和顏色，通常使用 <p> 標簽

<div class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">HTML</a></li>
       <li><a href="##">CSS</a></li>
       <li><a href="##">Javascript</a></li>
     </ul>
    <p class="navbar-text">Signed in as huochai</p>
</div>

【非導航鏈接】

　　可以在標準的導航組件之外添加標準鏈接，使用 .navbar-link 類可以讓鏈接有正確的默認顏色和反色設置

<div class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">HTML</a></li>
       <li><a href="##">CSS</a></li>
       <li><a href="##">Javascript</a></li>
     </ul>
    <p class="navbar-text navbar-left">Signed in as <a href="#" class="navbar-link">huochai</a></p>
</div>

 

導航條位置

　　很多情況下，設計師希望導航條固定在瀏覽器頂部或底部，這種固定式導航條的應用在移動端開發中更為常見。Bootstrap框架提供了g兩種固定導航條的方式：

   ☑  .navbar-fixed-top：導航條固定在瀏覽器窗口頂部

   ☑  .navbar-fixed-bottom：導航條固定在瀏覽器窗口底部

　　使用方法很簡單，只需要在制作導航條最外部容器navbar上追加對應的類名即可

　　這個固定的導航條會遮住頁面上的其它內容，除非給 <body> 元素底部設置了 padding。提示：導航條的默認高度是 50px

body { padding-top: 70px; }
body { padding-bottom: 70px; }
<body style="padding:70px 0;">
<nav class="navbar navbar-default navbar-fixed-top">
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">HTML</a></li>
       <li><a href="##">CSS</a></li>
       <li><a href="##">Javascript</a></li>
     </ul>
</nav>
<p>測試內容<br><br>測試內容<br><br>測試內容<br><br>測試內容<br><br>測試內容<br><br>測試內容<br><br>測試內容</p>
<nav class="navbar navbar-default navbar-fixed-bottom">
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">HTML</a></li>
       <li><a href="##">CSS</a></li>
       <li><a href="##">Javascript</a></li>
     </ul>
</nav>

【靜止在頂部】

　　通過添加 .navbar-static-top 類即可創建一個與頁面等寬度的導航條，它會隨著頁面向下滾動而消失

<nav class="navbar navbar-default navbar-static-top">
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">HTML</a></li>
       <li><a href="##">CSS</a></li>
       <li><a href="##">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、保證在窄屏時需要折疊的內容必須包裹在帶一個div內，并且為這個div加入collapse、navbar-collapse兩個類名。最后為這個div添加一個class類名或者id名

<div class="collapse navbar-collapse" id="example">
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">HTML</a></li>
       <li><a href="##">CSS</a></li>
       <li><a href="##">Javascript</a></li>
     </ul>
</div>

　　或者

<div class="collapse navbar-collapse example">
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">HTML</a></li>
       <li><a href="##">CSS</a></li>
       <li><a href="##">Javascript</a></li>
     </ul>
</div>

　　2、保證在窄屏時要顯示的圖標樣式（固定寫法）：

<button class="navbar-toggle" type="button" data-toggle="collapse">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

　　3、并為button添加data-target=".類名/#id名"，究競是類名還是id名呢？由需要折疊的div來決定。如

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

　　或者，對應class="example"

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>
<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
  </div>
  <div class="collapse navbar-collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">HTML</a></li>
       <li><a href="##">CSS</a></li>
       <li><a href="##">Javascript</a></li>
     </ul>
  </div>
</div>

 

反色導航條

　　反色導航條其實是Bootstrap框架提供的第二種風格的導航條，與默認的導航條相比，使用方法并無區別，只是將navbar-deafult類名換成navbar-inverse。其變化只是導航條的背景色和文本做了修改

<div class="navbar navbar-inverse" role="navigation">
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">HTML</a></li>
       <li><a href="##">CSS</a></li>
       <li><a href="##">Javascript</a></li>
     </ul>
</div>

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()