Глификоны

Доступные глифы

Включает более 250 глифов в формате шрифта из набора 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-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-rub
  • 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> и примените классы иконок к <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> Звезда
</button>

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

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Ошибка:</span>
  Введите корректный электронный адрес
</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">
    Выпадающий список
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Что-то еще здесь</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Отдельная ссылка</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">
    Выпадающий список вверх
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Что-то еще здесь</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Отдельная ссылка</a></li>
  </ul>
</div>

По умолчанию раскрывающееся меню автоматически располагается на 100% сверху и слева от своего родителя. Добавьте .dropdown-menu-right в .dropdown-menu, чтобы выровнять раскрывающееся меню по правому краю.

Может потребоваться дополнительное позиционирование

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

Устаревшее выравнивание .pull-right

Начиная с версии 3.1.0, мы устарели .pull-right в раскрывающихся меню. Чтобы выровнять меню по правому краю, используйте .dropdown-menu-right. Компоненты навигации с выравниванием по правому краю на панели навигации используют версию этого класса для автоматического выравнивания меню. Чтобы переопределить его, используйте .dropdown-menu-left.

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

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="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="#">Обычная ссылка</a></li>
  <li class="disabled"><a href="#">Отключенная ссылка</a></li>
  <li><a href="#">Другая ссылка</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">Левый</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-haspopup="true" aria-expanded="false">
      Раскрывающийся список
      <span class="caret"></span>
    </button>
    <ul class="dropdown-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>

Ссылки действуют как кнопки

Если элементы <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">Левый</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 был включен раскрывающийся список.

Выпадающие списки с одной кнопкой

Превратите кнопку в раскрывающийся список с некоторыми базовыми изменениями разметки.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Действие <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Что-то еще здесь</a></li>
    <li role="separator" 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-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Переключить раскрывающийся список</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Что-то еще здесь</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Отдельная ссылка</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">
    Большая кнопка <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">
    Маленькая кнопка <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">
    Очень маленькая кнопка <span class="caret"></span>
  </button>
  <ul class="dropdown-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-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Переключить раскрывающийся список</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) на одной стороне.

Мы не поддерживаем несколько элементов управления формой в одной группе ввода.

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Имя пользователя" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Имя пользователя получателя" 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="Сумма (с точностью до доллара)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Ваш виртуальный 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">Вперед!</button>
      </span>
      <input type="text" class="form-control" placeholder="Поиск для...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Поиск для...">
      <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-haspopup="true" aria-expanded="false">Действие <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Действие</a></li>
          <li><a href="#">Другое действие</a></li>
          <li><a href="#">Что-то еще здесь</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Отдельная ссылка</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">Действие <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Действие</a></li>
          <li><a href="#">Другое действие</a></li>
          <li><a href="#">Что-то еще здесь</a></li>
          <li role="separator" 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">
    <!-- 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>

Навигация

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

Для использования навигации для панелей вкладок требуется плагин JavaScript для вкладок

Для вкладок с областями, допускающими вкладки, необходимо использовать подключаемый модуль JavaScript для вкладок. Для разметки также потребуются дополнительные атрибуты role и ARIA - подробнее смотрите пример разметки.

Сделайте навигацию доступной для навигации

Если вы используете навигацию для предоставления панели навигации, обязательно добавьте role="navigation" в наиболее логичный родительский контейнер <ul>, или оберните элемент <nav> по всей навигации. Не добавляйте роль к самому <ul>, так как это помешает ассистивным технологиям объявить ее как фактический список.

Обратите внимание, что для класса .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:

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

С легкостью делайте вкладки или таблетки равной ширине их родительской на экранах шире 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="#">Отключенная ссылка</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">
      Раскрывающийся список <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Pills with dropdowns

<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">
      Раскрывающийся список <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Панель навигации

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

Обоснованные навигационные ссылки на панели навигации в настоящее время не поддерживаются.

Переполнение контента

Поскольку Bootstrap не знает, сколько места требуется содержимому на панели навигации, вы можете столкнуться с проблемами, связанными с переносом содержимого во вторую строку. Чтобы решить эту проблему, вы можете:

  1. Уменьшите количество или ширину элементов навигационной панели.
  2. Скрывайте определенные элементы навигационной панели при определенных размерах экрана с помощью отзывчивых служебных классов.
  3. Измените точку, в которой ваша навигационная панель переключается между свернутым и горизонтальным режимами. Настройте переменную @grid-float-breakpoint или добавьте свой собственный медиа-запрос.

Требуется плагин JavaScript

Если JavaScript отключен и область просмотра достаточно узкая, чтобы панель навигации сворачивалась, будет невозможно развернуть панель навигации и просмотреть содержимое внутри .navbar-collapse.

Для адаптивной навигационной панели требуется, чтобы в вашу версию Bootstrap был включен плагин сворачивания.

Изменение свернутой точки останова на мобильной панели навигации

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

Сделайте навигационные панели доступными

Обязательно используйте элемент <nav> или, при использовании более общего элемента, такого как <div>, добавьте role="navigation" на каждую панель навигации, чтобы явно указать на нее как на знаковый регион для пользователей вспомогательных технологий.

<nav class="navbar navbar-default">
  <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" aria-expanded="false">
        <span class="sr-only">Переключить навигацию</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-haspopup="true" aria-expanded="false">Выпадающий список <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li><a href="#">Что-то еще здесь</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Отдельная ссылка</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Еще одна отдельная ссылка</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Поиск">
        </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-haspopup="true" aria-expanded="false">Выпадающий список <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li><a href="#">Что-то еще здесь</a></li>
            <li role="separator" 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">
  <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 через миксин. Некоторые элементы управления формы, например группы ввода, могут требовать фиксированной ширины для правильного отображения на панели навигации.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Поиск">
  </div>
  <button type="submit" class="btn btn-default">Отправить</button>
