Cмотреть на GitHub
Загрузка файлов
Используйте наши пользовательские формы для загрузки файлов в кросс-браузерном стиле со встроенными настройками и облегченным JavaScript.
На этой странице
Рекомендуемый плагин для анимации пользовательской загрузки файлов - bs-custom-file-input, его мы используем в наших документах.
Настройки по умолчанию
Загрузки файлов является довольно сложным процессом и требует дополнительного JavaScript, если вы хотите связать их с функцией Choose file… и выбранным текстом имени файла.
<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 и вместо этого стилизуем
Определение размера
Вы также можете выбирать из небольших и больших пользовательских выборок для соответствия текстового ввода аналогичного размера.
<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>