碼上快樂

相關內容    簡體    繁體

Bootstrap導航欄實例講解

本文轉載自   查看原文   2016-08-07 15:34   2923    講解/ Web/ 實例/ 導航欄/ Bootstrap

導航欄是一個很好的功能，是 Bootstrap 網站的一個突出特點。導航欄是響應式元組件就，作為應用程序或網站的導航標題。導航欄在移動設備的視圖中是折疊的，隨着可用視口寬度的增加，導航欄也會水平展開。在 Bootstrap 導航欄的核心中，導航欄包括了為站點名稱和基本的導航定義樣式。

1、默認的導航欄
創建一個默認的導航欄的步驟如下：

向 <nav> 標簽添加 class .navbar、.navbar-default（白底黑字），navbar-inverse（黑底白字）

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

向 <div> 元素添加一個標題 class .navbar-header，內部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文本看起來更大一號。

為了向導航欄添加鏈接，只需要簡單地添加帶有 class .nav、.navbar-nav 的無序列表即可。

下面的實例演示了這點：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 實例 - 默認的導航欄</title>  
  5.    <link href="bootstrap.min.css" rel="stylesheet">  
  6.    <script src="jquery-2.1.4.min.js"></script>  
  7.    <script src="bootstrap.min.js"></script>  
  8. </head>  
  9. <body>  
  10.    
  11. <nav class="navbar navbar-inverse" role="navigation">  
  12.    <div class="navbar-header">  
  13.       <a class="navbar-brand" href="#">林炳文在此～</a>  
  14.    </div>  
  15.    <div>  
  16.       <ul class="nav navbar-nav">  
  17.          <li class="active"><a href="#">導航一</a></li>  
  18.          <li><a href="#">導航二</a></li>  
  19.          <li class="dropdown">  
  20.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
  21.                下拉菜單  
  22.                <b class="caret"></b>  
  23.             </a>  
  24.             <ul class="dropdown-menu">  
  25.                <li><a href="#">我是誰呢？</a></li>  
  26.                <li><a href="#">我也不知道</a></li>  
  27.                <li><a href="#">你是誰呢？</a></li>  
  28.                <li class="divider"></li>  
  29.                <li><a href="#">分離的鏈接</a></li>  
  30.                <li class="divider"></li>  
  31.                <li><a href="#">另一個分離的鏈接</a></li>  
  32.             </ul>  
  33.          </li>  
  34.       </ul>  
  35.    </div>  
  36. </nav>  
  37.    
  38.    
  39. </body>  
  40. </html>  

 

效果如下：

把

 

[html]  view plain  copy
 
  1. <nav class="navbar navbar-inverse" role="navigation">  

改成

 

 

[html]  view plain  copy
 
  1. <nav class="navbar navbar-default" role="navigation">  

 

效果如下：

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

下面的實例演示了這點：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 實例 - 響應式的導航欄</title>  
  5.    <link href="bootstrap.min.css" rel="stylesheet">  
  6.    <script src="jquery-2.1.4.min.js"></script>  
  7.    <script src="bootstrap.min.js"></script>  
  8. </head>  
  9. <body>  
  10.    
  11. <nav class="navbar navbar-default" role="navigation">  
  12.    <div class="navbar-header">  
  13.       <button type="button" class="navbar-toggle" data-toggle="collapse"   
  14.          data-target="#example-navbar-collapse">  
  15.          <span class="sr-only">切換導航</span>  
  16.          <span class="icon-bar"></span>  
  17.          <span class="icon-bar"></span>  
  18.          <span class="icon-bar"></span>  
  19.       </button>  
  20.       <a class="navbar-brand" href="#">12345</a>  
  21.    </div>  
  22.    <div class="collapse navbar-collapse" id="example-navbar-collapse">  
  23.       <ul class="nav navbar-nav">  
  24.          <li class="active"><a href="#">iOS</a></li>  
  25.          <li><a href="#">fgghh</a></li>  
  26.          <li class="dropdown">  
  27.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
  28.                Java <b class="caret"></b>  
  29.             </a>  
  30.             <ul class="dropdown-menu">  
  31.                <li><a href="#">vgghhr</a></li>  
  32.                <li><a href="#">dg</a></li>  
  33.                <li><a href="#">sfg</a></li>  
  34.                <li class="divider"></li>  
  35.                <li><a href="#">分離的鏈接</a></li>  
  36.                <li class="divider"></li>  
  37.                <li><a href="#">另一個分離的鏈接</a></li>  
  38.             </ul>  
  39.          </li>  
  40.       </ul>  
  41.    </div>  
  42. </nav>  
  43.    
  44.    
  45. </body>  
  46. </html>  

 

 


