Bootstrap 導(dǎo)航欄

2021-10-15 13:47 更新

Bootstrap 導(dǎo)航欄

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

默認(rèn)的導(dǎo)航欄

創(chuàng)建一個(gè)默認(rèn)的導(dǎo)航欄的步驟如下:

  • <nav> 標(biāo)簽添加 class .navbar、.navbar-default。

  • 向上面的元素添加 role="navigation",有助于增加可訪問性。

  • 向 <div> 元素添加一個(gè)標(biāo)題 class .navbar-header,內(nèi)部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文本看起來更大一號。

  • 為了向?qū)Ш綑谔砑渔溄?,只需要簡單地添加帶?class .nav、.navbar-nav 的無序列表即可。

下面的實(shí)例演示了這點(diǎn):

<!DOCTYPE html><html><head>
   <title>Bootstrap 實(shí)例 - 默認(rèn)的導(dǎo)航欄</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" 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" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" 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" ></script></head><body><nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java 
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分離的鏈接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一個(gè)分離的鏈接</a></li>
            </ul>
         </li>
      </ul>
   </div></nav></body></html>

結(jié)果如下所示:

默認(rèn)的導(dǎo)航欄

響應(yīng)式的導(dǎo)航欄

為了給導(dǎo)航欄添加響應(yīng)式特性,您要折疊的內(nèi)容必須包裹在帶有 classes .collapse、.navbar-collapse 的 <div> 中。折疊起來的導(dǎo)航欄實(shí)際上是一個(gè)帶有 class .navbar-toggle 及兩個(gè) data- 元素的按鈕。第一個(gè)是 data-toggle,用于告訴 JavaScript 需要對按鈕做什么,第二個(gè)是 data-target,指示要切換到哪一個(gè)元素。三個(gè)帶有 class .icon-bar 的 <span> 創(chuàng)建所謂的漢堡按鈕。這些會切換為 .nav-collapse <div> 中的元素。為了實(shí)現(xiàn)以上這些功能,您必須包含 Bootstrap 折疊(Collapse)插件。

下面的實(shí)例演示了這點(diǎn):

<!DOCTYPE html><html><head>
   <title>Bootstrap 實(shí)例 - 響應(yīng)式的導(dǎo)航欄</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" 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" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" 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" ></script></head><body><nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse">
         <span class="sr-only">切換導(dǎo)航</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分離的鏈接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一個(gè)分離的鏈接</a></li>
            </ul>
         </li>
      </ul>
   </div></nav></body></html>

結(jié)果如下所示:

響應(yīng)式的導(dǎo)航欄

導(dǎo)航欄中的表單

導(dǎo)航欄中的表單不是使用 Bootstrap 表單 章節(jié)中所講到的默認(rèn)的 class,它是使用 .navbar-form class。這確保了表單適當(dāng)?shù)拇怪睂R和在較窄的視口中折疊的行為。使用對齊方式選項(xiàng)(這將在組件對齊方式部分進(jìn)行詳細(xì)講解)來決定導(dǎo)航欄中的內(nèi)容放置在哪里。

下面的實(shí)例演示了這點(diǎn):

<!DOCTYPE html><html><head>
   <title>Bootstrap 實(shí)例 - 導(dǎo)航欄中的表單</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" 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" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" 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" ></script></head><body><nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <form class="navbar-form navbar-left" role="search">
         <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
         </div>
         <button type="submit" class="btn btn-default">提交</button>
      </form>    
   </div></nav></body></html>

結(jié)果如下所示:

導(dǎo)航欄中的表單

導(dǎo)航欄中的按鈕

您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按鈕,按鈕在導(dǎo)航欄上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。

不要在 .navbar-nav 內(nèi)的 <a> 元素上使用 .navbar-btn,因?yàn)樗皇菢?biāo)準(zhǔn)的 button class

下面的實(shí)例演示了這點(diǎn):

<!DOCTYPE html><html><head>
   <title>Bootstrap 實(shí)例 - 導(dǎo)航欄中的按鈕</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" 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" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" 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" ></script></head><body><nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <form class="navbar-form navbar-left" role="search">
         <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
         </div>
         <button type="submit" class="btn btn-default">提交按鈕</button>
      </form>    
      <button type="button" class="btn btn-default navbar-btn">
         導(dǎo)航欄按鈕      </button>
   </div></nav></body></html>

結(jié)果如下所示:

導(dǎo)航欄中的按鈕

導(dǎo)航欄中的文本

如果需要在導(dǎo)航中包含文本字符串,請使用 class .navbar-text。這通常與 <p> 標(biāo)簽一起使用,確保適當(dāng)?shù)那皩?dǎo)和顏色。下面的實(shí)例演示了這點(diǎn):

<!DOCTYPE html><html><head>
   <title>Bootstrap 實(shí)例 - 導(dǎo)航欄中的文本</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" 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" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" 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" ></script></head><body><nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <p class="navbar-text">Signed in as Thomas</p>
   </div></nav></body></html>

結(jié)果如下所示:

導(dǎo)航欄中的文本

非導(dǎo)航鏈接

如果您不想在常規(guī)的導(dǎo)航欄導(dǎo)航組件內(nèi)使用標(biāo)準(zhǔn)的鏈接,那么請使用 class navbar-link 來為默認(rèn)的和倒轉(zhuǎn)的導(dǎo)航欄選項(xiàng)添加適當(dāng)?shù)念伾缦旅娴膶?shí)例所示:

<!DOCTYPE html><html><head>
   <title>Bootstrap 實(shí)例 - 非導(dǎo)航鏈接</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" 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" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" 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" ></script></head>
<body><nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <p class="navbar-text navbar-right">Signed in as 
         <a href="#" class="navbar-link">Thomas</a>
      </p>
   </div></nav></body></html>

結(jié)果如下所示:

非導(dǎo)航鏈接

組件對齊方式

您可以使用實(shí)用工具 class .navbar-left.navbar-right 向左或向右對齊導(dǎo)航欄中的 導(dǎo)航鏈接、表單、按鈕或文本 這些組件。這兩個(gè) class 都會在指定的方向上添加 CSS 浮動。下面的實(shí)例演示了這點(diǎn):

<!DOCTYPE html><html><head>
   <title>Bootstrap 實(shí)例 - 組件對齊方式</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" 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" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" 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" ></script></head><body><nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <!--向左對齊-->
      <ul class="nav navbar-nav navbar-left">
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java 
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分離的鏈接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一個(gè)分離的鏈接</a></li>
            </ul>
         </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
         <button type="submit" class="btn btn-default">
            向左對齊-提交按鈕  
         </button>
      </form> 
      <p class="navbar-text navbar-left">向左對齊-文本</p>
      <!--向右對齊-->
      <ul class="nav navbar-nav navbar-right">
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分離的鏈接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一個(gè)分離的鏈接</a></li>
            </ul>
         </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
         <button type="submit" class="btn btn-default">
            向右對齊-提交按鈕         </button>
      </form> 
      <p class="navbar-text navbar-right">向右對齊-文本</p>
   </div></nav></body></html>

結(jié)果如下所示:

組件對齊方式

固定到頂部

Bootstrap 導(dǎo)航欄可以動態(tài)定位。默認(rèn)情況下,它是塊級元素,它是基于在 HTML 中放置的位置定位的。通過一些幫助器類,您可以把它放置在頁面的頂部或者底部,或者您可以讓它成為隨著頁面一起滾動的靜態(tài)導(dǎo)航欄。

如果您想要讓導(dǎo)航欄固定在頁面的頂部,請向 .navbar class 添加 class .navbar-fixed-top。下面的實(shí)例演示了這點(diǎn):

為了防止導(dǎo)航欄與頁面主體中的其他內(nèi)容的頂部相交錯(cuò),請向 <body> 標(biāo)簽添加至少 50 像素的內(nèi)邊距(padding),內(nèi)邊距的值可以根據(jù)您的需要進(jìn)行設(shè)置。
<!DOCTYPE html><html><head>
   <title>Bootstrap 實(shí)例 - 固定到頂部</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" 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" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" 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" ></script></head><body><nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分離的鏈接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一個(gè)分離的鏈接</a></li>
            </ul>
         </li>
      </ul>
   </div></nav></body></html>

結(jié)果如下所示:

固定到頂部

固定到底部

如果您想要讓導(dǎo)航欄固定在頁面的底部,請向 .navbar class 添加 class .navbar-fixed-bottom。下面的實(shí)例演示了這點(diǎn):

<!DOCTYPE html><html><head>
   <title>Bootstrap 實(shí)例 - 固定到底部</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" 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" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" 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" ></script></head><body><nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分離的鏈接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一個(gè)分離的鏈接</a></li>
            </ul>
         </li>
      </ul>
   </div></nav></body></html>

結(jié)果如下所示:

固定到底部

靜態(tài)的頂部

如需創(chuàng)建能隨著頁面一起滾動的導(dǎo)航欄,請?zhí)砑?.navbar-static-top class。該 class 不要求向 <body> 添加內(nèi)邊距(padding)。

<!DOCTYPE html><html><head>
   <title>Bootstrap 實(shí)例 - 靜態(tài)的頂部</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" 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" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" 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" ></script></head><body><nav class="navbar navbar-default navbar-static-top" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分離的鏈接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一個(gè)分離的鏈接</a></li>
            </ul>
         </li>
      </ul>
   </div></nav></body></html>

結(jié)果如下所示:

靜態(tài)的頂部

倒置的導(dǎo)航欄

為了創(chuàng)建一個(gè)帶有黑色背景白色文本的倒置的導(dǎo)航欄,只需要簡單地向 .navbar class 添加 .navbar-inverse class 即可,如下面的實(shí)例所示:

為了防止導(dǎo)航欄與頁面主體中的其他內(nèi)容的頂部相交錯(cuò),請向 <body> 標(biāo)簽添加至少 50 像素的內(nèi)邊距(padding),內(nèi)邊距的值可以根據(jù)您的需要進(jìn)行設(shè)置。
<!DOCTYPE html><html><head>
   <title>Bootstrap 實(shí)例 - 倒置的導(dǎo)航欄</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" 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" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" 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" ></script></head><body><nav class="navbar navbar-inverse" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分離的鏈接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一個(gè)分離的鏈接</a></li>
            </ul>
         </li>
      </ul>
   </div></nav></body></html>

結(jié)果如下所示:

倒置的導(dǎo)航欄


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號