В этой статье в основном будут представлены навыки использования форм начальной загрузки.
1. Bootstrap Basic Form
Общие элементы в формах в основном включают в себя: поля ввода текста, раскрывающиеся поля выбора, радиопроизводительные кнопки, кнопки проверки, текстовые поля и кнопки и т. Д.
Давайте сначала посмотрим на основную форму:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Tite> Основные формы </title> <link rel = "styleSheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/csss/bootstrap.min.cds> headsmin.comin.comn.comin.comn.comn.comin.comin.cds> <form rol = "form"> <div> <label for = "exampureInputEmail1"> электронная почта: </label> <input type = "email" id = "exampleInputemail1" waceholder = "Пожалуйста, введите свой адрес электронной почты"> </div> <div> <label for = "exampurePass ward1"> Palshel "> Pallass"> PallySpodeprowd wardEpplass " </div> <div> <backel> <input type = "fackbox"> запомнить пароль </label> </div> <button Type = "Opport"> Login </button> </form> </body> </html>
Рендеринги следующие:
Мы также можем достичь разных эффектов, добавив различные имена классов к формированию. Конкретные правила формы показаны в следующей таблице:
Например:
<form rol = "form"> ... </form>
2. Управление формой
1) Вход ввода ввода
<form rol = "form"> <div> <!-тип типа должен быть добавлен. Если тип типа не указан, правильный стиль не будет получен
2) Выберите поле выбора.
<form rol = "form"> <div> <!-однострочное раскрывающееся поле выбора-> <select> <опция> 1 </option> <опция> 2 </option> </select> </div> <div> <!-Multi-Line Selection Box-> <Select> <опция> 1 </option> <опция> 2 </option> </select> </div> </form>
3) текстовое поле Textarea
Текстовое поле такое же, как и исходный метод использования, настройка строк может определить его высоту, а установка COLS может устанавливать ширину. Но если в элементе Textarea добавлено имя класса «контроль формы», нет необходимости устанавливать атрибут Cols. Потому что управление формой формы «контроль формы» в платформе начальной загрузки составляет 100% или авто.
<form rol = "form"> <div> <!-row = "3" Установите высоту три строки-> <textarea rows = "3"> </textarea> </div> </form>
4) Флажок
Вертикальное расположение:
<form rol = "form"> <div> <backel> <input type = "fackbox" value = ""> флажок </label> </div> </form>
Горизонтальное расположение:
<form rol = "form"> <div> <babel> <input type = "fackbox" value = "option1"> chacebox1 </label> <label> <input type = "fackbox" value = "option2"> checkbox2 </label> </div> </form>
5) Радио от одного выбора кнопки
Вертикальное расположение:
<form rol = "form"> <div> <babel> <input type = "radio" name = "optionsradios" id = "optionsradios1" value = "love", проверено> a </label> </div> <div> <!-Будь то чехол или радио, они обернуты в label-> <label> <input = "name" name = "ntobradios 'intories vatordios. value = "hate"> b </label> </div> </form>
Горизонтальное расположение:
<form rol = "form"> <div> <babel> <input type = "radio" value = "intover1" name = "sex"> a </label> <label> <input type = "radio" value = option2 "name =" sex "> b </label> </div> </form> value.
ПРИМЕЧАНИЕ: флажок и метка помещаются в контейнер с именем ".Checkbox"; Радио и этикетка размещаются в контейнере под названием «.radio».
3. Статус управления формой начальной загрузки
1) Статус фокуса
Состояние фокуса достигается путем добавления имени класса контроль формы к входу. Состояние фокусировки управления формой в рамках начальной загрузки удаляет стиль контура по умолчанию и снова добавляет эффект тени.
<!-Форма-Горизонтальный достигает горизонтального форм-эффекта-> <form rol = "form"> <div> <div> <input type = "text" Placeholder = "Статус фокуса"> </div> </div> </form>
2) Отключить статус
Просто добавьте «отключен» к управлению формой, который должен быть отключен:
<input type = "text" Placeholder = "Форма отключена, не может быть введена" Отключена>
3) Статус проверки
Для проверки формы вам также необходимо обеспечить стиль статуса проверки. Эти эффекты также представлены в начальной загрузке:
При его использовании вам нужно только добавить имя класса состояния, соответствующее контейнеру группы форм.
<form role="form"> <div> <label for="inputWarning1">Warning status</label> <input type="text" id="inputWarning1" placeholder="Warning status"> </div> <div> <label for="inputError1">Error status</label> <input type="text" id="inputError1" placeholder="Error status"> </div> <div> <label for = "inputSuccess1"> Статус успеха </label> <input type = "text" id = "inputsuccess1" Placeholder = "Успех"> </div> </form>
Рендеринги следующие:
Если вы хотите, чтобы форма отображала значок в соответствующем состоянии, вам нужно только добавить имя класса «HASE-FEED» в соответствующее состояние (это имя класса должно сопровождаться «HAS-error», «Has Warning» и «HAS-SUCCESS»).
4. Bootstrap Form-Button
1) Кнопки на индивидуальном стиле
<button type="button">Basic Button</button> <button type="button">Default Button</button> <button type="button">Main Button</button> <button type="button">Success Button</button> <button type="button">Information Button</button> <button type="button">Warning Button</button> <button type="button">Danger Button</button> <button type="button">Link Button</button>
Рендеринги следующие:
2) Кнопка начальной загрузки поддерживает несколько метков, а кнопки, сделанные другими метками, следующие:
<button type = "button"> Кнопка тега кнопки </button> <input type = "Отправить" value = "Кнопка ввода тега"/> <pan> кнопка тега SPAN </span> <div> Div Tag </div> <a href = "##"> кнопка тега </a>
3) Размер кнопки
Управляйте размером кнопки, добавив имя класса к базовой кнопке ".btn".
<Кнопка Типа = "Кнопка"> Нормальная кнопка </button> <Кнопка Типа = "Кнопка"> Большая кнопка </button> <Кнопка Типа = "> Маленькая кнопка </Кнопка>
4) Кнопка блокировки (подробнее на мобильных терминалах)
Кнопка блока: ширина кнопки заполняет весь родительский контейнер (ширина: 100%) и не будет иметь никаких значений заполнения и маржи.
Bootstrap предоставляет имя класса «Btn-Block». Кнопка может использовать это имя класса для реализации кнопки блока (для получения подробной информации, пожалуйста, обратитесь к строке файла bootstrap.css 2340 для строки 2353)
<Кнопка Типа = "Кнопка"> Большая кнопка </button> <Кнопка Типа = "Кнопка"> Нормальная кнопка </button> <Кнопка Типа = "> Маленькая Кнопка </Кнопка>
Рендеринги следующие:
5. Статус форм-носителя Bootstrap
В начальной загрузке эффекты статуса кнопок в основном разделены на два типа: активное состояние и состояние отключения.
1) Активное состояние: в основном включает в себя несколько типов состояния подвески кнопки (: hover), Click State (: Active) и Focus mater (: Focus).
2) Отключить статус
Есть два способа отключить кнопку:
Метод 1: добавить атрибут отключенного в тег
Метод 2: добавить имя класса «Отключено» к метке элемента
Основные различия между ними:
Стиль «.disabled» не запрещает поведение кнопки по умолчанию. Метод добавления атрибута «отключен» к метке элемента может запретить поведение элемента по умолчанию.
6. Bootstrap Image
В начальной загрузке представлены следующие стили для стиля изображений:
Как использовать: просто добавьте соответствующее имя класса в тег IMG следующим образом:
<img src = "http://img.blog.csdn.net/20160726151432225"> <img src = "http://img.blog.csdn.net/20160726151432225"> <img src = "http://img.blog.csdn.net/20160726151432225">
Эффект выполнения является следующим образом или просмотрите окно результата справа:
7. Значок Bootstrap
Bootstrap предоставляет 200 различных значков следующим образом:
Как использовать: просто добавьте соответствующее имя класса значков в тег следующим образом:
<pran> </span>
<pran> </span>
Если вы все еще хотите учиться в глубине, вы можете нажать здесь, чтобы узнать и прикрепить к вам две захватывающие темы: учебник по обучению начальной загрузки.
Серия статей:
В первый раз, когда я вступил в контакт с магической начальной загрузкой.
В первый раз, когда я вступил в контакт с магической системой Bootstrap Grid //www.vevb.com/article/89333.htm
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.