HTML5教程

用户注册功能的前端页面 栅格系统

本文主要是介绍用户注册功能的前端页面 栅格系统，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

用户注册功能的前端页面 栅格系统

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
{#    增加样式用style#}
    <style>
        .meihua{
            width:400px;
            margin:0 auto;
        }

    </style>
</head>
<body>
    <div class="meihua">
        <h1 style="text-align:center">用户注册</h1>
        <form>
            {% for i in form %}
                {% if i.name == '验证码' %}
                    <div class="form-group">
                        <label for="{{ i.id_for_label }}">{{ i.label }}:</label>
                        <div class="clearfix">
{#                            因为要在一个输入框中分成两个部分，一部分是验证码内容，一部分是个按钮，点击获取验证码，所以要栅格#}
                            <div class="col-md-6" style="padding-left: 0">{{ i }}</div>
                            <div class="col-md-6"><input type="button" class="btn btn-default" value="点击获取验证码"></div>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label for="{{ i.id_for_label }}">{{ i.label }}:</label>
                            {{ i }}
                    </div>
                {% endif %}
            {% endfor %}
            <button type="submit" class="btn btn-primary">注册</button>
        </form>
    </div>




<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
</body>
</html>
这篇关于用户注册功能的前端页面 栅格系统的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航