Более дюжины повторно используемых компонентов, созданных для обеспечения значков, раскрывающихся списков, групп ввода, навигации, предупреждений и многого другого.
Глификоны
Доступные глифы
Включает более 250 глифов в формате шрифта из набора Glyphicon Halflings. Glyphicons Halflings обычно не доступны бесплатно, но их создатель сделал их доступными для Bootstrap бесплатно. В качестве благодарности мы просим вас по возможности включать обратную ссылку на Glyphicons .
Из соображений производительности для всех значков требуется базовый класс и отдельный класс значков. Чтобы использовать, разместите следующий код где угодно. Не забудьте оставить пробел между значком и текстом для правильного заполнения.
Не смешивать с другими компонентами
Классы значков нельзя напрямую комбинировать с другими компонентами. Их не следует использовать вместе с другими классами для одного и того же элемента. Вместо этого добавьте вложенный <span>и примените классы значков к файлу <span>.
Только для использования на пустых элементах
Классы значков следует использовать только для элементов, которые не содержат текстового содержимого и не имеют дочерних элементов.
Изменение расположения шрифта значка
Bootstrap предполагает, что файлы шрифтов значков будут расположены в ../fonts/каталоге относительно скомпилированных файлов CSS. Перемещение или переименование этих файлов шрифтов означает обновление CSS одним из трех способов:
Измените @icon-font-pathи/или @icon-font-nameпеременные в исходных файлах Less.
Используйте любой вариант, который лучше всего подходит для вашей конкретной настройки разработки.
Доступные значки
Современные версии вспомогательных технологий будут анонсировать содержимое, созданное с помощью CSS, а также определенные символы Unicode. Чтобы избежать непреднамеренного и запутанного вывода в программах чтения с экрана (особенно когда значки используются исключительно для украшения), мы скрываем их с помощью aria-hidden="true"атрибута.
Если вы используете значок для передачи значения (а не только в качестве декоративного элемента), убедитесь, что это значение также передается вспомогательным технологиям — например, включите дополнительное содержимое, визуально скрытое вместе с .sr-onlyклассом.
Если вы создаете элементы управления без другого текста (например <button>, содержащие только значок), вы всегда должны предоставлять альтернативное содержимое для определения назначения элемента управления, чтобы оно было понятно пользователям вспомогательных технологий. В этом случае вы можете добавить aria-labelатрибут к самому элементу управления.
Примеры
Используйте их в кнопках, группах кнопок для панели инструментов, навигации или предваряющих входных данных формы.
Значок, используемый в предупреждении , чтобы сообщить, что это сообщение об ошибке, с дополнительным .sr-onlyтекстом, чтобы передать эту подсказку пользователям вспомогательных технологий.
Ошибка:Введите действительный адрес электронной почты
Выпадающие списки
Переключаемое контекстное меню для отображения списков ссылок. Сделано интерактивным с помощью выпадающего плагина JavaScript .
Пример
Оберните триггер раскрывающегося списка и раскрывающееся меню внутри .dropdownили в другой элемент, который объявляет position: relative;. Затем добавьте HTML-код меню.
По умолчанию выпадающее меню автоматически позиционируется на 100 % сверху и слева от родительского элемента. Добавить .dropdown-menu-rightв .dropdown-menuвыпадающее меню по правому краю.
Может потребоваться дополнительное позиционирование
Выпадающие списки автоматически размещаются с помощью CSS в обычном потоке документа. Это означает, что выпадающие списки могут быть обрезаны родителями с определенными overflowсвойствами или отображаться за пределами окна просмотра. Решайте эти проблемы самостоятельно по мере их возникновения.
Устаревшее .pull-rightвыравнивание
Начиная с версии 3.1.0 мы отказались .pull-rightот раскрывающихся меню. Чтобы выровнять меню по правому краю, используйте .dropdown-menu-right. Выровненные по правому краю компоненты навигации на панели навигации используют смешанную версию этого класса для автоматического выравнивания меню. Чтобы переопределить его, используйте .dropdown-menu-left.
Заголовки
Добавьте заголовок, чтобы пометить разделы действий в любом раскрывающемся меню.
Сгруппируйте ряд кнопок вместе в одной строке с помощью группы кнопок. Добавьте необязательный JavaScript-радио и поведение в стиле флажков с помощью нашего плагина кнопок .
Всплывающие подсказки и всплывающие окна в группах кнопок требуют специальной настройки
При использовании всплывающих подсказок или всплывающих окон для элементов внутри элемента .btn-groupвам необходимо указать параметр, container: 'body'чтобы избежать нежелательных побочных эффектов (таких как увеличение ширины элемента и/или потеря закругленных углов при срабатывании всплывающей подсказки или всплывающего окна).
Убедитесь в правильности roleи укажите метку
Чтобы вспомогательные технологии, такие как программы для чтения с экрана, сообщали, что ряд кнопок сгруппирован, необходимо предоставить соответствующий roleатрибут. Для групп кнопок это будет role="group", а для панелей инструментов — role="toolbar".
Единственным исключением являются группы, которые содержат только один элемент управления (например , группы кнопок с <button>элеме��тами по ширине) или раскрывающийся список.
Кроме того, группам и панелям инструментов следует присваивать явные метки, так как в противном случае большинство вспомогательных технологий не объявляют их, несмотря на наличие правильного roleатрибута. В приведенных здесь примерах мы используем , но можно использовать и aria-labelтакие альтернативы, как .aria-labelledby
Базовый пример
Оберните ряд кнопок .btnв .btn-group.
Панель инструментов кнопок
Объединяйте наборы в наборы <div class="btn-group">для <div class="btn-toolbar">получения более сложных компонентов.
Размеры
Вместо того, чтобы применять классы размеров кнопок к каждой кнопке в группе, просто добавьте .btn-group-*их к каждому .btn-group, в том числе при вложении нескольких групп.
Вложение
Поместите a .btn-groupвнутри другого .btn-group, если вы хотите, чтобы выпадающие меню смешивались с рядом кнопок.
Сделайте так, чтобы группа кнопок растянулась на равные размеры, чтобы охватить всю ширину своего родителя. Также работает с раскрывающимися списками кнопок в группе кнопок.
Обработка границ
Из-за специфического HTML и CSS, используемых для выравнивания кнопок (а именно display: table-cell), границы между ними удваиваются. В обычных группах кнопок margin-left: -1pxиспользуется для сложения границ вместо их удаления. Однако marginне работает с display: table-cell. В результате, в зависимости от ваших настроек Bootstrap, вы можете удалить или перекрасить границы.
IE8 и границы
Internet Explorer 8 не отображает границы кнопок в группе кнопок с выравниванием по ширине, независимо от того, включены ли они <a>или <button>элементы. Чтобы обойти это, оберните каждую кнопку другим .btn-group.
См. № 12476 для получения дополнительной информации.
С <a>элементами
Просто оберните серию .btns в .btn-group.btn-group-justified.
Если <a>элементы используются в качестве кнопок — для запуска функций на странице, а не для перехода к другому документу или разделу на текущей странице — им также должен быть присвоен соответствующий role="button".
С <button>элементами
Чтобы использовать группы кнопок с <button>элементами по ширине, вы должны обернуть каждую кнопку в группу кнопок . Большинство браузеров неправильно применяют наш CSS для выравнивания <button>элементов, но поскольку мы поддерживаем раскрывающиеся списки кнопок, мы можем обойти это.
Выпадающие списки кнопок
Используйте любую кнопку, чтобы вызвать раскрывающееся меню, поместив его в a .btn-groupи предоставив соответствующую разметку меню.
Расширьте элементы управления формы, добавив текст или кнопки до, после или с обеих сторон любого текстового файла <input>. Используйте .input-groupс .input-group-addonили .input-group-btnдля добавления или добавления элементов к одному .form-control.
<input>Только текстовые
Избегайте использования <select>здесь элементов, так как они не могут быть полностью стилизованы в браузерах WebKit.
Избегайте использования <textarea>здесь элементов, так как rowsв некоторых случаях их атрибуты не будут учитываться.
Всплывающие подсказки и всплывающие окна в группах ввода требуют специальной настройки
При использовании всплывающих подсказок или всплывающих окон для элементов внутри .input-group, вам нужно будет указать параметр, container: 'body'чтобы избежать нежелательных побочных эффектов (таких как увеличение ширины элемента и/или потеря закругленных углов при срабатывании всплывающей подсказки или всплывающего окна).
Не смешивать с другими компонентами
Не смешивайте группы форм или классы столбцов сетки непосредственно с входными группами. Вместо этого вложите группу ввода внутрь группы формы или элемента, связанного с сеткой.
Всегда добавляйте ярлыки
Программы чтения с экрана будут иметь проблемы с вашими формами, если вы не включите метку для каждого ввода. Для этих групп ввода убедитесь, что любые дополнительные метки или функции передаются вспомогательным технологиям.
Точный метод, который будет использоваться (видимые <label>элементы, <label>элементы, скрытые с помощью .sr-onlyкласса или использование атрибута aria-label, aria-labelledby, aria-describedby, titleили placeholder) и то, какая дополнительная информация должна быть передана, зависит от конкретного типа реализуемого вами виджета интерфейса. Примеры в этом разделе предлагают несколько подходов для конкретных случаев.
Базовый пример
Поместите одну надстройку или кнопку по обе стороны от входа. Вы также можете разместить по одному с обеих сторон входа.
Мы не поддерживаем несколько надстроек ( .input-group-addonили .input-group-btn) на одной стороне.
Мы не поддерживаем несколько элементов управления формами в одной группе ввода.
Размеры
Добавьте классы относительного размера формы к .input-groupсамому себе, и содержимое автоматически изменит размер — нет необходимости повторять классы размера элемента управления формой для каждого элемента.
Флажки и радио-аддоны
Поместите любой флажок или переключатель в надстройку группы ввода вместо текста.
Аддоны кнопок
Кнопки в группах ввода немного отличаются и требуют еще одного уровня вложенности. Вместо .input-group-addon, вам нужно использовать .input-group-btnдля переноса кнопок. Это необходимо из-за стилей браузера по умолчанию, которые нельзя переопределить.
Кнопки с выпадающими списками
Сегментированные кнопки
Несколько кнопок
Хотя у вас может быть только одно дополнение на каждой стороне, вы можете иметь несколько кнопок внутри одного файла .input-group-btn.
Навигация
Навигации, доступные в Bootstrap, имеют общую разметку, начиная с базового .navкласса, а также общие состояния. Поменяйте местами классы модификаторов, чтобы переключаться между каждым стилем.
Для использования навигации для панелей вкладок требуется плагин JavaScript tabs.
Для вкладок с табулируемыми областями необходимо использовать плагин JavaScript для вкладок . Для разметки также потребуются дополнительные атрибуты и атрибуты ARIA — дополнительные сведения см. в примере разметкиrole плагина .
Сделать навигацию, используемую в качестве навигации, доступной
Если вы используете navs для предоставления панели навигации, обязательно добавьте a role="navigation"в наиболее логичный родительский контейнер <ul>или оберните <nav>элемент вокруг всей навигации. Не добавляйте роль в <ul>саму роль, так как это помешает ассистивным технологиям объявить ее как фактический список.
Вкладки
Обратите внимание, что для .nav-tabsкласса требуется .navбазовый класс.
С легкостью делайте вкладки или пилюли равной ширине своего родителя на экранах шире 768 пикселей с помощью .nav-justified. На небольших экранах навигационные ссылки расположены стопкой.
Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются.
Safari и отзывчивая оправданная навигация
Начиная с версии 9.1.2, в Safari обнаружена ошибка, из-за которой изменение размера браузера по горизонтали вызывает ошибки рендеринга в выравниваемой навигации, которые устраняются при обновлении. Эта ошибка также показана в примере с обоснованной навигацией .
Панели навигации — это адаптивные метакомпоненты, которые служат заголовками навигации для вашего приложения или сайта. Они начинают сворачиваться (и их можно переключать) в мобильных представлениях и становятся горизонтальными по мере увеличения доступной ширины области просмотра.
Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются.
Переполнение содержимого
Поскольку Bootstrap не знает, сколько места требуется контенту на панели навигации, вы можете столкнуться с проблемами переноса контента во вторую строку. Чтобы решить эту проблему, вы можете:
Уменьшите количество или ширину элементов панели навигации.
Скрывайте определенные элементы панели навигации при определенных размерах экрана с помощью адаптивных служебных классов .
Измените точку, в которой ваша панель навигации переключается между свернутым и горизонтальным режимом. Настройте @grid-float-breakpointпеременную или добавьте свой собственный медиа-запрос.
Требуется плагин JavaScript
Если JavaScript отключен, а область просмотра настолько узкая, что панель навигации сворачивается, будет невозможно развернуть панель навигации и просмотреть содержимое в файле .navbar-collapse.
Отзывчивая панель навигации требует, чтобы плагин сворачивания был включен в вашу версию Bootstrap.
Изменение точки останова свернутой мобильной панели навигации
Панель навигации сворачивается в вертикальное мобильное представление, когда окно просмотра уже, чем @grid-float-breakpoint, и расширяется в горизонтальное немобильное представление, когда окно просмотра имеет @grid-float-breakpointширину не менее. Отрегулируйте эту переменную в источнике Less, чтобы управлять свертыванием/расширением панели навигации. Значение по умолчанию — 768px(наименьший «маленький» или «планшетный» экран).
Сделать панели навигации доступными
Обязательно используйте <nav>элемент или, если вы используете более общий элемент, такой как <div>, добавьте role="navigation"на каждую панель навигации, чтобы явно идентифицировать ее как ориентир для пользователей вспомогательных технологий.
Фирменное изображение
Замените бренд панели навигации своим изображением, заменив текст на файл <img>. Поскольку у .navbar-brandэлемента есть собственные отступы и высота, вам может потребоваться переопределить некоторые CSS в зависимости от вашего изображения.
Формы
Поместите содержимое формы внутри .navbar-formдля правильного вертикального выравнивания и свернутого поведения в узких окнах просмотра. Используйте параметры выравнивания, чтобы решить, где он находится в содержимом панели навигации.
На заметку, .navbar-formбольшая часть кода делится с .form-inlineпомощью миксина. Для некоторых элементов управления формы, таких как группы ввода, может потребоваться фиксированная ширина для правильного отображения на панели навигации.
Программы чтения с экрана будут иметь проблемы с вашими формами, если вы не включите метку для каждого ввода. Для этих встроенных форм вы можете скрыть метки с помощью .sr-onlyкласса. Существуют дополнительные альтернативные методы предоставления метки для вспомогательных технологий, такие как атрибут aria-label, aria-labelledbyили . titleЕсли ни один из них не присутствует, программы чтения с экрана могут прибегнуть к использованию placeholderатрибута, если он присутствует, но обратите внимание, что использование placeholderв качестве замены для других методов маркировки не рекомендуется.
Кнопки
Добавьте .navbar-btnкласс к <button>элементам, не находящимся в a <form>, чтобы центрировать их по вертикали на панели навигации.
Использование в зависимости от контекста
Как и стандартные классы кнопок , .navbar-btnих можно использовать для элементов <a>и . <input>Однако ни .navbar-btnстандартные классы кнопок не должны использоваться для <a>элементов внутри .navbar-nav.
Текст
Оборачивайте строки текста в элемент с .navbar-text, обычно в <p>тег, для правильного интерлиньяжа и цвета.
Ссылки без навигации
Для людей, использующих стандартные ссылки, которые не находятся в обычном компоненте навигации панели навигации, используйте .navbar-linkкласс, чтобы добавить правильные цвета для опций панели навигации по умолчанию и инверсии.
Выравнивание компонентов
Выровняйте навигационные ссылки, формы, кнопки или текст с помощью служебных классов .navbar-leftили . .navbar-rightОба класса добавят CSS float в указанном направлении. Например, чтобы выровнять навигационные ссылки, поместите их отдельно <ul>с применением соответствующего служебного класса.
Эти классы представляют собой смешанные версии .pull-leftи .pull-right, но они ограничены медиа-запросами для упрощения обработки компонентов панели навигации на устройствах разных размеров.
Выравнивание нескольких компонентов по правому краю
Навигационные панели в настоящее время имеют ограничение с несколькими .navbar-rightклассами. Чтобы правильно разместить контент, мы используем отрицательное поле для последнего .navbar-rightэлемента. Когда есть несколько элементов, использующих этот класс, эти поля не работают должным образом.
Мы вернемся к этому, когда сможем переписать этот компонент в v4.
Исправлено вверху
Добавьте .navbar-fixed-topи включите .containerили .container-fluid, чтобы центрировать и дополнять содержимое панели навигации.
Требуется обивка кузова
Фиксированная панель навигации будет накладываться на другое содержимое, если вы не добавите paddingв начало файла <body>. Попробуйте свои собственные значения или воспользуйтесь приведенным ниже фрагментом кода. Совет. По умолчанию панель навигации имеет высоту 50 пикселей.
Не забудьте включить это после основного Bootstrap CSS.
Фиксированный к низу
Добавьте .navbar-fixed-bottomи включите .containerили .container-fluid, чтобы центрировать и дополнять содержимое панели навигации.
Требуется обивка кузова
Фиксированная панель навигации будет накладываться на другое содержимое, если вы не добавите paddingего в конец файла <body>. Попробуйте свои собственные значения или воспользуйтесь приведенным ниже фрагментом кода. Совет. По умолчанию панель навигации имеет высоту 50 пикселей.
Не забудьте включить это после основного Bootstrap CSS.
Статический топ
Создайте полноразмерную панель навигации, которая прокручивается вместе со страницей, добавив .navbar-static-topи включив .containerили .container-fluidдля центрирования и заполнения содержимого панели навигации.
В отличие от .navbar-fixed-*классов, вам не нужно менять какие-либо отступы в файле body.
Перевернутая панель навигации
Измените внешний вид панели навигации, добавив .navbar-inverse.
Панировочные сухари
Укажите местоположение текущей страницы в навигационной иерархии.
Разделители автоматически добавляются в CSS через :beforeи content.
Предоставьте ссылки на страницы для своего сайта или приложения с помощью компонента многостраничной разбивки на страницы или более простой альтернативы пейджера .
Пагинация по умолчанию
Простое разбиение на страницы, вдохновленное Rdio, отлично подходит для приложений и результатов поиска. Большой блок трудно не заметить, он легко масштабируется и обеспечивает большие области кликов.
Маркировка компонента пагинации
Компонент разбивки на страницы должен быть заключен в <nav>элемент, чтобы идентифицировать его как раздел навигации для программ чтения с экрана и других вспомогательных технологий. Кроме того, поскольку страница, скорее всего, уже имеет более одного такого раздела навигации (например, основная навигация в заголовке или навигация на боковой панели), рекомендуется предоставить описание aria-label, <nav>отражающее ее назначение. Например, если компонент разбивки на страницы используется для перехода между набором результатов поиска, соответствующей меткой может быть aria-label="Search results pages".
Отключенные и активные состояния
Ссылки настраиваются для разных обстоятельств. Используйте .disabledдля некликабельных ссылок и .activeдля указания текущей страницы.
Мы рекомендуем вам поменять местами активные или отключенные привязки для <span>, или опустить привязку в случае стрелок «предыдущий/следующий», чтобы удалить функцию щелчка, сохранив при этом предполагаемые стили.
Размеры
Хотите большую или меньшую нумерацию страниц? Добавьте .pagination-lgили .pagination-smдля дополнительных размеров.
Пейджер
Быстрые предыдущие и следующие ссылки для простой реализации разбиения на страницы с легкой разметкой и стилями. Он отлично подходит для простых сайтов, таких как блоги или журналы.
Пример по умолчанию
По умолчанию пейджер центрирует ссылки.
Выровненные ссылки
Кроме того, вы можете выровнять каждую ссылку по сторонам:
Необязательное отключенное состояние
Ссылки на пейджеры также используют общий .disabledслужебный класс из нумерации страниц.
Этикетки
Пример
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Пример заголовка Новый
Доступные варианты
Добавьте любой из перечисленных ниже классов модификаторов, чтобы изменить внешний вид метки.
Основная информация об успехе по умолчанию Предупреждение Опасность
Есть тонны этикеток?
Проблемы с рендерингом могут возникнуть, когда у вас есть десятки встроенных меток в узком контейнере, каждая из которых содержит свой собственный inline-blockэлемент (например, значок). Способ обойти это настройка display: inline-block;. Контекст и пример см. в #13219 .
Значки
Легко выделяйте новые или непрочитанные элементы, добавляя <span class="badge">к ссылкам, навигации Bootstrap и т. д.
Чтобы сделать джамботрон полной ширины и без закругленных углов, поместите его за пределы всех .containers и вместо этого добавьте .containerвнутрь.
Заголовок страницы
Простая оболочка для h1надлежащего размещения и сегментации разделов контента на странице. Он может использовать элемент h1по умолчанию small, а также большинство других компонентов (с дополнительными стилями).
Пример шапки страницы Подтекст для шапки
Миниатюры
Расширьте систему сетки Bootstrap с помощью компонента миниатюр, чтобы легко отображать сетки изображений, видео, текста и т. д.
Если вы ищете представление миниатюр различной высоты и/или ширины в стиле Pinterest, вам потребуется использовать сторонний плагин, такой как Masonry , Isotope или Salvattore .
Пример по умолчанию
По умолчанию миниатюры Bootstrap предназначены для демонстрации связанных изображений с минимальной необходимой разметкой.
Пользовательский контент
С помощью небольшой дополнительной разметки можно добавить любой HTML-контент, такой как заголовки, абзацы или кнопки, в миниатюры.
Ярлык миниатюры
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Предоставляйте контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких предупреждающих сообщений.
Примеры
Оберните любой текст и необязательную кнопку закрытия в .alertодин из четырех контекстных классов (например, .alert-success) для основных предупреждающих сообщений.
Нет класса по умолчанию
У предупреждений нет классов по умолчанию, только базовые классы и классы-модификаторы. Серое предупреждение по умолчанию не имеет особого смысла, поэтому вам необходимо указать тип через контекстный класс. Выберите из успеха, информации, предупреждения или опасности.
Отличная работа! Вы успешно прочитали это важное предупреждающее сообщение.
Берегись! Это предупреждение требует вашего внимания, но это не очень важно.
Предупреждение! Лучше проверь себя, ты не слишком хорошо выглядишь.
О хват! Измените несколько вещей и попробуйте отправить еще раз.
Предоставляйте актуальную информацию о ходе рабочего процесса или действия с помощью простых, но гибких индикаторов выполнения.
Кроссбраузерная совместимость
Индикаторы выполнения используют переходы и анимацию CSS3 для достижения некоторых эффектов. Эти функции не поддерживаются в Internet Explorer 9 и более ранних версиях, а также в более ранних версиях Firefox. Opera 12 не поддерживает анимацию.
Совместимость с политикой безопасности контента (CSP)
Если на вашем веб-сайте есть политика безопасности контента (CSP) , которая не разрешает style-src 'unsafe-inline', вы не сможете использовать встроенные styleатрибуты для установки ширины индикатора выполнения, как показано в наших примерах ниже. Альтернативные методы установки ширины, совместимые со строгими CSP, включают использование небольшого пользовательского JavaScript (который устанавливает element.style.width) или использование пользовательских классов CSS.
Базовый пример
Индикатор выполнения по умолчанию.
60% завершено
С этикеткой
Удалите класс <span>with .sr-onlyиз индикатора выполнения, чтобы отобразить видимый процент.
60%
Чтобы текст метки оставался разборчивым даже при низких процентных значениях, рассмотрите возможность добавления символа min-widthна индикатор выполнения.
0%
2%
Контекстные альтернативы
Индикаторы выполнения используют одни и те же кнопки и классы предупреждений для единообразных стилей.
40% завершено (успех)
20% завершено
Выполнено на 60% (предупреждение)
Завершено на 80% (опасно)
Полосатый
Использует градиент для создания полосатого эффекта. Недоступно в IE9 и более ранних версиях.
40% завершено (успех)
20% завершено
Выполнено на 60% (предупреждение)
Завершено на 80% (опасно)
Анимированный
Добавьте .active, чтобы .progress-bar-stripedанимировать полосы справа налево. Недоступно в IE9 и более ранних версиях.
45% завершено
Сложены
Поместите несколько стержней в одно и то же .progress, чтобы сложить их.
35% завершено (успех)
20% завершено (предупреждение)
10% завершено (опасно)
Медиа объект
Абстрактные стили объектов для создания различных типов компонентов (таких как комментарии в блогах, твиты и т. д.), которые содержат изображение, выровненное по левому или правому краю, наряду с текстовым содержимым.
Носитель по умолчанию
Медиа по умолчанию отображает медиа объект (изображения, видео, аудио) слева или справа от блока контента.
Заголовок СМИ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Заголовок СМИ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Заголовок вложенного носителя
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Заголовок СМИ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
Заголовок СМИ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
Классы .pull-leftи .pull-rightтакже существуют и ранее использовались как часть мультимедийного компонента, но они устарели для такого использования, начиная с версии 3.3.0. Они примерно эквивалентны .media-leftи .media-right, за исключением того, что .media-rightдолжны быть помещены после .media-bodyв html.
Выравнивание СМИ
Изображения или другие медиафайлы можно выровнять по верхнему, среднему или нижнему краю. По умолчанию выравнивается по верхнему краю.
СМИ с верхним выравниванием
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
СМИ с выравниванием по середине
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Медиа с выравниванием по нижнему краю
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Список СМИ
С небольшой дополнительной разметкой вы можете использовать медиа внутри списка (полезно для веток комментариев или списков статей).
Заголовок СМИ
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
Заголовок вложенного носителя
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
Заголовок вложенного носителя
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
Заголовок вложенного носителя
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
Группа списка
Группы списков — гибкий и мощный компонент для отображения не только простых списков элементов, но и сложных с настраиваемым содержимым.
Базовый пример
Самая простая группа списков — это просто неупорядоченный список с элементами списка и соответствующими классами. Используйте его с помощью следующих опций или своего собственного CSS по мере необходимости.
Крас Хусто Одио
Dapibus ac facilis в
Морби Лео Рисус
Porta ac consectetur ac
Вестибюль у эроса
Значки
Добавьте компонент значков к любому элементу группы списка, и он автоматически будет расположен справа.
14Крас Хусто Одио
2Dapibus ac facilis в
1Морби Лео Рисус
Связанные элементы
Связать элементы группы списка, используя теги привязки вместо элементов списка (это также означает родительский элемент <div>вместо элемента <ul>). Нет необходимости в отдельных родителях вокруг каждого элемента.
Элементы группы списка могут быть кнопками вместо элементов списка (это также означает родителя <div>вместо <ul>). Нет необходимости в отдельных родителях вокруг каждого элемента. Не используйте здесь стандартные .btnклассы.
Отключенные элементы
Добавьте .disabledк .list-group-itemсерому, чтобы он казался отключенным.
Хотя это не всегда необходимо, иногда вам нужно поместить DOM в коробку. Для таких ситуаций попробуйте панельный компонент.
Базовый пример
По умолчанию все, что .panelнужно сделать, это применить некоторые базовые границы и отступы, чтобы содержать некоторый контент.
Пример базовой панели
Панель с заголовком
Легко добавьте контейнер заголовков на панель с помощью .panel-heading. Вы также можете включить любой <h1>- <h6>с .panel-titleклассом, чтобы добавить предварительно стилизованный заголовок. Однако размеры шрифта <h1>- <h6>переопределяются на .panel-heading.
Для правильной окраски ссылок обязательно размещайте ссылки в заголовках внутри .panel-title.
Заголовок панели без заголовка
Содержимое панели
Название панели
Содержимое панели
Панель с нижним колонтитулом
Оборачивайте кнопки или дополнительный текст в файлы .panel-footer. Обратите внимание, что нижние колонтитулы панелей не наследуют цвета и границы при использовании контекстных вариантов, поскольку они не должны быть на переднем плане.
Содержимое панели
Контекстные альтернативы
Как и другие компоненты, легко сделать панель более значимой для определенного контекста, добавив любой из классов контекстного состояния.
Название панели
Содержимое панели
Название панели
Содержимое панели
Название панели
Содержимое панели
Название панели
Содержимое панели
Название панели
Содержимое панели
Со столами
Добавьте любые элементы без границ .tableвнутри панели для цельного дизайна. Если есть .panel-body, мы добавляем дополнительную границу в верхнюю часть таблицы для разделения.
Заголовок панели
Некоторое содержимое панели по умолчанию здесь. Nulla vitae elit libero, a pharetra augue. Энейская lacinia bibendum nulla sed consectetur. Энейский eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
#
Имя
Фамилия
Имя пользователя
1
Отметка
Отто
@мдо
2
Джейкоб
Торнтон
@толстый
3
Ларри
птица
@твиттер
Если тела панели нет, компонент перемещается из заголовка панели в таблицу без перерыва.
Некоторое содержимое панели по умолчанию здесь. Nulla vitae elit libero, a pharetra augue. Энейская lacinia bibendum nulla sed consectetur. Энейский eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
Крас Хусто Одио
Dapibus ac facilis в
Морби Лео Рисус
Porta ac consectetur ac
Вестибюль у эроса
Адаптивная вставка
Разрешить браузерам определять размеры видео или слайд-шоу на основе ширины содержащего их блока, создав внутреннее соотношение, которое будет правильно масштабироваться на любом устройстве.
Правила напрямую применяются к элементам <iframe>, <embed>, <video>и ; <object>при необходимости используйте явный класс-потомок, .embed-responsive-itemесли вы хотите, чтобы стиль соответствовал другим атрибутам.
Совет! Вам не нужно включать frameborder="0"в свой <iframe>s, так как мы переопределяем это для вас.
Уэллс
Колодец по умолчанию
Используйте колодец как простой эффект для элемента, чтобы придать ему эффект вставки.
Смотри, я в колодце!
Дополнительные классы
Управляйте отступами и закругленными углами с помощью двух дополнительных классов модификаторов.