Django/Bootstrap模板渲染 [英] Django/Bootstrap template rendering
问题描述
我目前正在使用Django和Bootstrap对网站进行编码.
我首先创建了模板和模型,现在,我正在实现控制器.尚未全部实现,但是我需要一些帮助.我想知道如何使用Boostrap网格系统呈现Django身份验证表单.我正在使用Boostrap 4和Django 2.0.4.
我的旧表格如下:
I'm currently coding a website using Django and Bootstrap.
I created the templates and models first, and now, I'm implementing the controllers. All is not implemented yet, but I needed some help on this. I was wondering how to render a Django authentication form with the Boostrap grid system. I'm using Boostrap 4 and Django 2.0.4.
My older form was like this :
<div class="jumbotron">
<form class="form-horizontal" method="post" action="{% url 'login' %}">
{% csrf_token %}
<div class="form-group">
<div class="col-lg-4 offset-lg-4">
<label class="control-label" for="usernameInput">{{ form.username.label_tag }}</label>
<input id="usernameInput" type="text" name="{{ form.field.html_name }}" value="{{ form.username }}" class="form-control"
placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-lg-4 offset-lg-4">
<label class="control-label" for="passwordInput">{{ form.password.label_tag }}</label>
<input id="passwordInput" type="password" name="{{ form.field.html_name }}" value="{{ form.field.value }}" class="form-control"
placeholder="Password">
</div>
</div>
<div class="container" id="btn_login">
<button type="submit" class="btn btn-primary btn-md" value="login" role="button">Log in</button>
<input type="hidden" name="next" value="{{ next }}"/>
</div>
</form>
<span class="container" id="forgotten_password">
<a href="">Forgot your password ?</a>
</span>
</div>
这是新的:
<div class="jumbotron">
{% load widget_tweaks %}
<form class="form-horizontal" method="post" action="{% url 'login' %}">
{% csrf_token %}
{% for hidden_field in form.hidden_fields %}
{{ hidden_field }}
{% endfor %}
{% if form.non_field_errors %}
<div class="alert alert-danger" role="alert">
{% for error in form.non_field_errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
{% for field in form.visible_fields %}
<div class="form-group">
{{ field.label_tag }}
{% if form.is_bound %}
{% if field.errors %}
{% render_field field class="form-control" %}
{% for error in field.errors %}
<div class="invalid-feedback">
{{ error }}
</div>
{% endfor %}
{% else %}
{% render_field field class="form-control" %}
{% endif %}
{% else %}
{% render_field field class="form-control" %}
{% endif %}
{% if field.help_text %}
<small class="form-text text-muted">{{ field.help_text }}</small>
{% endif %}
</div>
{% endfor %}
<div class="container" id="btn_login">
<button type="submit" class="btn btn-primary btn-md" role="button">Log in</button>
</div>
</form>
<span class="container" id="forgotten_password">
<a href="">Forgot your password ?</a>
</span>
</div>
但是正如您可以明显看出的那样,这并不是以相同的方式呈现的. 例如,我想取回输入的宽度.
But as you can obviously tell, this is not rendering the same way. For example, I'd like to take back the width of the input.
对于其他情况,我在 urls.py
中使用此行
re_path(r'^ login/$',auth_views.login,{'template_name':'main/login.html'},name ='login'),
这是我的 settings.py 中的一个,将其重定向到正确的页面:
LOGIN_REDIRECT_URL ='my_pls'
For the rest, I use this line in my urls.py
re_path(r'^login/$', auth_views.login, {'template_name': 'main/login.html'}, name='login'),
And this one in my settings.py to get redirected to the right page :
LOGIN_REDIRECT_URL = 'my_pls'
我搜索了很多东西,最后使用了此链接(以防万一,您发现我不明白的地方):
I googled a lot and finally used this link (in case you case notice something I didn't understand) : https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html#understanding-the-rendering-process
推荐答案
您应该在forms.py **上使用自定义HTML属性.
You should use custom HTML attributes on your **forms.py**.
很简单:
from django import forms
class your_form(forms.Form):
attrs_for_the_field = {
'class': 'form-control',
'placeholder': 'Write here!',
}
field = forms.CharField(widget=forms.CharField(attrs=attrs_for_the_field))
使用此代码,您将呈现以下HTML:
With this code you will render the following HTML:
<input type="text" name="field" class="form-control" placeholder="Write here!" id="id_field">
看看 https://docs.djangoproject.com/en/2.0/ref/forms/widgets/,以了解Django如何表示HTML输入元素.
您还应该阅读 https://docs.djangoproject .com/zh-CN/2.0/ref/forms/fields/,以便您了解其工作原理.
Take a look at https://docs.djangoproject.com/en/2.0/ref/forms/widgets/ in order to know how Django represents an HTML input element.
You also should read https://docs.djangoproject.com/en/2.0/ref/forms/fields/ so that you could understand how it works.
这篇关于Django/Bootstrap模板渲染的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!