Іконки символів

Доступні іконки

Включено 200 символів у форматі шрифту з набору Glyphicon Halflings. Зазвичай Glyphicons Halflings недоступні безкоштовно, але автор зробив їх безкоштовними спеціально для Bootstrap. В якості подяки, ми б просили вас залишати лінк на Glyphicons, де є така можливість.

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-music
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • 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-picture
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • 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-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • 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-exclamation-sign
  • glyphicon glyphicon-gift
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • 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-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • 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-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-tasks
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-link
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • 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-unchecked
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-saved
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • 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-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tower
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • 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-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-level-up
  • glyphicon glyphicon-copy
  • glyphicon glyphicon-paste
  • glyphicon glyphicon-alert
  • glyphicon glyphicon-equalizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-knight
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-tent
  • glyphicon glyphicon-blackboard
  • glyphicon glyphicon-bed
  • glyphicon glyphicon-apple
  • glyphicon glyphicon-erase
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-lamp
  • glyphicon glyphicon-duplicate
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-scissors
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-scale
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-tasted
  • glyphicon glyphicon-education
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-oil
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-sunglasses
  • 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-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-left
  • glyphicon glyphicon-menu-right
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

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

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

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

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

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

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

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

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

  • Оновіть значення для змінної @icon-font-path та/або @icon-font-name в сирцевих файлах Less.
  • Застосуйте relative URLs option, які надаються компілятором Less.
  • Змініть шляхи url() в компільованих CSS.

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

Accessible icons

Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.

If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.

If you're creating controls with no other text (such as a <button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.

<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>

An icon used in an alert to convey that it's an error message, with additional .sr-only text to convey this hint to users of assistive technologies.

<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;.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Спадний список
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Дія</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Інша дія</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Щось ще тут</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Відокремлений лінк</a></li>
  </ul>
</div>

Початково, спадне меню автоматично позиціоновано 100% у верхній лівий кут батьківського елемента. Щоб вирівняти праворуч спадне меню, додайте .dropdown-menu-right до .dropdown-menu.

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

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

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

Починаючи з v3.1.0, використання .pull-right в спадному меню є застарілим. Для вирівнювання меню праворуч, використовуйте .dropdown-menu-right. Компоненти, вирівняні праворуч у навігаційній панелі, використовують mixin версію класу right-aligned, для автоматичного вирівнювання меню. Для перевизначення їх, використовуйте .dropdown-menu-left.

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

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

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  ...
  <li role="presentation" class="dropdown-header">Заголовок спадного меню</li>
  ...
</ul>

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

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

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

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Звичайний лінк</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Заблокований лінк</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Інший лінк</a></li>
</ul>

Групи кнопок

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

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

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

Ensure correct role and provide a label

In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate role attribute needs to be provided. For button groups, this would be role="group", while toolbars should have a role="toolbar".

One exception are groups which only contain a single control (for instance the justified button groups with <button> elements) or a dropdown.

In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use aria-label, but alternatives such as aria-labelledby can also be used.

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

Обгорніть серію кнопок з .btn в .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Ліва</button>
  <button type="button" class="btn btn-default">Середня</button>
  <button type="button" class="btn btn-default">Права</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-expanded="false">
      Спадне меню
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Лінк в спадному меню</a></li>
      <li><a href="#">Лінк в спадному меню</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>

Просто обгорніть серію .btn в .btn-group.btn-group-justified.

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

Links acting as buttons

If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate 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">Ліва</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Середня</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Права</button>
  </div>
</div>

Кнопка спадного меню

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

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

Кнопка спадного меню потребує включення у вашу версію Bootstrap плагіну для спадного меню.

Одинична кнопка спадного меню

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

<!-- Одинична кнопка -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Дія</a></li>
    <li><a href="#">Інша дія</a></li>
    <li><a href="#">Тут щось ще</a></li>
    <li class="divider"></li>
    <li><a href="#">Відокремлений лінк</a></li>
  </ul>
</div>

Розщеплена кнопка спадного меню

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

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Дія</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Дія</a></li>
    <li><a href="#">Інша дія</a></li>
    <li><a href="#">Тут щось ще</a></li>
    <li class="divider"></li>
    <li><a href="#">Відокремлений лінк</a></li>
  </ul>
