为登录页面添加样式
1.了解下 bootstrap 中 form 表单
在 bootstrap 的 form 表单 样式中,其中 <input> 标签
的 class 均为 form-control,在模板中使用:
代码语言:javascript复制{{ form.username }}
输出的是:
<input type="text" name="username" maxlength="254" id="id_username">
可以看到其中并不包含 class,那该怎么添加 class 呢?
- 继承 AuthenticationForm 类(此类是默认的登录页面使用的表单类),重新定义 username 和 password 。在定义 form filed 的时候通过 widget attr 来添加class。
- 在默认表单的 filed 中添加 class
2.为 form filed 添加 css class
①安装 django-widget-tweaks
在终端虚拟环境中输入:
pip install django-widget-tweaks
- 在 blog/blog/settings.py 文件中添加:
添加到 INSTALLED_APPS:
使用 模板标签将其加载到模板
代码语言:javascript复制{% load widget_tweaks %}
render_field 不属于 Django;它存在于安装的包里面。要使用它,需要传递一个表单域实例作为第一个参数,然后可以添加任意的 HTML 属性去补充它,可以根据特定的条件指定类。
一些 render_field 模板标签的例子:
代码语言:javascript复制{% render_field form.subject class="form-control" %}
代码语言:javascript复制{% render_field form.message class="form-control" /
placeholder=form.message.lable %}
代码语言:javascript复制{% render_field field class="form-control" /
placeholder="请填写用户名" %}
查看登录页面的样式:
②自定义 filter
- 在 blog/index 目录下新建 templatetags/ python文件包 目录,并在 blog/index/templatetags/ 目录下新建 blog_filters.py 文件(和 __init__.py 文件),添加内容:
- 在模板 registration/login.html 开始处添加:
{% load blog_filters %}
然后使用:
代码语言:javascript复制{{ form.username|add_class:"form-control" }}