Glyphicons

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

Набор включает в себя 200 значков в формате шрифта из набора Glyphicon Halflings. Glyphicons Halflings обычно доступны за дополнительную плату, но их создатель разрешил использовать их в Bootstrap абсолютно бесплатно. В качестве благодарности мы просим вас указывать ссылку на Glyphicons там, где это возможно.

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • 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

Как использовать

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

Не путать с другими компонентами

Классы значков нельзя комбинировать непосредственно с другими компонентами. Их нельзя использовать вместе с другими классами в одном и том же элементе. Вместо этого нужно добавить вложенный <span> и применить классы значков к <span>.

Использовать только с пустыми элементами

Классы значков должны быть использованы с элементами, которые не содержат текст и дочерние элементы

Изменение расположения икончатого шрифта

Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:

  • Измените @icon-font-path и / или @icon-font-name переменные в исходных Less файлах.
  • Utilize the relative URLs option provided by the Less compiler.
  • Измените url() путь в скомпилированном CSS.

Use whatever option best suits your specific development setup.

<span class="glyphicon glyphicon-search"></span>

Примеры

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

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

Выпадающие меню

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

Поместите триггер выпадающего меню и само меню в .dropdown или другой элемент, в котором содержится position: relative;. Затем добавьте HTML-код меню.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</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" role="menu" aria-labelledby="dLabel">
  ...
</ul>

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

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

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

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>

Кнопки

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Подсказки и уведомления в группах кнопок нужно настраивать отдельно

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

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

Помещайте наборы кнопок в .btn в .btn-group.

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

Панель кнопок

Объединяйте <div class="btn-group"> в <div class="btn-toolbar"> для создания более сложных компонентов.

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

Размеры

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

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

Вложения

Поместите .btn-group в другой .btn-group, если вы хотите получить выпадающие меню с набором кнопок.

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

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

Настройки вертикали

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

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

Выровненные группы кнопок

Создавайте группы кнопок одинакового размера по всей ширине материнского элемента. Также работает в выпадающих меню с кнопками в пределах группы кнопок.

Работа с границами

Из-за особенностей HTML и CSS, используемых при выравнивании кнопок (в частности display: table-cell), границы между ними получаются двойными. В обычных группах кнопок благодаря margin-left: -1px границы накладываются друг на друга, а не удаляются. Тем не менее, margin не работает с display: table-cell. В результате, в зависимости от настроек Bootstrap вы можете удалять или перекрашивать границы.

IE8 and borders

Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <a> or <button> elements. To get around that, wrap each button in another .btn-group.

See #12476 for more information.

С элементами <a>

Просто помещайте серии .btn в .btn-group.btn-group-justified.

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

С элементами <button>

Чтобы выравнивать группы кнопок с помощью элементов <button>, необходимо обрабатывать каждую кнопку в группе. Большинство интернет-браузеров неправильно применяют наш CSS для выравнивания элементов <button>, однако мы можем обойти эту проблему, так как поддерживаем выпадающие меню с кнопками.

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

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

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

Зависимость от плагина

Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.

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

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

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

Выпадающие меню с раздельными кнопками

Создайте выпадающие меню с раздельными кнопками с помощью тех же изменений разметки, только с отдельной кнопкой.

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

Размеры

Кнопки выпадающих меню могут быть любых размеров.

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

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="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">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

Вспывающие меню

Сделайте так, чтобы выпадающие меню открывались вверх от элемента, добавив .dropup к материнскому элементу.

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

Группы ввода

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

Совместимость с разными интернет-браузерами

Постарайтесь не использовать элементы <select>, так как они не могут полностью отображаться в интернет-браузерах WebKit.

Подсказки и уведомления в группах ввода нужно настраивать отдельно

Если вы используете подсказки и уведомления на элементах в .input-group, вам придется указывать container: 'body', чтобы избежать нежелательных побочных эффектов (напр., расширения элементов или исчезновения закругленных углов при отображении подсказки или уведомления).

Не путать с другими компонентами

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

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

Разместите одну надстройку или кнопку с одной стороны поля ввода. Также можно помещать их с обеих сторон поля ввода.

