Bootstrap File Input：使用Bootstrap框架轻松实现文件上传功能

要使用Bootstrap File Input，首先确保您的项目中已经包含了Bootstrap框架的CSS和JS文件。然后，按照以下步骤操作：

1. 在HTML文件中创建一个文件输入框，并为其添加一个自定义的类名或ID，以便稍后通过JavaScript进行操作。例如：

<input type="file" class="form-control-file"
         id="customFile">

1. 在CSS文件中添加以下样式，以使文件输入框与Bootstrap框架的样式保持一致：

.form-control-file {
    height: 0.01px;
    position: absolute;
    width: 1px;
    opacity: 0;
}

1. 使用JavaScript代码来初始化文件输入框，并为其添加Bootstrap File Input插件的功能。例如：

$(document).ready(function() {
    $('#customFile').fileinput({
        showUpload: false,
        showCaption: false,
        browseLabel: '选择文件',
        removeLabel: '移除',
        removeClass: 'btn btn-danger btn-sm',
        removeIcon: '<i class="bi bi-x-circle text-danger"></i> '
    });
});

在这个例子中，我们使用了jQuery和Bootstrap File Input插件来初始化文件输入框。通过设置showUpload属性为false，我们隐藏了上传按钮。showCaption属性被设置为false以隐藏文件名。browseLabel属性用于设置选择文件的按钮文本。removeClass属性用于设置移除文件的按钮样式。最后，通过在removeIcon属性中添加自定义图标，我们可以自定义移除文件的图标。

以上步骤完成后，您应该能够看到一个响应式的文件输入框，用户可以点击按钮选择文件。选择的文件名将显示在下方的文本框中，而移除文件的按钮将允许用户从列表中删除文件。

请注意，这只是一个简单的示例，您可以根据您的需求对Bootstrap File Input插件进行更多定制和配置。有关更多详细信息和选项，请参阅Bootstrap File Input插件的文档。