Компоненты
Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Формы
Bootstrap обеспечивает контроль форма несколько стилей, разметка параметры и пользовательские компоненты для создания самых разнообразных форм.
Содержание
Элементы управления форм
Bootstrap Форма контроля разверните на наши перезагружается форма стили С классами. Использовать эти классы, чтобы выбрать их индивидуальные дисплеи последовательном отображении в разных браузерах и на разных устройствах. Приведенный ниже пример демонстрирует, форма общих элементов HTML-форм, которые получают обновленные стили из Bootstrap с дополнительных занятий.
Помните, поскольку Bootstrap использует технологии HTML5 doctype, то все входы должны иметь type атрибут.
Ниже приведен полный список с конкретными мерами форма поддерживается Bootstrap и классы, настроить их. Дополнительная документация доступна для каждой группы.
| Классы | Используется для | Поддерживаемые вариации |
|---|---|---|
| Чекбоксы и радио | Н/Д |
Текстовые материалы
Форма разметки
Поскольку Bootstrap относится display: block и width: 100% почти все наши элементы управления формы, формы стека по умолчанию вертикально. Дополнительные классы могут использоваться, чтобы изменить этот разметка на уровне формы.
Форма групп
Встроенные формы
Из-за этого, возможно, потребуется вручную адреса ширины и выравнивания отдельных элементов управления формы. Наконец, как показано ниже, Вы должны всегда включать с каждого элемента управления в форме.
Видны метки
Скрытые метки
Альтернативы скрытых ярлыков
С помощью Грид
Грид Форма разметки также поддержку больших и малых входов.
Чекбоксы и радио
По умолчанию (наборный)
Рядный
Группы чекбоксов или радио, которые находятся на одной горизонтальной строки похожи на своих сложенных собратьев, но требуют различных HTML и в один класс. Чтобы перейти с накоплением встроенный, падение окружающие
Без этикетки
Статические элементы управления
Неактивное состояние
Добавить disabled логический атрибут на входе для предотвращения взаимодействия с пользователем. Входы с ограниченными возможностями светлее и добавить not-allowed курсор.
Добавить disabled атрибута на чтобы отключить все элементы управления внутри.
Предостережение о ссылке функциональности Ширину колонок
Оберните входы в грид столбцов, или любые пользовательские родительского элемента, чтобы обеспечить нужную ширину.
Текст справки
Связывая текст справки с форма контроля
Текст справки должен быть явно связан с элементом управления он относится к используя aria-describedby атрибут. Это будет гарантировать, что вспомогательные технологии, такие как программы чтения с экрана – объявим этот текст, когда пользователь фокусируется и попадает в контроль.
Уровень блока
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
Рядный
Проверка
Bootstrap включает в себя стили проверки на опасность, предупреждение и успеха состояния относительно контроля форма. Здесь мы расскажем, как они работают:
Вообще говоря, вы хотите использовать определенный состояние для определенных типов обратной связи:
Вот несколько примеров из вышеупомянутых классов в действии.
Пользовательские формы
Для еще большей кастомизации и крест последовательность браузер, использовать наши полностью настраиваемые элементы формы, чтобы заменить по умолчанию браузера. Они построены на семантических и доступной цены, поэтому они сплошные замены по умолчанию элемент управления формы.
Чекбоксы и радио
Каждый чекбокс и радио заворачивают в по трем причинам:
Мы используем селектор брат (
В проверяемый состояния, который мы используем в base64 встроенной графикой SVG иконки С Открытый Iconic. Это обеспечивает лучший контроль для укладки и позиционирования разных браузерах и на разных устройствах.
Чекбоксы
Пользовательские чекбоксы также можете использовать :indeterminate класс псевдо при установке вручную через JavaScript (нет HTML-атрибута для указания его).
Если ты с помощью jQuery что-то вроде этого должно быть достаточно:
Радио-кнопки
Отключен
Пользовательские чекбоксы и радио также может быть отключен. Добавить disabled логический атрибут к и пользовательский индикатор и описание метки будут автоматически оформлены.
Проверка состояния
Добавить состояния к вашей пользовательской формы с нашими классы валидации.
Сводный индикатор
Выберите меню
Файловый браузер
Входной файл-это самый несговорчивый из толпы и требуют дополнительных JavaScript Если вы хотите, чтобы подключение их функциональное Choose file… и выбранного файла текст.
Вот как это работает:
Другими словами, это полностью настраиваемых элементов, все генерируется через CSS.
Перевода или настройки струн
Вам потребуется установить язык вашего документа (или его поддерево) правильно для того, чтобы правильный текст для отображения. Это может быть сделано с помощью в lang атрибут или Content-Language Заголовок протокол http среди других методов.
Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.
Сейчас v4.0.0-alpha.4. Код лицензии MIT, документы CC BY 3.0.
Формы
Примеры и рекомендации по использованию стилей управления формами, параметров макета и настраиваемых компонентов для создания самых разнообразных форм.
Обзор
Элементы управления формой Bootstrap расширяются на наши стили перезагрузки форм с помощью классов. Используйте эти классы, чтобы выбрать их настраиваемые отображения для более согласованного отображения в браузерах и на устройствах.
Обязательно используйте соответствующий атрибут type для всех входных данных (например, email для адреса электронной почты или number для числовой информации), чтобы воспользоваться преимуществами новых элементов управления вводом, таких как проверка электронной почты, выбор номера и т.д.
Вот быстрый пример, демонстрирующий стили формы Bootstrap. Продолжайте читать, чтобы узнать о необходимых классах, макете формы и многом другом.
Форма управления
Только чтение
Добавьте логический атрибут readonly к полю ввода, чтобы предотвратить изменение входного значения. Поля ввода, доступные только для чтения, выглядят светлее (как и отключенные входы), но сохраняют стандартный курсор.
Только для чтения обычный текст
Ввод диапазона
Флажки и радио
Поддерживаются отключенные флажки и радио. Атрибут disabled применит более светлый цвет для обозначения состояния ввода.
По умолчанию (сложены)
Строковые
Без меток
Макет
Поскольку Bootstrap применяет display: block и width: 100% почти ко всем элементам управления формой, формы по умолчанию будут располагаться вертикально. Дополнительные классы могут использоваться для изменения этого макета для каждой формы.
Группы форм
Сетка формы
Более сложные формы могут быть построены с использованием наших классов сетки. Используйте их для макетов форм, требующих нескольких столбцов, разной ширины и дополнительных параметров выравнивания.
Строка формы
С помощью системы сеток также можно создавать более сложные макеты.
Горизонтальная форма
Иногда Вам может потребоваться использовать утилиты margin или padding для создания идеального выравнивания, которое Вам нужно. Например, мы удалили padding-top на нашей метке сгруппированных радио, чтобы лучше выровнять базовую линию текста.
Размер меток горизонтальной формы
Размер колонки
Автоматический размер
Затем Вы можете снова смешать это с классами столбцов, зависящими от размера.
Строковые формы
Также поддерживаются настраиваемые элементы управления и выбор формы.
Альтернативы скрытым ярлыкам
Текст помощи
Связывание текста помощи с элементами управления формой
Встроенный текст может использовать любой типичный встроенный элемент HTML (будь то , или что-то еще) с не более чем служебным классом.
Отключенные формы
Добавьте логический атрибут disabled для ввода, чтобы предотвратить взаимодействие с пользователем и сделать его более светлым.
Предупреждение с якорями
Вы также можете выбрать один из маленьких или больших пользовательских элементов, чтобы они соответствовали нашим текстовым полям аналогичного размера.
Также поддерживается атрибут multiple :
Как и атрибут size :
Диапазон
Файловый браузер
Файловый ввод является самым сложным из всех и требует дополнительного JavaScript, если Вы хотите подключить их к функциональному Выбрать файл… и выбранному тексту имени файла.
Перевод или настройка строк с помощью SCSS
Вот lang(ru) в действии над пользовательским вводом файла для русского перевода:
Вам нужно будет правильно установить язык Вашего документа (или его поддерева), чтобы отображался правильный текст. Это можно сделать с помощью атрибута lang в элементе или Content-Language HTTP header среди других методов.
Перевод или настройка строк с помощью HTML
Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Overview
Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.
Form controls
Textual form controls—like s,
Readonly
Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
Readonly plain text
Range Inputs
Checkboxes and radios
Disabled checkboxes and radios are supported. The disabled attribute will apply a lighter color to help indicate the input’s state.
Default (stacked)
Inline
Without labels
Layout
Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
Form groups
Form grid
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
Form row
More complex layouts can also be created with the grid system.
Horizontal form
At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the padding-top on our stacked radio inputs label to better align the text baseline.
Horizontal form label sizing
Column sizing
Auto-sizing
You can then remix that once again with size-specific column classes.
And of course custom form controls are supported.
Inline forms
Custom form controls and selects are also supported.
Alternatives to hidden labels
Help text
Associating help text with form controls
Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.
Disabled forms
Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.
Add the disabled attribute to a to disable all the controls within.
Caveat with anchors
You may also choose from small and large custom selects to match our similarly sized text inputs.
The multiple attribute is also supported:
As is the size attribute:
Range
File browser
The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.
Translating or customizing the strings with SCSS
Here’s lang(es) in action on the custom file input for a Spanish translation:
You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using the lang attribute on the element or the Content-Language HTTP header, among other methods.
Translating or customizing the strings with HTML
Bootstrap also provides a way to translate the “Browse” text in HTML with the data-browse attribute which can be added to the custom input label (example in Dutch):
Примеры
Начните быстрый запуск проекта с любым из наших примеров, начиная от использования частей структуры до пользовательских компонентов и макетов.
Пользовательские компоненты
Новые компоненты и шаблоны для быстрого начала работы с Bootstrap с продемонстрацией лучших практик для добавления в фреймворк.
Альбом
Простой одностраничный шаблон для фотогалереи, портфолио и многого другого.
Прайслист
Пример страницы с ценой, созданной с помощью карт, с пользовательским верхнего и нижнего колонтитула.
Checkout
Пользовательская форма заказа, показывающая компоненты формы и функции проверки.
Продукт
Ориентированная на продукт продвигающая маркетинговая страница с обширной сеткой и изображениями.
Обложка
Одностраничный шаблон для создания простых и красивых домашних страниц.
Слайдер
Навигационная панель, карусель и новые компоненты.
Двухколоночный макет блога с пользовательской навигацией, заголовком и содержанием.
Панель администратора
Базовая панель администратора с фиксированной боковой панелью и навигационной панелью.
Страница входа
Пользовательская форма и дизайн для простой формы входа.
Прижатый футер
Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое.
Прижатый футер с меню
Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое. Панель навигации в верхней части.
Фреймворк
Примеры, которые направлены на внедрение использования встроенных компонентов, предоставляемых Bootstrap.
Базовый шаблон
Ничего, кроме основ: скомпилированный CSS и JavaScript.
Разметка
Несколько примеров макетов сетки с различными уровнями вложенности.
Jumbotron
Макет jumbotron с навигационной панели и базовая система разметки.
Navbars
Использование компонента navbar по умолчанию и отображение способа его перемещения, размещения и расширения.
Навигационное меню
Супер базовый шаблон с навигационной панелью и дополнительным контентом.
Статическое меню
Супер базовый шаблон со статической навигационной панелью и дополнительным контентом.
Фиксированное меню
Супер базовый шаблон с фиксированной верхней навигационной панелью и дополнительным контентом.
Навигационное меню внизу
Супер базовый шаблон с нижней навигационной панелью и дополнительным контентом.
Эксперименты
Примеры, которые ориентированы на будущие функции или методы.
Плавающие этикетки
Красивые простые формы с плавающей надписью в форме ввода.
Скользящее меню
Превратите расширяемую навигационную панель в скользящем меню.
Примеры
Используйте примеры для быстрого запуска своих проектов, используя фреймворк и настраивайте компоненты с помощью готовых макетов.
Фрагменты
Общие шаблоны для создания сайтов и приложений, основанных на существующих компонентах и утилитах с настраиваемым CSS и т.д.
Заголовки
Отобразите свой брендинг, навигацию, поиск и многое другое с помощью этих компонентов заголовка.
Герои
Создайте сцену на своей домашней странице с помощью героев с четкими призывами к действию.
Особенности
Объясните особенности, преимущества или другие детали Вашего маркетингового контента.
Боковые панели
Общие шаблоны навигации идеально подходят для макетов вне холста или нескольких столбцов.
Футеры
Завершите каждую страницу потрясающим нижним колонтитулом, большим или маленьким.
Выпадающие списки
Расширьте свои раскрывающиеся списки с помощью фильтров, значков, настраиваемых стилей и многого другого.
Список групп
Расширяйте группы списков с помощью утилит и настраиваемых стилей для любого контента.
Модали
Преобразуйте модальные окна для любых целей, от обзоров функций до диалогов.
Пользовательские компоненты
Новые компоненты и шаблоны для быстрого начала работы с Bootstrap с продемонстрацией лучших практик для добавления в фреймворк.
Альбом
Простой одностраничный шаблон для фотогалереи, портфолио и многого другого.
Прайслист
Пример страницы с ценами, созданной с помощью карточек, с настраиваемым верхним и нижним колонтитулами.
Оформление заказа
Пользовательская форма оформления заказа, показывающая наши компоненты формы и их функции проверки.
Продукт
Ориентированная на продукт продвигающая маркетинговая страница с обширной сеткой и изображениями.
Обложка
Одностраничный шаблон для создания простых и красивых домашних страниц.
Слайдер
Навигационная панель, карусель и новые компоненты.
Двухколоночный макет блога с пользовательской навигацией, заголовком и содержанием.
Панель администратора
Базовая панель администратора с фиксированной боковой панелью и навигационной панелью.
Форма входа
Индивидуальный макет и дизайн формы для простой формы входа.
Закрепленный футер
Прикрепленный нижний колонтитул к нижней части области просмотра, когда содержимое страницы мало.
Прижатый футер с меню
Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое. Панель навигации в верхней части.
Джамботрон
Используйте утилиты для воссоздания и улучшения Jumbotron Bootstrap.
Фреймворк
Примеры, которые сосредоточены на реализации использования встроенных компонентов, предоставляемых Bootstrap.
Базовый шаблон
Ничего, кроме основ: скомпилированный CSS и JavaScript.
Разметка
Несколько примеров макетов сетки с различными уровнями вложенности.
Шпаргалка
Множество компонентов Bootstrap.
Шпаргалка RTL
Множество компонентов Bootstrap, RTL.
Панели навигации
Использование компонента navbar по умолчанию и отображение способа его перемещения, размещения и расширения.
Панели навигации
Демонстрация всех адаптивных и контейнерных опций для навигационной панели.
Статичная панель навигации
Пример статической верхней панели навигации с одним дополнительным контентом.
Фиксированная панель
Пример единой панели навигации с фиксированной верхней панелью навигации и некоторым дополнительным контентом.
Нижняя панель навигации
Пример единой панели навигации с нижней панелью навигации и дополнительным контентом.
Панель навигации вне холста
Превратите расширяемую навигационную панель в скользящее меню.
Посмотрите, как работает RTL-версия Bootstrap с этими модифицированными примерами пользовательских компонентов.
Функция RTL все еще является экспериментальной и будет развиваться в соответствии с отзывами пользователей. Заметили что-то или хотите предложить улучшение? Откройте вопрос, мы будем рады узнать Ваше мнение.
Альбом RTL
Простой одностраничный шаблон для фотогалерей, портфолио и т.д.
Оформление заказа RTL
Пользовательская форма оформления заказа, показывающая наши компоненты формы и их функции проверки.
Слайдер RTL
Настройте панель навигации и карусель, а затем добавьте новые компоненты.
Блог RTL
Журнал как шаблон блога с заголовком, навигацией, избранным контентом.
Панель администратора RTL
Базовая панель администратора с фиксированной боковой панелью и навигационной панелью.
Интеграция
Интеграция с внешними библиотеками.
Masonry
Объедините возможностей сетки Bootstrap и макета Masonry.