使用django-crispy-form美化form表单
赫连卓
django-crispy-form的具体使用参照https://django-crispy-forms.readthedocs.io/en/latest/
1、安装django-crispy-form包
pip install django-crispy-forms
2、配置settings.py
- 在INSTALLED_APPS 中加 'crispy_forms',
- 加 入CRISPY_TEMPLATE_PACK = 'bootstrap3'
- 在模板顶部加{% load crispy_forms_tags %}，<form>标签中加 {{ form | crispy }}
例如：
{% load crispy_forms_tags %}
<form action="" method="post">
{% csrf_token %}
{{ form | crispy }}
<input type="submit" value="提交">
</form>3、在bootstrap(官网：https://www.bootcdn.cn/）中下载样式：
在<head>中加bootstrap的css样式（3.3.7版本的）：
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
在<body>中加bootstrap的js样式（3.3.7版本的）：
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
在<body>中加bootstrap的jq样式（放在js的上面）：
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Django Form</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
div <div class="container">
<div align="center">
<h1>Django Form 表单</h1>
<hr>
{# <form action="" method="post">#}
{# {% csrf_token %}#}
{# {{ form }}#}
{# {{ form.as_p }}#}
{# {{ form.as_table }}#}
{# {{ form.as_ul }}#}
{# <input type="submit" value="提交">#}
{# </form>#}
{% include 'snippet/form.html' %}
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
类似资料：