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. python测试开发django-rest-framework-59.restful接口开发

    前言 REST 不是什么具体的软件或者代码,而是一种思想.现在流行前后端分离开发项目,一般用 json 来交换数据. 相信写过模板的同学都知道,只要哪怕页面中的数据有一丝丝变动,那整个页面都需要重新渲 ...

  2. spring的面试题

    什么是spring? spring是一个开源框架,为简化企业级应用开发而生.Spring可以是使简单的javaBean实现以前只有EJB才能实现的功能.Spring是一个IOC和AOP容器框架. Sp ...

  3. Java线程池（ExecutorService）使用

    一.前提 /** * 线程运行demo,运行时打出线程id以及传入线程中参数 */ public class ThreadRunner implements Runnable { private fi ...

  4. Mybatis框架-update节点元素的使用

    今天我们学习一下mybatis框架中的update节点元素的使用 需求:修改用户表中的一条数据记录,修改编号为21的用户的密码 UserMapper.xml UserMapper.java 编写测试方 ...

  5. python面试题&练习题之嵌套循环

    1.打印如下结果: 1*5=5 2*10=20 3*15=45 ... 10*50=500 for i in range(1,11): print(str(i)+'x'+str((i*5))+'='+ ...

  6. cors劫持用户凭证任意登陆

    漏洞作者:rcoil 挖洞过程无意中看到一个数据包,响应包中包含有Access-Control-Allow-Origin这个字段,然后就随手尝试看看有没有CORS漏洞!结果如图 再尝试 发现如下图! ...

  7. Linux端口转发工具rinetd

    介绍:Rinetd是为在一个Unix和Linux操作系统中为重定向传输控制协议(TCP)连接的一个工具.Rinetd是单一过程的服务器,它处理任何数量的连接到在配置文件etc/rinetd中指定的地址 ...

  8. 学习Spring-Data-Jpa(十七)---对Web模块的支持

    Spring-Data还提供了Web模块的支持,这要求Web组件Spring-MVC的jar包位于classpath下.通常通过使用@EnableSpringDataWebSupport注解来启用继承 ...

  9. Support Vector Machines

    支持向量机SVM. 简介 SVM核函数包括线性核函数.多项式核函数.径向基核函数.高斯核函数.幂指数核函数.拉普拉斯核函数.ANOVA核函数.二次有理核函数.多元二次核函数.逆多元二次核函数以及Sig ...

  10. 将windbg与.dmp文件关联

    如果您厌倦了启动调试器.加载转储文件.设置sympath.加载扩展名等,这里有一个很好的方法,可以在.dmp文件的上下文菜单上获取“调试此转储文件”,并自动加载所有您喜欢的命令.首先创建一个包含以下内 ...