Перейти к основному содержанию

File

Используйте наши пользовательские входные файлы для согласованного кросс-браузерного стиля, встроенной настройки и упрощенного JavaScript.

Содержание
Рекомендуемый плагин для анимации пользовательского ввода файла - bs-custom-file-input; это то, что мы используем в нашей документации.

По умолчанию

Файловый ввод является наиболее сложным из всех и требует дополнительного JavaScript, если вы хотите связать их с функциональной функцией Выбрать файл… и выбранным текстом имени файла.

<div class="form-file">
  <input type="file" class="form-file-input" id="customFile">
  <label class="form-file-label" for="customFile">
    <span class="form-file-text">Choose file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

Добавьте disabled атрибут в, <input> и пользовательская разметка будет обновлена ​​и станет отключенной.

<div class="form-file">
  <input type="file" class="form-file-input" id="customFileDisabled" disabled>
  <label class="form-file-label" for="customFileDisabled">
    <span class="form-file-text">Choose file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

Более длинный текст-заполнитель обрезается, а при недостатке места добавляется многоточие.

<div class="form-file">
  <input type="file" class="form-file-input" id="customFileLong">
  <label class="form-file-label" for="customFileLong">
    <span class="form-file-text">Lorem ipsum posuere consectetur est at lobortis nulla vitae elit libero a pharetra augue fusce dapibus tellus ac cursus commodo tortor mauris condimentum nibh ut fermentum massa justo sit amet risus cras mattis consectetur purus sit amet fermentum</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

Мы прячемся файл по умолчанию <input> через opacity и вместо этого стиля по <label> и объявить width и height на <input> для правильного расстояния для окружающего содержимого.

Размеры

Вы также можете выбирать между маленькими и большими входными файлами, чтобы соответствовать нашим текстовым входам аналогичного размера.

<div class="form-file form-file-lg mb-3">
  <input type="file" class="form-file-input" id="customFileLg">
  <label class="form-file-label" for="customFileLg">
    <span class="form-file-text">Choose file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

<div class="form-file form-file-sm">
  <input type="file" class="form-file-input" id="customFileSm">
  <label class="form-file-label" for="customFileSm">
    <span class="form-file-text">Choose file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>
Комментарии для сайта Cackle