詳解bootstrap導(dǎo)航欄.nav與.navbar區(qū)別

2019-11-19 14:52:16

字體：大中小

供稿：網(wǎng)友

剛剛看了bootstrap的導(dǎo)航欄，發(fā)現(xiàn)有點弄混了，現(xiàn)在來整理一下；

導(dǎo)航欄是一個很好的功能，是 Bootstrap 網(wǎng)站的一個突出特點。導(dǎo)航欄在您的應(yīng)用或網(wǎng)站中作為導(dǎo)航頁頭的響應(yīng)式基礎(chǔ)組件。導(dǎo)航欄在移動設(shè)備的視圖中是折疊的，隨著可用視口寬度的增加，導(dǎo)航欄也會水平展開。在 Bootstrap 導(dǎo)航欄的核心中，導(dǎo)航欄包括了站點名稱和基本的導(dǎo)航定義樣式。

一、簡單的ul,li組成的導(dǎo)航：

<ul class="nav nav-pills justify-content-center bg-dark nav-dark">    <li class="nav-item">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">1</a>    </li>    <li class="nav-item">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">2</a>    </li>    <li class="nav-item">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">3</a>    </li>  </ul> //解析：.nav .nav-item .nav-link表示ul li是導(dǎo)航――.nav-pills表示膠囊狀導(dǎo)航――.bg-dark/.nav-dark表示黑底白字――.justify-content-center表示導(dǎo)航欄在瀏覽器上居中顯示

在瀏覽器上顯示為：

縮小瀏覽器窗口顯示為：

二、導(dǎo)航欄――<nav>標(biāo)簽中class="navbar navbar-expand-sm"――<ul>中class="navbar-nav"――<li>中class="nav-item"

代碼為：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">  <ul class="navbar-nav">    <li class="nav-item active">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>    </li>    <li class="nav-item">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>    </li>    <li class="nav-item">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>    </li>    <li class="nav-item">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>    </li>    </ul></nav>

正常窗口顯示為：

縮小窗口小于576px時：

三、折疊導(dǎo)航欄

當(dāng)窗口小于576px的時候，不僅僅是簡單的編程垂直導(dǎo)航；顯示為一個button按鈕，導(dǎo)航鏈接隱藏，點擊button顯示；

代碼為：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">      <img src="" alt="logo" style="width:70px;height:30px;">  </a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible">    <span class="navbar-toggler-icon"></span>  </button>  <div class="collapse navbar-collapse" id="collapsible">  <ul class="navbar-nav">    <li class="nav-item active">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>    </li>    <li class="nav-item">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>    </li>    <li class="nav-item">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>    </li>    <li class="nav-item">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>    </li>    </ul>  </nav>

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

窗口大于576的時候，顯示為：

窗口小于576的時候，顯示為：

四、導(dǎo)航欄加上form表單表示搜索框：【？？？？？】

代碼如下：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">      <img src="" alt="logo" style="width:70px;height:30px;">  </a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible">    <span class="navbar-toggler-icon"></span>  </button>  <div class="collapse navbar-collapse" id="collapsible">  <ul class="navbar-nav">    <li class="nav-item active">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>    </li>    <li class="nav-item">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>    </li>    <li class="nav-item">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>    </li>    <li class="nav-item">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>    </li>    </ul>  <form class="form-inline">        <div class="input-group">          <span class="input-group-addon">@</span>          <input list="dl" type="text" class="form-control" placeholder="Search"/>          <datalist id="dl">            <option value="IE"></option>            <option value="Firefox"></option>            <option value="chrome"></option>            <option value="safari"></option>          </datalist>        </div>                <button class="btn btn-success" type="submit">search</button>      </form></nav>

如圖所示，如何使得導(dǎo)航欄中的form表單右對齊，移到最右邊？？？？？float：eight應(yīng)該也行吧。。

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

代碼如下：

<div class="container-fluid">  <div class="row">    <!-- 導(dǎo)航欄 -->    <nav class="navbar fixed-top navbar-expand-sm bg-dark navbar-dark">      <div class="col-lg-4">      <ul class="navbar-nav">        <li class="nav-item">          <a class="nav-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >link1</a>        </li>        <li class="nav-item">          <a class="nav-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >link2</a>        </li>        <li class="nav-item">          <a class="nav-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >link3</a>        </li>      </ul>      </div><!-- 導(dǎo)航欄表單與按鈕 -->    <div class="col-lg-8">      <form class="form-inline" style="float:right;">        <div class="input-group">          <span class="input-group-addon">@</span>          <input list="dl" type="text" class="form-control" placeholder="Search"/>          <datalist id="dl">            <option value="IE"></option>            <option value="Firefox"></option>            <option value="chrome"></option>            <option value="safari"></option>          </datalist>          <button class="btn btn-success" type="submit">search</button>        </div>                    </form>      </div>          </nav>    </div>      </div>