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. k8s部署etcd集群

    1.k8s部署高可用etcd集群时遇到了一些麻烦,这个是自己其中一个etcd的配置文件 例如: [Unit] Description=Etcd Server After=network.target ...

  2. Linux之RHEL7root密码破解（三）

    Linux系列root密码破解第三种方式,利用修改boot分区里的开机启动顺序来修改密码,即我们进入BIOS,修改boot启动顺序为CD-ROM: 接下来按F10保存退出 选择Troubleshoot ...

  3. C++（五十） — 容器中元素满足的条件

    容器中的内容必须满足三个条件: (1)无参构造函数 (2)拷贝构造函数 (3)重载 = 运算符 #define _CRT_SECURE_NO_WARNINGS #include <iostrea ...

  4. MySQL 日期格式化，取年月日等相关操作

    日期取年.月.日 select id, phone,time,year(time),month(time), DAY(time),TIME(time) from user where phone='x ...

  5. ES6函数的个人总结

    默认参数: 1. 在 ES5 语法中,为函数形参指定默认值的写法: 写法一: function foo (bar) { bar = bar || 'abc'; console.log(bar) } f ...

  6. Goexit

    package main import ( "fmt" "runtime" ) func test() { defer fmt.Println("cc ...

  7. (尚018-第二章2.1)Vue使用vue-cli创建模板项目

    2.1.1 1)vue-cli是官方提供的脚手架工具(注意:脚手架本身是个库) 2)github:https://github.com/vuejs/vue-cli 3)作用:从https://gith ...

  8. 悲伤的 C++ throw(…)

    当在C++语言中引入异常时,引入了相应的throw(…)动态异常说明符,注释了哪些异常可以由函数抛出.比如: // this function might throw an integer or a ...

  9. 洛谷 CF894A QAQ

    目录 题目 思路 \(Code\) 题目 CF894A 思路 \(\text{DP}\) 一个数组\(\text{QAQ[4][101]}\) \(\text{QAQ[1][i]表示在i这个位置q的个 ...

  10. SQL基础-子查询&EXISTS&UNION

    一.子查询 1.使用子查询作为计算字段 子查询:嵌套在其他查询中的查询 现在有两个表,student表和teacher表 创建teacher表,并插入数据: CREATE TABLE `teacher ...