</div>

Калібрування

Кнопки спадного меню можуть мати будь-який розмір.

<!-- Велика кнопка group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Велика кнопка <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

<!-- Мала кнопка group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Мала кнопка <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

<!-- Дуже мала кнопка group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Дуже мала кнопка <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

Піднімаюче меню

Створіть меню, пункти якого піднімаються вгору, додавши .dropup до батьківського елемента.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Піднімаюче меню</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Групи input

Розширте елементи управління форми додавши текст або кнопки до, після, чи з обох сторін будь-якого текстового <input>. Застосовуйте .input-group з .input-group-addon для приставки елементів спереду чи позаду .form-control.

Тільки текстові <input>

Уникайте використання елементів <select> в цьому випадку, оскільки вони не в повній мірі стилізовані в браузерах WebKit.

Уникайте використання елементів <textarea> в цьому випадку, оскільки їхні атрибути rows інколи не будуть братись до уваги.

Підказки та інформери в <input> потребують спеціальних налаштувань

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

Не поєднуйте з іншими елементами

Не поєднуйте групи форм чи класи колонок сітки безпосередньо з .input-group. Замість цього, вкладіть .input-group в середину груп форми чи колонки сітки.

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

Розмістіть одне доповнення або одну кнопку з будь-якої сторони від форми введення. Ви також можете розмістити їх по обидві сторони від форми введення.

Ми не підтримуємо множинні доповнення з однієї сторони.

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

@

.00

$ .00
<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Ім'я користувача">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

Калібрування

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

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Ім'я користувача">
</div>

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Ім'я користувача">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Ім'я користувача">
</div>

Доповнення для прапорців та перемикачів

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

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

Доповнення для кнопок

Кнопки в класах "input-group" трохи відрізняються та потребують одного додаткового рівня вкладеності. Замість .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">Гайда!</button>
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Гайда!</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-expanded="false">Дія <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Дія</a></li>
          <li><a href="#">Інша дія</a></li>
          <li><a href="#">Тут щось ще</a></li>
          <li class="divider"></li>
          <li><a href="#">Відокремлений лінк</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Дія <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <li><a href="#">Дія</a></li>
          <li><a href="#">Інша дія</a></li>
          <li><a href="#">Тут щось ще</a></li>
          <li class="divider"></li>
          <li><a href="#">Відокремлений лінк</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div class="input-group">
  <div class="input-group-btn">
    <!-- Кнопка та спадне меню -->
  </div>
  <input type="text" class="form-control">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <!-- Кнопка та спадне меню -->
  </div>
</div>

Навігаційні елементи

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

Using navs for tab panels requires JavaScript tabs plugin

For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.

Make navs used as navigation accessible

If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.

Зауважте, що клас .nav-tabs потребує базового класу .nav.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Стартова</a></li>
  <li role="presentation"><a href="#">Профіль</a></li>
  <li role="presentation"><a href="#">Повідомлення</a></li>
</ul>

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

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Стартова</a></li>
  <li role="presentation"><a href="#">Профіль</a></li>
  <li role="presentation"><a href="#">Повідомлення</a></li>
</ul>

Навігаційні кнопки також доступні у вертикальній збірці. Просто додайте .nav-stacked.

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

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

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

Safari та чутливі навігаційні елементи, вирівняні по-ширині

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

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

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

Функціональності лінка не змінено

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

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Заблокований лінк</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-expanded="false">
      Спадне меню <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="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-expanded="false">
      Спадне меню <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>

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

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

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

Переповнення контентом

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

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

Необхідність в плагіні JavaScript

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

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

Зміна контрольних точок в мобільній навпанелі

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

Make navbars accessible

