Question

我正在尝试一个非常基本的Bootstrap教程示例。没有任何折叠功能（即，我相信引用的所有Bootstrap代码）都正常工作。我的文件结构是正确的，index.html与引导文件夹CSS，Fonts和Javascript在同一文件夹中，我引用的min.xx文件位于该文件夹中。但是，我认为存在问题，引用文件路径。

代码：

<!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, initialscale=1">
 <title>Bootstrap 101 Template</title>

 <!-- Bootstrap -->
 <link href="css/bootstrap.min.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/libs/html5shiv/
3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/
1.4.2/respond.min.js"></script>
 <![endif]-->

 <style>

 .box {
 background-color:#d3d3d3

 }

 </style>
 </head>
 <body>
 <h1>Hello, world!</h1>

 <div class="container">

 <div class="row">

 <div class="col-md-6 box">Content</div>

 <div class="col-md-6 box">Content</div>

 </div>


 </div>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/
jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files
as needed -->
 <script type="text/javascript" src="js/bootstrap.min.js"></script> </body>
</html>

Answer 1

您提供的代码似乎没有使用引导程序崩溃功能。

bootstrap的基本折叠布局如下：

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>

这应该立即在页面上工作一次。请访问bootstrap website here并查看他们的实例。

V basic Bootstrap示例：JS组件不工作，没有折叠功能

1 个答案: