[英]Applying css styles to form items in Django
我在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效果应用于我的登录表单?
这在基于班级的表格中很容易做到。 我的项目示例,其中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插件,或者只是通过基本模板中的静态文件)
有一个很棒的包用于自定义表单小部件的显示,称为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" %}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.