django 表单样式与 bootstrap4 问题

Question

I got some problems styling a form in django with bootstrap.我在使用引导程序设计 django 中的表单样式时遇到了一些问题。 I tried some diffrent ways to get it to work but cant.我尝试了一些不同的方法来让它工作但不能。

Any ideas how to style this form with bootstrap 4?关于如何使用 bootstrap 4 设置此表单的样式有什么想法吗？

edited with the base.html code so you can see the imports.使用 base.html 代码进行编辑，以便您可以看到导入。

at the moment with the code i have it looks like this.目前我的代码看起来像这样。 styling at the moment picture此刻的造型图片

edit_profile_page.html edit_profile_page.html

{% extends 'base.html' %}
{% block title %}Edit Profile Page{% endblock %}
{% block content %}


{% if user.is_authenticated %}
    {% if user.id == profile.user.id %}
        <h1>Edit Profile Page</h1>
        <br/><br/>

        <div class="form-group">
    <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                {{ form.as_p }}
                <button class="btn btn-info">Update Profile Page</button>
        </div>



    {% else %}

    You got no access here!
    {% endif %}

{% else %}

You got no access here!


{% endif %}


{% endblock %}

forms.py forms.py

from django.contrib.auth.forms import UserCreationForm, UserChangeForm, PasswordChangeForm
from django.contrib.auth.models import User
from django import forms
from newsapp.models import Profile

class ProfilePageForm(forms.ModelForm):
    class Meta:
        model = Profile
        fields = ('bio', 'profile_pic', 'website_url', 'facebook_url', 'twitter_url', 'instagram_url', 'pinterest_url')

        widgets = {
            'bio': forms.Textarea(attrs={'class': 'form-control'}),
            'website_url': forms.TextInput(attrs={'class': 'form-control', }),
            'facebook_url': forms.TextInput(attrs={'class': 'form-control'}),
            'twitter_url': forms.TextInput(attrs={'class': 'form-control'}),
            'instagram_url': forms.TextInput(attrs={'class': 'form-control'}),
            'pinterest_url': forms.TextInput(attrs={'class': 'form-control'}),
        }

base.html基地.html

{% load static %}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'newsapp/css/style.css' %}">


    <title>
      {% block title %}
          Newsblog
      {% endblock %}
    </title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="{% url 'home' %}">Newsblog</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">


      <!-- Category Menu Code -->
      {% if cat_menu %}
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Categories
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">


          {% for item in cat_menu %}
           <a class="dropdown-item" href="{% url 'category' item|slugify %}">{{ item }}</a>
          {% endfor %}


        </div>
      </li>
      {% else %}

        <li class="nav-item">
            <a class="nav-link" href="{% url 'category-list' %}">Categories</a>
        </li>

      {% endif %}

      {% if user.is_authenticated %}
        <li class="nav-item">
          <a class="nav-link" href="{% url 'add_post' %}">Add Post</a>
        </li>







      {% else %}
        <li class="nav-item">
          <a class="nav-link" href="{% url 'register' %}">Register</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="{% url 'login' %}">Login</a>
        </li>

      {% endif %}





    </ul>
{% if user.is_authenticated %}

    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            {{ user.first_name }}
            {{ user.last_name }}
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="{% url 'edit_profile' %}">Edit Settings</a>

            {% if user.profile.id %}
              <a class="dropdown-item" href="{% url 'edit_profile_page' user.profile.id %}">Edit Profile Page</a>

              <a class="dropdown-item" href="{% url 'show_profile_page' user.profile.id %}">Show Profile Page</a>


            {% else %}
            <a class="dropdown-item" href="{% url 'create_profile_page' %}">Create Profile Page</a>




            {% endif %}


          <a class="dropdown-item" href="{% url 'logout' %}">Logout</a>



          </div>
      </li>



    </ul>

{% endif %}

  </div>
</nav>



    <br/>
    <div class="container">
      {% block content %}

      {% endblock %}
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Answer 1

Here the problem is in the file forms.py.the Textarea,TextInput are included in django.forms.widget so,这里的问题出在文件 forms.py 中。Textarea,TextInput 都包含在 django.forms.widget 中，所以，

the code will be like this,代码将是这样的，

forms.py forms.py

from django.contrib.auth.forms import UserCreationForm, UserChangeForm, PasswordChangeForm
from django.contrib.auth.models import User
from django.forms.widgets import TextInput, Textarea

from newsapp.models import Profile

class ProfilePageForm(forms.ModelForm):
    class Meta:
        model = Profile
        fields = ('bio', 'profile_pic', 'website_url', 'facebook_url', 'twitter_url', 'instagram_url', 'pinterest_url')

        widgets = {
            'bio': Textarea(attrs={'class': 'form-control'}),
            'website_url': TextInput(attrs={'class': 'form-control', }),
            'facebook_url':TextInput(attrs={'class': 'form-control'}),
            'twitter_url': TextInput(attrs={'class': 'form-control'}),
            'instagram_url':TextInput(attrs={'class': 'form-control'}),
            'pinterest_url': TextInput(attrs={'class': 'form-control'}),
        }

or或者

 widgets = {
                'bio': forms.widgets.Textarea(attrs={'class': 'form-control'}),
..
..
..
..
.
.

}

django 表单样式与 bootstrap4 问题

问题描述

1 个解决方案

解决方案1
0 2022-06-05 17:04:17

django 表单样式与 bootstrap4 问题

问题描述

1 个解决方案

解决方案1 0 2022-06-05 17:04:17

解决方案1
0 2022-06-05 17:04:17