框架篇-Django博客应用-添加样式

为登录页面添加样式

1.了解下 bootstrap 中 form 表单

在 bootstrap 的 form 表单 样式中，其中 <input> 标签

的 class 均为 form-control，在模板中使用：

{{ 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:

使用 模板标签将其加载到模板

{% load widget_tweaks %}

render_field 不属于 Django；它存在于安装的包里面。要使用它，需要传递一个表单域实例作为第一个参数，然后可以添加任意的 HTML 属性去补充它，可以根据特定的条件指定类。

一些 render_field 模板标签的例子：

{% render_field form.subject class="form-control" %}

{% render_field form.message class="form-control" /
placeholder=form.message.lable %}

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

然后使用：

{{ form.username|add_class:"form-control" }}