Question

我的网站上的bootstrap 4中有多个自定义文件对话框。我知道如何通过scss变量设置自定义文件文本，如下所示：

$custom-file-text: (
    placeholder: (
      en: "Choose file...",
      es: "Seleccionar archivo...",
      de: "Datei wählen..."
    ),
    button-label: (
      en: "Browse",
      es: "Navegar",
      de: "Durchsuchen"
    )
  );

但这将适用于我所有可用的自定义文件对话框。如何为每个自定义文件对话框单独设置文本？

Answer 1

如果您只是想更改占位符而不是按钮标签，则可以在.custom-file-control <span>中输入文字：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<label class="custom-file">
  <input type="file" id="file2" class="custom-file-input">
  <span class="custom-file-control">Ermagherd!</span>
</label>

＆＃13;

话虽如此......值得考虑的是是否应该更改此处提供的值，因为任何偏离明确指示用户单击此组件应该会出现文件窗口的情况可能会导致混乱。

注意：StackOverflow似乎没有正确呈现custom-file组件;您可以在Bootply上查看相同的代码：https://www.bootply.com/IcMAXzCHxj

Bootstrap 4个带自定义文件文本的自定义文件对话框？

1 个答案: