Bootstrap 3 RC2有什么问题

Question

Bootstrap 3 RC2有什么问题

Jam*_*mol -3 twitter-bootstrap twitter-bootstrap-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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 8

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

导航栏:

彻底检查导航栏,始终保持响应和移动. Navbars现在需要一个.navbar-header来包装品牌和切换.

.nav-collapse已重命名为.navbar-collapse并自动命中最大高度并将溢出以使您的导航内容保持在同一视口中.详见#9403.

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

归档时间：	12 年前
查看次数：	3252 次
最近记录：	12 年前