Доступні гліфи

Містить понад 250 гліфів у форматі шрифту з набору Glyphicon Halflings. Glyphicons Halflings зазвичай не доступні безкоштовно, але їхній творець зробив їх доступними для Bootstrap безкоштовно. На знак подяки ми лише просимо вас додати посилання на Glyphicons , коли це можливо.

гліфікон гліфікон-зірочка
гліфікон гліфікон-плюс
гліфікон гліфікон-євро
гліфікон glyphicon-eur
глификон гліфікон-мінус
гліфікон гліфікон-хмара
глификон гліфікон-конверт
глификон гліфікон-олівець
глификон гліфікон-скло
гліфікон гліфікон-муз
glyphicon glyphicon-пошук
гліфікон гліфікон-серце
гліфікон гліфікон-зірка
гліфікон гліфікон-зірка-порожній
glyphicon користувач glyphicon
гліфікон гліфікон-плівка
глификон гліфікон-ий-великий
глификон гліфікон-й
glyphicon glyphicon-th-list
гліфікон гліфікон-ок
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
глификон гліфікон-викл
глификон гліфікон-сигнал
глификон гліфікон-ког
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-файл
гліфікон гліфікон-час
глификон гліфікон-дорога
glyphicon glyphicon-download-alt
glyphicon glyphicon-завантажити
glyphicon glyphicon-завантаження
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-повтор
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
глификон гліфікон-замок
гліфікон гліфікон-прапор
glyphicon glyphicon-навушники
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-штрих-код
glyphicon glyphicon-tag
glyphicon glyphicon-теги
glyphicon glyphicon-книга
гліфікон гліфікон-закладка
гліфікон гліфікон-друк
гліфікон гліфікон-камера
glyphicon glyphicon-шрифт
гліфікон гліфікон-жирний
гліфікон гліфікон-курсив
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
гліфікон гліфікон-зображення
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
глификон гліфікон-відтінок
glyphicon glyphicon-edit
глификон гліфікон-доля
глификон гліфікон-перевірка
глификон гліфікон-переїзд
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
гліфікон гліфікон-назад
glyphicon glyphicon-play
гліфікон гліфікон-пауза
гліфікон гліфікон-стоп
гліфікон гліфікон-вперед
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
гліфікон гліфікон-мінус-знак
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
гліфікон гліфікон-знак питання
glyphicon glyphicon-info-sign
glyphicon glyphicon-скріншот
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
гліфікон гліфікон-знак-оклику
гліфікон гліфікон-дар
гліфікон гліфікон-лист
гліфікон гліфікон-вогняний
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
гліфікон гліфікон-попередження-знак
глификон гліфікон-площина
гліфікон гліфікон-календар
гліфікон гліфікон-рандом
гліфікон гліфікон-коментар
глификон гліфікон-магніт
гліфікон glyphicon-chevron-up
гліфікон гліфікон-шеврон-вниз
glyphicon glyphicon-ретвіт
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
гліфікон гліфікон-мегафон
глификон гліфікон-дзвіночок
глификон гліфікон-сертифікат
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hand-right
гліфікон гліфікон-рука-ліва
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
глификон гліфікон-глобус
гліфікон гліфікон-гайковий ключ
гліфікон гліфікон-завдання
glyphicon glyphicon-фільтр
глификон глификон-портфель
glyphicon glyphicon-повноекранний
glyphicon glyphicon-панель
гліфікон гліфікон-скріпка
гліфікон гліфікон-серце-порожнє
glyphicon glyphicon-link
гліфікон гліфікон-телефон
глификон глификон-кнопка
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
гліфікон гліфікон-род
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-не перевірено
гліфікон гліфікон-розгорнути
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-вхід
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-нове вікно
гліфікон гліфікон-запис
glyphicon glyphicon-зберегти
гліфікон гліфікон-відкритий
glyphicon glyphicon-saved
гліфікон гліфікон-імпорт
гліфікон гліфікон-експорт
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
глификон гліфікон-перенос
glyphicon glyphicon-столовий прилад
glyphicon glyphicon-header
гліфікон гліфікон-стиснутий
glyphicon glyphicon-навушники
glyphicon glyphicon-phone-alt
глификон гліфікон-вежа
glyphicon glyphicon-stats
glyphicon glyphicon-sd-відео
glyphicon glyphicon-hd-відео
glyphicon glyphicon-субтитри
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-завантаження
glyphicon glyphicon-cloud-upload
гліфікон гліфікон-дерево-хвойне
гліфікон гліфікон-дерево-листяний
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
гліфікон гліфікон-копія
гліфікон гліфікон-паста
glyphicon glyphicon-alert
glyphicon glyphicon-еквалайзер
гліфікон гліфікон-цар
гліфікон гліфікон-королева
глификон глификон-пішак
гліфікон гліфікон-єпископ
гліфікон гліфікон-лицар
glyphicon glyphicon-baby-formula
глификон гліфікон-намет
гліфікон гліфікон-дошка
глификон гліфікон-ложе
гліфікон гліфікон-яблуко
глификон гліфікон-стерти
гліфікон гліфікон-пісочний годинник
глификон гліфікон-лампа
гліфікон гліфікон-дублікат
гліфікон гліфікон-скарбничка
глификон гліфікон-ножиці
glyphicon glyphicon-біткойн
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
глификон гліфікон-єн
glyphicon glyphicon-jpy
глификон глификон-рубль
глификон глификон-руб
глификон гліфікон-луска
гліфікон гліфікон-льодяник
glyphicon glyphicon-ice-lolly-tasted
гліфікон гліфікон-освіта
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
гліфікон гліфікон-олія
глификон глификон-зерно
сонцезахисні окуляри glyphicon glyphicon
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triangle-left
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-консоль
глификон гліфікон-надрядковий
гліфікон гліфікон-підрядковий
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Як використовувати

