使用django-crispy-form美化form表单

2019-08-14 11:03:31 浏览数 (1)

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

例如:

代码语言:javascript复制
{% 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>

例如:

代码语言:javascript复制
<!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>

0 人点赞