Be sure to add a role="navigation" to every navbar to help with accessibility.

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Бренд та перемикач згруповані для кращого відображення на мобільних пристроях -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="#">Бренд</a>
    </div>

    <!-- Зібрано навігаційні лінки, форми, та інший вміст для переключення -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Лінк <span class="sr-only">(поточний)</span></a></li>
        <li><a href="#">Лінк</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Спадне меню <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Дія</a></li>
            <li><a href="#">Інша дія</a></li>
            <li><a href="#">Тут ще щось</a></li>
            <li class="divider"></li>
            <li><a href="#">Відокремлений лінк</a></li>
            <li class="divider"></li>
            <li><a href="#">Ще один відокремлений лінк</a></li>
          </ul>
        </li>
      </ul>
      <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">Відправити</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Лінк</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Спадне меню <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Дія</a></li>
            <li><a href="#">Інша дія</a></li>
            <li><a href="#">Тут ще щось</a></li>
            <li class="divider"></li>
            <li><a href="#">Відокремлений лінк</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

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

<nav class="navbar navbar-default" role="navigation">
  <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. Деякі елементи управління форми, такі як групи input, можуть потребувати фіксованої ширини щоб правильно відображатись в межах навігаційної панелі.

<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">Відправити</button>
</form>

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

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

Завжди додавайте ярлики (label)

Програми читання екранів (screen readers) будуть мати проблеми з вашою формою, якщо ви не будете додавати ярлики (label) до кожного елемента input. Для даних вбудованих форм навігаційних панелей, ви можете приховати ярлики використовуючи клас .sr-only.

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

<button type="button" class="btn btn-default navbar-btn">Увійти</button>

Специфіка використання в певному контексті

Як і стандартні класи кнопок, .navbar-btn може використовуватись в елементах <a> та <input>. Тим не менше, але жоден .navbar-btn або ж стандартні класи кнопки не повинні використовуватись в елементах <a> в межах .navbar-nav.

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

<p class="navbar-text">Ви увійшли як Mark Otto</p>

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

<p class="navbar-text navbar-right">Ви увійшли як <a href="#" class="navbar-link">Mark Otto</a></p>

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

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

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

Навігаційна панель, на даний момент, має обмеження для стосовно використання зразу кількох компонентів з класом .navbar-right. Щоб правильно вмістити контент, ми використовуємо від'ємний відступ (margin) для останнього елемента .navbar-right. При використанні декількох елементів з даним класом, ці відступи не працюють так як задумано.

Ми будемо змінювати цю особливість у Bootstrap v4.

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

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

Необхідність встановлення padding для body

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

body { padding-top: 70px; }

Переконайтесь, що це включено після основного коду Bootstrap CSS.

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

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

Необхідність встановлення padding для body

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

body { padding-bottom: 70px; }

Переконайтесь, що це включено після основного коду Bootstrap CSS.

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

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

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

Модифікуйте вигляд навігаційної панелі додавши .navbar-inverse.

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

Навігаційний маршрут

Позначте поточну сторінку розташування в межах навігаційної ієрархії.

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

<ol class="breadcrumb">
  <li><a href="#">Стартова</a></li>
  <li><a href="#">Бібліотека</a></li>
  <li class="active">Дані</li>
</ol>

Посторінкова навігація

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

Початковий посторінковий поділ

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

<nav>
  <ul class="pagination">
    <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Попередня</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="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Наступна</span></a></li>
  </ul>
</nav>

Заблоковані та активні стани

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

<nav>
  <ul class="pagination">
    <li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Попередня</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(поточна)</span></a></li>
    ...
  </ul>
</nav>

Додатково ви можете змінювати активні або заблоковані anchors для <span>, або ж опустити anchor у випадку коли є стрілка попередня/наступна, видаливши можливість натискання, при збереженні цільових стилів.

<nav>
  <ul class="pagination">
    <li class="disabled"><span aria-hidden="true">&laquo;</span><span class="sr-only">Попередня</span></li>
    <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
    ...
  </ul>
</nav>

Калібрування

Є потреба збільшити чи зменшити блок посторінкового виводу? Додайте .pagination-lg або .pagination-sm для зміни розмірів.

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

Пролистувач

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

Основний приклад

Початково, пролистувач має лінки, вирівняні по-центру.

<nav>
  <ul class="pager">
    <li><a href="#">Попередня</a></li>
    <li><a href="#">Наступна</a></li>
  </ul>
</nav>

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

В якості альтернативи, ви можете вирівнювати кожен лінк:

<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Попередні</a></li>
    <li class="next"><a href="#">Наступні <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Заблокований стан

