Доступные символы

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

• .glyphicon .glyphicon-adjust
• .glyphicon .glyphicon-align-center
• .glyphicon .glyphicon-align-justify
• .glyphicon .glyphicon-align-left
• .glyphicon .glyphicon-align-right
• .glyphicon .glyphicon-arrow-down
• .glyphicon .glyphicon-arrow-left
• .glyphicon .glyphicon-arrow-right
• .glyphicon .glyphicon-arrow-up
• .glyphicon .glyphicon-asterisk
• .glyphicon .glyphicon-backward
• .glyphicon .glyphicon-ban-circle
• .glyphicon .glyphicon-barcode
• .glyphicon .glyphicon-bell
• .glyphicon .glyphicon-bold
• .glyphicon .glyphicon-book
• .glyphicon .glyphicon-bookmark
• .glyphicon .glyphicon-briefcase
• .glyphicon .glyphicon-bullhorn
• .glyphicon .glyphicon-calendar
• .glyphicon .glyphicon-camera
• .glyphicon .glyphicon-certificate
• .glyphicon .glyphicon-check
• .glyphicon .glyphicon-chevron-down
• .glyphicon .glyphicon-chevron-left
• .glyphicon .glyphicon-chevron-right
• .glyphicon .glyphicon-chevron-up
• .glyphicon .glyphicon-circle-arrow-down
• .glyphicon .glyphicon-circle-arrow-left
• .glyphicon .glyphicon-circle-arrow-right
• .glyphicon .glyphicon-circle-arrow-up
• .glyphicon .glyphicon-cloud
• .glyphicon .glyphicon-cloud-download
• .glyphicon .glyphicon-cloud-upload
• .glyphicon .glyphicon-cog
• .glyphicon .glyphicon-collapse-down
• .glyphicon .glyphicon-collapse-up
• .glyphicon .glyphicon-comment
• .glyphicon .glyphicon-compressed
• .glyphicon .glyphicon-copyright-mark
• .glyphicon .glyphicon-credit-card
• .glyphicon .glyphicon-cutlery
• .glyphicon .glyphicon-dashboard
• .glyphicon .glyphicon-download
• .glyphicon .glyphicon-download-alt
• .glyphicon .glyphicon-earphone
• .glyphicon .glyphicon-edit
• .glyphicon .glyphicon-eject
• .glyphicon .glyphicon-envelope
• .glyphicon .glyphicon-euro
• .glyphicon .glyphicon-exclamation-sign
• .glyphicon .glyphicon-expand
• .glyphicon .glyphicon-export
• .glyphicon .glyphicon-eye-close
• .glyphicon .glyphicon-eye-open
• .glyphicon .glyphicon-facetime-video
• .glyphicon .glyphicon-fast-backward
• .glyphicon .glyphicon-fast-forward
• .glyphicon .glyphicon-file
• .glyphicon .glyphicon-film
• .glyphicon .glyphicon-filter
• .glyphicon .glyphicon-fire
• .glyphicon .glyphicon-flag
• .glyphicon .glyphicon-flash
• .glyphicon .glyphicon-floppy-disk
• .glyphicon .glyphicon-floppy-open
• .glyphicon .glyphicon-floppy-remove
• .glyphicon .glyphicon-floppy-save
• .glyphicon .glyphicon-floppy-saved
• .glyphicon .glyphicon-folder-close
• .glyphicon .glyphicon-folder-open
• .glyphicon .glyphicon-font
• .glyphicon .glyphicon-forward
• .glyphicon .glyphicon-fullscreen
• .glyphicon .glyphicon-gbp
• .glyphicon .glyphicon-gift
• .glyphicon .glyphicon-glass
• .glyphicon .glyphicon-globe
• .glyphicon .glyphicon-hand-down
• .glyphicon .glyphicon-hand-left
• .glyphicon .glyphicon-hand-right
• .glyphicon .glyphicon-hand-up
• .glyphicon .glyphicon-hd-video
• .glyphicon .glyphicon-hdd
• .glyphicon .glyphicon-header
• .glyphicon .glyphicon-headphones
• .glyphicon .glyphicon-heart
• .glyphicon .glyphicon-heart-empty
• .glyphicon .glyphicon-home
• .glyphicon .glyphicon-import
• .glyphicon .glyphicon-inbox
• .glyphicon .glyphicon-indent-left
• .glyphicon .glyphicon-indent-right
• .glyphicon .glyphicon-info-sign
• .glyphicon .glyphicon-italic
• .glyphicon .glyphicon-leaf
• .glyphicon .glyphicon-link
• .glyphicon .glyphicon-list
• .glyphicon .glyphicon-list-alt
• .glyphicon .glyphicon-lock
• .glyphicon .glyphicon-log-in
• .glyphicon .glyphicon-log-out
• .glyphicon .glyphicon-magnet
• .glyphicon .glyphicon-map-marker
• .glyphicon .glyphicon-minus
• .glyphicon .glyphicon-minus-sign
• .glyphicon .glyphicon-move
• .glyphicon .glyphicon-music
• .glyphicon .glyphicon-new-window
• .glyphicon .glyphicon-off
• .glyphicon .glyphicon-ok
• .glyphicon .glyphicon-ok-circle
• .glyphicon .glyphicon-ok-sign
• .glyphicon .glyphicon-open
• .glyphicon .glyphicon-paperclip
• .glyphicon .glyphicon-pause
• .glyphicon .glyphicon-pencil
• .glyphicon .glyphicon-phone
• .glyphicon .glyphicon-phone-alt
• .glyphicon .glyphicon-picture
• .glyphicon .glyphicon-plane
• .glyphicon .glyphicon-play
• .glyphicon .glyphicon-play-circle
• .glyphicon .glyphicon-plus
• .glyphicon .glyphicon-plus-sign
• .glyphicon .glyphicon-print
• .glyphicon .glyphicon-pushpin
• .glyphicon .glyphicon-qrcode
• .glyphicon .glyphicon-question-sign
• .glyphicon .glyphicon-random
• .glyphicon .glyphicon-record
• .glyphicon .glyphicon-refresh
• .glyphicon .glyphicon-registration-mark
• .glyphicon .glyphicon-remove
• .glyphicon .glyphicon-remove-circle
• .glyphicon .glyphicon-remove-sign
• .glyphicon .glyphicon-repeat
• .glyphicon .glyphicon-resize-full
• .glyphicon .glyphicon-resize-horizontal
• .glyphicon .glyphicon-resize-small
• .glyphicon .glyphicon-resize-vertical
• .glyphicon .glyphicon-retweet
• .glyphicon .glyphicon-road
• .glyphicon .glyphicon-save
• .glyphicon .glyphicon-saved
• .glyphicon .glyphicon-screenshot
• .glyphicon .glyphicon-sd-video
• .glyphicon .glyphicon-search
• .glyphicon .glyphicon-send
• .glyphicon .glyphicon-share
• .glyphicon .glyphicon-share-alt
• .glyphicon .glyphicon-shopping-cart
• .glyphicon .glyphicon-signal
• .glyphicon .glyphicon-sort
• .glyphicon .glyphicon-sort-by-alphabet
• .glyphicon .glyphicon-sort-by-alphabet-alt
• .glyphicon .glyphicon-sort-by-attributes
• .glyphicon .glyphicon-sort-by-attributes-alt
• .glyphicon .glyphicon-sort-by-order
• .glyphicon .glyphicon-sort-by-order-alt
• .glyphicon .glyphicon-sound-5-1
• .glyphicon .glyphicon-sound-6-1
• .glyphicon .glyphicon-sound-7-1
• .glyphicon .glyphicon-sound-dolby
• .glyphicon .glyphicon-sound-stereo
• .glyphicon .glyphicon-star
• .glyphicon .glyphicon-star-empty
• .glyphicon .glyphicon-stats
• .glyphicon .glyphicon-step-backward
• .glyphicon .glyphicon-step-forward
• .glyphicon .glyphicon-stop
• .glyphicon .glyphicon-subtitles
• .glyphicon .glyphicon-tag
• .glyphicon .glyphicon-tags
• .glyphicon .glyphicon-tasks
• .glyphicon .glyphicon-text-height
• .glyphicon .glyphicon-text-width
• .glyphicon .glyphicon-th
• .glyphicon .glyphicon-th-large
• .glyphicon .glyphicon-th-list
• .glyphicon .glyphicon-thumbs-down
• .glyphicon .glyphicon-thumbs-up
• .glyphicon .glyphicon-time
• .glyphicon .glyphicon-tint
• .glyphicon .glyphicon-tower
• .glyphicon .glyphicon-transfer
• .glyphicon .glyphicon-trash
• .glyphicon .glyphicon-tree-conifer
• .glyphicon .glyphicon-tree-deciduous
• .glyphicon .glyphicon-unchecked
• .glyphicon .glyphicon-upload
• .glyphicon .glyphicon-usd
• .glyphicon .glyphicon-user
• .glyphicon .glyphicon-volume-down
• .glyphicon .glyphicon-volume-off
• .glyphicon .glyphicon-volume-up
• .glyphicon .glyphicon-warning-sign
• .glyphicon .glyphicon-wrench
• .glyphicon .glyphicon-zoom-in
• .glyphicon .glyphicon-zoom-out

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

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

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

