2013-06-01 17 views
0

我確定這是一個非常簡單的問題,但我是一個noob,無法弄清楚。我試圖用​​初學者模板來幫助自己學習HTML,CSSJS。我將源代碼複製並粘貼到TextWrangler中,並在Firefox中打開html文件。沒有引導功能。如何查找css和js文件的地址?

我幾乎可以肯定這是因爲需要修改<link href="../assets/css/bootstrap.css" rel="stylesheet">這樣的行來反映我自己電腦上的css/js文件的地址。如果這是問題,我該怎麼做?

這裏是源代碼:

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

    <!-- Le styles --> 
    <link href="../assets/css/bootstrap.css" rel="stylesheet"> 
    <style> 
     body { 
     padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ 
     } 
    </style> 
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> 

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
     <script src="../assets/js/html5shiv.js"></script> 
    <![endif]--> 

    <!-- Fav and touch icons --> 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"> 
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"> 
        <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"> 
            <link rel="shortcut icon" href="../assets/ico/favicon.png"> 
    </head> 

    <body> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <button type="button" class="btn btn-navbar" 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="brand" href="#">Project name</a> 
      <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
    </div> 

    <div class="container"> 

     <h1>Bootstrap starter template</h1> 
     <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p> 

    </div> <!-- /container --> 

    <!-- Le javascript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="../assets/js/jquery.js"></script> 
    <script src="../assets/js/bootstrap-transition.js"></script> 
    <script src="../assets/js/bootstrap-alert.js"></script> 
    <script src="../assets/js/bootstrap-modal.js"></script> 
    <script src="../assets/js/bootstrap-dropdown.js"></script> 
    <script src="../assets/js/bootstrap-scrollspy.js"></script> 
    <script src="../assets/js/bootstrap-tab.js"></script> 
    <script src="../assets/js/bootstrap-tooltip.js"></script> 
    <script src="../assets/js/bootstrap-popover.js"></script> 
    <script src="../assets/js/bootstrap-button.js"></script> 
    <script src="../assets/js/bootstrap-collapse.js"></script> 
    <script src="../assets/js/bootstrap-carousel.js"></script> 
    <script src="../assets/js/bootstrap-typeahead.js"></script> 

    </body> 
</html> 

回答

1

在你的假設,你說得對,這是因爲<link href="../assets/css/bootstrap.css" rel="stylesheet">線。

此行是對css文件的引用。你需要做的是將引導文件保存到你的計算機的文件夾中。

爲此,請從http://twitter.github.io/bootstrap/下載引導程序,並將css,img和js文件夾複製到您的文件夾中。

現在在您的TextWrangler文件中將href屬性更改爲「css/bootstrap.css」,它看起來像這樣<link href="css/bootstrap.css" rel="stylesheet">

現在將文件保存爲的index.html中的其他文件夾您在複製相同的目錄。

你將要爲這樣一個例如<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">所有其他引用這樣做。

您還會在底部看到一些JavaScript文件的引用。改變這些。

祝你好運!

+0

現在有效!非常感謝!當你知道你的問題的答案很簡單,但你仍然無法弄清楚的時候,這太令人沮喪了。 – mrwnt10