2016-09-22 135 views
1

我想在我的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問題)

任何幫助/建議表示歡迎。

+0

而不是'span'嘗試使用'a'標籤。對於按鈕。另外,請檢查瀏覽器控制檯是否有錯誤並清除它們。 – JRodDynamite

+0

我也嘗試過使用'a'標籤,但它仍然不起作用。 在控制檯中,我什麼都沒有得到(並且我激活了所有種類的日誌) – Licia

回答

1

檢查問題並沒有說謊的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版本。

1

我想你錯過了包裝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> 
+0

對不起,我的問題在其他地方(這是因爲Bootstrap內含物出現,我現在會發布它)。 所以我不需要面板和手風琴班。我也認爲手風琴是不需要的。只有當你想要零或一個擴展部分。不過謝謝! – Licia

+0

我以爲你想要它,因爲你有一個屬性是針對它。 – schillingt