Question

我从bootswatch.com下载了一个bootstrap主题菜单。这是链接http://bootswatch.com/lumen/

然后我复制并粘贴了bootswatch中的Header Menu代码，并尝试在我的localhost中运行它。引导似乎无法正常工作。当屏幕没有最大化时，有一个类似盒子的按钮，在上方的右上方有三条水平线。当我点击它，它不起作用，但在bootswatch网站，它正在工作..似乎是什么问题？

这是它的jsfiddle .. http://jsfiddle.net/tSUUL/2/

<html>
<head>
<link type="text/css"  href="bootstrap/bootstrap.css" rel="stylesheet">
<link type="text/css"  href="bootstrap/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <div class="navbar navbar-inverse">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <img border="0" src="images/logo.png" alt="My Treats by Angie Lee" width="200" height="150"/>
        <a class="navbar-brand" href="#">My Treats by Angie Lee</a>
      </div>

      <div class="navbar-collapse collapse navbar-inverse-collapse">
      </br>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Cart</a></li>
          <li><a href="#">Policies</a></li>
        </ul>
        <form class="navbar-form navbar-right">
          <input type="text" class="form-control col-lg-8" placeholder="Search">
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Register</a></li>
          <li><a href="#">Login</a></li>
        </ul>
      </div>
    </div>

</body>
</html>

Answer 1

使用javascript显示菜单，但您的页面上没有任何内容。 javascript已经编写并且是bootstrap的一部分，你只需要导入它。假设你在bootstrap文件夹中有该文件，这样的一行应该可以解决这个问题。

<script type="text/javascript" src="bootstrap/bootstrap.js" charset="UTF-8"></script>

编辑：我刚注意到你也没有jQuery，这也是bootstrap所需要的。您需要下载jQuery并在页面中包含这样的内容：

<script type="text/javascript" src="jquery/jquery.js" charset="UTF-8"></script>

You can download jQuery here.

Answer 2

我使用bootswatch作为外部css。我遇到过同样的问题。我刚刚在我的css文件中替换了这部分模态代码

.fade {/* opacity: 0; */-webkit-transition: opacity 0.15s linear;transition:opacity 0.15s linear;}
.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.42857143}.modal-body{position:relative;padding:15px}.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal-sm{width:300px}}@media (min-width:992px){.modal-lg{width:900px}}.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before{display:table;content:" "}.modal-footer:after,.modal-header:after{clear:both;}

它对我有用。

同时添加这些文件 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

bootswatch的bootstrap无法正常工作

2 个答案: