Глификоны

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

Включает более 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="Выровнять по левому краю"
  >
    <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>

Группы кнопок

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

Подсказки и всплывающие окна в группах кнопок требуют специальной настройки

При использовании подсказок или всплывающих окон на элементах внутри .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.

Одиночные выпадающие кнопки

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

  <!-- Одиночная кнопка -->
  <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>

Разделенные выпадающие кнопки

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

  <!-- Разделенная кнопка -->
  <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>

Размеры

Выпадающие кнопки работают с кнопками всех размеров.

  <!-- Большая группа кнопок -->
  <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>

  <!-- Маленькая группа кнопок -->
  <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>

  <!-- Очень маленькая группа кнопок -->
  <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">
      <!-- Ссылки выпадающего меню -->
    </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) на одной стороне.

Мы не поддерживаем множественные form-controls в одной группе полей ввода.

@

@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="Имя пользователя"
      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="Имя пользователя"
      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="Имя пользователя"
      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">
      <!-- Кнопка и выпадающее меню -->
    </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">
      <!-- Кнопка и выпадающее меню -->
    </div>
  </div>

Множественные кнопки

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

  <div class="input-group">
    <div class="input-group-btn">
      <!-- Кнопки -->
    </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">
      <!-- Кнопки -->
    </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>

Легко сделайте вкладки или пилюли равной ширины их родителя на экранах шире 768px с помощью .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>

Пилюли с выпадающими меню

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

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

Правое выравнивание множественных компонентов

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

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

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

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

Требуется отступ тела

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

 body { padding-top: 70px; }

Убедитесь, что вы включили это после основного CSS Bootstrap.

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

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

Требуется отступ тела

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

 body { padding-bottom: 70px; }

Убедитесь, что вы включили это после основного CSS Bootstrap.

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

В отличие от классов .navbar-fixed-*, вам не нужно изменять никакие отступы на body. 

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

Измените внешний вид панели навигации, добавив .navbar-inverse. 

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

Хлебные крошки

Указывают текущее местоположение страницы в иерархии навигации.

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

  1. Главная
  1. Главная
  2. Библиотека
  1. Главная
  2. Библиотека
  3. Данные
  <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>

Джамботрон

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

Привет, мир!

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

Узнать больше 

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

Если вы ищете презентацию в стиле 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 содержимого, такого как заголовки, абзацы или кнопки в миниатюры.

Общая миниатюра-заполнитель

Метка миниатюры

Просто краш одо, дапибус ак фацилисис ин, эгестас эгет квам. Донец ид элит нон ми порта гравида ат эгет метус. Нуллам ид долор ид нибх ультрициес вехикула ут ид элит.

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

Общая миниатюра-заполнитель

Метка миниатюры

Просто краш одо, дапибус ак фацилисис ин, эгестас эгет квам. Донец ид элит нон ми порта гравида ат эгет метус. Нуллам ид долор ид нибх ультрициес вехикула ут ид элит.

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

Общая миниатюра-заполнитель

Метка миниатюры

Просто краш одо, дапибус ак фацилисис ин, эгестас эгет квам. Донец ид элит нон ми порта гравида ат эгет метус. Нуллам ид долор ид нибх ультрициес вехикула ут ид элит.

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

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

Полосатые

Использует градиент для создания полосатого эффекта. Недоступно в 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>

Анимированные

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

Медиа объект

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

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

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

Общее изображение-заполнитель

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

Крас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискве анте соллицитудин коммодо. Крас пурус одо, вестибулум ин вульпутате ат, темпус вивера турпис. Фусце кондиментум нунк ак ниси вульпутате фрингилла. Донец лациния конгуе фелис ин фауцибус.
Общее изображение-заполнитель

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

Крас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискве анте соллицитудин коммодо. Крас пурус одо, вестибулум ин вульпутате ат, темпус вивера турпис. Фусце кондиментум нунк ак ниси вульпутате фрингилла. Донец лациния конгуе фелис ин фауцибус.
Общее изображение-заполнитель

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

Крас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискве анте соллицитудин коммодо. Крас пурус одо, вестибулум ин вульпутате ат, темпус вивера турпис. Фусце кондиментум нунк ак ниси вульпутате фрингилла. Донец лациния конгуе фелис ин фауцибус.

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

Крас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискве анте соллицитудин коммодо. Крас пурус одо, вестибулум ин вульпутате ат, темпус вивера турпис.
Общее изображение-заполнитель
Общее изображение-заполнитель

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

