2017-08-30 25 views
1

我想在使用Django和Python的按鈕中添加引導類,但它根本無法添加。我在下面解釋我的代碼。不能添加引導類與使用Django和Python的按鈕

control.html:

{% extends 'base.html' %} 
{% block content %} 
<center><h1>Welcome</h1> 
<div class="boxwidthdiv"> 
<form method="post" action="{% url 'plantsave' %}"> 
    {% csrf_token %} 
    <div class="boxwidthinnerdiv"> 
     Nuclear Mini Plant <br /><br /> 
     <select name="react"> 
      <option value="Reactor1">Reactor 1</option> 
      <option value="Reactor2">Reactor 2</option> 
      <option value="Reactor3">Reactor 3</option> 
     </select> 
     <br /><br /><br /><br /> 
     <button class="buttondiv" name="strt" type="submit" class="btn btn-success">Start</button> 
     <button class="buttondiv" name="shutbt" type="submit" class="btn btn-danger">Shut Down</button> 
     <button class="buttondiv" name="susbtn" type="submit" class="btn btn-info">Suspend</button> 
    </div> 
    </form> 
    </div> 
{% endblock %} 

base.html文件:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    {% load static %} 
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"> 
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script> 
    </head> 
    <body> 
    <header> 
     <h1>Nuclear Reactor</h1> 
     {% if count > 0 %} 
     <b>Hi, {{ user.username }}</b> 
     <a href="{% url 'home' %}">Home</a> 
     <a href="{% url 'view_reactor' %}">View Reactor status</a> 
     <a href="{% url 'logout' %}">logout</a> 
     {% else %} 
     <a href="{% url 'login' %}">login</a>/<a href="{% url 'signup' %}">signup</a> 
     {% endif %} 
     <hr> 
    </header> 
    <main> 
     {% block content %} 
     {% endblock %} 
    </main> 
    </body> 
</html> 

在這裏,我不能添加類的。

+0

你的元素有兩個'class'屬性。將所有類放入一個屬性中。 –

+0

謝謝是的,這是我愚蠢的錯誤。 – satya

回答

2

在元素上有兩次相同的屬性(例如class)是無效的HTML。取而代之的

<button class="buttondiv" name="strt" type="submit" class="btn btn-success">Start</button> 
<button class="buttondiv" name="shutbt" type="submit" class="btn btn-danger">Shut Down</button> 
<button class="buttondiv" name="susbtn" type="submit" class="btn btn-info">Suspend</button> 

隨時隨地

<button class="buttondiv btn btn-success" name="strt" type="submit">Start</button> 
<button class="buttondiv btn brn-danger" name="shutbt" type="submit">Shut Down</button> 
<button class="buttondiv btn btn-info" name="susbtn" type="submit">Suspend</button> 

在一個旁註:

您可能要重命名的CSS類。 buttondiv非常以HTML爲中心,並泄漏其範圍(按鈕在div中)。更好的方法通常是使用元素類型選擇器(例如div button)或爲CSS類使用更多與領域相關的術語(例如call-to-actionentry-operation)。只要你想在其他地方應用相同的風格或者引入其他具有類似範圍的類,這將在稍後幫助你。

這裏的元素名稱也一樣,這似乎缺乏一致性。