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

【问题标题】：How to apply Bootstrap 4 styles for 'Choose File' input to a Django form?如何将“选择文件”输入的 Bootstrap 4 样式应用于 Django 表单？
【发布时间】：2018-07-22 21:17:58
【问题描述】：

我正在显示一个涉及在我的 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应用到表单中的按钮上？

【问题讨论】：

标签： html twitter-bootstrap django-templates bootstrap-4

【解决方案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 中使用带有引导类的跨度。然后将你的form.field嵌套在里面，同时传入'style'属性（CSS）'display：none;'

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

【讨论】：

【解决方案2】：

要将 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

【讨论】：

你确定用上面的代码替换渲染 Django 表单的代码仍然会将输入链接到 Django 表单吗？
是的，100%。单击“运行代码 sn-p”按钮以查看它的工作原理。
我的意思是，代码 sn-p 需要是您的 Django 表单的部分，即在其中。