Крас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискве анте соллицитудин коммодо. Крас пурус одо, вестибулум ин вульпутате ат, темпус вивера турпис.
Общее изображение-заполнитель 
  <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 также существуют и ранее использовались как часть медиа компонента, но устарели для этого использования начиная с версии 3.3.0. Они примерно эквивалентны .media-left и .media-right, за исключением того, что .media-right должен быть размещен после .media-body в HTML.

Выравнивание медиа

Изображения или другие медиа могут быть выровнены по верху, середине или низу. По умолчанию выравнивание по верху.

Общее изображение-заполнитель

Медиа, выровненное по верху

Крас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискве анте соллицитудин коммодо. Крас пурус одо, вестибулум ин вульпутате ат, темпус вивера турпис. Фусце кондиментум нунк ак ниси вульпутате фрингилла. Донец лациния конгуе фелис ин фауцибус.

Донец сед одо дуи. Нуллам куис рисус эгет урна моллис орнаре вел эу лео. Кум социис натокве пенатибус эт магнис дис партуриент монтес, насцетур ридикулус мус.

Общее изображение-заполнитель

Медиа, выровненное по середине

Крас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискве анте соллицитудин коммодо. Крас пурус одо, вестибулум ин вульпутате ат, темпус вивера турпис. Фусце кондиментум нунк ак ниси вульпутате фрингилла. Донец лациния конгуе фелис ин фауцибус.

Донец сед одо дуи. Нуллам куис рисус эгет урна моллис орнаре вел эу лео. Кум социис натокве пенатибус эт магнис дис партуриент монтес, насцетур ридикулус мус.

Общее изображение-заполнитель

Медиа, выровненное по низу

Крас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискве анте соллицитудин коммодо. Крас пурус одо, вестибулум ин вульпутате ат, темпус вивера турпис. Фусце кондиментум нунк ак ниси вульпутате фрингилла. Донец лациния конгуе фелис ин фауцибус.

Донец сед одо дуи. Нуллам куис рисус эгет урна моллис орнаре вел эу лео. Кум социис натокве пенатибус эт магнис дис партуриент монтес, насцетур ридикулус мус. 

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

Список медиа

С небольшим дополнительным разметкой вы можете использовать медиа внутри списка (полезно для потоков комментариев или списков статей).

  • Общее изображение-заполнитель

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

    Крас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискве анте соллицитудин коммодо. Крас пурус одо, вестибулум ин вульпутате ат, темпус вивера турпис.

    Общее изображение-заполнитель

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

    Крас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискве анте соллицитудин коммодо. Крас пурус одо, вестибулум ин вульпутате ат, темпус вивера турпис.
    Общее изображение-заполнитель

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

    Крас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискве анте соллицитудин коммодо. Крас пурус одо, вестибулум ин вульпутате ат, темпус вивера турпис.
    Общее изображение-заполнитель

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

    Крас сит амет нибх либеро, ин гравида нулла. Нулла вел метус сцелерискве анте соллицитудин коммодо. Крас пурус одо, вестибулум ин вульпутате ат, темпус вивера турпис. 
  <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 по мере необходимости.

  • Просто краш одо
  • Дапибус ак фацилисис ин
  • Морби лео рисус
  • Порта ак консектетур ак
  • Вестибулум ат эрос
  <ul class="list-group">
    <li class="list-group-item">Просто краш одо</li>
    <li class="list-group-item">Дапибус ак фацилисис ин</li>
    <li class="list-group-item">Морби лео рисус</li>
    <li class="list-group-item">Порта ак консектетур ак</li>
    <li class="list-group-item">Вестибулум ат эрос</li>
  </ul>

Значки

Добавьте компонент значков к любому элементу группы списков, и он автоматически будет расположен справа.

  • 14 Просто краш одо
  • 2 Дапибус ак фацилисис ин
  • 1 Морби лео рисус 
  <ul class="list-group">
    <li class="list-group-item">
      <span class="badge">14</span>
      Просто краш одо
    </li>
  </ul>

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

Сделайте элементы группы списков ссылками, используя теги якорей вместо элементов списка (это также означает родительский <div> вместо <ul>). Нет необходимости в отдельных родителях вокруг каждого элемента.