Дополнительные шаблоны

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

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

Переключенное, контекстное меню для отображения списка ссылок. Сделайте интерактивным с помощью выпадающих JavaScript плагинов.

Пример

Оберните триггер выпадающего меню и выпадающее меню с .dropdown, или другим элементов который объявляет position: relative;. Потом добавьте код ХТМЛ выпадающего меню.

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <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>

Опции выравнивания

Добавьте .pull-right к .dropdown-menu, чтобы выравнить по правому краю выпадающее меню.

<ul class="dropdown-menu pull-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>

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

Простой пример

Преобразуйте ряд кнопок с помощью .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">
  <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">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Вертикальное изменение

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

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

Обоснованное изменение ссылки

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

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

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

Единичное выпадение кнопки

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

<!-- 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="#">Actiontt;/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>
  </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">
    ...
  </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">
    ...
  </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">
    ...
  </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>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

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

Простой пример

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

Задание размеров

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

<div class="input-group input-group-lg">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control input-lg" 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">
          <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 pull-right">
          <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 btn-group">
    <!-- Button and dropdown menu -->
  </div>
</div>

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

Вкладки

Обратите внимание, что .nav-tabs класс, подразумевает .nav исходного класса.

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

Таблетки

Возьмите одинаковый 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>

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

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

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

