我配置了Twitter Bootstrap嗎？

我的項目目錄結構：我配置了Twitter Bootstrap嗎？

myapp/ 
    index.html 
    jquery-2.1.1.js 
    css/ 
     bootstrap.min.css 
    img/ 
     * 
    js/ 
     bootstrap.min.js

我index.html頁：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>First Bootstrap</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#">WebSiteName</a> 
      </div> 
      <div> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Page 1</a></li> 
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

    <script src="jquery-2.1.1.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
</body> 
</html>

當我在任何瀏覽器中打開這個我看到：

enter image description here

但我<navbar>因素是字面上從W3Schools剪切粘貼它看起來像E本：

enter image description here

所以：

我有沒有配置錯誤引導不知何故？如果是這樣，我哪裏出錯了？
我想確保我的應用程序響應;我是否正確配置了bootstrap-responsive.css？在這裏我很困惑，因爲我的項目中沒有assets目錄...

來源

2014-10-19 smeeb

這是工作正常，根據下面的代碼片段。請注意，我從CDN引用jQuery和Bootstrap。這是推薦的方式，因爲它可以讓你的網站加載速度更快。

不知道bootstrap-responsive.css文件是什麼，但它肯定不是必需的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 

 

 

 
    <nav class="navbar navbar-inverse"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       <a class="navbar-brand" href="#">WebSiteName</a> 
 
      </div> 
 
      <div> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="active"><a href="#">Home</a></li> 
 
        <li><a href="#">Page 1</a></li> 
 
        <li><a href="#">Page 2</a></li> 
 
        <li><a href="#">Page 3</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav>

來源

2014-10-19 10:46:38 DavidG

感謝@DavidG（+1） - 我從拿到'引導，responsive' [本文檔這裏（http://getbootstrap.com/2.3.2/scaffolding.html#響應）。任何想法，它增加了一個應用程序的價值，如果我可以從CDN獲得它呢？ – smeeb 2014-10-19 10:53:41

現在我想我看到你的問題。你在混合Bootstrap v2和v3。堅持使用我給出的CDN鏈接，因爲它已經燒入v3，所以您不需要該響應文件。 – DavidG 2014-10-19 11:07:14

再次感謝您的幫助，很有道理！ – smeeb 2014-10-19 11:17:05

我配置了Twitter Bootstrap嗎？

回答

相關問題