-3

Bootstrap の最新バージョンをダウンロードしたところ、サンプル ファイルを参照して記述したコードがまったく機能しません。私が何か間違ったことをしているのか、それとも Bootstrap がでたらめなファイルをネットにアップロードしたのかを調べるのを手伝ってください。

以下のコードでは、ナビゲーション バーが表示されません。collapse クラスに 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