reg2 函数：

from django.shortcuts import render, HttpResponse

from app01 import models

def reg2(request):

    form_obj = RegForm()  # GET 请求

    if request.method == "POST":

        form_obj = RegForm(request.POST)

        if form_obj.is_valid():

            pass

    return render(request, "reg2.html", {"form_obj": form_obj})

在 bootstrap 上找到表单样式，https://v3.bootcss.com/css/#forms

label 标签处用的是 form-group 样式

reg2.html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册页面</title>

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <form action="/reg2/" method="post" novalidate>

        {% csrf_token %}

        <div class="form-group">

            {{ form_obj.username.label }}

            {{ form_obj.username }}

            <span>{{ form_obj.username.errors.0 }}</span>

        </div>

        <div class="form-group">

            {{ form_obj.password.label }}

            {{ form_obj.password }}

            <span>{{ form_obj.password.errors.0 }}</span>

        </div>

        <p><input type="submit"></p>

    </form>

</div>

</body>

</html>

input 标签处用的是 form-control 样式

在 views.py 的 form 类中用 widgets 进行添加该样式

from django import forms

from django.forms import widgets

class RegForm(forms.Form):

    username = forms.CharField(

        min_length=5,

        label="用户名",

        error_messages={

            "min_length": "用户名不能少于5位！",

        },

        widget=widgets.TextInput(attrs={"class": "form-control"})

    )

    password = forms.CharField(

        min_length=6,

        label="密码",

        error_messages={

            "min_length": "密码不能少于6位！",

        },

        widget=widgets.PasswordInput(attrs={"class": "form-control"}, render_value=True)

    )

button 处用的是 btn btn-default 样式

直接在 index.html 处添加就好了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册页面</title>

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <form action="/reg2/" method="post" novalidate>

        {% csrf_token %}

        <div class="form-group">

            {{ form_obj.username.label }}

            {{ form_obj.username }}

            <span>{{ form_obj.username.errors.0 }}</span>

        </div>

        <div class="form-group">

            {{ form_obj.password.label }}

            {{ form_obj.password }}

            <span>{{ form_obj.password.errors.0 }}</span>

        </div>

        <p><input type="submit" class="btn btn-default"></p>

    </form>

</div>

</body>

</html>

运行结果：

input 处太长了，把它布局到中间

index.html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册页面</title>

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-6 col-md-offset-3">

            <form action="/reg2/" method="post" novalidate>

                {% csrf_token %}

                <div class="form-group">

                    {{ form_obj.username.label }}

                    {{ form_obj.username }}

                    <span>{{ form_obj.username.errors.0 }}</span>

                </div>

                <div class="form-group">

                    {{ form_obj.password.label }}

                    {{ form_obj.password }}

                    <span>{{ form_obj.password.errors.0 }}</span>

                </div>

                <p><input type="submit" class="btn btn-default"></p>

            </form>

        </div>

    </div>

</div>

</body>

</html>

左边空 3 份，中间占 6 份，右边剩下 3 份

运行结果：

输入内容，点击 “提交”

错误提示可以使用 help-block 样式

reg2.html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册页面</title>

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-6 col-md-offset-3">

            <form action="/reg2/" method="post" novalidate>

                {% csrf_token %}

                <div class="form-group {% if form_obj.username.errors.0 %}has-error{% endif %}">

                    {{ form_obj.username.label }}

                    {{ form_obj.username }}

                    <span class="help-block">{{ form_obj.username.errors.0 }}</span>

                </div>

                <div class="form-group {% if form_obj.password.errors.0 %}has-error{% endif %}">

                    {{ form_obj.password.label }}

                    {{ form_obj.password }}

                    <span class="help-block">{{ form_obj.password.errors.0 }}</span>

                </div>

                <p><input type="submit" class="btn btn-default"></p>

            </form>

        </div>

    </div>

</div>

</body>

</html>

运行结果：

Python - Django - 使用 Bootstrap 样式修改注册页的更多相关文章

  1. Python - Django - 使用 Bootstrap 样式修改书籍列表

    展示书籍列表: 首先修改原先的 book_list.html 的代码: <!DOCTYPE html> <!-- saved from url=(0042)https://v3.bo ...

  2. python Django教程 之 安装、基本命令、视图与网站

    python  Django教程  之 安装.基本命令.视图与网站 一.简介 Django 中提供了开发网站经常用到的模块,常见的代码都为你写好了,通过减少重复的代码,Django 使你能够专注于 w ...

  3. python Django知识点总结

    python Django知识点总结 一.Django创建项目: CMD 终端:Django_admin startproject sitename(文件名) 其他常用命令: 其他常用命令: 通过类创 ...

  4. [python] python django web 开发 —— 15分钟送到会用（只能送你到这了）

    1.安装python环境 1.1 安装python包管理器: wget https://bootstrap.pypa.io/get-pip.py sudo python get-pip.py   1. ...

  5. python Django教程 之 模型(数据库)、自定义Field、数据表更改、QuerySet API

    python  Django教程  之 模型(数据库).自定义Field.数据表更改.QuerySet API 一.Django 模型(数据库) Django 模型是与数据库相关的,与数据库相关的代码 ...

  6. Python+Django+Eclipse 在Windows下快速开发自己的网站

    一.配置开发环境 我的开发环境是:Python3.3.2 + Django1.5.2 + Eclipse 1.安装Python 下载地址:http://www.python.org/getit/ 安装 ...

  7. python Django 学习笔记（一）—— Django安装

    注:本人python版本2.7.5 ,win7系统 安装Django https://www.djangoproject.com/download/ 官方下载Django-1.5.5.tar.gz 1 ...

  8. ECSHOP在线手册布局参考图--登录/注册页 user_passport.dwt

        A.会员登录框 1,设置方法 自带模块 2,代码相关 user_passport.dwt 中 <div class="usBox_1 f_l"> <div ...

  9. Python Django CMDB项目实战之-3创建form表单，并在前端页面上展示

    基于之前的项目代码 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页.index页.文章页面 Python Django CMDB项目实战之-2创建APP. ...

随机推荐

  1. github配置SSH proxy

    在windows users 用户目录下生成config文件,如在C:\Users\your_user_name\.ssh 目录下,找到config文件,如果没有新建一个,写入如下内容: Host g ...

  2. CentOS7.5环境下搭建禅道

    在安装配置禅道之前,可以百度了解一下两款项目管理工具禅道与JIRA的区别. 一.安装 进入禅道官网https://www.zentao.net,选择适用的版本进行安装,我这里下载的是“开源版11.6” ...

  3. 【POJ3714】Raid：平面最近点对

    Description After successive failures in the battles against the Union, the Empire retreated to its ...

  4. Python 多版本安装模块

    自己安装的是 3.7.3 版本的,但是在安装其他软件的时候自带有Python,但是版本都不一样,有2.7的有3.7的. 自己平时用没有问题,配置的环境都是自己的 3.7.3 的,在用其他软件的Pyth ...

  5. ARTS-week6

    Algorithm 给定一个已按照升序排列 的有序数组,找到两个数使得它们相加之和等于目标数.函数应该返回这两个下标值 index1 和 index2,其中 index1 必须小于 index2 Tw ...

  6. 阿里云——扩展Linux系统盘

    前言 地址|https://help.aliyun.com/document_detail/111738.html?spm=a2c4g.11186623.2.7.1d284c07SFRBaq#sect ...

  7. Pycharm中打开Terminal方式

    点击剪头的图标就可以在左侧出现Terminal

  8. javaWeb开发中entityBean的习惯用法

    entity bean的作用是将与数据库交互的过程封装成对象,在servelet编写的过程中,只需要会写java,不必考虑与数据库交互细节. 实体类: 基本与数据库的表相对应,表示一个实在的对象. 例 ...

  9. HDU - 5513 Efficient Tree(轮廓线DP)

    前言 最近学了基于连通性的状压DP,也就是插头DP,写了几道题,发现这DP实质上就是状压+分类讨论,轮廓线什么的也特别的神奇.下面这题把我WA到死- HDU-5531 Efficient Tree 给 ...

  10. Build Post Office II

    Description Given a 2D grid, each cell is either a wall 2, an house 1 or empty 0 (the number zero, o ...