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

发布时间:2019-08-27 12:00--阅读:300--评论:0条

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>

微信公众号ID(feiutech)

微信公众号ID:feiutech

评论列表

共0条评论

我要评论

用户名:
邮箱: