首頁 >web前端 >js教程 >bootstrap之.nav與.navbar區別詳解

bootstrap之.nav與.navbar區別詳解

小云云原創: 2017-12-18 11:58:094192瀏覽

導覽列是一個很好的功能，也是 Bootstrap 網站的一個突出特點。導覽列在您的應用程式或網站中作為導覽頁頭的響應式基礎元件。導覽列在行動裝置的視圖中是折疊的，隨著可用視口寬度的增加，導覽列也會水平展開。在 Bootstrap 導覽列的核心中，導覽列包含了網站名稱和基本的導覽定義樣式。本文主要介紹了詳解bootstrap導覽列.nav與.navbar區別，小編覺得挺不錯的，現在分享給大家，也給大家做個參考希望能幫助到大家。

一、簡單的ul,li組成的導航：

//解析：.nav .nav-item .nav-link表示ul li是导航——.nav-pills表示胶囊状导航——.bg-dark/.nav-dark表示黑底白字——.justify-content-center表示导航栏在浏览器上居中显示

在瀏覽器上顯示為：

#縮小瀏覽器窗口顯示為：

bootstrap之.nav與.navbar區別詳解中class=" navbar-nav"—

中class="nav-item"

程式碼為：

<nav>
  <ul>
    <li>
      <a>link1</a>
    </li>
    <li>
      <a>link1</a>
    </li>
    <li>
      <a>link1</a>
    </li>
    <li>
      <a>link1</a>
    </li>  
  </ul>
</nav>

正常視窗顯示為：

縮小視窗小於576px時：

#三、折疊導覽列

當視窗小於576px的時候，不只是簡單的程式垂直導覽；顯示為一個button按鈕，導覽連結隱藏，點選button顯示；

程式碼為：

<nav>
  <a>
      <img  src="/static/imghwm/default1.png" data-src="" class="lazy" alt="bootstrap之.nav與.navbar區別詳解" >
  </a>
  <button>
    <span></span>
  </button>
  <p>
  </p>
<ul>
    <li>
      <a>link1</a>
    </li>
    <li>
      <a>link1</a>
    </li>
    <li>
      <a>link1</a>
    </li>
    <li>
      <a>link1</a>
    </li>  
  </ul>
  
</nav>

//注意：.navbar-brand是品牌logo;

視窗大於576的時候，顯示為：

視窗小於576的時候，顯示為：

四、導覽列加上form表單表示搜尋框：【？？？？？】

程式碼如下：

<nav>
  <a>
      <img  src="/static/imghwm/default1.png" data-src="" class="lazy" alt="bootstrap之.nav與.navbar區別詳解" >
  </a>
  <button>
    <span></span>
  </button>
  <p>
  </p>
<ul>
    <li>
      <a>link1</a>
    </li>
    <li>
      <a>link1</a>
    </li>
    <li>
      <a>link1</a>
    </li>
    <li>
      <a>link1</a>
    </li>  
  </ul>
  <form>
        <p>
          <span>@</span>
          <input>
          <datalist>
            <option></option>
            <option></option>
            <option></option>
            <option></option>
          </datalist>
        </p>
        
        <button>search</button>
      </form>
</nav>

如圖所示，如何讓導覽列中的form表單右對齊，移到最右邊？？？？？ float：eight應該也行吧。。

emmmm.....知道了上面的解決方法了：利用網格系統，將左邊的ul,li和右邊的form表單分別排列；.col -sm-6;然後再給form表單右邊浮動；

程式碼如下：

<p>
  </p><p>
    <!-- 导航栏 -->
    <nav>
      <p>
      </p>
<ul>
        <li>
          <a>link1</a>
        </li>
        <li>
          <a>link2</a>
        </li>
        <li>
          <a>link3</a>
        </li>
      </ul>
      </nav></p>
<!-- 导航栏表单与按钮 -->
    <p>
      </p>

##大家學會了嗎？相信大家對Bootstrap 導覽列.nav與.navbar區別也有更近一步認識，覺得本文有用的話，趕緊收藏起來吧。

bootstrap之.nav與.navbar區別詳解

相關文章