gpt4 book ai didi

javascript - V 基本 Bootstrap 示例 : JS components not working, 无折叠功能

转载 作者:太空宇宙 更新时间:2023-11-04 12:34:30 31 4
gpt4 key购买 nike

我正在尝试一个非常基本的 Bootstrap 教程示例。没有任何折叠功能(即,我相信引用的所有 Bootstrap 代码)都在工作。我的文件结构是正确的,index.html 与 Bootstrap 文件夹 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>

最佳答案

您提供的代码似乎没有使用 Bootstrap 折叠功能。

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并查看他们的实例。

关于javascript - V 基本 Bootstrap 示例 : JS components not working, 无折叠功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27391715/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com