-3

我刚刚下载了最新版本的 Bootstrap，而我编写的查看示例文件的代码根本不起作用。请帮我看看我是否做错了什么，或者 Bootstrap 是否在网上上传了废话文件。

下面的代码不显示导航栏。我发现给崩溃类 display: none; 当我调整浏览器大小时，点击按钮会出现导航，但它太丑了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Static Top Navbar Example for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- Custom styles for this template -->

</head>

<body>

<!-- Static navbar -->
<div class="navbar navbar-static-top">
  <div class="container">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
    <div class="nav-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="nav-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav pull-right">
        <li><a href="/examples/navbar/">Default</a></li>
        <li class="active"><a href="/examples/navbar-static-top/">Static top</a></li>
        <li><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>


<div class="container">

  <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <h1>Navbar example</h1>
    <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
    <p>
      <a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs &raquo;</a>
    </p>
  </div>

</div> <!-- /container -->
    <script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/scripts.js"></script>
   </body>
    </html>
4

1 回答 1

8

如果您查看 RC2 的发行说明：

  • 导航栏：

    • 大修导航栏以始终响应和移动优先。 导航栏现在需要一个 .navbar-header来包装品牌和切换。

    • .nav-collapse 已重命名为 .navbar-collapse并自动达到最大高度并溢出以使您的导航内容保持在同一视口中。请参阅 #9403 中的详细信息。

    • 导航栏不再使用 .pull-left 或 .pull-right，而是使用 .navbar-left 和 .navbar-right。这避免了由于链接类而导致的特殊性问题，并使样式更容易。

于 2013-08-16T14:11:15.910 回答