使用Django和Bootstrap設計樣式

Question

好的，所以我創建了一個簡單的使用某些自定義表單字段的購買表單。我已經提交了一個簡單的表單來測試它是否正常工作，並且它的確如下所示。

<form id="category_form" method="post" action="/purchase/"> 
     {% csrf_token %} 
     {% for hidden in form.hidden_fields %} 
      {{ hidden }} 
     {% endfor %} 

     {% for field in form.visible_fields %} 
      {{ field.errors }} 
      {{ field.help_text }} 
      {{ field }} 
     {% endfor %} 

     <input type="submit" name="submit" value="Make purchase" /> 
</form> 

現在，我希望它風格來引導3.我已經成功使用Django的小部件的調整包沒有問題的風格吧。然而，當我提交表單時，我得到這個錯誤'NoneType' object has no attribute 'replace'我試過它沒有小部件的調整，我仍然得到相同的錯誤。

任何想法，爲什麼這可能是這種情況？原始的表單工作得很好，但是隻要我修改它，我就會得到上述錯誤。現在，如果我的理解是正確的，Django需要一個字段並且相應的字段樣式相同，但是，我的一些字段類型是不同的。即下拉框和文本框，它們的樣式都不一樣。我不確定最好的解決方法是什麼。

views.py

def checkout(request): 
if request.method == 'POST': 
    form = PurchaseForm(request.POST) 
    if form.is_valid(): 
     form.save(commit=True) 

     return index(request) # Change this to point to the confirmation page 
    else: 
     print (form.errors) 
else: 
    form = PurchaseForm() 
return render(request, 'ticket/checkout.html', {'form': form}) 

checkout.html

<form class="form-horizontal" method="post" action="/cart/checkout/"> 
{% csrf_token %} 

<fieldset> 

<!-- Form Name --> 
<legend>Card Details</legend> 
<!-- Select Basic --> 
<div class="form-group"> 
    <label class="col-sm-3 control-label" for="card-type">{{ form.payment_type.help_text }}</label> 
    <div class="col-sm-9"> 
    {{ form.payment_type|attr:"id:card-type"|attr:"name:card-type"|attr:"class:form-control" }} 
    {{ form.error }} 
    </div> 
</div> 

<!-- Text input--> 
<div class="form-group"> 
    <label class="col-sm-3 control-label" for="card-name">{{ form.card_name.help_text }}</label> 
    <div class="col-sm-9"> 
    {{ form.card_name|attr:"id:card-name"|attr:"name:card-name"|attr:"type:text"|attr:"placeholder:Card Holder's Name"|attr:"class:form-control input-md"|attr:"required:"}} 
    </div> 
</div> 

<!-- Text input--> 
<div class="form-group"> 
    <label class="col-sm-3 control-label" for="card-number">{{ form.card_number.help_text }}</label> 
    <div class="col-sm-9"> 
    {{ form.card_number|attr:"id:card-number"|attr:"name:card-number"|attr:"type:text"|attr:"placeholder:Credit/Debit card number"|attr:"class:form-control input-md"|attr:"required:"}} 
    </div> 
</div> 

<!-- Select Basic --> 
<div class="form-group"> 
    <label class="col-sm-3 control-label" for="expiry-date">{{ form.expiry_date.help_text }}</label> 
    <div class="col-sm-4"> 
    {{ form.expiry_date|attr:"id:expiry-date"|attr:"name:expiry-date"|attr:"class:form-control col-sm-4" }} 
    </div> 
</div> 

<!-- Text input--> 
<div class="form-group"> 
    <label class="col-sm-3 control-label" for="cvv-number">{{ form.security_code.help_text }}</label> 
    <div class="col-sm-9"> 
    {{ form.security_code|attr:"id:cvv-number"|attr:"name:cvv-number"|attr:"type:text"|attr:"placeholder:Security Code"|attr:"class:form-control input-md"|attr:"required:"}} 
    </div> 
</div> 

<div class="form-group"> 
    <label class="col-sm-3 control-label" for="date">{{ form.date.help_text }}</label> 
    <div class="col-sm-9"> 
    {{ form.date|attr:"id:date"|attr:"name:date"|attr:"class:form-control input-md"|attr:"required:"}} 
    </div> 
</div> 

<div class="form-group"> 
    <label class="col-md-4 control-label" for="Purchase"></label> 
    <div class="col-md-8"> 
    <button id="Purchase" name="Purchase" class="btn btn-success">Purchase</button> 
    <a href="javascript:history.go(-1)"><button id="Cancel" name="Cancel" class="btn btn-inverse">Cancel</button></a> 
    </div> 
</div> 
</fieldset> 

Answer 1

我會建議使用python包django-bootstrap3來設置窗體的樣式。它可以在https://github.com/dyve/django-bootstrap3

希望這有助於！

Answer 2

我不知道我是否正確地理解你的問題。但是我注意到1.你的表單中沒有標籤。 2.也許你可以使用普通的html而不是其他的標記（{ 3.要驗證表單，您可以嘗試編寫如下內容： {％if form.password.errors％} {％for form.password.errors％} {{error}} {％endfor％} {％ endif％}

希望你儘快找出這個問題。