Как создаются в bootstrap формы и таблицы

Оформление и шрифты Заголовки, абзацы, списки и другие встроенные линейные элементы

Все шрифты и оформление основаны на двух Less-переменных в файле variables.less: @baseFontSize и @baseLineHeight . Первая — это основной шрифт и его размер, используемый в тексте, вторая — это основная высота строки (line-height).

Мы используем эти переменные и немного математики для создания отступов (margin), полей (padding), высоту строки (line-height) и еще много чего.

Пример основного текста

В конце ноября, в оттепель, часов в девять утра, поезд Петербургско-Варшавской железной дороги на всех парах подходил к Петербургу. Было так сыро и туманно, что насилу рассвело; в десяти шагах, вправо и влево от дороги, трудно было разглядеть хоть что-нибудь из окон вагона

Класс Lead

Выделяйте параграф путем добавления .lead .

Все, как водится, устали, у всех отяжелели за ночь глаза, все назяблись, все лица были бледно-желтые, под цвет тумана.

h1. Заголовок 1

h2. Заголовок 2

h3. Заголовок 3

h4. Заголовок 4

h5. Заголовок 5

h6. Заголовок 6

Выделение, адрес и аббревиатура

Вложите дополнительный атрибут title к тегу для объяснительного текста

Пример выделений текста

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Примечание: Вы можете использовать теги и без каких либо проблем, но в HTML5 их назначение было немного изменено. Тег означает просто выделение текста без присвоения специального назначения, а тег используется для выделения разговорной речи, технических терминов и т.д.

Пример адреса

Ниже два примера как тег может быть использован:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Пример аббревиатур

Аббревиатуры с использованием атрибута title имеют полупрозрачное подчеркивание точками и курсор при наведении изменяется в знак вопроса. Это дает пользователям понимание, что при наведении курсора будет отображена дополнительная информация.

Добавьте класс .initialism к тегу для заглавных букв при использовании аббревиатуры.

HTML лучшая вещь созданная человеком, после нарезного хлеба.

Аббревиатура слова attribute — attr .

Цитаты

Добавьте атрибут cite для обозначения URL-источника текста

Для использования цитат, поместите любой HTML -текст внутрь тега . Для однострочных цитат мы рекомендуем использовать тег

Используйте дополнительный тег для цитирования источника или автора, автоматически будет добавлено тире — впереди форматируемого текста.

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
 Someone famous Body of work

Пример цитирования

По умолчанию цитаты выглядят так:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

Для выравнивания текста по правую сторону, добавьте класс class=»pull-right» к тегу :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

Списки

Неупорядоченный

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet

Nulla volutpat aliquam velit

Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at

Не стилизованный

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet

Nulla volutpat aliquam velit

Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at

Упорядоченный

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Списки описания

Списки описаний Списки описаний идеально подходят для определения терминов. Термин Описание термина. Donec id elit non mi porta gravida at eget metus. Malesuada porta Etiam porta sem malesuada magna mollis euismod.

Горизонтальные списки описания

Списки описаний Списки описаний идеально подходят для определения терминов. Термин Описание термина. Donec id elit non mi porta gravida at eget metus. Очень длинный термин обрезается в соответствии с шириной Etiam porta sem malesuada magna mollis euismod. Felis euismod semper eget lacinia Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Внимание! В горизонтальных списках описания «Термин» будет обрезан при помощи свойства text-overflow . На малых дисплеях (телефон, планшет и т.д.) размер списка будет изменяться в соотвествии с сеткой шаблона.

Код Строковое и блочное выделение кода

Строковое выделение кода

Поместите строковый код в тег .

Для примера, section должен быть строкой.

Форматирование кода при помощи PHP

При помощи функции htmlspecialchars() вы можете получить автоматическое преобразование угловых «< >» скобок в спецсимволы. И всех других символов HTML разметки.

Выделенный текст.
 "); ?> <p>Выделенный текст. </p>

Блочное выделение кода

Используйте для выделения 2-х и более строк кода. Избегайте использования угловых скобок < и >, для корректного отображения фрагментов кода.

Выделенный текст.

<p>Выделенный текст. </p>

Замечание: Всегда используйте теги как можно левее в редакторе кода, так как внутри тега сохраняются все отступы и пробелы.

Вы можете дополнительно добавить класс .pre-scrollable , который задаст максимальную высоту (max-width) блока в 350px и добавит вертикальный скроллбар.

Google Prettify

Используйте тот же самый тег как и в предыдущем примере с добавлением двух класссов.

Выделенный текст.

<p>Выделенный текст. </p>

Таблицы Для упорядочивания информации

Структура и разметка таблицы

))

Описание
Родительский тег таблиц
Родительский тег строк заголовка таблицы (
Родительский тег тела и строк таблицы (
Родительский тег (строка) для ячеек (колонок) таблицы (	или	)
Ячейка таблицы
Ячейка заголовка таблицы Должен использоваться внутри тега
Описание или краткое содержание таблицы

Опции таблицы

Имя	Класс	Описание
По умолчанию	Нет	Без стилей, просто строки и колонки
Простой	.table	Только горизонтальные линии между строками
Границы	.table-bordered	Закругленные углы и внешняя граница вокруг таблицы
Полосы	.table-striped	Добавляет светло-серый фон к нечетным строкам (1, 3, 5, etc)
Без отступов	.table-condensed	Уменьшает верхний и нижний отступы, вместо 8px до 4px, применяется к td и th тегам

Примеры таблиц

1. Таблица по умолчанию

Таблицы имеют межстроковую границу. В Bootstrap 2.0, класс .table обязателен.

#	Имя	Фамилия	Никнейм
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

2. Полосы

Позволяет улучшить читаемость и восприятие содержимого таблицы—просто добавьте класс .table-striped .

Замечание: Полосы в таблице используют CSS-селектор :nth-child , который не работает в IE7-IE8.

#	Имя	Фамилия	Никнейм
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

3. Границы

Добавляет границы и закругляет углы таблицы.

#	Имя	Фамилия	Никнейм
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

4. Без отступов

Делает Вашу таблицу более компактной. Используйте класс .table-condensed для уменьшения отступов в ячейках с 8px до 4px.

#	Имя	Фамилия	Никнейм
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

5. Совместим все классы вместе!

Вы можете свободно комбинировать различные классы, относящиеся к таблицам, в поиске наилучшего дизайна.

ФИО
#	Имя	Фамилия	Никнейм
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Формы

Легко настраиваемый HTML и CSS

Лучшее в Bootstrap формах это то, что все составляющие форм, например как выглядят превосходно и оформлены в едином стиле, вне зависимости от того, как они обозначены в HTML-разметке. Мы предоставляем удобные шаблоны форм, которые можно использововать при необходимости.

Более сложные макеты форм могут быть использованы путем добавления и комбинирования расширяемых классов для максимального покрытия требуемого функционала.

Четыре стиля

Bootstrap включает в себя четыре стиля форм:

Вертикальный (по умолчанию)
Поиск
Строковый (линейный)
Горизонтальный

Различные типы форм требуют разных изменений в HTML-разметке.

Контроль состояния и еще..

Формы Bootstrap’а включают в себя стили всех основных элементов таких как input, textarea и select. Так же мы включили дополнительные стили для пред-идущих и пост-идущих элементов для элемента input.

Состояния полей такие как error (ошибка), warning (предупреждение) и success (успех) включены для каждого элемента форм. Так же включены стили для отключенных (недоступных) элементов.

Четыре типа форм

Bootstrap предоставляет легкую HTML-разметку для всех четырех типов веб-форм .

Имя	Класс	Описание
Вертикальный (по умолчанию)	.form-vertical (Не обязателен)	Выровненная по левому краю
Строковый (линейный)	.form-inline	Выровненная по левому краю,с правилом inline-block для элементов форм
Поиск	.form-search	Текстовый input с закругленными углами
Горизонтальный	.form-horizontal	Плавающий по левую сторону родительского элемента, описание формы, элементы формы и кнопки выровнены по правому краю

Примеры форм

Форма по умолчанию

Легкая, удобная и без специальной HTML-разметки.

 Название Пример вспомогательного текста  Отметь меня

Форма поиска

Добавьте класс .form-search к форме и .search-query к элементу input .

Линейная форма

Добавьте класс .form-inline для улучшения вида формы в горизонтальном положении и оптимизации отступов между элементами формы.

     Запомнить меня

Горизонтальные формы

Справа пример использования всех возможных элементов форм. Вот список:

Текстовое поле (text, password, email, search и т.д.)
Флажок (чек-бокс)
Радио-кнопка (radio button)
Выпадающий список (select)
Множественный выбор (multiple select)
Файл (file input)
Многострочный текст (textarea)

Разбор примера

Посмотрите код формы ниже, обратите внимание на ассоциирование элемента input с элементом control group . Классы .control-group , .control-label и .controls необходимы для корректного отображения формы.

  Название Текстовое поле  Вспомогательный текст

Контроль состояний элементов формы

Bootstrap предоставляет стили для активных элементов форм и disabled (отключенные элементы). Мы отключили стандартные стили форм в Webkit, такие как outline , взамен добавив box-shadow для селектора :focus .

Состояния элементов формы

Добавлены состояния для errors (ошибок), warnings (предупреждений) и success (успешных). Например, для отображения ошибки в заполнении поля добавьте класс .error к родительскому элементу носящему класс .control-group .

Дополнения к формам

Пред-идущие и Пост-идущие элементы

Добавление информации при помощи Пред-идущих или Пост-идущих элементов позволяет пользователям более легко и приятно ориентироваться на Вашем сайте. Например, добавление по умолчанию символа @ для Twitter-аккаунтов или знака $ для денежных исчислений.

Флажки и радио-кнопки

Так же поддерживаются линейные (строковые) Флажки и Радио-кнопки. Добавьте класс .inline к любому .checkbox или .radio .

Строковые формы и пред-/пост- идущие элементы

Для использования пред- и пост- идущих элементов с inputs в строковой (линейной) форме, убедитесь в использовании класса .add-on для пред- или пост- идущего элемента и input на одной строке кода без пробелов или переносов строк.

Вспомогательный текст форм

Для добавления вспомогательного текста к элементам формы, поместите текст в для линейного отображения или в

для блочного отображения, после элемента формы.

Кнопки

Кнопка	Класс	Описание
По умолчанию	btn	Стандартная серая кнопка
Основная	btn btn-primary	Синяя сильно заметная и выделяющаяся кнопка, используется для обозначения основного действия
Инфо-кнопка	btn btn-info	Используйте как альтернативу кнопке по умолчанию
Успешная кнопка	btn btn-success	Обозначает позитивное действие или успешное выполнение
Предупреждение	btn btn-warning	Обозначает какое-либо предупреждение
Опасность	btn btn-danger	Обозначает негативное действие или какую-либо ошибку
Обратная	btn btn-inverse	Альтернативная темно-серая кнопка

Кнопки для действий

Кнопки должны быть использованы для действий, а ссылки для объектов. Например, «Скачать» должно быть кнопкой, а «Последние Действия» должно быть ссылкой.

Стили кнопок применяются для всего где добавлен класс .btn . Обычно Вы будете использовать его для элементов и .

Совместимость с браузерами

IE9 не подгоняет градиенты к элементам и закругленным углам, так что мы убрали их. Еще IE9 делает недоступным применение стилей к элементам button , текст становится серым и добавляется ужасная тень, которую невозможно исправить.

Различные размеры

Нужны большие и маленькие кнопки? Добавьте классы .btn-large , .btn-small , или .btn-mini для дополнительных размеров.

Основное действие Действие

Отключенное состояние

Для отключения кнопок добавьте класс .disabled к ссылкам и атрибут disabled для элементов .

Основная кнопка Это кнопка

Внимание! Мы используем класс .disabled как дополнительный, так же как класс .active .

Один класс, несколько тегов

Используйте класс .btn для элементов , , или .

Ссылка

Для наилучшей совместимости с браузерами, используйте элементы корректно обрабатываемые во всех браузерах. Например input , используйте как кнопку .

Иконки Graciously от Glyphicons

icon-glass
icon-music
icon-search
icon-envelope
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones

icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward

icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open

icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-hdd
icon-bullhorn
icon-bell
icon-certificate
icon-thumbs-up
icon-thumbs-down
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-right
icon-circle-arrow-left
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen

Все в едином файле (спрайт)

Вместо того, что бы использовать отдельную картинку для каждой из иконок, мы поместили их в один файл (спрайт)—при помощи CSS и background-position мы устанавливаем выбор на конкретной иконке. Такой же метод мы применили на Twitter.com и это отлично работает, так как браузеру достаточно один раз загрузить единый файл и закешировать его.

Все классы иконок начинаются с .icon-* . Это поможет Вам избежать ошибки.

Glyphicons позволили нам использовать набор иконок Halflings, который является частью open-source проекта. По соглашению мы приводим ссылку на оригинал их проекта и на автора работы. Пожалуйста, не забудьте и вы, благодарно разместив ссылки на Вашем проекте.

Как использовать?

Bootstrap использует тег для всех иконок, они не имеют единого класса—только единый префикс класса .icon-* . Для использования поместите код с примера ниже, куда Вам необходимо:

Так же иконки доступны в белом виде (inverted), и доступны при дополнительном классе:

У нас имеется 120 классов для каждой иконки. Просто добавьте тег с необходимым классом нужной Вам иконки. Полный список классов доступен в sprites.less. А так же полный список классов доступен здесь, смотрите выше.

Внимание! При использовании с текстом, кнопками, ссылками или навигацией не забудьте оставить пробел после тега для корректного расположения элемента.

Идеи для использования

Иконки это хорошо, но когда их стоит использовать? Вот вам идеи:

Визуальное обозначение пунктов меню (сайдбар)
Для навигации иконками
Для кнопок, визуально отображая их непосредственное действие
Для ссылок, визуально показывая куда попадет пользователь

Вообще везде, где уместен тег Вы сможете добавить иконку.

Примеры

Используйте в кнопках, группах кнопок, навигации или в пред- и пост- идущих элементах форм.

Редактировать
Удалить
Заблокировать
Сделать админом

Формы в Bootstrap 4

Bootstrap 4 предлагает стиль по умолчанию, который применяется к большинству полей формы. Bootstrap также предоставляет классы для конкретных целей.

Базовая форма

Форма в одну строку

Используйте класс .form-inline , чтобы элементы формы отображались как строчно-блочные и выравнивались по левому краю. Используйте вспомогательные класса (например, mr-sm-2 ), чтобы добавить пространство между элементами.

Обратите внимание, всё это применимо только тогда, когда область просмотра имеет ширину не меньше 576 пикселей.

Скрытые метки

В полях ввода всегда должны указываться метки, иначе программы чтения с экрана ожидают проблемы. При необходимости вы можете скрыть метку с помощью класса .sr-only .

Здесь мы используем .sr-only , чтобы скрыть метки, а также добавляем атрибут placeholder , чтобы подсказывать пользователю что вводить. Использование атрибута placeholder таким способом не рекомендуется, так как это может вызвать проблемы с удобством пользования.

Горизонтальная форма

Вы можете использовать классы сетки Bootstrap для создания горизонтальных форм. Просто укажите, сколько колонок должен занимать каждый элемент. В частности, добавьте класс .row к .form-group и класс .col-*-* или .col-* для каждой колонки.

Bootstrap 4 против Bootstrap 3

Когда речь идёт о горизонтальных формах, имеются некоторые незначительные различия между Bootstrap 4 и Bootstrap 3.

Сетки При использовании сеток для макета формы, Bootstrap 4 требует класс .row . Этот класс не является обязательным для форм Bootstrap 3 (хотя по прежнему обязателен для сеток Bootstrap 3). Метки Bootstrap 4 использует .col-form-label в сетке макета формы, тогда как Bootstrap 3 использует .control-label . Обратите внимание, что Bootstrap 4 изначально использовал .form-control-label , но впоследствии заменил его на .col-form-label . Класс .form-horizontal Bootstrap 3 требует класс .form-horizontal , тогда как Bootstrap 4 нет.

Строка формы

Вы можете заменить .row на .form-row для более компактной компоновки.

Смещение полей формы

В некоторых примерах используется класс .offset-* или .offset-*-* для выравнивания полей с метками и без.

Размер полей формы

Вы можете использовать .form-control-lg и .form-control-sm для увеличения или уменьшения размера полей ввода.

Bootstrap 4 против Bootstrap 3

Bootstrap 4 использует классы .form-control-lg и .form-control-sm для увеличения или уменьшения размера полей ввода. Bootstrap 3 для этого использует .input-lg и .input-sm .

Размер метки

Вы можете добавить к меткам .col-form-label-sm и .col-form-label-lg , чтобы размер метки соответствовал размеру поля формы.

Новое в Bootstrap 4

Классы .col-form-label-sm и .col-form-label-lg являются новыми в Bootstrap 4.

Размер колонок

Вы можете использовать систему сетки Bootstrap, чтобы задать поля формы желаемой ширины.

Текст справки

Bootstrap 4 предоставляет класс .form-text , который можно использовать для обозначения текста справки. Вы можете комбинировать этот класс со служебными классами, такими как .text-muted .

Вам также следует использовать атрибут aria-descriptionby , чтобы связать текст справки с полем формы. Это гарантирует, что программы чтения с экрана смогут сообщить текст справки, когда пользователь переведёт фокус на поле формы.

Bootstrap 4 против Bootstrap 3

Bootstrap 4 использует класс .form-text для отображения текста справки, Bootstrap 3 использует класс .help-block .

Статичные поля формы

Bootstrap 4 против Bootstrap 3

Bootstrap 3 использовал класс .form-control-static для отображения статичного текста, в Bootstrap 4 этот класс был заменён на .form-control-plaintext .

Флажки и переключатели

Bootstrap 4 предоставляет классы .form-check , .form-check-label , .form-check-input и .form-check-inline для отображения флажков и переключателей.

Чтобы отобразить флажки или переключатели друг под другом, вложите каждый из них в элемент с классом .form-check . Кроме того, добавьте .form-check-label к элементу и .form-check-input к элементу .

В одну строку

В Bootstrap 4 флажки и переключатели по умолчанию располагаются друг под другом. Вы можете отобразить их в одну строку, добавив .form-check-inline к внешнему . Оставьте .form-check-input в элементе .

Bootstrap 4 против Bootstrap 3

Bootstrap 3 для отображения флажков и переключателей использует .radio , .radio-inline , .checkbox или .checkbox-inline . Bootstrap 4 использует .form-check , .form-check-label , .form-check-input и .form-check-inline .

См. также

Аккордеон меню
Вкладки на CSS
Выпадающее меню
Выравнивание элементов форм
Загрузка файлов
Использование :checked
Кнопки
Кнопки
Отправка данных формы
Отправка данных формы
Переключатели
Переключатели
Подсказка в поле формы
Поле для ввода пароля
Поле для пароля
Пользовательские формы
Построение форм
Скрытое поле
Создание форм
Стилизация переключателей
Стилизация флажков
Сумасшедшие формы
Текстовое поле
Текстовое поле
Флажки
Флажки
Формы
Формы в HTML
Элемент label

Автор: Йен Диксон
Последнее изменение: 12.03.2020

Что такое Bootstrap?
Начало работы с Bootstrap 4
Контейнеры Bootstrap 4
Система сеток Bootstrap 4
Типографика в Bootstrap 4
Таблицы в Bootstrap 4
Формы в Bootstrap 4
Пользовательские формы
Кнопки в Bootstrap 4
Изображения в Bootstrap 4
Выпадающее меню
Группа кнопок
Группа ввода
Сворачивание содержимого
Навигация
Панель навигации
Хлебные крошки
Нумерация страниц
Значки
Джамботрон
Уведомления
Модальное диалоговое окно
Шкала прогресса
Медиа-объекты
Группа списков
Карточки
Адаптивное встраивание
Карусель
Всплывающие подсказки
Информеры
Отслеживание прокрутки

Формы

Примеры и рекомендации по использованию стилей управления формами, параметров макета и настраиваемых компонентов для создания самых разных форм.

На этой странице

Обзор

Элементы управления формой Bootstrap расширяются на наши стили перезагруженных форм с помощью классов. Используйте эти классы, чтобы выбрать их индивидуальные дисплеи для более согласованного рендеринга в браузерах и на разных устройствах.

Обязательно используйте соответствующий атрибут type для всех полей ввода (например, email для адреса электронной почты или number для числовой информации) чтобы воспользоваться преимуществами новых элементов управления вводом, таких как проверка электронной почты, выбор номера и т.д.

Вот быстрый пример, демонстрирующий стили формы Bootstrap. Продолжайте читать, чтобы узнать о необходимых классах, макете формы и многом другом.

form> div class="mb-3"> label for="exampleInputEmail1" class="form-label">Адрес электронной почтыlabel> input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> div id="emailHelp" class="form-text">Мы никогда никому не передадим вашу электронную почту.div> div> div class="mb-3"> label for="exampleInputPassword1" class="form-label">Парольlabel> input type="password" class="form-control" id="exampleInputPassword1"> div> div class="mb-3 form-check"> input type="checkbox" class="form-check-input" id="exampleCheck1"> label class="form-check-label" for="exampleCheck1">Проверить меняlabel> div> button type="submit" class="btn btn-primary">Отправитьbutton> form>

Текст формы

Текст формы на уровне блока или на уровне строки может быть создан с помощью .form-text .

Связывание текста формы с элементами управления формой

Текст формы должен быть явно связан с элементом управления формы, к которому он относится, с помощью атрибута aria-describedby . Это гарантирует, что вспомогательные технологии, такие как программы чтения с экрана, будут объявлять этот текст формы, когда пользователь фокусируется или входит в элемент управления.

Текст формы под полями может быть оформлен с помощью .form-text . Если будет использоваться элемент уровня блока, добавляется верхнее поле для удобного разнесения между входными данными выше.

Ваш пароль должен состоять из 8-20 символов, содержать буквы и цифры и не должен содержать пробелов, специальных символов или эмодзи.

label for="inputPassword5" class="form-label">Парольlabel> input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock"> div id="passwordHelpBlock" class="form-text"> Ваш пароль должен состоять из 8-20 символов, содержать буквы и цифры и не должен содержать пробелов, специальных символов или эмодзи. div>

Встроенный текст может использовать любой типичный строчный HTML-элемент (будь то , или что-то еще) с не более чем классом .form-text .

Должно быть 8-20 символов.

div class="row g-3 align-items-center"> div class="col-auto"> label for="inputPassword6" class="col-form-label">Парольlabel> div> div class="col-auto"> input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline"> div> div class="col-auto"> span id="passwordHelpInline" class="form-text"> Должно быть 8-20 символов. span> div> div>

Отключенные формы

Добавьте логический атрибут disabled для ввода, чтобы предотвратить взаимодействие с пользователем и сделать его более светлым.

input class="form-control" id="disabledInput" type="text" placeholder="Здесь отключен ввод. " disabled>

Добавьте атрибут disabled к , чтобы отключить все элементы управления внутри. Браузеры обрабатывают все элементы управления собственными формами (элементы , и ) внутри как отключенные, предотвращая взаимодействие с ними как с клавиатуры, так и с помощью мыши.

Однако, если Ваша форма также включает пользовательские элементы, похожие на кнопки, такие как . , им будет присвоен стиль только pointer-events: none , что означает, что они по-прежнему могут фокусироваться и управляться с помощью клавиатуры. В этом случае Вы должны вручную изменить эти элементы управления, добавив tabindex=»-1″ , чтобы они не получали фокус, и aria-disabled=»disabled» , чтобы сигнализировать о своем состоянии вспомогательным технологиям.

form> fieldset disabled> legend>Пример отключенного набора полейlegend> div class="mb-3"> label for="disabledTextInput" class="form-label">Отключенное поле вводаlabel> input type="text" id="disabledTextInput" class="form-control" placeholder="Отключенное поле ввода"> div> div class="mb-3"> label for="disabledSelect" class="form-label">Отключено меню выбораlabel> select id="disabledSelect" class="form-select"> option>Отключен элемент выбораoption> select> div> div class="mb-3"> div class="form-check"> input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled> label class="form-check-label" for="disabledFieldsetCheck"> Не могут это проверить label> div> div> button type="submit" class="btn btn-primary">Отправитьbutton> fieldset> form>

Доступность

Убедитесь, что у всех элементов управления формы есть подходящие доступные имена, чтобы их назначение можно было донести до пользователей вспомогательных технологий. Самый простой способ добиться этого — использовать элемент или в случае кнопок — включить достаточно описательный текст как часть содержимого .

В ситуациях, когда невозможно включить видимую метку или соответствующее текстовое содержимое, есть альтернативные способы предоставления доступного имени, например:

Элементы скрыты с помощью класса .visually-hidden
Указание на существующий элемент, который может действовать как метка, используя aria-labelledby
Предоставление атрибута title
Явная установка доступного имени для элемента с помощью aria-label

Если ни один из них не присутствует, вспомогательные технологии могут прибегнуть к использованию атрибута placeholder в качестве запасного варианта для доступного имени в элементах и . Примеры в этом разделе представляют несколько предлагаемых подходов для конкретных случаев.

Несмотря на то, что использование визуально скрытого содержимого (содержимое .visually-hidden , aria-label и даже placeholder , которое исчезает после того, как в поле формы появляется содержимое) принесет пользу пользователям вспомогательных технологий, отсутствие видимого текста метки все же может быть проблематично для некоторых пользователей. Как правило, лучше всего подходят видимые метки в той или иной форме как с точки зрения доступности, так и удобства использования.

Sass

Многие переменные формы устанавливаются на общем уровне для повторного использования и расширения отдельными компонентами формы. Чаще всего Вы увидите их как переменные $btn-input-* и $input-* .

Переменные

Переменные $btn-input-* являются общими глобальными переменными между нашими кнопками и нашими компонентами формы. Вы обнаружите, что они часто переназначаются как значения для других переменных, зависящих от компонента.

$input-btn-padding-y: .375rem; $input-btn-padding-x: .75rem; $input-btn-font-family: null; $input-btn-font-size: $font-size-base; $input-btn-line-height: $line-height-base; $input-btn-focus-width: .25rem; $input-btn-focus-color-opacity: .25; $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity); $input-btn-focus-blur: 0; $input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color; $input-btn-padding-y-sm: .25rem; $input-btn-padding-x-sm: .5rem; $input-btn-font-size-sm: $font-size-sm; $input-btn-padding-y-lg: .5rem; $input-btn-padding-x-lg: 1rem; $input-btn-font-size-lg: $font-size-lg; $input-btn-border-width: $border-width;

Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
Код под лицензией MIT, документация CC BY 3.0.
Текущая версия v5.0.2.

Макет

Придайте Вашим формам некоторую структуру — от встроенных до горизонтальных и пользовательских реализаций сетки — с помощью наших параметров макета формы.

На этой странице

Формы

Каждая группа полей формы должна находиться в элементе . Bootstrap не предоставляет стили по умолчанию для элемента , но есть несколько мощных функций браузера, которые предоставляются по умолчанию.

Новичок в формах браузера? Рассмотрите возможность просмотра документов формы MDN для обзора и полного списка доступных атрибутов.
внутри по умолчанию type=»submit» , поэтому старайтесь быть конкретным и всегда включайте type .
Вы можете отключить каждый элемент формы в форме с помощью атрибута disabled в .

Поскольку Bootstrap применяет display: block и width: 100% почти ко всем элементам управления формой, формы по умолчанию будут располагаться вертикально. Дополнительные классы могут использоваться для изменения этого макета для каждой формы.

Утилиты

Утилиты полей — самый простой способ добавить некоторую структуру в формы. Они обеспечивают базовую группировку меток, элементов управления, необязательный текст формы и сообщения проверки формы. Мы рекомендуем придерживаться служебных программ margin-bottom и использовать одно направление во всей форме для единообразия.

Не стесняйтесь создавать свои формы, как Вам нравится, с помощью , или почти любого другого элемента.

Пример метки
Другая метка

div class="mb-3"> label for="formGroupExampleInput" class="form-label">Пример меткиlabel> input type="text" class="form-control" id="formGroupExampleInput" placeholder="Пример подсказки поля ввода"> div> div class="mb-3"> label for="formGroupExampleInput2" class="form-label">Другая меткаlabel> input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Другая подсказка поля ввода"> div>

Сетка формы

Более сложные формы могут быть построены с использованием наших классов сетки. Используйте их для макетов форм, требующих нескольких столбцов, разной ширины и дополнительных параметров выравнивания. Требует включения переменной Sass $enable-grid-classes (по умолчанию включено).

div class="row"> div class="col"> input type="text" class="form-control" placeholder="Имя" aria-label="Имя"> div> div class="col"> input type="text" class="form-control" placeholder="Фамилия" aria-label="Фамилия"> div> div>

Промежутки

Добавляя классы модификаторов промежутков, Вы можете контролировать ширину промежутков как в строчном, так и в блочном направлении. Также требуется, чтобы переменная Sass $enable-grid-classes (по умолчанию включена).

div class="row g-3"> div class="col"> input type="text" class="form-control" placeholder="Имя" aria-label="Имя"> div> div class="col"> input type="text" class="form-control" placeholder="Фамилия" aria-label="Фамилия"> div> div>

С помощью системы сеток также можно создавать более сложные макеты.

form class="row g-3"> div class="col-md-6"> label for="inputEmail4" class="form-label">Эл. адресlabel> input type="email" class="form-control" id="inputEmail4"> div> div class="col-md-6"> label for="inputPassword4" class="form-label">Парольlabel> input type="password" class="form-control" id="inputPassword4"> div> div class="col-12"> label for="inputAddress" class="form-label">Адресlabel> input type="text" class="form-control" id="inputAddress" placeholder="Проспект Ленина"> div> div class="col-12"> label for="inputAddress2" class="form-label">Адрес 2label> input type="text" class="form-control" id="inputAddress2" placeholder="Квартира"> div> div class="col-md-6"> label for="inputCity" class="form-label">Городlabel> input type="text" class="form-control" id="inputCity" placeholder="Брянск"> div> div class="col-md-4"> label for="inputState" class="form-label">Областьlabel> select id="inputState" class="form-select"> option selected>Выберите. option> option>. option> select> div> div class="col-md-2"> label for="inputZip" class="form-label">Индексlabel> input type="text" class="form-control" id="inputZip"> div> div class="col-12"> div class="form-check"> input class="form-check-input" type="checkbox" id="gridCheck"> label class="form-check-label" for="gridCheck"> Проверить меня label> div> div> div class="col-12"> button type="submit" class="btn btn-primary">Войти в системуbutton> div> form>

Горизонтальная форма

Создавайте горизонтальные формы с сеткой, добавляя класс .row для формирования групп и используя классы .col-*-* для определения ширины Ваших меток и элементов управления. Не забудьте добавить .col-form-label к Вашим чтобы они были выровнены по центру по вертикали с соответствующими элементами управления формой.

Иногда Вам может потребоваться использовать утилиты margin или padding для создания идеального выравнивания, которое Вам нужно. Например, мы удалили padding-top на нашей метке сгруппированных радио, чтобы лучше выровнять базовую линию текста.

form> div class="row mb-3"> label for="inputEmail3" class="col-sm-2 col-form-label">Эл. почтаlabel> div class="col-sm-10"> input type="email" class="form-control" id="inputEmail3"> div> div> div class="row mb-3"> label for="inputPassword3" class="col-sm-2 col-form-label">Парольlabel> div class="col-sm-10"> input type="password" class="form-control" id="inputPassword3"> div> div> fieldset class="row mb-3"> legend class="col-form-label col-sm-2 pt-0">Радио кнопкиlegend> div class="col-sm-10"> div class="form-check"> input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> label class="form-check-label" for="gridRadios1"> Первая радио кнопка label> div> div class="form-check"> input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> label class="form-check-label" for="gridRadios2"> Вторая радио кнопка label> div> div class="form-check disabled"> input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> label class="form-check-label" for="gridRadios3"> Третья отключенная радио кнопка label> div> div> fieldset> div class="row mb-3"> div class="col-sm-10 offset-sm-2"> div class="form-check"> input class="form-check-input" type="checkbox" id="gridCheck1"> label class="form-check-label" for="gridCheck1"> Пример флажка label> div> div> div> button type="submit" class="btn btn-primary">Войтиbutton> form>

Размер метки горизонтальной формы

Обязательно используйте .col-form-label-sm или .col-form-label-lg к Вашим или , чтобы правильно следовать размеру .form-control-lg и .form-control-sm .