3、導航欄中的表單
導航欄中的表單不是使用 Bootstrap 表單 章節中所講到的默認的 class，它是使用 .navbar-form class。這確保了表單適當的垂直對齊和在較窄的視口中折疊的行為。使用對齊方式選項（這將在組件對齊方式部分進行詳細講解）來決定導航欄中的內容放置在哪里。

下面的實例演示了這點：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 實例 - 默認的導航欄</title>  
  5.    <link href="bootstrap.min.css" rel="stylesheet">  
  6.    <script src="jquery-2.1.4.min.js"></script>  
  7.    <script src="bootstrap.min.js"></script>  
  8. </head>  
  9. <body>  
  10. <nav class="navbar navbar-default" role="navigation">  
  11.    <div class="navbar-header">  
  12.       <a class="navbar-brand" href="#">林炳文在此～</a>  
  13.    </div>  
  14.    <div>  
  15.       <ul class="nav navbar-nav">  
  16.          <li class="active"><a href="#">導航一</a></li>  
  17.          <li><a href="#">導航二</a></li>  
  18.          <li class="dropdown">  
  19.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
  20.                下拉菜單  
  21.                <b class="caret"></b>  
  22.             </a>  
  23.             <ul class="dropdown-menu">  
  24.                <li><a href="#">我是誰呢？</a></li>  
  25.                <li><a href="#">我也不知道</a></li>  
  26.                <li><a href="#">你是誰呢？</a></li>  
  27.                <li class="divider"></li>  
  28.                <li><a href="#">分離的鏈接</a></li>  
  29.                <li class="divider"></li>  
  30.                <li><a href="#">另一個分離的鏈接</a></li>  
  31.             </ul>  
  32.          </li>  
  33.       </ul>  
  34.    </div>  
  35.     <div>  
  36.       <form class="navbar-form navbar-left" role="search">  
  37.          <div class="form-group">  
  38.             <input type="text" class="form-control" placeholder="Search">  
  39.          </div>  
  40.          <button type="submit" class="btn btn-default">搜一下</button>  
  41.       </form>      
  42.    </div>  
  43. </nav>  
  44. </body>  
  45. </html>  


效果：

 

黑色效果

 

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

不要在 .navbar-nav 內的 <a> 元素上使用 .navbar-btn，因為它不是標准的 button class。
下面的實例演示了這點：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 實例 - 默認的導航欄</title>  
  5.    <link href="bootstrap.min.css" rel="stylesheet">  
  6.    <script src="jquery-2.1.4.min.js"></script>  
  7.    <script src="bootstrap.min.js"></script>  
  8. </head>  
  9. <body>  
  10. <nav class="navbar navbar-inverse" role="navigation">  
  11.    <div class="navbar-header">  
  12.       <a class="navbar-brand" href="#">林炳文在此～</a>  
  13.    </div>  
  14.    <div>  
  15.       <ul class="nav navbar-nav">  
  16.          <li class="active"><a href="#">導航一</a></li>  
  17.          <li><a href="#">導航二</a></li>  
  18.          <li class="dropdown">  
  19.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
  20.                下拉菜單  
  21.                <b class="caret"></b>  
  22.             </a>  
  23.             <ul class="dropdown-menu">  
  24.                <li><a href="#">我是誰呢？</a></li>  
  25.                <li><a href="#">我也不知道</a></li>  
  26.                <li><a href="#">你是誰呢？</a></li>  
  27.                <li class="divider"></li>  
  28.                <li><a href="#">分離的鏈接</a></li>  
  29.                <li class="divider"></li>  
  30.                <li><a href="#">另一個分離的鏈接</a></li>  
  31.             </ul>  
  32.          </li>  
  33.       </ul>  
  34.    </div>  
  35.     <div>  
  36.       <form class="navbar-form navbar-left" role="search">  
  37.          <div class="form-group">  
  38.             <input type="text" class="form-control" placeholder="Search">  
  39.          </div>  
  40.          <button type="submit" class="btn btn-default">搜一下</button>  
  41.       </form>   
  42.       <button type="button" class="btn btn-default navbar-btn">  
  43.          導航欄按鈕  
  44.       </button>       
  45.    </div>  
  46. </nav>  
  47. </body>  
  48. </html>  

5、導航欄中的文本
如果需要在導航中包含文本字符串，請使用 class .navbar-text。這通常與 <p> 標簽一起使用，確保適當的前導和顏色。下面的實例演示了這點：

 

 

[html]  view plain  copy
 
  1. <div class="navbar-header">  
  2.       <a class="navbar-brand" href="#">林炳文在此～</a>     
  3.    </div>  
  4.    <div>  
  5.       <p class="navbar-text">導航欄中的文本</p>  
  6.    </div>  
  7.    <div>  

效果如下：

 

 

6、非導航鏈接
如果您不想在常規的導航欄導航組件內使用標准的鏈接，那么請使用 class navbar-link 來為默認的和倒轉的導航欄選項添加適當的顏色，如下面的實例所示：

 

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 實例 - 默認的導航欄</title>  
  5.    <link href="bootstrap.min.css" rel="stylesheet">  
  6.    <script src="jquery-2.1.4.min.js"></script>  
  7.    <script src="bootstrap.min.js"></script>  
  8. </head>  
  9. <body>  
  10. <nav class="navbar navbar-inverse" role="navigation">  
  11.    <div class="navbar-header">  
  12.       <a class="navbar-brand" href="#">林炳文在此～</a>     
  13.    </div>  
  14.    <div>  
  15.       <p class="navbar-text">導航欄中的文本</p>  
  16.    </div>  
  17.    <div>  
  18.       <p class="navbar-text navbar-right">我在   
  19.          <a href="#" class="navbar-link">右邊</a>  
  20.       </p>  
  21.    </div>  
  22.    <div>  
  23.       <ul class="nav navbar-nav">  
  24.          <li class="active"><a href="#">導航一</a></li>  
  25.          <li><a href="#">導航二</a></li>  
  26.          <li class="dropdown">  
  27.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
  28.                下拉菜單  
  29.                <b class="caret"></b>  
  30.             </a>  
  31.             <ul class="dropdown-menu">  
  32.                <li><a href="#">我是誰呢？</a></li>  
  33.                <li><a href="#">我也不知道</a></li>  
  34.                <li><a href="#">你是誰呢？</a></li>  
  35.                <li class="divider"></li>  
  36.                <li><a href="#">分離的鏈接</a></li>  
  37.                <li class="divider"></li>  
  38.                <li><a href="#">另一個分離的鏈接</a></li>  
  39.             </ul>  
  40.          </li>  
  41.       </ul>  
  42.    </div>  
  43.     <div>  
  44.       <form class="navbar-form navbar-left" role="search">  
  45.          <div class="form-group">  
  46.             <input type="text" class="form-control" placeholder="Search">  
  47.          </div>  
  48.          <button type="submit" class="btn btn-default">搜一下</button>  
  49.       </form>   
  50.       <button type="button" class="btn btn-default navbar-btn">  
  51.          導航欄按鈕  
  52.       </button>       
  53.    </div>  
  54. </nav>  
  55. </body>  
  56. </html>  


 

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

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 實例 - 組件對齊方式</title>  
  5.    <link href="bootstrap.min.css" rel="stylesheet">  
  6.    <script src="jquery-2.1.4.min.js"></script>  
  7.    <script src="bootstrap.min.js"></script>  
  8. </head>  
  9. <body>  
  10.    
  11. <nav class="navbar navbar-inverse" role="navigation">  
  12.    <div class="navbar-header">  
  13.       <a class="navbar-brand" href="#">我在這里</a>  
  14.    </div>  
  15.    <div>  
  16.       <!--向左對齊-->  
  17.       <ul class="nav navbar-nav navbar-left">  
  18.          <li class="dropdown">  
  19.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
  20.                Java   
  21.                <b class="caret"></b>  
  22.             </a>  
  23.             <ul class="dropdown-menu">  
  24.                <li><a href="#">什么人</a></li>  
  25.                <li><a href="#">EJB</a></li>  
  26.                <li><a href="#">Jasper Report</a></li>  
  27.                <li class="divider"></li>  
  28.                <li><a href="#">分離的鏈接</a></li>  
  29.                <li class="divider"></li>  
  30.                <li><a href="#">另一個分離的鏈接</a></li>  
  31.             </ul>  
  32.          </li>  
  33.       </ul>  
  34.       <form class="navbar-form navbar-left" role="search">  
  35.          <button type="submit" class="btn btn-default">  
  36.             向左對齊-提交按鈕    
  37.          </button>  
  38.       </form>   
  39.       <p class="navbar-text navbar-left">向左對齊-文本</p>  
  40.       <!--向右對齊-->  
  41.       <ul class="nav navbar-nav navbar-right">  
  42.          <li class="dropdown">  
  43.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
  44.                Java <b class="caret"></b>  
  45.             </a>  
  46.             <ul class="dropdown-menu">  
  47.                <li><a href="#">jmeter</a></li>  
  48.                <li><a href="#">EJB</a></li>  
  49.                <li><a href="#">Jasper Report</a></li>  
  50.                <li class="divider"></li>  
  51.                <li><a href="#">分離的鏈接</a></li>  
  52.                <li class="divider"></li>  
  53.                <li><a href="#">另一個分離的鏈接</a></li>  
  54.             </ul>  
  55.          </li>  
  56.       </ul>  
  57.       <form class="navbar-form navbar-right" role="search">  
  58.          <button type="submit" class="btn btn-default">  
  59.             向右對齊-提交按鈕  
  60.          </button>  
  61.       </form>   
  62.       <p class="navbar-text navbar-right">向右對齊-文本</p>  
  63.    </div>  
  64. </nav>  
  65.    
  66. </body>  
  67. </html>  


