Django的Twitter-bootstrap:崩溃不工作
我想在我的Django项目中包含一个非常简单的崩溃。 我试图将其降至最低,但仍然无法正常工作。Django的Twitter-bootstrap:崩溃不工作
仅供参考,我试着安装jQuery与pip install django-static-jquery==2.1.4
和最后,包括我的<head>
内的jquery脚本。
这里是我的文件: 1.一个简单的base.html文件的文件扩展在我的其他HTML模板文件
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link href="{% static 'confWeb/confWeb.css' %}" rel="stylesheet" type ="text/css" />
<link href="{% static 'confWeb/bootstrap.css' %}" rel="stylesheet" type ="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<title>Configuration Amplivia</title>
</head>
<body>
<ul>
<li><a class="active" href="{% url 'confWeb:index' %}">Accueil</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
{% block content %}
{% endblock %}
</body>
</html>
这里是我的测试文件,从文件base.html文件延伸,有两种类型collasping在里面,测试是否其中任何会工作(它不)的 {%伸出“./base.html”%}
{% block content %}
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<span class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Header
</span>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingTwo">
<div class="list-group">
<a href="#" class="list-group-item">Item1</a>
<a href="#" class="list-group-item">Item2</a>
</div>
</div>
</div>
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident
</div>
</div>
{% endblock %}
现在在我自己的CSS文件(confWeb。 css),只有这个:
span[role="button"] {
cursor: pointer;
}
而且根本行不通。该按钮是可点击的,但当我使用collapse in
时,它不会展开也不会折叠。你有什么想法我应该改变?
FYI我试了一下,我发现here(引导文件) 和here(另一个SO问题)
任何帮助/建议表示欢迎。
检查问题并没有说谎的JQuery通过检查它是否确实加载后(见here),我想,也许在引导的问题撒谎。
事情是,从我的编码开始,我从不需要Twitter-Bootstrap的Javascript部分。所以你可以在我的base.html文件上面看到的,我只包括bootstrap.css但从来没有bootstrap.js
所以我的文件的文件头现在的样子:
<html>
<head>
<link href="{% static 'confWeb/confWeb.css' %}" rel="stylesheet" type ="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="{% static 'confWeb/bootstrap.css' %}" rel="stylesheet" type ="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<title>Configuration Amplivia</title>
</head>
<body>...</body>
小心,Twitter的引导的Javascript不适用于低于1.9.1或高于4的jquery版本。
我想你错过了包装class="panel"
div和id="accordion"
集装箱股利。还像@JRodDynamite说的,你应该使用一个标签。
我从bootstrap docs中拉出了那两个缺少的div。
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Header
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingTwo">
<div class="list-group">
<a href="#" class="list-group-item">Item1</a>
<a href="#" class="list-group-item">Item2</a>
</div>
</div>
</div>
</div>
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident
</div>
</div>
对不起,我的问题在其他地方(这是因为Bootstrap内含物出现,我现在会发布它)。 所以我不需要面板和手风琴班。我也认为手风琴是不需要的。只有当你想要零或一个扩展部分。不过谢谢! – Licia
我以为你想要它,因为你有一个属性是针对它。 – schillingt
而不是'span'尝试使用'a'标签。对于按钮。另外,请检查浏览器控制台是否有错误并清除它们。 – JRodDynamite
我也尝试过使用'a'标签,但它仍然不起作用。 在控制台中,我什么都没有得到(并且我激活了所有种类的日志) – Licia