З міркувань продуктивності всі піктограми потребують базового класу та окремого класу піктограм. Щоб використовувати, розмістіть наведений нижче код де завгодно. Обов’язково залишайте простір між піктограмою та текстом для правильного відступу.

Не змішувати з іншими компонентами

Класи піктограм не можна безпосередньо поєднувати з іншими компонентами. Їх не слід використовувати разом з іншими класами для того самого елемента. Замість цього додайте вкладений <span>і застосуйте класи значків до <span>.

Тільки для використання на порожніх елементах

Класи значків слід використовувати лише для елементів, які не містять текстового вмісту та не мають дочірніх елементів.

Зміна розташування шрифту значка

Bootstrap передбачає, що файли шрифтів значків будуть розташовані в ../fonts/каталозі відносно скомпільованих файлів CSS. Переміщення або перейменування цих файлів шрифтів означає оновлення CSS одним із трьох способів:

Змініть @icon-font-pathта/або @icon-font-nameзмінні у вихідних файлах Less.
Використовуйте параметр відносних URL -адрес, наданий компілятором Less.
Змініть url()шляхи в скомпільованому CSS.

Використовуйте будь-який варіант, який найкраще відповідає вашим конкретним налаштуванням розробки.

Доступні значки

Сучасні версії допоміжних технологій оголошуватимуть вміст, згенерований CSS, а також певні символи Unicode. Щоб уникнути ненавмисного та заплутаного виведення в програмах зчитування з екрана (зокрема, коли піктограми використовуються виключно для прикраси), ми приховуємо їх за допомогою aria-hidden="true"атрибута.

Якщо ви використовуєте значок для передачі значення (а не лише як декоративний елемент), переконайтеся, що це значення також передається допоміжним технологіям – наприклад, додайте додатковий вміст, візуально прихований за допомогою .sr-onlyкласу.

Якщо ви створюєте елементи керування без іншого тексту (наприклад, <button>який містить лише піктограму), вам слід завжди надавати альтернативний вміст, щоб визначити призначення елемента керування, щоб він був зрозумілим для користувачів допоміжних технологій. У цьому випадку ви можете додати aria-labelатрибут до самого елемента керування.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Приклади

Використовуйте їх у кнопках, групах кнопок для панелі інструментів, навігації або введених форм.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

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

Введіть дійсну адресу електронної пошти

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Перемикається контекстне меню для відображення списків посилань. Зроблено інтерактивним за допомогою спадного плагіна JavaScript .

приклад

Загорніть тригер спадного меню та спадне меню всередину .dropdownабо інший елемент, який оголошує position: relative;. Потім додайте HTML меню.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Випадаючі меню можна змінити на розгортання вгору (замість вниз), додавши .dropupдо батьківського.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Вирівнювання

За замовчуванням спадне меню автоматично розташовується на 100% від верхнього краю та вздовж лівого боку батьківського меню. Додайте .dropdown-menu-rightдо a, .dropdown-menuщоб вирівняти спадне меню праворуч.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Заголовки

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Роздільник

Додайте роздільник до окремих рядів посилань у спадному меню.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Вимкнені пункти меню

Додайте .disabledв <li>спадне меню, щоб вимкнути посилання.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Згрупуйте ряд кнопок разом на одному рядку за допомогою групи кнопок. Додайте необов’язкове перемикач JavaScript і поведінку стилю прапорця за допомогою нашого плагіна кнопок .

Спливаючі підказки та спливаючі вікна в групах кнопок потребують спеціального налаштування