Просто краш одо Дапибус ак фацилисис ин Морби лео рисус Порта ак консектетур ак Вестибулум ат эрос 
  <div class="list-group">
    <a href="#" class="list-group-item active"> Просто краш одо </a>
    <a href="#" class="list-group-item">Дапибус ак фацилисис ин</a>
    <a href="#" class="list-group-item">Морби лео рисус</a>
    <a href="#" class="list-group-item">Порта ак консектетур ак</a>
    <a href="#" class="list-group-item">Вестибулум ат эрос</a>
  </div>

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

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

  <div class="list-group">
    <button type="button" class="list-group-item">Просто краш одо</button>
    <button type="button" class="list-group-item">
      Дапибус ак фацилисис ин
    </button>
    <button type="button" class="list-group-item">Морби лео рисус</button>
    <button type="button" class="list-group-item">
      Порта ак консектетур ак
    </button>
    <button type="button" class="list-group-item">Вестибулум ат эрос</button>
  </div>

Отключенные элементы

Добавьте .disabled к .list-group-item, чтобы сделать его серым и показать как отключенный.

Просто краш одо Дапибус ак фацилисис ин Морби лео рисус Порта ак консектетур ак Вестибулум ат эрос 
  <div class="list-group">
    <a href="#" class="list-group-item disabled"> Просто краш одо </a>
    <a href="#" class="list-group-item">Дапибус ак фацилисис ин</a>
    <a href="#" class="list-group-item">Морби лео рисус</a>
    <a href="#" class="list-group-item">Порта ак консектетур ак</a>
    <a href="#" class="list-group-item">Вестибулум ат эрос</a>
  </div>

Контекстные классы

Используйте контекстные классы для стилизации элементов списка, по умолчанию или связанных. Также включает состояние .active.

  • Дапибус ак фацилисис ин
  • Крас сит амет нибх либеро
  • Порта ак консектетур ак
  • Вестибулум ат эрос
Дапибус ак фацилисис ин Крас сит амет нибх либеро Порта ак консектетур ак Вестибулум ат эрос 
  <ul class="list-group">
    <li class="list-group-item list-group-item-success">
      Дапибус ак фацилисис ин
    </li>
    <li class="list-group-item list-group-item-info">
      Крас сит амет нибх либеро
    </li>
    <li class="list-group-item list-group-item-warning">
      Порта ак консектетур ак
    </li>
    <li class="list-group-item list-group-item-danger">Вестибулум ат эрос</li>
  </ul>
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-success"
      >Дапибус ак фацилисис ин</a
    >
    <a href="#" class="list-group-item list-group-item-info"
      >Крас сит амет нибх либеро</a
    >
    <a href="#" class="list-group-item list-group-item-warning"
      >Порта ак консектетур ак</a
    >
    <a href="#" class="list-group-item list-group-item-danger"
      >Вестибулум ат эрос</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, мы добавляем дополнительную границу к верху таблицы для разделения.

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

Некоторое содержимое панели по умолчанию здесь. Нулла вите элит либеро, а фаретра ауг. Аенеан лациния бибендум нулла сед консектетур. Аенеан эу лео квам. Пеллентескве орнаре сем лациния квам вененатис вестибулум. Нуллам ид долор ид нибх ультрициес вехикула ут ид элит.

# Имя Фамилия Имя пользователя
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>

С группами списков

Легко включайте полноширинные группы списков в любую панель.

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

Некоторое содержимое панели по умолчанию здесь. Нулла вите элит либеро, а фаретра ауг. Аенеан лациния бибендум нулла сед консектетур. Аенеан эу лео квам. Пеллентескве орнаре сем лациния квам вененатис вестибулум. Нуллам ид долор ид нибх ультрициес вехикула ут ид элит.

  • Просто краш одо
  • Дапибус ак фацилисис ин
  • Морби лео рисус
  • Порта ак консектетур ак
  • Вестибулум ат эрос
  <div class="panel panel-default">
    <!-- Содержимое панели по умолчанию -->
    <div class="panel-heading">Заголовок панели</div>
    <div class="panel-body">
      <p>...</p>
    </div>

    <!-- Группа списков -->
    <ul class="list-group">
      <li class="list-group-item">Просто краш одо</li>
      <li class="list-group-item">Дапибус ак фацилисис ин</li>
      <li class="list-group-item">Морби лео рисус</li>
      <li class="list-group-item">Порта ак консектетур ак</li>
      <li class="list-group-item">Вестибулум ат эрос</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>

Ячейки

Ячейка по умолчанию

Используйте ячейку как простой эффект на элементе, чтобы придать ему эффект вставки.

Смотрите, я в ячейке!
  <div class="well">...</div>

Опциональные классы

Управляйте отступами и закругленными углами с помощью двух опциональных модификаторов классов.

Смотрите, я в большой ячейке!
  <div class="well well-lg">...</div>
Смотрите, я в маленькой ячейке!
  <div class="well well-sm">...</div>