Bootstrap 導覽列


導覽列是一個很好的功能，也是 Bootstrap 網站的一個突出特點。導覽列在您的應用程式或網站中作為導覽頁​​頭的響應式基礎元件。導覽列在行動裝置的視圖中是折疊的，隨著可用視口寬度的增加，導覽列也會水平展開。在 Bootstrap 導覽列的核心中，導覽列包含了網站名稱和基本的導覽定義樣式。

預設的導覽列

建立一個預設的導覽列的步驟如下：

  • 向<nav> 標籤新增class .navbar、.navbar-default。

  • 在上面的元素中加入 role="navigation"，有助於增加可訪問性。

  • 為<div> 元素新增一個標題class .navbar-header，內部包含了帶有class navbar-brand 的< ;a> 元素。這會讓文字看起來更大一號。

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

下面的實例示範了這一點：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的导航栏</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></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="#">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>


</body>
</html>

##執行實例»點擊"運行實例" 按鈕查看在線實例

響應式的導航列

為了給導航列添加響應式特性，您要折疊的內容必須包裹在帶有classes

.collapse、.navbar-collapse 的<div> 中。折疊起來的導覽列其實是一個有 class .navbar-toggle 及兩個 data- 元素的按鈕。第一個是 data-toggle，用來告訴 JavaScript 需要對按鈕做什麼，第二個是 data-target，指示要切換到哪一個元素。三個帶有 class .icon-bar 的 <span> 創建所謂的漢堡按鈕。這些會切換為 .nav-collapse <div> 中的元素。為了實現以上這些功能，您必須包含 Bootstrap 折疊（Collapse）插件。

下面的實例示範了這一點：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 响应式的导航栏</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></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">切换导航</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="#">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>


</body>
</html>

運行實例»點擊"執行實例" 按鈕查看線上實例

導覽列中的表單

導覽列中的表單不是使用Bootstrap 表單章節中所講到的預設的class，它是使用

.navbar-form class。這確保了表單適當的垂直對齊和在較窄的視口中折疊的行為。使用對齊方式選項（這將在元件對齊方式部分進行詳細講解）來決定導覽列中的內容放置在哪裡。

下面的實例示範了這點：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 导航栏中的表单</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></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>

執行實例»

點擊"執行實例"按鈕查看線上實例

#導覽列中的按鈕

您可以使用class .navbar-btn 為不在<form> 中的<button> 元素新增按鈕，按鈕在導覽列上垂直居中。 .navbar-btn 可使用在 <a> 和 <input> 元素上。

不要在.navbar-nav 內的<a> 元素上使用.navbar-btn，因為它不是標準的button class。

下面的實例示範了這一點：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 导航栏中的按钮</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></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">
         导航栏按钮
      </button>
   </div>
</nav>

</body>
</html>

運行實例»

點擊"執行實例" 按鈕查看線上實例

導覽列中的文字

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

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 导航栏中的文本</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></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>

#運行實例»##點擊"運行實例" 按鈕查看線上實例

非導航連結

如果您不想在常規的導覽列導覽元件內使用標準的鏈接，那麼請使用class

navbar-link 來為預設的和倒轉的導覽列選項新增適當的顏色，如下面的實例所示：

#實例

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 实例 - 非导航链接</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">php中文网</a>
   </div>
   <div>
      <p class="navbar-text navbar-right"> 
         <a href="#" class="navbar-link">php</a> 登录
      </p>
   </div>
</nav>

</body>
</html>

執行實例» 點擊"運行實例" 按鈕查看線上實例

元件對齊方式

您可以使用實用工具class

.navbar-left 或.navbar-right 向左或向右對齊導覽列中的導覽連結、表單、按鈕或文字 這些元件。這兩個 class 都會在指定的方向上加入 CSS 浮動。下面的實例示範了這一點：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 组件对齐方式</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></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="#">另一个分离的链接</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="#">另一个分离的链接</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>

#運行實例»##點擊"運行實例" 按鈕查看線上實例

固定到頂部

Bootstrap 導覽列可以動態定位。預設情況下，它是區塊級元素，它是基於在 HTML 中放置的位置定位的。透過一些幫助器類，您可以把它放置在頁面的頂部或底部，或者您可以讓它成為隨著頁面一起滾動的靜態導覽列。

如果您想要讓導覽列固定在頁面的頂部，請在 .navbar class 新增 class .navbar-fixed-top。下面的實例示範了這一點：

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

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 固定到顶部</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></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="#">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

固定到底部

如果您想要讓導覽列固定在頁面的底部，請向.navbar class 新增class .navbar-fixed-bottom 。下面的實例示範了這一點：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 固定到底部</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></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="#">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

</body>
</html>

#運行實例»##點擊"運行實例" 按鈕查看線上實例

靜態的頂部

如需建立能隨著頁面一起捲動的導覽欄，請新增

.navbar-static-top class。該 class 不要求向 <body> 新增內邊距（padding）。

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 静态的顶部</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></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="#">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

</body>
</html>

運行實例»點擊"運行實例" 按鈕查看線上實例

倒置的導覽列

為了建立一個帶有黑色背景白色文字的倒置的導覽列，只需要簡單地向

.navbar class 添加.navbar-inverse class 即可，如下面的實例所示：

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

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 倒置的导航栏</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></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="#">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

</body>
</html>

執行實例 »點擊 "執行實例" 按鈕查看線上實例

←
→