Під час використання спливаючих підказок або спливаючих елементів для елементів у .btn-group, вам доведеться вказати опцію, container: 'body'щоб уникнути небажаних побічних ефектів (таких як елемент стає ширшим і/або втрачає свої заокруглені кути, коли спрацьовує підказка чи спливаюче вікно).

Переконайтеся в правильності `role`та надайте мітку

Щоб допоміжні технології, такі як програми зчитування з екрана, передавали групу кнопок, потрібно надати відповідний roleатрибут. Для груп кнопок це буде role="group", тоді як панелі інструментів повинні мати role="toolbar".

Виняток становлять групи, які містять лише один елемент керування (наприклад, вирівняні групи кнопок з <button>елементами) або спадне меню.

Крім того, групам і панелям інструментів слід надати чітку мітку, оскільки в іншому випадку більшість допоміжних технологій не повідомлять про них, незважаючи на наявність правильного roleатрибута. У наведених тут прикладах ми використовуємо , але також можна використовувати aria-labelтакі альтернативи, як .aria-labelledby

Базовий приклад

Загорніть ряд ґудзиків .btnу .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Об’єднайте набори <div class="btn-group">в <div class="btn-toolbar">складніші компоненти.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

Розміри

Замість того, щоб застосовувати класи розміру кнопки до кожної кнопки в групі, просто додайте .btn-group-*до кожної .btn-group, у тому числі під час вкладення кількох груп.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Гніздування

Розмістіть одне .btn-groupв іншому .btn-group, якщо ви бажаєте, щоб спадні меню були змішані з серією кнопок.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Вертикальна варіація

Зробіть так, щоб набір кнопок виглядав вертикально, а не горизонтально. Розділені кнопки тут не підтримуються.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Вирівняні групи кнопок

Зробіть так, щоб група ґудзиків розтягувалася на однакові розміри, щоб охопити всю ширину свого батька. Також працює зі спадними меню кнопок у групі кнопок.

Обробка кордонів

Через особливості 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.

Ліворуч Середній правильно

Ліворуч Середній

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Посилання, що діють як кнопки

Якщо <a>елементи використовуються як кнопки – для запуску функціональних можливостей на сторінці, а не для переходу до іншого документа чи розділу на поточній сторінці – їм також слід надати відповідний role="button".

З `<button>`елементами

Щоб використовувати вирівняні групи кнопок з <button>елементами, ви повинні обернути кожну кнопку в групу кнопок . Більшість браузерів неправильно застосовують наш CSS для обґрунтування <button>елементів, але оскільки ми підтримуємо розкривні списки кнопок, ми можемо це обійти.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

Використовуйте будь-яку кнопку, щоб викликати спадне меню, розташувавши його в межах .btn-groupі вказавши правильну розмітку меню.

Залежність плагіна

Випадаючі списки кнопок вимагають, щоб у вашій версії Bootstrap був включений плагін спадного меню .

Випадаючі меню з однією кнопкою

Перетворіть кнопку на розкривний перемикач із деякими базовими змінами розмітки.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Розділені кнопки, що випадають

Подібним чином створіть спадні списки розділених кнопок із тими самими змінами розмітки, лише з окремою кнопкою.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Розміри

Випадаючі списки кнопок працюють із кнопками будь-якого розміру.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Варіація Dropup

Запускайте спадні меню над елементами шляхом додавання .dropupдо батьківського.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Розширте елементи керування форми, додавши текст або кнопки до, після або з обох боків будь-якого текстового <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) на одній стороні.

Ми не підтримуємо кілька елементів керування формою в одній групі введення.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Розміри

Додайте до себе відносні класи розміру форми .input-group, і вміст усередині автоматично змінить розмір — не потрібно повторювати класи розміру керування формою для кожного елемента.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Прапорці та радіододатки

Розмістіть будь-який прапорець або перемикач у аддоні групи введення замість тексту.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Кнопкові аддони

Кнопки в групах введення дещо відрізняються і потребують додаткового рівня вкладеності. Замість .input-group-addon, вам потрібно буде використовувати .input-group-btnдля обертання кнопок. Це потрібно через стандартні стилі веб-переглядача, які не можна змінити.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Кнопки з розкривними меню

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Сегментовані кнопки

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Кілька кнопок

Хоча ви можете мати лише одне доповнення на кожній стороні, ви можете мати кілька кнопок всередині одного .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Nav, доступні в Bootstrap, мають спільну розмітку, починаючи з базового .navкласу, а також спільні стани. Поміняйте місцями класи модифікаторів для перемикання між кожним стилем.

Щоб використовувати навігацію для панелей вкладок, потрібен плагін вкладок JavaScript

Для вкладок із областями табуляції необхідно використовувати плагін JavaScript для вкладок . Для розмітки також знадобляться додаткові атрибути та атрибути ARIA – подробиці див. у прикладі розміткиrole плагіна .

Зробити навігацію доступною для навігації

Якщо ви використовуєте nav для надання навігаційної панелі, обов’язково додайте role="navigation"до найбільш логічного батьківського контейнера <ul>, або оберніть <nav>елемент навколо всієї навігації. Не додавайте роль до <ul>себе, оскільки це запобіжить оголошенню її як справжнього списку допоміжними технологіями.

Вкладки

Зверніть увагу, що для .nav-tabsкласу потрібен .navбазовий клас.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Таблетки

Візьміть той самий HTML, але використовуйте .nav-pillsзамість нього:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Таблетки також можна укласти вертикально. Просто додайте .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Виправдано

Легко створюйте вкладки або таблетки такої ж ширини, як і їхні батьківські елементи, на екранах із шириною понад 768 пікселів за допомогою .nav-justified. На менших екранах навігаційні посилання згруповані.

Вирівняні навігаційні посилання на навігаційній панелі наразі не підтримуються.

Safari та адаптивна вирівняна навігація

Починаючи з версії 9.1.2, Safari демонструє помилку, через яку зміна розміру веб-переглядача по горизонталі спричиняє помилки візуалізації у вирівняній навігації, які очищаються після оновлення. Ця помилка також показана у прикладі вирівняної навігації .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Відключені посилання

.disabledДля будь-якого навігаційного компонента (вкладки чи таблетки) додайте сірі посилання та відсутність ефектів наведення .

На функціональність посилання не вплинуло

Цей клас змінить лише <a>зовнішній вигляд, а не його функціональність. Використовуйте спеціальний JavaScript, щоб вимкнути посилання тут.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Використання спадних меню

Додайте спадні меню з додатковим кодом HTML і плагіном JavaScript для спадних меню .

Вкладки з розкривними меню

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Таблетки з випадаючими

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Панелі навігації — це адаптивні метакомпоненти, які служать навігаційними заголовками для вашої програми або сайту. Вони починають згортатися (і їх можна перемикати) у мобільних переглядах і стають горизонтальними зі збільшенням доступної ширини вікна перегляду.

Вирівняні навігаційні посилання на навігаційній панелі наразі не підтримуються.

Переповнений вміст

Оскільки Bootstrap не знає, скільки місця потрібно вмісту на панелі навігації, у вас можуть виникнути проблеми з перенесенням вмісту у другий рядок. Щоб вирішити цю проблему, ви можете:

Зменшіть кількість або ширину елементів панелі навігації.
Приховати певні елементи панелі навігації на певних розмірах екрану за допомогою адаптивних класів утиліт .
Змініть точку, коли навігаційна панель перемикається між згорнутим і горизонтальним режимами. Налаштуйте @grid-float-breakpointзмінну або додайте власний медіа-запит.

Потрібен плагін JavaScript

Якщо JavaScript вимкнено, а вікно перегляду достатньо вузьке, що навігаційна панель згортається, буде неможливо розгорнути навігаційну панель і переглянути вміст у .navbar-collapse.

Адаптивна навігаційна панель вимагає, щоб плагін згортання був включений у вашу версію Bootstrap.

Зміна точки зупинки згорнутої мобільної панелі навігації

Панель навігації згортається до свого вертикального мобільного перегляду, коли вікно перегляду вужче, ніж @grid-float-breakpoint, і розгортається до свого горизонтального немобільного перегляду, коли вікно перегляду має принаймні @grid-float-breakpointширину. Налаштуйте цю змінну в джерелі Less, щоб контролювати, коли навігаційна панель згортається/розгортається. Значення за замовчуванням 768px(найменший «маленький» або «планшетний» екран).

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Замініть бренд навігаційної панелі на власне зображення, замінивши текст на <img>. Оскільки у .navbar-brandнього є власні відступи та висота, вам може знадобитися змінити деякі CSS залежно від вашого зображення.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Розмістіть вміст форми .navbar-formдля належного вертикального вирівнювання та згорнутої поведінки у вузьких вікнах перегляду. Використовуйте параметри вирівнювання, щоб визначити, де він знаходиться в межах вмісту панелі навігації.

Як хедз-ап, .navbar-formділиться більшою частиною свого коду з .form-inlineчерез mixin. Деякі елементи керування форми, як-от групи введення, можуть вимагати фіксованої ширини, щоб належним чином відображатися на панелі навігації.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Завжди додавайте мітки

Програми зчитування з екрана матимуть проблеми з вашими формами, якщо ви не включите мітку для кожного введення. Для цих вбудованих форм ви можете приховати мітки за допомогою .sr-onlyкласу. Існують інші альтернативні методи надання мітки для допоміжних технологій, наприклад атрибут aria-label, aria-labelledbyабо . titleЯкщо жоден із них відсутній, програми зчитування з екрана можуть вдатися до використання placeholderатрибута, якщо він присутній, але зауважте, що використовувати placeholderяк заміну для інших методів позначення не рекомендується.

Додайте .navbar-btnклас до <button>елементів, які не знаходяться в a <form>, щоб вертикально відцентрувати їх на навігаційній панелі.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Обгортання рядків тексту в елементі з .navbar-text, як правило, на <p>тегу для правильного інтервенію та кольору.

<p class="navbar-text">Signed in as Mark Otto</p>

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

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Вирівняйте навігаційні посилання, форми, кнопки або текст за допомогою службових класів .navbar-leftабо . .navbar-rightОбидва класи додадуть CSS float у вказаному напрямку. Наприклад, щоб вирівняти навігаційні посилання, розмістіть їх окремо <ul>із застосуванням відповідного класу корисності.

Ці класи є змішаними версіями .pull-leftі .pull-right, але вони призначені для медіа-запитів для легшої обробки компонентів навігаційної панелі на різних розмірах пристроїв.

Вирівнювання кількох компонентів праворуч

Панелі навігації наразі мають обмеження кількома .navbar-rightкласами. Щоб правильно розподілити вміст, ми використовуємо негативне поле на останньому .navbar-rightелементі. Коли є кілька елементів, які використовують цей клас, ці поля не працюють належним чином.

Ми повернемося до цього, коли зможемо переписати цей компонент у v4.

Додайте .navbar-fixed-topта включите .containerабо .container-fluidдо центру та додавання вмісту панелі навігації.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Необхідна підкладка тіла

Фіксована навігаційна панель перекриватиме ваш інший вміст, якщо ви не додасте paddingїї вгору <body>. Спробуйте власні значення або скористайтеся нашим фрагментом нижче. Порада. За замовчуванням навігаційна панель має висоту 50 пікселів.

body { padding-top: 70px; }

Обов’язково включите це після основного CSS Bootstrap.

Додайте .navbar-fixed-bottomта включите .containerабо .container-fluidдо центру та додавання вмісту панелі навігації.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Необхідна підкладка тіла

Фіксована навігаційна панель перекриватиме інший вміст, якщо ви не додасте paddingвнизу <body>. Спробуйте власні значення або скористайтеся нашим фрагментом нижче. Порада. За замовчуванням навігаційна панель має висоту 50 пікселів.

body { padding-bottom: 70px; }

Обов’язково включите це після основного CSS Bootstrap.

Створіть навігаційну панель на всю ширину, яка прокручується разом із сторінкою, додавши .navbar-static-topта включивши .containerабо .container-fluid, щоб відцентрувати та розмістити вміст навігаційної панелі.

На відміну від .navbar-fixed-*класів, вам не потрібно змінювати відступи на body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

Змініть вигляд навігаційної панелі, додавши .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

Панірувальні сухарі

Укажіть розташування поточної сторінки в навігаційній ієрархії.

Роздільники автоматично додаються в CSS через :beforeі content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Пагінація

Надайте посилання на розбивку сторінок для свого сайту чи програми за допомогою компонента розбиття на багато сторінок або простішої альтернативи пейджера .

Пагінація за замовчуванням

Просте розбиття сторінок на основі Rdio, чудове для додатків і результатів пошуку. Великий блок важко помітити, він легко масштабується та забезпечує великі області натискання.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Позначення компонента сторінки

Компонент розбиття на сторінки має бути загорнутий в <nav>елемент, щоб ідентифікувати його як розділ навігації для програм зчитування з екрана та інших допоміжних технологій. Крім того, оскільки сторінка, імовірно, уже має більше одного такого розділу навігації (наприклад, основна навігація в заголовку або навігація на бічній панелі), доцільно надати опис aria-label, <nav>який відображає її призначення. Наприклад, якщо компонент розбиття на сторінки використовується для навігації між набором результатів пошуку, відповідною міткою може бути aria-label="Search results pages".

Відключений і активний стани

Посилання можна налаштувати для різних обставин. Використовуйте .disabledдля неактивних посилань і .activeдля позначення поточної сторінки.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Ми рекомендуємо замінити активні чи вимкнені прив’язки на <span>, або опустити прив’язку у випадку попередніх/наступних стрілок, щоб видалити функцію клацання, зберігаючи заплановані стилі.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Розміри

Бажаєте збільшити чи зменшити сторінки? Додати .pagination-lgабо .pagination-smдля додаткових розмірів.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Пейджер

Швидкі попередні та наступні посилання для простого розбиття на сторінки з легкою розміткою та стилями. Це чудово підходить для простих сайтів, таких як блоги чи журнали.

Приклад за замовчуванням

За замовчуванням пейджер центрує посилання.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Вирівняні посилання

