<p>下面是一个使用Bootstrap 4进行样式设置的示例。首先创建一个子类为<a href="https://docs.djangoproject.com/en/3.0/topics/auth/default/#django.contrib.auth.views.LoginView" rel="nofollow noreferrer">LoginView</a>的视图。在html文件中,而不是使用<code>{{ form }}</code>或<code>{{ form.username }}</code>&<code>{{ form.password }}</code>,您可以为字段提供自己的html。只需确保输入的名称与<code>{{ form }}</code>中的名称相同</p>
<p>views.py:</p>
<pre><code>from django.contrib.auth.views import LoginView
class MyLoginView(LoginView):
template_name = 'login.html'
</code></pre>
<p>login.html:</p>
<pre><code>{% block content %}
...
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
{% csrf_token %}
<div class="form-group">
<label for="username" class="text-white">Username:</label><br>
<input type="text" name="username" id="username" class="form-control" required>
</div>
<div class="form-group">
<label for="password" class="text-white">Password:</label><br>
<input type="password" name="password" id="password" class="form-control" required>
</div>
<div class="form-group">
<input type="submit" name="login" class="btn btn-light btn-md btn-block mt-5"
value="log in">
</div>
</form>
</div>
</div>
</div>
...
{% endblock content %}
</code></pre>