Мы не поддерживаем размещение нескольких надстроек с одной стороны.

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

@

.00

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

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

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

Размеры

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

@

@

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

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

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

Флажки и радиокнопки

Поместите любые флажки или радиокнопки в надстройку группы ввода вместо текста.

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

Дополнения к кнопкам

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

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

Кнопки с выпадающими меню

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

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

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

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

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

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

Обратите внимание, что классу .nav-tabs требуется базовый класс .nav.

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

Требуется плагин JavaScript для вкладок

For tabs with tabbable areas, you must use the tabs JavaScript plugin.

Возьмите тот же HTML, но используйте .nav-pills:

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

Pill-элементы также можно размещать вертикально. Просто добавьте .nav-stacked.

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

Простое создание вкладок или pill-элементов одинаковой ширины с материнскими элементами на экранах шире 768px с помощью .nav-justified. На более мелких экранах ссылки навигации сжимаются.

Safari и адаптивные выровненные панели навигации

As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.

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

В любой компонент панели навигации (вкладки или pill-элемента) можно добавить .disabled, чтобы ссылки стали серыми и при наведении на них курсора ничего не происходило.

Изменения не влияют на работу ссылок

Данный класс изменяет только внешний вид <a>, но не его работу. Чтобы отключить ссылки, используйте JavaScript.

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

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

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

<ul class="nav nav-tabs" role="tablist">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>

Pill-элементы с выпадающими меню

<ul class="nav nav-pills">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>

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

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

Длина содержимого

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

  1. Сократить количество или ширину элементов панели навигации.
  2. Hide certain navbar items at certain screen sizes using responsive utility classes.
  3. Изменить значение, при котором ваша панель навигации переключается со сжатого состояния на развернутое. Настройте переменную @grid-float-breakpoint или добавьте свой запрос мультимедиа.

Требуется JavaScript

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

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

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

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

Зависимость от плагина

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

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

Обязательно добавляйте role="navigation" в каждую панель навигации, чтобы повысить ее доступность.

Поместите содержимое формы в .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="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Сложности при работе с мобильными устройствами

There are some caveats regarding using form controls within fixed elements on mobile devices. See our browser support docs for details.

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

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

Добавьте класс .navbar-btn к элементам <button>, не являющимся частью <form>, чтобы отцентрировать их по вертикали в панели навигации.

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

Использование в зависимости от ситуации

Like the standard button classes, .navbar-btn can be used on <a> and <input> elements. However, neither .navbar-btn nor the standard button classes should be used on <a> elements within .navbar-nav.

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

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

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

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

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

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

Right aligning multiple components

Navbars currently have a limitation with multiple .navbar-right classes. To properly space content, we use negative margin on the last .navbar-right element. When there are multiple elements using that class, these margins don't work as intended.

We'll revisit this when we can rewrite that component in v4.

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

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

Требуется заполнение основного текста

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

body { padding-top: 70px; }

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

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

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

Требуется заполнение основного текста

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

body { padding-bottom: 70px; }

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

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

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

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

Изменяйте внешний вид панели навигации с помощью .navbar-inverse.

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

Навигационные цепочки

Определите положение текущей страницы в навигационной иерархии.

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

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

Страничная навигация

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Страничная навигация по умолчанию

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

<ul class="pagination">
  <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

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

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

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

Кроме того, вы можете менять активные или отключенные элементы привязки к <span>, чтобы отключать ссылки, сохраняя внешний вид.

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

Размеры

Хотите страницы большего или меньшего размера? Используйте .pagination-lg или .pagination-sm.

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

Модуль страничной навигации

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

Основной пример

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

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

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

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

<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Дополнительное отключенное состояние

Ссылки модуля страничной навигации работают с общим служебным классом .disabled.

<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Метки

Пример

Пример заголовка Новый

Пример заголовка Новый

Пример заголовка Новый

Пример заголовка Новый

Пример заголовка Новый
Пример заголовка Новый
<h3>Example heading <span class="label label-default">New</span></h3>

Доступные варианты

Добавьте любой из нижеперечисленных классов модификаторов, чтобы изменить внешний вид метки.