</form>

Предупреждения о мобильных устройствах

Есть некоторые предостережения относительно использования элементов управления формы в фиксированных элементах на мобильных устройствах. Дополнительные сведения смотрите в документации по поддержке браузера.

Всегда добавляйте метки

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

Добавьте класс .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">Вы вошли как Марк Отто</p>

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

<p class="navbar-text navbar-right">Вы вошли как <a href="#" class="navbar-link">Марк Отто</a></p>

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

Эти классы представляют собой смешанные версии .pull-left и .pull-right, но они привязаны к медиа-запросам для упрощения обработки компонентов панели навигации по размеры устройства.

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

В настоящее время панели навигации имеют ограничение с использованием нескольких классов .navbar-right. Чтобы правильно разместить контент, мы используем отрицательное поле на последнем элементе .navbar-right. Когда этот класс используется несколькими элементами, эти поля не работают должным образом.

Мы вернемся к этому, когда сможем переписать этот компонент в версии 4.

Добавьте .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; }

Обязательно добавьте этот после основного Bootstrap CSS.

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

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

Обязательные поля для body

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

body { padding-bottom: 70px; }

Не забудьте включить этот после основного Bootstrap CSS.

Создайте полноразмерную навигационную панель, которая прокручивается вместе со страницей, добавив .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="#">Главная</a></li>
  <li><a href="#">Библиотека</a></li>
  <li class="active">Данные</li>
</ol>

Пагинация

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

Пагинация по умолчанию

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

<nav aria-label="Навигация по страницам">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Предыдущая">
        <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="Следующая">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Маркировка компонента разбивки на страницы

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

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

Ссылки настраиваются для разных обстоятельств. Используйте .disabled для не кликабельных ссылок и .active для обозначения текущей страницы.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Предыдущая"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(текущая)</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">(текущая)</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="#">Предыдущая</a></li>
    <li><a href="#">Следующая</a></li>
  </ul>
</nav>

Выравненные ссылки

Как вариант, вы можете выровнять каждую ссылку по сторонам:

<nav aria-label="...">
  <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 aria-label="...">
  <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-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>

Чтобы сделать jumbotron полной ширины и без закругленных углов, поместите его за пределами всех .container и вместо этого добавьте внутри .container.

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

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

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

<div class="page-header">
  <h1>Пример заголовка страницы <small>Подтекст для заголовка</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>Метка эскиза</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" aria-label="Закрыть"><span aria-hidden="true">&times;</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 не поддерживает анимацию.

Совместимость с политикой безопасности контента (CSP)

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

Базовый пример

Индикатор выполнения по умолчанию.

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>

С меткой

Удалите <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>

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

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

40% Выполнено (успешно)
20% Выполнено
60% Выполнено (внимание)
80% Выполнено (опасность)
<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% Выполнено (успешно)</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% Выполнено (внимание)</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% Выполнено (опасность)</span>
  </div>
</div>

Striped

Использует градиент для создания эффекта полос. Недоступно в IE9 и ниже.

40% Выполнено (успешно)
20% Выполнено
60% Выполнено (внимание)
80% Выполнено (опасность)
<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% Выполнено (успешно)</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% Выполнено (внимание)</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% Выполнено (опасность)</span>
  </div>
</div>

Animated

Добавьте .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>

Медиа объект

Стили абстрактных объектов для создания различных типов компонентов (например, комментариев в блогах, твитов и т. д.), Которые содержат изображение с выравниванием по левому или правому краю рядом с текстовым контентом.

Медиа по умолчанию

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

Медиа заголовок

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">Медиа заголовок</h4>
    ...
  </div>
</div>

Классы .pull-left и .pull-right также существуют и ранее использовались как часть медиа-компонента, но не рекомендуются для этого использования с версии v3.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">Медиа выравненный по середине</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">Медиа заголовок</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>

Связанные элементы

Связывайте элементы группы списков с помощью тегов привязки вместо элементов списка (что также означает родительский <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>

Элементы кнопок

Элементы группы списка могут быть кнопками, а не элементами списка (это также означает родительский <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 в .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, - это применяет некоторую базовую границу и отступы, чтобы содержать некоторый контент.

Пример базовой панели
<div class="panel panel-default">
  <div class="panel-body">
    Пример базовой панели
  </div>
</div>

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

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

Для правильной раскраски ссылок обязательно размещайте ссылки в заголовках внутри .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. Обратите внимание, что нижние колонтитулы панели не наследуют цвета и границы при использовании контекстных вариаций, так как они не должны находиться на переднем плане.

Контент панели
<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 Марк Отто @mdo
2 Джейкоб Торнтон @fat
3 Ларри Птица @twitter
<div class="panel panel-default">
  <!-- Содержимое панели по умолчанию -->
  <div class="panel-heading">Заголовок панели</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Таблица -->
  <table class="table">
    ...
  </table>
</div>

Если тело панели отсутствует, компонент перемещается из заголовка панели в таблицу без прерывания.

Заголовок панели
# Имя Фамилия Имя пользователя
1 Марк Отто @mdo
2 Джейкоб Торнтон @fat
3 Ларри Птица @twitter
<div class="panel panel-default">
  <!-- Содержимое панели по умолчанию -->
  <div class="panel-heading">Заголовок панели</div>

  <!-- Таблица -->
  <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">
  <!-- Содержимое панели по умолчанию -->
  <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 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>