html - 如何将 'Choose File' 输入的 Bootstrap 4 样式应用于 Django 表单？

Question

我正在显示一个涉及在我的 Django 模板中上传图像的表单。

这是模板:

{% extends 'header.html' %}

{% block content %}
<br>
<div class="w-50 card mx-auto">
    <div class="card-body text-center">
        <h2 class="card-title">New Post</h2>
        <form method="post">
            {% csrf_token %}
            <p><strong>
                Title<br>
                {{ form.Title }}
            </strong></p>
            <p><strong>
                Description<br>
                {{ form.Description }}
            </strong></p>
            <p><strong>
                Image 
                {{ form.Image }}
            </strong></p>
            <p><strong>
                Election<br>
                {{ election_form.PostElection }}
            </strong></p>
            <button type="submit" class='button btn btn-outline-dark'>Post</button>
        </form>
    </div>
</div>

{% endblock %}

如您所见，表单上的提交按钮附加了一些 Bootstrap。这使得它看起来与图像上传表单上的“选择文件”按钮不同。如何将应用到提交按钮的 Bootstrap 应用到表单中的按钮？

Answer 1

爬取互联网后，我找到了下面的链接，但首先是瘦身:

使用 modelForm 在选择文件按钮上实现 bootstrap4 样式

***forms.py***
class ProfileForm(forms.ModelForm):
class Meta:
    model = Profile
    fields = ('avatar',)
    widgets = {'avatar':forms.FileInput(
        attrs={'style':'display: none;','class':'form-control', 'required': False, } 
         )}


****update_form.html****
**call each feil individualy**
<label class="btn btn-outline-secondary btn-lg">
    *button text goes here*
  {{profile_form.avatar}}
</label>

要点是在 HTML 中使用带有 Bootstrap 类的跨度。然后在传入“样式”属性(CSS)“显示:无；”的同时将您的 form.field 嵌套在里面

https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3