Общие элементы форм в основном включают в себя: поля ввода текста, раскрывающиеся поля выбора, радиосвязи, флажки, текстовые поля, кнопки и т. Д. Вот различные версии начальной загрузки:
Меньше: Формы
Sass: _forms.scss
Bootstrap только настраивает теги Fieldset, Legend и метки в форме
Fieldset {min-width: 0; Padding: 0; Margin: 0; Border: 0;} Legend {Display: Block; ширина: 100%; Padding: 0; Margin-Bottom: 20px; размер шрифта: 21px; Line-Height: наследство; цвет: #333; граница: 0; Border-Bottom: 1px Solid #e5e5e5; inline-block; маржиновый батм: 5px; Font-Weight: Bold;}В дополнение к этим элементам, есть также ввод, Select, Textarea и другие элементы. В рамках начальной загрузки эффект достигается путем настройки имени класса. Контроль.
1. Ширина становится 100%;
2. Установите светло -серый (#CCC) границу
3. круглые углы с 4PX
4. Установите эффект тени, и элемент получает фокус, эффекты тени и границы изменятся.
5. Установите цвет Palceholder на #999
Встроенная форма
Если вы хотите добавить метку метки перед входом, это приведет к отображению разрыва ввода линии; Если вам нужно добавить такую метку и не хотите разрыв ввода, вам необходимо поместить метку метки в контейнер.
<div> <bakel> Адрес электронной почты </label> </div> <div> <input type = "email" chicolder = "Пожалуйста, введите свой номер электронной почты"> </div>
Эффекты следующие:
Чтобы достичь эффекта соединения форм, просто добавьте имя класса. Принцип реализации:
Установите элемент управления формой на встроенный элемент блока (Display: Inline Block), чтобы отобразить элемент управления формой на одной линии.
пример:
<Form> <div> <babel> email </label> <input type = "email" wackholder = "Пожалуйста, введите номер электронной почты"> </div> <div> <babel> пароль </label> <input type = "password" Placeholder = "Пожалуйста, введите пароль"> </div> <babel> <input yepe = "fackbox"> inmept passwor Электронная почта </button> </div> </form>
Эффекты следующие:
Вы обнаружили, что код явно имеет метку метки и не помещается в контейнер. Что еще более странно, так это то, что содержание метки метки не отображается! На самом деле, если вы внимательно посмотрите, метка метки добавила только имя класса. Это означает, что он скрывает метку. Давайте посмотрим на его исходный код:
.sr только {положение: абсолютная; ширина: 1px; высота: 1px; накладка: 0; маржа: -1px; переполнение: скрыто; клип: rect (0, 0, 0, 0); граница: 0;}Поскольку метка метки была добавлена и было добавлено имя класса. ? ? Но это именно одно из преимуществ программы начальной загрузки. Если этикетка не установлена для управления вводом, чтения экрана не будет правильно распознан, и она также имеет определенные соображения для людей с ограниченными возможностями.
Горизонтальная форма
Реализация горизонтальной формы эффектов в начальной загрузке требует следующих двух условий:
1. Используйте имя класса.
2. Система сетки с платформой начальной загрузки (подробности: подробное объяснение системы Bootstrap Grid)
Используйте имя класса. Форма-горизонтальный по элементу формы в основном имеет следующие функции:
1. Установите значения прокладки и маржи управления формой
2. Измените форму экспрессии. Из группы, аналогично ряду системы сетки
исходный код CSS:
.form-horizontal .control-label, .form-horizontal .radio, .form-horizontal .checkbox,. {min-height: 27px;}. Form-horizontal .form-Group {margin-right: -15px; margin-left: -15px;}. form-horizontal .form-control-static {padding-top: 7px;}@media (min-width: 768px) {.form-horizontal. control. справа;}}. Форма-горизонтальная .has-feedback .form-control-feedback {top: 0; справа: 15px;}пример:
<form> <div> <babel> email </label> <div> <div> <input type = "email" placeholder = "Пожалуйста, введите свою электронную почту"> </div> </div> <div> <babel> пароль </label> <div> <input type = "password" Placeholder = "Пожалуйста, введите свой пароль"> </div> </div> <div> Пароль </label> </div> </div> <div> <div> <tutry> Введите свою электронную почту </button> </div> </form>
Эффекты следующие:
Ящик ввода с одной линией
При использовании ввода в начальной загрузке вы также должны добавить тип типа. Если вы не указаете тип типа, вы не получите правильный стиль, потому что структура начальной загрузки определяет стили через форму ввода [type = "?"], Например: тип текста, который соответствует входу [type = "text"]
Чтобы элементы управления выглядели хорошо в различных стилях форм, вам нужно добавить имя класса.
<form rol = "form"> <div> <input type = "email" placeholder = "enter email"> </div> </form>
Выберите выбор выбора
Многострочный выбор устанавливает значение множественного атрибута на множественные
<form rol = "form"> <div> <seect> <опция> 1 </option> <опция> 2 </option> <опция> 3 </option> <опция> 4 </option> <опция> 5 </option> </select> </div> <div> <selet Multy> <опция> 1 </option> <опция> 2 </option> <опция> 3 </option> <опция> 4 </option> <опция> 5 </option> </select> </div> </form>
Текстовое поле Textarea
Текстовое поле такое же, как и исходный метод использования. Установка строк может определить его высоту, установка Cols может определить его ширину. Если в элементе Textarea в элементе Textarea нет имени.
<form rol = "form"> <div> <textarea Rows = "3"> </textarea> </div> </form>
Флакторы и радио радиостанции
Будут некоторые незначительные проблемы с флажом и радио в сочетании с метками метки (например, проблемы выравнивания)
<Form> <div> <babel> <input type = "fackbox"> помните пароль </label> </div> <div> <bakel> <input type = "radio" name = "optionsradios" id = "optionsradios1" проверено> как </label> </div> <div> <label> <input type = "name = name" nationradios ". Как </label> </div> </form>
1. Будь то флажок или радио, они обернуты в этикетки.
2. Флажок и тег метки помещаются в контейнер с названием .CHECKBOX
3. Радио и этикетка помещаются в контейнер с именем .radio. Bootstrap в основном использует стили .CHECKBOX и.
.radio, .Checkbox {Display: Block; Min-Height: 20px; Ladding-left: 20px; Margin-Top: 10px; Margin-Bottom: 10px;}. Радио-метка, .Checkbox label {display: inline; font-weight: нормальный; cursor: pointer;}. input [type = "fackbox"] ,.-inline inline [type = "fackbox"] {float: left; margin-left: -20px;}. Radio + .radio, .checkbox + .checkbox {margin-top: -5px;}Флажки и радиопроизводства горизонтально
1. Если флажок должен быть организован горизонтально, вам нужно только добавить имя класса на метку метки.
2. Если радио нуждается в горизонтальном расположении, просто добавьте имя класса.
Вот исходный код CSS:
.radio-inline, .Checkbox-inline {Display: Inline Block; Padding-left: 20px; Margin-Bottom: 0; Font-Weight: Normal; Vertical-Align: Middle; Cursor: Pointer;}. Radio-inline + .radio-inline, .Checkbox-inline + .Checkbox-inline {margin-top: 0; Margin-Lost-Lost-Lost; <div> <bakel> <input type = "radio" name = "sex" value = "option1"> male </label> <babel> <input type = "radio" name = "sex" value = "option2"> wome </label> <label> <input type = "radio" name = "sex" vatue = option3 "> Нейтральный </label> </div>Статус управления формой
1. Статус фокуса:
Состояние фокуса реализуется через псевдо-класс: Focus. Состояние фокуса в управлении формой начальной загрузки удаляет стиль контура по умолчанию и снова добавляет эффект тени. Следующее
исходный код CSS:
.form-Control: Focus {Border-Color: #66AFE9; Схема: 0; -Webkit-box-shadow: вставка 0 1px 1pxrgba (0,0,0, 0,075), 0 0 8px rgba (102, 175, 233, .6); Box-Shadow: Inset 0 1px 1pxrgba (0,0, 0,0, 075, 0,075,. RGBA (102, 175, 233, .6);}Как видно из исходного кода, чтобы управление имело вышеупомянутый эффект стиля в состоянии фокуса, вам необходимо добавить имя класса в Control.form-Control
<form> <div> <div> <input type = "text" Placeholder = "не эффект в фокусе"> </div> <div> <input type = "text" Placeholder = "Эффект в фокусе"> </div> </div> </form>
Эффект управления файлом, радио и флажками в фокусе также отличается от влияния обычных элементов управления вводами. Ниже приведен исходный код
input [type = "file"]: focus, input [type = "radio"]: focus, input [type = "fackbox"]: Focus {upline: тонкий пункт; контур: 5px auto -webkit-focus-color; upline-offset: -2px;}2. Отключить статус:
Просто добавьте свойство отключено в соответствующее управление формой, и следующее приведено исходный код CSS:
.form-Control [Disabled] ,.-Control [readonly], Fieldset [Disabled] .form-Control {cursor: не Allowed; фоновый цвет: #eee; opacity: 1;} input [type = "radio"] [отключен], input [type = "fackbox"] [отключен],. Радио [Отключено],. Радио-вход [отключен], флажок [отключен],. Флакторный флажок-ввод [отключен], Fieldset [Disabled] [type = "Radio"], Fieldset [disabled [disabled [disabled] [disabled] [disabled] [disabled] [disabled] [disabled] [disabled] [disabled] [disabled] [disabled] [disabled]. .radio-inline, fieldset [отключен] .Checkbox, Fieldset [Disabled] .Checkbox-inline {cursor: not wallowed;}пример:
<input type = "text" Placeholder = "form отключен" отключен>
Если Fieldset устанавливает свойство отключения, весь домен будет отключен
пример:
<form rol = "form"> <fieldset отключен> <div> <babel> Входное окно отключено </label> <input type = "text" Placeholder = "Disable Input"> </div> <div> <babel> раскрывающееся поле-это Отключить </label> <seult> <purint> 1 </option> <опция> 2 </option> <опция> 3 </option> <опция> 4 </option> </select> </div> <div> <babel> <input type = "checkbox"> Опции «Отключено» </label> </div> <futton = "opper"> pospect> </fieldest> </label> </div> <futton = "opper"> propect> </fieldest> </label> </div> <futton = "opper"
Эффект заключается в следующем: (отключенный значок появляется, когда мышь перемещается вверх. Вот прямой скриншот, который невозможно увидеть)
3. Статус проверки
Bootstrap обеспечивает следующие эффекты:
1. HAS-WARNN
2.. Has-error: статус ошибки красный
3.
При его использовании просто добавьте имя класса состояния в контейнер группы форм. Эффекты одинаковы в трех состояниях, но цвета разные.
пример:
<form><div><label>Success Status</label><input type="text" placeholder="success Status"></div><div><label>Error Status</label><input type="text" placeholder="Error Status"></div><div><label>Warning Status</label><input type="text" placeholder="warning status"></div></form>
Эффекты следующие:
Иногда разные состояния предоставляют разные значки при проверке формы. Если вы хотите отобразить значок в соответствующем состоянии, вам нужно только добавить имя класса. Обратите внимание, что его следует использовать с.
Маленькие значки начальной загрузки сделаны с использованием @font-face. нравиться:
<span class = ”Glyphicon-Warning Form-Control-Feedback”> </span>
пример:
<Form> <div> <babel> Статус успеха </label> <input type = "text" Placeholder = "Статус успеха"> <pan> </span> </div> <div> <babel> Статус ошибки </label> <input type = "text" wackholder = "Статус ошибки"> <pran> </span> </div> <div> <babel>. Статус "> <pan> </span> </div> </form>
Эффекты следующие:
Форма быстрого информации
Как правило, при проверке формы требуется различная оперативная информация. Используйте. Хелп-блоки в платформе начальной загрузки, чтобы отобразить информацию о приглашении в блоках и отобразить ее в нижней части элемента управления.
Вот исходный код CSS:
.help-block {Display: Block; Margin-Top: 5px; Margin-Bottom: 10px; Color: #737373;}пример:
<form> <div> <babel> Успешный статус </label> <input type = "text" Placeholder = "Успешный статус"> <pan> Входная информация верна </span> <pran> </span> </div> <div> </label> Состояние ошибки </label> <input type = "text" Placeholder = "Статус ошибки"> <pran> Входная информация - это Неправильный </span> <pan> </span> </div> <div> <babel> Статус предупреждения </label> <input type = "text" Placeholder = "Статус предупреждения"> <pan> Пожалуйста, введите правильную информацию </span> <pran> </span> </div> </form>
Эффекты следующие:
Если вы не хотите добавлять свой собственный код в bootstrap.css, и дизайн нуждается в этом, вы можете использовать систему сетки Bootstrap, например:
<form rol = "form"> <div> <label for = "inputSuccess1"> Статус успеха </label> <div> <div> <input type = "text" id = "inputSuccess1" Placeholder = "Статус успеха"> </div> <pran> Введенная вами информация является правильной </span> </div> </div> </div> <pan>
Выше приведено соответствующее содержание компонента формы Bootstrap, введенного вам редактором. Я надеюсь, что это будет полезно для вас!