В ежедневной работе функция загрузки и загрузки файла является незаменимой частью. Фронтовые каркасы на основе начальной загрузки также используются чаще. Теперь, основываясь на мощных шаблонах стиля Bootstrap, настраивайте стиль для загрузки файлов.
В будущем мы будем использовать Spring MVC Framework для реализации всего кода, загруженного файлом, поэтому следите за обновлениями.
Давайте сначала посмотрим на пример изображения: этот пример включает в себя примеры образец стилей файлов и загрузку стилей файлов.
Сначала загрузите код и, наконец, объясните:
<div id = "file"> <label for = ""> select file: </label> <div> <input id = "lefile" type = "file" style = "display: none"> <span onclick = "$ ('input [id = lefile]'). Click ();" style = "cursor: pointer; фоновый цвет: #e7e7e7"> <i> </i> rowse </span> <input id = "photocover" type = "text"> <span style = "cursor: pointer; pointer-events: auto;"> </span> </div> </div>Основными технологиями являются: начальная загрузка; Указатель-экземпляры CSS3; HTML5
1. Базовый стиль загрузки файлов HTML5
<input type = "file" name = "file">
Стиль будет отображать различные эффекты в соответствии с различными браузерами.
2. Значки шрифта
Вы можете использовать значок шрифта Glyphicons, встроенный в начальную загрузку или удивительные значки шрифтов. Для конкретных учебных пособий, пожалуйста, обратитесь к официальному веб -сайту:
Глификоны: http://v3.bootcss.com/components/#glyphicons
Шрифт потрясающий: http://fontawesome.io/
В этом примере используются две значки, <i> <i>
Или <i> <i>
3. CSS3: INSE-EVENTS
В начальной загрузке указывают, что экземпляры. Форма-контроль обратной связи устанавливаются на NONE, что вызывает выбранные элементы при нажатии на кнопку «Пример загрузки» и теперь устанавливаются на Auto.
Грамматика:
Указатель-события: Авто | нет | VisiblePainted | Visiblefill | Visiblestroke | видимый | окрашен | заполнить | ход | все
Значение по умолчанию: Авто
Применимо: все элементы
Наследство: да
Анимация: нет
Рассчитайте значение: укажите значение
Ценить:
Авто: та же производительность, что и свойство event-events, не указана. То же значение, что и видно на содержании SVG
Нет: элемент никогда не станет целью для мышиных событий . Однако, когда собственность по указателю его элемента потомки указывает другие значения, событие мыши может указывать на элемент потомка, и в этом случае событие мыши запустит слушатель событий родительского элемента в приказе захвата или пузырьков.
Другие значения могут применяться только к SVG.
4. Кнопка для загрузки файла ------- Использование поле Bootstrap Combo Box
Использование. INPUT-GROUP и. INPUT-GROUP-ADDON.
Для конкретного рендеринга CSS сами проверьте исходный код начальной загрузки.
5. Реализация кнопки примера загрузки --- См.
Использование.
Если вы не узнали достаточно, вы можете нажать здесь, чтобы узнать, а затем прикрепить к вам замечательную тему: учебник по обучению Bootstrap
Вышеуказанное посвящено этой статье, и я надеюсь, что всем будет полезно изучить программирование начальной загрузки.