Bootstrap - демонстрация формы
Макет формы
Bootstrap предоставляет вам следующие типы макетов форм:
- Вертикальная (по умолчанию) форма
- Встроенная форма
- Горизонтальная форма
Вертикальная или базовая форма
Базовая структура формы поставляется с Bootstrap; отдельные элементы управления формой автоматически получают глобальный стиль. Чтобы создать базовую форму, сделайте следующее -
Добавьте форму роли к родительскому элементу <form>.
Оберните метки и элементы управления в <div> с помощью класса .form-group . Это необходимо для оптимального интервала.
Добавьте класс .form-control ко всем текстовым элементам <input>, <textarea> и <select>.
Встроенная форма
Чтобы создать форму, в которой все элементы встроены, выровнены по левому краю и метки расположены рядом, добавьте класс .form-inline к тегу <form>.
Горизонтальная форма
Горизонтальные формы отличаются от других не только размером разметки, но и подачей формы. Чтобы создать форму, использующую горизонтальный макет, выполните следующие действия:
Добавьте класс .form-horizontal к родительскому элементу <form>.
Оберните метки и элементы управления в <div> с помощью класса .form-group .
Добавьте к меткам класс .control-label .
пример | Описание | Ссылка для скачивания |
---|---|---|
Страница авторизации | В этом примере показана структура страницы входа в Bootstrap. | Скачать |
Страница контактов | Этот пример показывает структуру страницы контактов в Bootstrap. | Скачать |
Страница регистрации | Этот пример показывает структуру страницы регистрации в Bootstrap. | Скачать |