Крім того, ви можете вирівняти кожне посилання по сторонах:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Додатковий вимкнений стан

Посилання на пейджер також використовують загальний .disabledкорисний клас із пагінації.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

приклад

Приклад заголовка Новий

<h3>Example heading <span class="label label-default">New</span></h3>

Доступні варіації

Додайте будь-який із наведених нижче класів модифікаторів, щоб змінити зовнішній вигляд мітки.

Основна інформація про успіх за замовчуванням Попередження Небезпека

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

У вас безліч етикеток?

Проблеми з візуалізацією можуть виникнути, якщо у вас є десятки вбудованих міток у вузькому контейнері, кожна з яких містить свій власний inline-blockелемент (наприклад, значок). Спосіб обійти це налаштування display: inline-block;. Для контексту та прикладу див. #13219 .

Легко виділяйте нові або непрочитані елементи, додаючи <span class="badge">до посилань, навігацій Bootstrap тощо.

Вхідні42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Саморуйнується

Якщо немає нових або непрочитаних елементів, значки просто згорнуться (через :emptyселектор CSS), якщо в них немає вмісту.

Кросбраузерність

Значки не згортаються самостійно в Internet Explorer 8, оскільки він не підтримує :emptyселектор.

Адаптується до активних станів навігації

Вбудовані стилі включені для розміщення значків у активних станах у навігації таблеток.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

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

Привіт Світ!

Це простий герой, простий компонент у стилі jumbotron для привернення додаткової уваги до рекомендованого вмісту чи інформації.

Вивчайте більше

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Щоб зробити jumbotron повної ширини та без заокруглених кутів, розмістіть його за межами всіх .containers і натомість додайте .containerвсередині.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Проста оболонка для h1відповідного розподілу та сегментації розділів вмісту на сторінці. Він може використовувати елемент h1за замовчуванням small, а також більшість інших компонентів (з додатковими стилями).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Розширте систему сіток Bootstrap за допомогою компонента мініатюр, щоб легко відображати сітки зображень, відео, тексту тощо.

Якщо ви шукаєте презентацію мініатюр різної висоти та/або ширини, подібну до Pinterest, вам знадобиться використовувати сторонній плагін, наприклад Masonry , Isotope або Salvattore .

Приклад за замовчуванням

За замовчуванням мініатюри Bootstrap створені для демонстрації пов’язаних зображень із мінімальною необхідною розміткою.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Спеціальний контент

За допомогою додаткової розмітки можна додавати до мініатюр будь-який вміст 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.

Кнопка Кнопка

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Надайте контекстні повідомлення зворотного зв’язку для типових дій користувача за допомогою кількох доступних і гнучких повідомлень попереджень.

Приклади

Перенести будь-який текст і необов’язкову кнопку відхилення в .alertодин із чотирьох контекстних класів (наприклад, .alert-success) для базових повідомлень попередження.

Немає класу за замовчуванням

Сповіщення не мають класів за замовчуванням, лише базові класи та класи-модифікатори. Стандартне сіре сповіщення не має особливого сенсу, тому вам потрібно вказати тип через контекстний клас. Виберіть успіх, інформацію, попередження або небезпеку.

молодець! Ви успішно прочитали це важливе сповіщення.

Голови вгору! Це сповіщення потребує вашої уваги, але воно не надважливе.

УВАГА! Краще перевірте себе, ви виглядаєте не дуже добре.

Ох, чорт! Змініть дещо та спробуйте надіслати ще раз.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Сповіщення, які можна відхилити

Створіть будь-яке сповіщення, додавши необов’язкову .alert-dismissibleкнопку закриття.

Потрібен плагін сповіщень JavaScript

Для повноцінного функціонування сповіщень, які можна відхилити, необхідно використовувати плагін JavaScript для сповіщень .

УВАГА! Краще перевірте себе, ви виглядаєте не дуже добре.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Забезпечте правильну роботу всіх пристроїв

Обов’язково використовуйте <button>елемент з data-dismiss="alert"атрибутом data.

Посилання в сповіщеннях

Використовуйте .alert-linkклас утиліти, щоб швидко надати відповідні кольорові посилання в будь-якому сповіщенні.

молодець! Ви успішно прочитали це важливе сповіщення .

Голови вгору! Це сповіщення потребує вашої уваги , але воно не надважливе.

УВАГА! Краще перевірте себе, ви виглядаєте не дуже добре .

Ох, чорт! Змініть дещо та спробуйте надіслати ще раз.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Надайте актуальний відгук про перебіг робочого процесу або дії за допомогою простих, але гнучких індикаторів виконання.

Кросбраузерність

Індикатори прогресу використовують переходи та анімацію CSS3 для досягнення певних ефектів. Ці функції не підтримуються в Internet Explorer 9 і нижче або старіших версіях Firefox. Opera 12 не підтримує анімацію.

Сумісність із політикою безпеки вмісту (CSP).

Якщо на вашому веб-сайті є політика безпеки вмісту (CSP) , яка не дозволяє style-src 'unsafe-inline', ви не зможете використовувати вбудовані styleатрибути для встановлення ширини панелі виконання, як показано в наших прикладах нижче. Альтернативні методи встановлення ширини, які сумісні зі строгими CSP, включають використання невеликого спеціального JavaScript (який встановлює element.style.width) або використання спеціальних класів CSS.

Базовий приклад

Індикатор прогресу за умовчанням.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

З етикеткою

Щоб відобразити видимий відсоток , видаліть клас <span>із .sr-onlyпанелі прогресу.

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Щоб переконатися, що текст мітки залишається розбірливим навіть при низьких відсотках, подумайте про додавання min-widthдо панелі виконання.

0%

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Контекстні альтернативи

Індикатори виконання використовують деякі з однакових класів кнопок і сповіщень для узгоджених стилів.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Смугастий

Використовує градієнт для створення смугастого ефекту. Недоступно в IE9 і нижче.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Анімований

Додайте .activeдля .progress-bar-stripedанімації смуг справа наліво. Недоступно в IE9 і нижче.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Складені

Помістіть кілька брусків в одне .progressціле, щоб скласти їх.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Стилі абстрактних об’єктів для створення різних типів компонентів (наприклад, коментарів до блогу, твітів тощо), які містять зображення, вирівняне за лівим або правим краєм, поряд з текстовим вмістом.

Носії за замовчуванням

За замовчуванням медіа-об’єкт (зображення, відео, аудіо) відображається ліворуч або праворуч від блоку вмісту.

Заголовок ЗМІ

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in 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, vestibulum in 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, vestibulum in 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, vestibulum in vulputate at, tempus viverra turpis.

Заголовок ЗМІ

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Класи .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, vestibulum in 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, vestibulum in 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, vestibulum in 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.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Список медіа

Додавши трохи додаткової розмітки, ви можете використовувати медіа-внутрішній список (корисно для потоків коментарів або списків статей).

Заголовок ЗМІ

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Вкладений медіа-заголовок
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Вкладений медіа-заголовок
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Вкладений медіа-заголовок
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Групи списків — це гнучкий і потужний компонент для відображення не лише простих списків елементів, а й складних із настроюваним вмістом.

Базовий приклад

Найпростіша група списків — це просто невпорядкований список із елементами списку та відповідними класами. Розвивайте його за допомогою наведених нижче параметрів або власного CSS за потреби.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Вестибулум і ерос

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Значки

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

14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Пов’язані елементи

Пов’яжіть елементи групи списку за допомогою тегів прив’язки замість елементів списку (це також означає батьківський <div>елемент замість <ul>). Немає необхідності в окремих батьках навколо кожного елемента.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Вестибулум і ерос

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Кнопкові предмети

Елементи групи списку можуть бути кнопками замість елементів списку (це також означає батьківський <div>елемент замість <ul>). Немає необхідності в окремих батьках навколо кожного елемента. Не використовуйте тут стандартні .btnкласи.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Вимкнені предмети

Додайте .disabledдо a .list-group-item, щоб зробити його сірим і відображатися вимкненим.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Вестибулум і ерос

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Контекстні заняття

Використовуйте контекстні класи для стилізації елементів списку, типових або пов’язаних. Також включає .activeдерж.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Вестибулум і ерос

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Вестибулум і ерос

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Спеціальний контент

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

Заголовок елемента групи списку

Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

Заголовок елемента групи списку

Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

Заголовок елемента групи списку

Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Хоча це не завжди необхідно, іноді вам потрібно помістити свій DOM у коробку. Для таких ситуацій спробуйте компонент панелі.

Базовий приклад

За замовчуванням все, що потрібно зробити .panel, це застосувати деякі базові рамки та відступи, щоб вміст певного вмісту.

Приклад базової панелі

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Панель із заголовком

Легко додайте контейнер заголовків на свою панель за допомогою .panel-heading. Ви також можете включити будь -який <h1>- <h6>із .panel-titleкласом, щоб додати попередньо стилізований заголовок. Однак розмір шрифту <h1>- <h6>замінюється на .panel-heading.

Для правильного фарбування посилань обов’язково розміщуйте посилання в заголовках у межах .panel-title.

Заголовок панелі без заголовка

Вміст панелі

Назва панелі

Вміст панелі

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Панель з колонтитулом

Перенесення кнопок або другорядного тексту в .panel-footer. Зауважте, що нижні колонтитули панелей не успадковують кольори та межі під час використання контекстних варіантів, оскільки вони не призначені для розміщення на передньому плані.

