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

菲宇

发布于 2019-08-14 11:03:31

2.7K0

发布于 2019-08-14 11:03:31

文章被收录于专栏：菲宇菲宇

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版本的）：

在<body>中加bootstrap的js样式（3.3.7版本的）：

在<body>中加bootstrap的jq样式（放在js的上面）：

例如：

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019年08月12日，如有侵权请联系 cloudcommunity@tencent.com 删除

bootstrap