Компоненты

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

Иконки Glyphicons

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

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

Открыть пример на getbootstrap.com

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

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

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Примеры

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

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

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

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Выпадающие списки

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

Пример

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

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Меню выпадающего списка можно изменить, чтобы оно раскрывалось вверх (вместо вниз), добавив .dropup к родительскому элементу.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

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

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

Заголовки

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Разделитель

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

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

Отключенные пункты меню

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

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

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

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

Оберните ряд кнопок с .btn в .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <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" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

Изменение размера

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

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

Вложенность

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      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" role="group" aria-label="...">
  ...
</div>

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

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

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

Просто оберните ряд .btn в .btn-group.btn-group-justified.

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

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

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

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

Раскрывающиеся списки кнопок

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

Раскрывающиеся списки с одной кнопкой

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

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    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 role="separator" 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" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</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 role="separator" 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" aria-haspopup="true" aria-expanded="false">
    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" aria-haspopup="true" aria-expanded="false">
    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" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Вариант Dropup

Вызовите раскрывающиеся списки над элементами, добавив .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" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Группы ввода

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

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

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

Мы не поддерживаем несколько дополнительных элементов (.input-group-addon или .input-group-btn на одной стороне.

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

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Размеры

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

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

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

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

Флажки и переключатели

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

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

Дополнительные кнопки

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <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" aria-haspopup="true" aria-expanded="false">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 role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" 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" aria-label="...">
</div>

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

Несколько кнопок

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

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Навигационные меню

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

Вкладки

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

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

Панели

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

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

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

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

Выровненные

Легко сделайте вкладки или панели одинаковой ширины родительского элемента при ширине экрана более 768 пикселей с помощью .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 role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Использование раскрывающихся списков

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

Вкладки с раскрывающимися списками

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Панели с раскрывающимися списками

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

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

Стандартная навигационная панель

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

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

<nav class="navbar navbar-default">
  <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" aria-expanded="false">
        <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 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Изображение бренда

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

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Формы

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

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

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Кнопки

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

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

body { padding-top: 70px; }

Фиксированная нижняя позиция

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

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

body { padding-bottom: 70px; }

Статическая верхняя позиция

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

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

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

Инвертированная навигационная панель

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

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

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

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

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

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

Пагинация

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

Стандартная пагинация

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

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

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

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

Рекомендуется заменить активные или отключенные якоря на <span>, или опустить якорь в случае стрелок «предыдущая»/«следующая», чтобы убрать функциональность клика, сохранив при этом предполагаемые стили.

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

Размер

Нужны большая или меньшая постраничная навигация? Добавьте .pagination-lg или .pagination-sm для дополнительных размеров.

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

Блокировка страниц

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

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

По умолчанию ссылки блоков страниц центрируются.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

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

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Необязательное состояние отключения

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Метки

Пример

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

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Самоколлапсирование

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

Подстраивается под активное состояние навигации

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

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Jumbotron

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

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

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

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

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

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

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

Миниатюры

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

Если вам нужна презентация миниатюр в стиле Pinterest с различной высотой и/или шириной, вам потребуется использовать сторонний плагин, такой как Masonry, Isotope или Salvattore.

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

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

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

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

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>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>

Уведомления

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

Примеры

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

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

Уведомления с возможностью закрытия

Расширьте любое уведомление, добавив необязательный .alert-dismissible и кнопку закрытия.

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

Ссылки в уведомлениях

Используйте утилиту класса .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>

Полосы прогресса

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

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

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

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

Со меткой

Удалите <span> с .sr-only классом изнутри полосы прогресса, чтобы отобразить видимый процент.

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

Чтобы убедиться, что текст метки остаётся читаемым даже при низких процентах, рассмотрите добавление min-width к полосе прогресса.

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

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

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

<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 (danger)</span>
  </div>
</div>

С полосами

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

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

Анимированная

Добавьте .active к .progress-bar-striped для анимации полос справа налево. Недоступно в IE9 и ниже.

<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 для их группировки.

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

Объект медиа

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

Среднее значение по умолчанию

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

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Классы .pull-left и .pull-right также существуют и ранее использовались в качестве части компонента медиа, но с версии v3.3.0 устарели для этого использования. Они примерно эквивалентны .media-left и .media-right, за исключением того, что .media-right следует размещать после .media-body в html.

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

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

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Список медиа

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

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">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>

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

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

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

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

Добавьте .disabled к .list-group-item элементу, чтобы он стал серым и выглядел отключённым.

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

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

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

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

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

Реагирующее встраивание

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

Правила напрямую применяются к <iframe>, <embed>, <video>, и <object> элементам; при необходимости используйте явный дочерний класс .embed-responsive-item, чтобы сопоставить стилизацию для других атрибутов.

Совет профессионала! Вам не нужно включать frameborder="0" в ваши <iframe> элементы, так как мы переопределяем это для вас.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Блоки

Блок по умолчанию

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

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

Дополнительные классы

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

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

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