Вміст панелі

Нижній колонтитул панелі

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Контекстні альтернативи

Як і інші компоненти, можна легко зробити панель більш значущою для певного контексту, додавши будь-який із класів контекстного стану.

Назва панелі

Вміст панелі

Назва панелі

Вміст панелі

Назва панелі

Вміст панелі

Назва панелі

Вміст панелі

Назва панелі

Вміст панелі

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Зі столами

Додайте будь-які рамки .tableвсередині панелі для бездоганного дизайну. Якщо є .panel-body, ми додаємо додаткову рамку у верхній частині таблиці для розділення.

Заголовок панелі

Деякий вміст панелі за замовчуванням тут. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Ім'я	Прізвище	Ім'я користувача
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Ларрі	птах	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Якщо немає тіла панелі, компонент переміщується з заголовка панелі в таблицю без перерви.

Заголовок панелі

#	Ім'я	Прізвище	Ім'я користувача
1	Марк	Отто	@mdo
2	Яків	Торнтон	@жирний
3	Ларрі	птах	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Зі списком груп

Легко включайте групи списків повної ширини в будь-яку панель.

Заголовок панелі

Деякий вміст панелі за замовчуванням тут. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Вестибулум і ерос

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Дозвольте браузерам визначати розміри відео чи слайд-шоу на основі ширини блоку, що містить їх, створивши власне співвідношення, яке правильно масштабуватиметься на будь-якому пристрої.

Правила застосовуються безпосередньо до елементів <iframe>, <embed>, <video>і ; <object>необов’язково використовуйте явний клас-нащадок, .embed-responsive-itemякщо ви хочете відповідати стилю для інших атрибутів.

Професійна порада! Вам не потрібно включати frameborder="0"в <iframe>s, оскільки ми замінюємо це для вас.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

За замовчуванням добре

Використовуйте свердловину як простий ефект на елементі, щоб надати йому ефекту вставки.

Дивіться, я в колодязі!

<div class="well">...</div>

Факультативні заняття

Керуйте відступами та закругленими кутами за допомогою двох додаткових класів модифікаторів.

Подивіться, я у великій криниці!

<div class="well well-lg">...</div>

Подивіться, я в маленькій криниці!

<div class="well well-sm">...</div>

компоненти

Гліфікони

Доступні гліфи

Як використовувати

Не змішувати з іншими компонентами

Тільки для використання на порожніх елементах

Зміна розташування шрифту значка

Доступні значки

Приклади

Випадаючі списки

приклад

Вирівнювання

Може вимагати додаткового позиціонування

Застаріле .pull-rightвирівнювання

Заголовки

Роздільник

Вимкнені пункти меню

Групи кнопок

Спливаючі підказки та спливаючі вікна в групах кнопок потребують спеціального налаштування

Переконайтеся в правильності roleта надайте мітку

Базовий приклад

Панель інструментів кнопки

Розміри

Гніздування

Вертикальна варіація

Вирівняні групи кнопок

Обробка кордонів

IE8 і межі

З <a>елементами

Посилання, що діють як кнопки

З <button>елементами

Випадаючі кнопки

Залежність плагіна

Випадаючі меню з однією кнопкою

Розділені кнопки, що випадають

Розміри

Варіація Dropup

Вхідні групи

<input>Лише текстові

Підказки та спливаючі вікна в групах введення вимагають спеціального налаштування

Не змішувати з іншими компонентами

Завжди додавайте мітки

Базовий приклад

Розміри

Прапорці та радіододатки

Кнопкові аддони

Кнопки з розкривними меню

Сегментовані кнопки

Кілька кнопок

Navs

Щоб використовувати навігацію для панелей вкладок, потрібен плагін вкладок JavaScript

Зробити навігацію доступною для навігації

Вкладки

Таблетки

Виправдано

Safari та адаптивна вирівняна навігація

Відключені посилання

На функціональність посилання не вплинуло

Використання спадних меню

Вкладки з розкривними меню

Таблетки з випадаючими

Навігаційна панель

Панель навігації за замовчуванням

Переповнений вміст

Потрібен плагін JavaScript

Зміна точки зупинки згорнутої мобільної панелі навігації

Зробіть навігаційні панелі доступними

Імідж бренду

Форми

Застереження щодо мобільних пристроїв

Завжди додавайте мітки

кнопки

Контекстне використання

текст

Ненавігаційні посилання

Вирівнювання компонентів

Вирівнювання кількох компонентів праворуч

Фіксується до верху

Необхідна підкладка тіла

Фіксується до дна

Застаріле `.pull-right`вирівнювання

Переконайтеся в правильності `role`та надайте мітку

З `<a>`елементами

З `<button>`елементами

`<input>`Лише текстові