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

2019-07-18 11:04:25 浏览数 (1)

为登录页面添加样式

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 开始处添加:
代码语言:javascript复制
{% load blog_filters %}

然后使用:

代码语言:javascript复制
{{ form.username|add_class:"form-control" }}

0 人点赞