По умолчанию Основной Успех Информация Предупреждение Опасность
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Have tons of labels?

Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block element (like an icon). The way around this is setting display: inline-block;. For context and an example, see #13219.

Значки

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

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

Сворачивание

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

Совместимость с разными интернет-браузерами

Значки не будут сворачиваться в Internet Explorer 8, потому что он не поддерживает селектор :empty.

Адаптируется к активным состояниям панели навигации

Встроенные стили нужны для размещения значков в активных списках pill-навигации.

<ul class="nav nav-pills nav-stacked">
  <li class="active">
    <a href="#">
      <span class="badge pull-right">42</span>
      Home
    </a>
  </li>
  ...
</ul>

Jumbotron

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

Привет, мир!

Это простой Джамботрон, который привлекает дополнительное внимание к содержимому сайта.

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

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

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

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

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

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

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

Миниатюры

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

Основной пример

Изначально миниатюры Bootstrap были предназначены для отображения связанных изображений при минимальной разметке.

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

Пользовательское содержимое

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

Generic placeholder thumbnail

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

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Кнопки Кнопки

Generic placeholder thumbnail

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

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Кнопки Кнопки

Generic placeholder thumbnail

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

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Кнопки Кнопки

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

Оповещения

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.

Примеры

Помещайте любой текст и дополнительные кнопки в .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>

Dismissible alerts

Build on any alert by adding an optional .alert-dismissible and close button.

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

Хорошо работают на всех устройствах

Обязательно используйте элемент <button> с атрибутом данных data-dismiss="alert".

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

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

Индикаторы состояния

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

Совместимость с разными интернет-браузерами

Индикаторы состояния используют переходы и анимацию CSS3 для выполнения некоторых эффектов. Эти функции не поддерживаются в Internet Explorer 9 и ниже, а также в старой версии Firefox. Opera 12 не поддерживает анимацию.

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

Стандартный индикатор состояния.

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

With label

Remove the .sr-only class from within the progress bar to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.

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>

Low percentages

Progress bars representing low single digit percentages, as well as 0%, include a min-width: 20px; for legibility.

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

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

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

Прогресс 40% (успех)
Прогресс 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% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete</span>
  </div>
</div>

Полосы

Для создания полос используется градиент. Недоступно в IE8.

Прогресс 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% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Анимация

Add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.

Прогресс 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% Complete</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% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Объект мультимедиа

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

Объект мультимедиа по умолчанию

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

Generic placeholder image

Заголовок объекта мультимедиа

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Заголовок объекта мультимедиа

Generic placeholder image

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Список носителей

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

  • Generic placeholder image

    Заголовок объекта мультимедиа

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

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

    Заголовок вложенного объекта мультимедиа

    Generic placeholder image

    Nested media heading

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

    Заголовок вложенного объекта мультимедиа

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

    Заголовок объекта мультимедиа

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Группы списков

Группы списков — это гибкий и мощный компонент отображения не только простых, но и сложных списков элементов с индивидуальным содержимым.

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

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

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

Disabled items

Add .disabled to a .list-group-item to gray it out to appear disabled.

<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">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Панели

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

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

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

Пример простой панели
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

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

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

For proper link coloring, be sure to place links in headings within .panel-title.

Заголовок панели без названия
Содержимое панели

Название панели

Содержимое панели
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

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

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

Содержимое панели
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

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

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

Название панели

Содержимое панели

Название панели

Содержимое панели

Название панели

Содержимое панели

Название панели

Содержимое панели

Название панели

Содержимое панели
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

С таблицами

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

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

Здесь должен быть текст панели по умолчанию. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# Имя Фамилия Имя пользователя
1 Марк Отто @mdo
2 Джейкоб Торнтон @fat
3 Ларри Птица @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

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

Если нет тела панели, то компонент переходит от заголовка панели к таблице без прерываний.

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

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

Со списком

Easily include full-width list groups within any panel.

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

Здесь должен быть текст панели по умолчанию. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">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>

Responsive embed

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Rules are directly applied to <iframe>, <embed>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.

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