python - BOOTSTRAP 登录模板不适用于 FORM

标签 python css django twitter-bootstrap forms

我的登录页面看起来不像我想要的那样,就像这个 Bootstrap 登录页面就在这里 https://getbootstrap.com/docs/4.0/examples/sign-in/ .这是 what it looks like right now

如果你能帮我解决这个问题,那将是我的世界

此外,如果您认为这是因为我没有链接到 CSS 页面,这就是我的基本模板的外观和结构:

{% load staticfiles %}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Accounts</title>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'accounts/signin.css' %}" />
</head>

<body>


    <div class="jumbotron">
        <div class="container">

            {% block main_content %} 
            {% endblock %} 
        </div>
    </div>

</body>

</html>

View .py

from django.contrib.auth import (
      authenticate,
      get_user_model,
      login,
      logout,
 )
from django.shortcuts import render
from django.http import HttpResponse,HttpResponseRedirect
from .forms import UserLoginForm

# Create your views here.
def login_view(request):
    title = "Login"
    form = UserLoginForm(request.POST or None)
    if form.is_valid():
        username = form.cleaned_data.get("username")
        password = form.cleaned_data.get('password')
        user = authenticate(request, username=username, password=password)      
        if user is not None:
          login(request, user)
          # or any other success page
        #   return HttpResponse("Logged in")
        return HttpResponseRedirect('accounts/home')
    return render(request, "accounts/form.html", {"form":form, "title": title})

表单.py

from django import forms
from django.contrib.auth import (
    authenticate,
    get_user_model,
    login,
    logout,

    )

User = get_user_model()

class UserLoginForm(forms.Form):
    username = forms.CharField()
    password = forms.CharField(widget=forms.PasswordInput) 

    class Meta: 
        model = User 
        fields = ('username', 'email', 'password')

    def clean(self,*args,**kwargs):
        username = self.cleaned_data.get("username")
        password = self.cleaned_data.get("password")
        user = authenticate(username=username,password=password)
        if not user:
            raise forms.ValidationError("This user does not exist")
        if not user.check_password(password):
            raise forms.ValidationError("Incorrect Password")
        if not user.is_active:
            raise forms.ValidationError("This user is no longer active.")
        return super(UserLoginForm, self).clean(*args,**kwargs)

form.html(目前用于登录,开放使用相同格式注册)

{% extends 'accounts/base.html' %}
{% block main_content %}
    <div class="container">
        <div class='col-sm-6 col-sm-offset-3'>
        <h1>{{ title }}</h1>
        <form method='POST' action='' enctype='multipart/form-data'>{% csrf_token %}
            {{ form }}
            <input type='submit' class='btn btn-primary btn-block' value='{{ title }}' />
        </form>
    </div>
    </div>
{% endblock %}

What My Framework Looks Like

非常感谢

@Lemayzeur 这是what my site looks like now

这是 what I want it to look like

- 它非常接近,但不幸的是它不一样。尽管如此,我会保留它并谢谢你。

最佳答案

您的 CSS 文件运行良好,因为该按钮继承了 Bootstrap 设计, 问题是您拥有的所有输入都没有 form-control 类。所以要添加这些类,您可以使用小部件来完成

class UserLoginForm(forms.Form):
    username = forms.CharField(max_length=120,
         widget=forms.TextInput(attrs={'class':'form-control',"placeholder":"Username"}))
    password = forms.CharField(max_length=100,
          widget=forms.PasswordInput(attrs={'class':'form-control',"placeholder":"Password"})) 

关于python - BOOTSTRAP 登录模板不适用于 FORM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50635143/

相关文章:

python - 在Python中装饰方法签名中没有self的类

javascript - 如何使用以前的跨度顶部和左侧位置来放置其他跨度,以免它们相互重叠?

css 文件没有在 firefox 中呈现

python - 如何在django上添加评论

python - 如何将数据库路由器添加到 Django 项目

python - 在 Django 中按非字段过滤

python - 在 Travis CI 中安装 Numpy 1.8

python - 使用 SSH 时仅在终止时显示 python 脚本的输出?

python - 将 STDIN 传递给一个本身被传递给 Python 解释器的脚本?

css - 使用 CSS 动画关闭 SVG 框的盖子