Учебник по формам Twitter Bootstrap

Введение

В этом руководстве вы узнаете, как создавать формы с помощью инструментария Twitter Bootstrap версии 2.0.

Twitter Bootstrap имеет стили для элементов управления формами, таких как input, textarea и select, он поддерживает списки и флажки, имеет стили для отключенных элементов управления формой и включает такие состояния, как ошибка, предупреждение и успех для каждого элемента управления формой.

Начиная с версии 2.0 Twitter Bootstrap предоставляет четыре типа макетов форм —

Вертикальный (это макет формы по умолчанию)
Search
Встроенный
Горизонтальный

В предыдущей версии Twitter Bootstrap Form Layouts по умолчанию использовался горизонтальный макет. Но не в версии 2.0. Здесь по умолчанию используется вертикальная компоновка.

Создать вертикальный макет формы

Стиль для макета формы Twitter Bootstrap по умолчанию (вертикальная форма) находится напротив .form-vertical класс bootstrap.css. Но. поскольку это макет формы по умолчанию, вам не нужно указывать класс .form-vertical при создании формы с макетом по умолчанию. В следующем примере показана форма, созданная с помощью макета формы по умолчанию Twitter Bootstrap версии 2.0.

.well класс используется для создания контейнера форм (но он имеет и другое применение). Этот класс находится в строках с 1650 по 1663 файла bootstrap.css. Для этого макета входы являются блочными. В следующем примере показано, как создать макет формы по умолчанию с помощью Twitter Bootstrap.

Форма Twitter Bootstrap версии 2.0 по умолчанию пример макета Имя ярлыка Связанный текст справки! Проверить меня Просмотреть в Интернете Просмотрите приведенный выше пример в другом окне браузера. Создание макета формы поиска Используя .form-search, который расположен в строках с 962 по 1003 (эти строки также содержат стиль для .form-inline) bootstrap.css, форма поиска может быть созданный. Для этого макета входы являются блочными. Ниже приведен пример: Twitter Bootstrap Версия2. 0 пример макета формы поиска Просмотреть в Интернете Просмотрите приведенный выше пример в другом окне браузера. Создание макета встроенной формы Используя класс .form-inline, который расположен в строках с 962 по 1003 (эти строки также содержат стиль для .form-search) bootstrap.css, можно создать форму поиска. Для этого макета входы встроены. Ниже приведен пример: Twitter Bootstrap Пример встроенной формы для версии 2.0 Запомнить меня Просмотреть в Интернете Просмотрите приведенный выше пример в другом окне браузера. Создание макета горизонтальной формы Использование класса .form-inline, который находится в строках с 962 по 1003 (эти строки также содержат стиль для .form-search) файла bootstrap.c ss, можно создать форму поиска. Для этого макета входы встроены. Ниже приведен пример: Twitter Bootstrap Пример горизонтального макета формы версии 2.0 Элементы управления, поддерживаемые Bootstrap Ввод текста В дополнение к произвольному тексту любой текстовый ввод HTML5 выглядит так. Флажок Параметр один из них - обязательно укажите, почему это здорово Список выбора something 2 3 4 5 Multicon-select 1 2 3 4 5 Файловый ввод Textarea Просмотр в Интернете Просмотрите приведенный выше пример в другом окне браузера. Браузер Состояния элементов управления формы загрузки Twitter Когда ввод поле получает фокус, или если оно отключено или доступно только для чтения, Twitter Bootstrap подразумевает специальные стили для тех. В строках с 677 по 697 указаны стили bootstrap.css для сфокусированного ввода и элементов textarea. Раньше "контур" Webkit использовался как значение для ": focus", но теперь он был изменен на "box-shadow". Вот пример, показывающий, как изменяются стили для ввода с фокусом, ввода только для чтения, отключенного ввода, отключенного флажка и отключенной кнопки. Горизонтальная форма Twitter Bootstrap версии 2.0 пример статуса браузера Элементы управления, поддерживаемые Bootstrap Сфокусированный ввод В дополнение к произвольному тексту любой текстовый ввод HTML5 выглядит так. Вход только для чтения Помимо текста произвольной формы, любой H Текстовый ввод TML5 выглядит так. Отключенный ввод Помимо текста произвольной формы, любой текст HTML5 -базовый ввод выглядит так. Флажок (отключен) Вариант один - это то и это - обязательно укажите, почему это здорово Просмотреть в Интернете Просмотрите приведенный выше пример в другом окне браузера. Стили для проверки формы Twitter Bootstrap Version 2.0 имеет стили для ошибок, предупреждений и успешной проверки формы. Это замечательная функция, поскольку всегда требуется применять другой стиль, чтобы показать, что пользователь создал ошибку при вводе данных в форму, или когда вам нужно сгенерировать предупреждение или даже уведомить пользователя о том, что они успешно введенные данные. Вот пример: Пример ошибки формы Twitter Bootstrap версии 2.0 Ошибка проверки формы, предупреждение и успех Ввод с ошибкой Исправьте ошибку Ввод с предупреждение Что-то пошло не так Успешный ввод Успешно введено Успешный выбор 1 2 3 4 5 Выбрано успешно Просмотреть в Интернете Просмотрите приведенный выше пример в другом окне браузера. Вы можете загрузить весь HTML-код, CSS, JS и файлы изображений, используемые в наших руководствах здесь.