8、固定到頂部
Bootstrap 導航欄可以動態定位。默認情況下，它是塊級元素，它是基於在 HTML 中放置的位置定位的。通過一些幫助器類，您可以把它放置在頁面的頂部或者底部，或者您可以讓它成為隨着頁面一起滾動的靜態導航欄。

如果您想要讓導航欄固定在頁面的頂部，請向 .navbar class 添加 class .navbar-fixed-top。下面的實例演示了這點：

 

 

[html]  view plain  copy
 
  1. <nav class="navbar navbar-default navbar-fixed-top" role="navigation">  


為了防止導航欄與頁面主體中的其他內容的頂部相交錯，請向 <body> 標簽添加至少 50 像素的內邊距（padding），內邊距的值可以根據您的需要進行設置。

 

9、固定到底部
如果您想要讓導航欄固定在頁面的底部，請向 .navbar class 添加 class .navbar-fixed-bottom。下面的實例演示了這點：

如：

 

[html]  view plain  copy
 
  1. <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">  

10、靜態的頂部
如需創建能隨着頁面一起滾動的導航欄，請添加 .navbar-static-top class。該 class 不要求向 <body> 添加內邊距（padding）。

 

 

[html]  view plain  copy
 
    1. <nav class="navbar navbar-default navbar-static-top" role="navigation">  
  1. // from: http://blog.csdn.net/evankaka/article/details/49516493


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Bootstrap4 導航欄 Bootstrap導航欄示例 bootstrap完整導航欄 BootStrap導航欄的使用 Bootstrap 導航欄設置 bootstrap4之導航欄 Bootstrap導航欄（響應式導航欄） Bootstrap<基礎十七>導航欄 Bootstrap4（18）： 導航欄 Bootstrap4后台導航欄制作
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM