Chrome中的Bootstrap“Hero”模板无响应？

我复制了this页面的html，并试图在本地运行它，以便我可以修改它，但是没有任何twitter引导程序下拉或其他任何工作。页面是风格的，但是当我尝试点击“查看源代码”中的css或js文件时，文件css/js代码都不会打开。Chrome中的Bootstrap“Hero”模板无响应？

我想也许引导文件没有正确链接，但页面显示引导样式。然而，在下拉菜单不想工作..

这是我的项目目录

引导 /CSS /JS /资产的mypage.html

我改变了所有的链接到CSS/js相应地，这是我的最终html。

<!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="css/bootstrap.css" rel="stylesheet"> 
    <style type="text/css"> 
     body { 
     padding-top: 60px; 
     padding-bottom: 40px; 
     } 
    </style> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet"> 

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

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

    <body> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <a 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> 
      </a> 
      <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> 
       <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> 
      <form class="navbar-form pull-right"> 
       <input class="span2" type="text" placeholder="Email"> 
       <input class="span2" type="password" placeholder="Password"> 
       <button type="submit" class="btn">Sign in</button> 
      </form> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
    </div> 

    <div class="container"> 

     <!-- Main hero unit for a primary marketing message or call to action --> 
     <div class="hero-unit"> 
     <h1>Hello, world!</h1> 
     <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
     <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p> 
     </div> 

     <!-- Example row of columns --> 
     <div class="row"> 
     <div class="span4"> 
      <h2>Heading</h2> 
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
      <p><a class="btn" href="#">View details &raquo;</a></p> 
     </div> 
     <div class="span4"> 
      <h2>Heading</h2> 
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
      <p><a class="btn" href="#">View details &raquo;</a></p> 
     </div> 
     <div class="span4"> 
      <h2>Heading</h2> 
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
      <p><a class="btn" href="#">View details &raquo;</a></p> 
     </div> 
     </div> 

     <hr> 

     <footer> 
     <p>&copy; Company 2012</p> 
     </footer> 

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

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

    </body> 
</html>

来源

2012-09-24 user772401

它在其他浏览器中按预期工作吗？ – Sara

嘿，我发现这个问题，事实证明我没有正确的jQuery库链接 – user772401

-1

我原来我的jQuery库的链接是不正确的，

是

但我发现发现并使用了正确的链接，现在都好！

来源

2012-09-26 00:32:32 user772401

Chrome中的Bootstrap“Hero”模板无响应？

回答

相关问题