首頁  >  文章  >  web前端  >  bootstrap之.nav與.navbar區別詳解

bootstrap之.nav與.navbar區別詳解

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

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

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


        
  •       1     
  •     
  •       2     
  •     
  •       3     
  •   
  //解析:.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  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  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導覽列及其響應式的實作方式

    Bootstrap導覽列各元素操作方法(表單、按鈕、文字)_javascript技巧

    bootstrap 下拉搜尋外掛程式使用方法詳解

    #

  • 以上是bootstrap之.nav與.navbar區別詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    陳述:
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn