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. 【统计难题】【HDU - 1251】【map打表或字典树】【字典树模板】

    思路 题意:题目为中文题,这里不再过多阐述. 思路1:可以在读入单词表的过程中将单词分解,用map将它一 一记录 思路2:利用字典树,这个方法较快些,下面代码中会分别给出数组和结构体指针两种形式的字典 ...

  2. 解决 Vue 刷新页面后 store 数据丢失的问题

    原来的状态(页面刷新数据会重置) state: { teamA: '主队' }, mutations: { data_teamA(state, x) { state.teamA = x } },   ...

  3. python数据可视化（一）——绘制随机漫步图

    数据可视化指的是通过可视化表示来探索数据,它与数据挖掘紧密相关. python有一系列的可视化和分析工具,最流行的工具之一是matplotlib,它是一个数学绘图库. 实现绘制随机漫步图   利用ra ...

  4. Java学习 从0.1开始（一）

    写在前面: 之前从事过.NET,C,C++相关的开发,Java是一直没有学习的新领域.最近,应工作需要,开始学习Java相关的知识.又因为新公司并没有完整的系统架构,所以学习方向会侧重架构方向(Cod ...

  5. 线程池的使用（ThreadPoolExecutor详解）

    为什么要使用线程池? 线程是一个操作系统概念.操作系统负责这个线程的创建.挂起.运行.阻塞和终结操作.而操作系统创建线程.切换线程状态.终结线程都要进行CPU调度——这是一个耗费时间和系统资源的事情. ...

  6. (实例2) TFT2.0液晶屏幕测试 mega2560

    关键修改 针对mega2560板子 #define TFT_RST A4 #define TFT_RS A3 #define TFT_CS A5 // SS #define TFT_SDI A2 // ...

  7. OLED液晶屏幕（0）自动获取12ic地址液晶屏幕

    . 烧录 串口可以看到输出的地址 #include <Wire.h> void setup(){ Wire.begin(); Serial.begin(9600); Serial.prin ...

  8. apisix 基于openresty 的api 网关

    apisix 是由openresty 团队开发并开源的微服务api gateway,还不错,官方文档也比较全,同时这个也是一个不错的学习openresty 的项目 以下为来自官方的架构图 插件加载 插 ...

  9. 洛谷 P3371 【模板】单源最短路径（弱化版） 题解

    P3371 [模板]单源最短路径(弱化版) 题目背景 本题测试数据为随机数据,在考试中可能会出现构造数据让SPFA不通过,如有需要请移步 P4779. 题目描述 如题,给出一个有向图,请输出从某一点出 ...

  10. PE安装器说明by双心

    PE安装器说明by双心http://www.cnblogs.com/liuzhaoyzz/p/4204262.htmlhttps://share.weiyun.com/5749g5p基于omnifs3 ...