Пролистувач лінків також використовує базовий допоміжний клас .disabled.

<nav>
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Попередні</a></li>
    <li class="next"><a href="#">Наступні <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Мітки

Приклад

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

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

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

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

Приклад заголовка Нове
Приклад заголовка Нове
<h3>Приклад заголовка <span class="label label-default">Нове</span></h3>

Доступні варіанти

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

Підготовлена Основна Успішна Інформаційна Попереджувальна Небезпечна
<span class="label label-default">Підготовлена</span>
<span class="label label-primary">Основна</span>
<span class="label label-success">Успішна</span>
<span class="label label-info">Інформаційна</span>
<span class="label label-warning">Попереджувальна</span>
<span class="label label-danger">Небезпечна</span>

Маєте тони ярликів?

Можуть виникнути проблеми відображення, коли ви маєте багато вбудованих (inline) labels в межах вузького контейнера, кожен з яких знаходиться у свому власному елементі inline-block (напр. іконки). Це можна обійти встановивши display: inline-block;. Контекст проблеми а також приклад можна проглянути на #13219.

Значки

Легко підсвітити нові чи непрочитані записи додавши до лінків <span class="badge">, Bootstrap навігацію, та інше.

Вхідні 42

<a href="#">Вхідні <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Повідомлень <span class="badge">4</span>
</button>

Самозгортання

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

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

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

Адаптація під активні стани

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

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Стартова <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Профіль</a></li>
  <li role="presentation"><a href="#">Повідомлень <span class="badge">3</span></a></li>
</ul>

Великий екран (Jumbotron)

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

Привіт, світ!

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

Дізнатись більше

<div class="jumbotron">
  <h1>Привіт, світ!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Дізнатись більше</a></p>
</div>

Створіть великий екран на всю ширину, без закруглених кутів, котрий розміщений за межами .container, але, замість цього, котрий вміщує .container.

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

Заголовок сторінки

Представляємо вам просту оболонку для h1, яка встановлює відповідний відступ та сегментує вміст сторінки. У ній можна використовувати початковий елемент small для h1, а також багато інших компонентів (з додатковими стилями).

<div class="page-header">
  <h1>Приклад заголовку сторінки <small>Додатковий текст</small></h1>
</div>

Ескізи

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

Початково

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180" alt="...">
    </a>
  </div>
  ...
</div>

Підібраний вміст

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

Generic placeholder thumbnail

Ярлик ескізу

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.

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

Generic placeholder thumbnail

Ярлик ескізу

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.

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

Generic placeholder thumbnail

Ярлик ескізу

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 data-src="holder.js/300x300" alt="...">
      <div class="caption">
        <h3>Ярлик ескізу</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Кнопка</a> <a href="#" class="btn btn-default" role="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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <strong>Попередження!</strong> Краще перевірте себе, щось є не дуже вдалим.
</div>

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

Переконайтесь, що використовуєте елемент <button> з атрибутом data-dismiss="alert".

Використовуйте допоміжний клас .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 не підтримує анімації.

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

Основна шкала прогресу.

60% Завершено
<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% Завершено</span>
  </div>
</div>

З підписом

Видаліть клас .sr-only із середини шкали прогресу щоб відсоткове завершення було видимим. При низьких відсотках, додавайте min-width щоб бути впевненим, що текст з написом відсотків повністю видимий.

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>

Низькі проценти

Шкала прогресу, що показує низький відсоток однією цифрою, наприклад 0%, має властивість min-width: 20px; для розбірливості тексту.

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

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

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

