應用CSS樣式，形成項目在Django

我在forms.py應用CSS樣式，形成項目在Django

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

在我的模板/ login.html的文件格式如下我有以下幾點：

{% load staticfiles %} 

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

我想使用我將在login.html中加載一些js和css靜態文件。

如何將css效果應用於我的登錄表單，當我將表單轉換爲wi th模板標籤{{ form.as_p }}？

來源

2015-11-17 bgarcial

這是很容易在基於類的形式來做。來自我的項目的例子，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>

的關鍵是元類的部件領域。在那裏你可以定義你想使用的django.forms中的哪個小部件，然後可以定義你想要的任何attrs。這裏我們使用'class'並將其參數設置爲'form-control'。因爲你想，你可以很容易地取代許多CSS類，即

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

我用這個自舉經常和它工作得很好，只要你輸入引導沿線某處（無論是從Django的引導插件，或者只是通過基本模板中的靜態文件）

來源

2015-11-17 18:43:53

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

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

{% 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" %}

來源

2015-11-17 18:21:30 Noah

應用CSS樣式，形成項目在Django

回答

相關問題