Легко создавать вкладки и таблетки равные ширине их исходных элементов при помощи .nav-justified.

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

Отключенные ссылки

Для каждого компонента (вкладки, таблетки, или списка), добавьте .disabled для серых ссылок и невыделенных эффектов .

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

Использование выпадений

Добавьте выпадающие окна с помощью маленьких экстра HTML и раскрывающийся JavaScript плагин.

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

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

Таблетки с выпадениями

<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">
      ...
    </ul>
  </li>
  ...
</ul>

Навигатор по умолчанию

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

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <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 navbar-ex1-collapse">
    <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 <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></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 <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

Кнопки

Для кнопок, не содержащихся в <form>, добавьте этот класс по вертикали к центральным кнопкам в панели навигации.

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

Текст

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

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

Без-навигации ссылки

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

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

Компонент выравнивания

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

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

Исправленный к началу

Добавьте .navbar-fixed-top.

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

body { padding-top: 70px; }

Исправленный в конец

Добавьте .navbar-fixed-bottom вместо.

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

body { padding-bottom: 70px; }

Статическое начало

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

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  ...
</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>

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

Верстка по умолчанию

Простая нумерация страниц была продиктована 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>

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

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

Саморушимый

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

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

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

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

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

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

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

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

Расширяйте система сетки Bootstrap с компонентом "миниатюр" для того чтобы показывать сетку картинок, видео, текста, и многого другого.

Пример по умолчанию

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

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

Содержание пользователя

С небольшим добавлением в верстке, возможно добавить любой лип ХТМЛ контента например как заголовки, параграфы, или кнопки в миниатюры.

Thumbnail label

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.

Button Button

Thumbnail label

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.

Button Button

Thumbnail label

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.

Button Button

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

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

Дополнительные шаблоны

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

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

Отклоненные оповещения

Пристроить любое оповещение путем добавления функционала .alert-dismissable и закрытия кнопки.

<div class="alert alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Ссылки в оповещениях

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

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

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

Простой пример

Индикатор состояния по умолчанию

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

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

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

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

<div class="progress progress-striped">
  <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 progress-striped">
  <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 progress-striped">
  <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 progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Анимационный

Добавьте .active к .progress-striped, чтобы создать анимацию полос справа налево. Не доступен во всех версиях IE.

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

Упакованный

Поместите несколько линий в одинаковый .progress, чтобы упаковать их.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" 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>

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

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

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

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.

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.

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>

Медиа лист

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

<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 по мере необходимости.

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

Значки

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

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

Содержание пользователя

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

<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,, то мы добавляем границы к началу таблицы для разделения.

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

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

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

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

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

Легко включить полно-широкую список групп в пределах панели.

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

Изначальный "колодец"

Используйте "колодец" как простой эффект на элемент дающий эффект внутренних отступов.

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

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

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

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

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