twitter-bootstrap Django 样式登录表单并添加额外的跨度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22729217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Django styling login forms and adding additional spans
提问by yayu
I have two questions in form-styling.
我有两个关于表单样式的问题。
- For my login, I am using Django's default auth features and haven't written any views or forms manually.
- 对于我的登录，我使用 Django 的默认身份验证功能并且没有手动编写任何视图或表单。
urls.py
网址.py
urlpatterns += patterns(
'django.contrib.auth.views',
url(r'^login/$','login',
{'template_name':'login.html'},
name='qna_login'),
url(r'^logout/$','logout',
{'next_page':'qna_home'},
name='qna_logout'),
)
login.html
登录.html
{% extends "base.html" %}
{% block content%}
{% if form.errors %}
<p class="text-warning"> Your username and/or password didn't match </p>
{% endif%}
<form role="form" class="form-horizontal" method="post" action="{% url 'django.contrib.auth.views.login' %}">
<div class="form-group">
{% csrf_token %}
{{ form }}
<input type="submit" class="btn btn-primary" value="login" />
<input type="hidden" name="next" value="{{ next }}" />
</div>
</form>
{% endblock %}
How do I add bootstrap styling to it?
如何向其添加引导程序样式？
- For new user registration, I have added some bootstrap specific styles, but need to add additional spans and replace the labels with Glyphicons.
- 对于新用户注册，我添加了一些特定于引导程序的样式，但需要添加额外的跨度并用 Glyphicons 替换标签。
forms.py
表格.py
class UserForm(forms.ModelForm):
password = forms.CharField(widget=forms.PasswordInput())
class Meta:
model = User
fields = ('username', 'email', 'password')
def __init__(self, *args, **kwargs):
super(UserForm,self).__init__(*args,**kwargs)
self.fields['username'].widget.attrs.update({'class':'form-control','placeholder':'Username'})
self.fields['email'].widget.attrs.update({'class':'form-control','placeholder':'Email'})
self.fields['password'].widget.attrs.update({'class':'form-control','placeholder':'Password'})
What I need to do is replace what is generated in the template, such as
我需要做的是替换模板中生成的内容，例如
<p><label for="id_username">Username:</label> <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" type="text" /> <span class="helptext">Required. 30 characters or fewer. Letters, numbers and @/./+/-/_ characters</span></p>
by a custom bootstrap addon and glyphicon, like
通过自定义引导插件和 glyphicon，例如
<div class="input-group">
<span class="input-group-addon" style="background-color:#b77b48; color:white"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="Username">
</div>
回答by Bibhas Debnath
You can render each field individually instead of letting Django render the whole form with {{ form }}. You can write the template like this -
您可以单独呈现每个字段，而不是让 Django 使用{{ form }}. 你可以这样写模板——
<form role="form" class="form-horizontal" method="post" action="{% url 'django.contrib.auth.views.login' %}">{% csrf_token %}
<div class="form-group">
{% for field in form %}
<div class="input-group">
<span class="input-group-addon" style="background-color:#b77b48; color:white"><span class="glyphicon glyphicon-user"></span></span>
<input class="form-control" id="{{ field.id_for_label }}" maxlength="30" name="{{ field.html_name }}" value="{{ field.value }}" type="text" />
{{ field.errors }}
</div>
{% endfor %}
<input type="submit" class="btn btn-primary" value="login" />
<input type="hidden" name="next" value="{{ next }}" />
</div>
</form>
As always, like everything else, Django documentation has everything.
像往常一样，Django 文档拥有一切。