40% Завершено (success)
20% Завершено
60% Завершено (warning)
80% Завершено (danger)
<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% Завершено (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% Завершено</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% Завершено (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% Завершено (danger)</span>
  </div>
</div>

Смугаста шкала

Використовуйте градієнт для створення смугастого ефекту. Такий ефект недоступний в IE8.

40% Завершено (success)
20% Завершено
60% Завершено (warning)
80% Завершено (danger)
<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% Завершено (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% Завершено</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% Завершено (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% Завершено (danger)</span>
  </div>
</div>

Анімована шкала

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

45% Завершено
<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% Завершено</span>
  </div>
</div>

Зведена шкала

Розташуйте кілька екземплярів шкали в одній черзі з класом .progress.

35% Завершено (успішно)
20% Завершено (попередження)
10% Завершено (небезпечно)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Завершено (успішно)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Завершено (попередження)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Завершено (небезпечно)</span>
  </div>
</div>

Медіа об'єкт

Стилізація абстрактного об'єкту, для створення різних типів компонентів (таких як коментарі для блогу, для твіттера, і т.д.), котрі зі своїм зображенням вирівняні по-лівому чи по-правому краю поруч з текстовим вмістом.

Початково

Початково, медіа-об'єкти (зображення, відео, аудіо) можна вирівнювати по лівому чи по-правому краю блоку контента.

Generic placeholder image

Заголовок медіа

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.
Generic placeholder image

Заголовок медіа

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.
Generic placeholder image

Вкладений заголовок медіа

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.
Generic placeholder image
Generic placeholder image

Заголовок медіа

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.
Generic placeholder image
<div class="media">
  <a class="media-left" href="#">
    <img src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Заголовок медіа</h4>
    ...
  </div>
</div>

Класи .pull-left та .pull-right також існують та використовувались раніше як частина компоненту медіа, але вони вже стали застарілими для такого використання з версії 3.3.0. Ці класи приблизно еквівалентні до .media-left та .media-right, за виключенням того, що .media-right потрібно розміщувати після .media-body в html.

Вірівнювання медіа

Зображення чи інші медіа можуть вирівнюватись вгорі, по-центру, чи внизу. Початково вони вирівнюються вгорі.

Generic placeholder image

Медіа, яке вирівняно догори

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.

Generic placeholder image

Медіа, яке вирівняно по-центру

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.

Generic placeholder image

Медіа, яке вирівняно донизу

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">
  <a class="media-left media-middle" href="#">
    <img data-src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Медіа, яке вирівняно по-центру</h4>
    ...
  </div>
</div>

Список медіа

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

  • Generic placeholder image

    Заголовок медіа

    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.

    Generic placeholder image

    Nested media heading

    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.
    Generic placeholder image

    Nested media heading

    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.
    Generic placeholder image

    Nested media heading

    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">
    <a class="media-left" href="#">
      <img src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Заголовок медіа</h4>
      ...
    </div>
  </li>
</ul>

Список груп

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

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

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<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>

Значки

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

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Лінковані пункти

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

<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>

Заблоковані пункти

Додайте .disabled до .list-group-item щоб зробити їх сірими сігналізуючи, що вони заблоковані.

<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
  • Vestibulum at eros
<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 код всередину, навіть лінкований список груп, як це показано нижче.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">Заголовок пунктів списку груп</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Панелі

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

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

Початково, всі .panel застосовують деяку базову рамку (border) та відступи (padding), щоб вміщувати певний вміст.

Приклад базової панелі
<div class="panel panel-default">
  <div class="panel-body">
    Приклад базової панелі
  </div>
</div>

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

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

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

Заголовок панелі без назви
Вміст панелі

Назва панелі

Вміст панелі
<div class="panel panel-default">
  <div class="panel-heading">Заголовок панелі без назви</div>
  <div class="panel-body">
    Вміст панелі
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Назва панелі</h3>
  </div>
  <div class="panel-body">
    Вміст панелі
  </div>
</div>

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

Вміст панелі
<div class="panel panel-default">
  <div class="panel-body">
    Вміст панелі
  </div>
  <div class="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 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Заголовок панелі</div>
  <div class="panel-body">
    <p>...</p>
  </div>

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

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

Заголовок панелі
# Ім'я Прізвище Нік
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="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
  • Vestibulum at eros
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="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>, оскільки ми вже перевизначили це для вас.

<!-- пропорція 16:9 -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- пропорція 4:3 -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Wells

Основний well

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

Look, I'm in a well!
<div class="well">...</div>

Необов'язкові класи

Щоб контролювати відступи (padding) та закруглення кутів, використовуйте два додаткових модифікатори класів.

Look, I'm in a large well!
<div class="well well-lg">...</div>
Look, I'm in a small well!
<div class="well well-sm">...</div>