Bootstrap 导航条

简介

使用 Bootstrap，您可以创建静态的导航条。在本教程中将教您如何做到这点。

我们将使用一个带有内容的 HTML5 页面，并看看如何添加一个头部导航条。下面是最后的输出结果：

navbar demo

下面是不带任何内容的页面的 HTML5 代码。

  <!DOCTYPE html> 
  <html lang=&quot;en&quot;>
  <head>
      <meta charset=&quot;utf-8&quot;>
      <title>Bootstrap基本的基于与标签的导航</title>
      <meta name=&quot;description&quot; content=&quot;Bootstrap Basic Tab Based Navigation Example&quot;>
      <link href=&quot;../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css&quot; rel=&quot;stylesheet&quot;>
  </head>
  <body>
  <!-- 我们将在这创建导航 -->
  </body>
  </html>

为了创建包含导航的基本结构，您需要在上面显示的 HTML5 代码中，紧跟着标签的后边插入下面的代码：

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <!--navigation does here-->
        </div>
    </div>
</div>

现在，让我们把替换为下面的代码，用来创建导航的第一个集合。请注意，这里的 "brand" class 以不同的方式呈现，这可以用来呈现您的公司名称或组织名称。

<ul class="nav">
    <li class="active">
        <a class="brand" href="#">runoob</a>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
</ul>

如果需要创建下拉菜单，需要紧跟着在最后一个代码块中显示的 HTML 代码后，插入下面的代码。

<ul class="nav">
    <li class="dropdown">
        <a href="#"
           class="dropdown-toggle"
           data-toggle="dropdown">
            Services
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Web development</a></li>
            <li><a href="#">Wordpress Theme development</a></li>
        </ul>
    </li>
</ul>

但是，由于 Bootstrap 下拉菜单需要用到 JavaScript，所以您需要在 HTML 页面中插入下面两行代码。您可以把它们插入到