Python - Django - 使用 Bootstrap 样式修改注册页

最新推荐文章于 2022-08-27 00:40:10 发布

andiao1218

最新推荐文章于 2022-08-27 00:40:10 发布

阅读量288

点赞数 1

文章标签： python javascript ViewUI

原文链接：http://www.cnblogs.com/sch01ar/p/11478529.html

版权

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>

运行结果：

转载于:https://www.cnblogs.com/sch01ar/p/11478529.html

andiao1218

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Python - Django - 使用 Bootstrap 样式修改注册页

reg2 函数：from django.shortcuts import render, HttpResponsefrom app01 import modelsdef reg2(request): form_obj = RegForm() # GET 请求 if request.method == "POST": fo...
复制链接

扫一扫