應用css樣式在Django中形成項目

Question

我在forms.py中有以下表格

from django import forms
class LoginForm(forms.Form):
    username = forms.CharField()
    password = forms.CharField(label='Password', widget=forms.PasswordInput)

在我的templates / login.html文件中，我有以下內容：

{% load staticfiles %}

<div>
     <form action="" method="post" style="">
            {% csrf_token %}
            {{ form.as_p }}
            <input type="submit" value="SignIn">
     </form>
</div>

我想為ui使用bootstrap工具，[ http://getbootstrap.com/examples/signin/]我將在login.html中加載一些js和css靜態文件

當我使用模板標簽{{ form.as_p }}獲取表單時，如何將css效果應用於我的登錄表單？

Answer 1

這在基於班級的表格中很容易做到。 我的項目示例，其中form-control是一個css類。

from django.forms import ModelForm, TextInput

class ServerForm(ModelForm):

    class Meta:
        model = Server
        fields = ['name', 'ip', 'port']
        widgets = {
            'name': TextInput(attrs={'class': 'form-control'}),
            'ip': TextInput(attrs={'class': "form-control"}),
            'port': TextInput(attrs={'class': 'form-control'}),
            }

然后模板我看起來像：

{% for field in form %}
    <div class="form-group">
        {{ field.label_tag }} {{ field }}
    </div>
{% endfor %}

哪個生成

<form method="POST">
    <input type="hidden" name="csrfmiddlewaretoken" value="xxxxxx">
    <div class="form-group">
        <label for="id_name">Name:</label>
        <input class="form-control" id="id_name" maxlength="64" name="name" type="text">
    </div>
    <div class="form-group">
        <label for="id_ip">Ip:</label>
        <input class="form-control" id="id_ip" maxlength="20" name="ip" type="text">
    </div>
    <div class="form-group">
        <label for="id_port">Port:</label> <input class="form-control" id="id_port" name="port" type="text">
    </div>
    <div class="form-group">
        <button type="submit" class="save btn btn-default">Add/Edit Server</button>
    </div>
</form>

關鍵是Meta類的小部件字段。 在那里你可以定義你想要使用的django.forms中的哪個小部件，然后可以定義你想要的任何玩家。 這里我們使用'class'並將其參數設置為'form-control'。 您可以輕松地替換所需數量的css類，即

'name': TextInput(attrs={'class': 'form-control xs my-other-css-class'}),

我經常使用它與引導程序，並且它工作正常，只要您沿着該行某處導入引導程序（來自django-bootstrap插件，或者只是通過基本模板中的靜態文件）

Answer 2

有一個很棒的包用於自定義表單小部件的顯示，稱為django-widget-tweaks 。 該軟件包允許您自定義css類和屬性。

您可以單獨訪問每個項目並使用render_field標記添加css類，而不是使用form.as_p 。

{% load widget_tweaks %}

{% for field in form %}
    {% render_field field class+="css_class_1 css_class_2" %}
{% endfor %}

或者使用包中包含的自定義過濾器來實現緊湊性：

{% load widget_tweaks %}

{% for field in form %}
    {{ field|add_class:"my-css-class" }}
{% endfor %}

或者沒有循環：

{% load widget_tweaks %}

{% render_field form.name class+="css_class_1 css_class_2" %}
{% render_field form.email class+="css_class_1 other_class" %}
{% render_field form.title class+="css_class_1 css_class_3" %}