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

要将Bootstrap 4样式应用于“选择文件”输入，您需要修改Django代码以生成以下HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile" name="myImage">
    <label class="custom-file-label" for="customFile">Choose image file...</label>
</div>

这将产生占据卡片全宽的文件选择器。

如果您需要验证输入，则需要以下HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="custom-file">
    <input type="file" name="myImage" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose image file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
</div>

有关详细信息，请访问此页面：

https://getbootstrap.com/docs/4.0/components/forms/#file-browser

有关验证的信息，请点击此处：

https://getbootstrap.com/docs/4.0/components/forms/#validation

Answer 2

在搜寻了互连网之后，我发现了下面的链接，但首先是紧身的

：

使用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）'display：none;'

的同时，将form.field嵌套在内部

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

如何将“选择文件”输入的Bootstrap 4样式应用于Django表单？

2 个答案: