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

Применяются для объединения различных по назначению кнопок в единый элемент. Возможно построение из элементов <a> или <button>.

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

Примеры и идеи для использования:

• Используйте одинаковые элементы для создания группы кнопок, <a> или <button>.
• Не используйте разные по цвету кнопки.
• Используйте кнопки в дополнение к тексту или вместо текста, не забудьте добавлять alt и title атрибуты при необходимости.

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

Пример

В этом примере обычный HTML со стандартной кнопкой обозначенной только тегом button:

<div class="btn-group">
  <button class="btn">Лево</button>
  <button class="btn">Середина</button>
  <button class="btn">Право</button>
</div>

Пример объединенных групп кнопок

Комбинируйте группы кнопок <div class="btn-group"> при помощи <div class="btn-toolbar"> для отображения в строку.

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

Кнопки как checkbox или radio

Группы кнопок могут иметь функционал радио-кнопок, когда только одна кнопка может быть активирована, или как флажок, когда ряд кнопок может быть активирован. Ознакомьтесь с Javascript плагином управляющим этим действием.

Ознакомиться с Javascript »

Выпадающие списки в группах кнопок

Внимание! Кнопки с выпадающими списками должны быть помещены в индивидуальный родительский элемент .btn-group и включать .btn-toolbar для корректного отображения.

Пример и описание

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

Объяснение примера

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

<div class="btn-group">
  <button class="btn dropdown-toggle" data-toggle="dropdown">Действие <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Еще и еще</a></li>
    <li class="divider"></li>
    <li><a href="#">Отделенный пункт</a></li>
  </ul>
</div>

Работает со всеми размерами

Выпадающий список работает с кнопками любого размера. Изменяйте размер кнопок при помощи классов .btn-large, .btn-small, или .btn-mini.

Требования к javascript

Выпадающие списки требуют Bootstrap dropdown плагина.

Иногда—на мобильных устройствах—выпадающие списки могут вылезать за пределы body. Вам необходимо решать эту проблему самостоятельно используя дополнительную разметку или javascript.

Пример и описание

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

Объяснение примера

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

<div class="btn-group">
  <button class="btn">Действие</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Еще и еще</a></li>
    <li class="divider"></li>
    <li><a href="#">Отделенный пункт</a></li>
  </ul>
</div>

Размеры

Используйте классы размеров кнопок .btn-mini, .btn-small или .btn-large.

<div class="btn-group">
  <button class="btn btn-large">.large кнопка</button>
  <button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu pull-right">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Еще и еще</a></li>
    <li class="divider"></li>
    <li><a href="#">Отделенный пункт</a></li>
  </ul>
</div>

Выпадающие вверх

Выпадающие вверх списки могут созданы путем добавления класса .dropup к родительскому элементу .btn-group. Наример class="btn-group dropup". Это изменит отображение элемента .caret и изменит направление выпадающего списка вверх.

<div class="btn-group dropup">
  <button class="btn primary">Вверх по правому краю</button>
  <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu pull-right">
    <li><a href="#">Действие</a></li>
    <li><a href="#">Другое действие</a></li>
    <li><a href="#">Еще и еще</a></li>
    <li class="divider"></li>
    <li><a href="#">Отделенный пункт</a></li>
  </ul>
</div>

Основной класс

Все навигационные компоненты—вкладки, кнопки и списки—имеют одинаковую HTML-разметку и родительский класс .nav.

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

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

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

Для выравнивания навигации используйте классы .pull-left или .pull-right. Оба класса добавляют условие CSS float left или right.

Вкладки

Используйте в качестве вкладок <ul> список, и дополнительный класс в родительском элементе .nav-tabs:

• Главная
• Профиль
• Сообщения

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Главная</a></li>
  <li><a href="#">Профиль</a></li>
  <li><a href="#">Сообщения</a></li>
</ul>

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

Используйте HTML-код из предыдущего примера, но вместо класса .nav-tabs используйте .nav-pills:

• Главная
• Профиль
• Сообщения

<ul class="nav nav-pills">
  <li class="active"><a href="#">Главная</a></li>
  <li><a href="#">Профиль</a></li>
  <li><a href="#">Сообщения</a></li>
</ul>

Как?

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

Стек вкладок

• Главная
• Профиль
• Сообщения

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

Стек кнопок

• Главная
• Профиль
• Сообщения

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

Богатое меню

Выпадающее меню в Bootstrap вкладках и навигационных кнопках. Незабудте добавить jQuery плагин.

Изучите Javascript плагин initializing dropdowns используемый для выпадающих списков в Bootstrap.

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

• Главная
• Профиль
• Выпадающий список
  • Действие
  • Другое действие
  • Еще и еще
  • Отделенный пункт

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Главная</a></li>
  <li><a href="#">Профиль</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Выпадающий список <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Действие</a></li>
      <li><a href="#">Другое действие</a></li>
      <li><a href="#">Еще и еще</a></li>
      <li class="divider"></li>
      <li><a href="#">Отделенный пункт</a></li>
    </ul>
  </li>
</ul>

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

• Главная
• Профиль
• Выпадающий список
  • Действие
  • Другое действие
  • Еще и еще
  • Отделенный пункт

<ul class="nav nav-pills">
  <li class="active"><a href="#">Главная</a></li>
  <li><a href="#">Профиль</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Выпадающий список <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Действие</a></li>
      <li><a href="#">Другое действие</a></li>
      <li><a href="#">Еще и еще</a></li>
      <li class="divider"></li>
      <li><a href="#">Отделенный пункт</a></li>
    </ul>
  </li>
</ul>

Навигация как в приложении

НАвигационный список позаоляет создать легкую и юзабельную навигацию с дополнительными заголовками. Такой сайдбар используется в Finder в MAC OS X.

Структура HTML-разметки в точности повторяет вкладки и кнопки, так что менять стиль навигационных элементов как ни когда просто.

Иконки

Используйте иконки в навигации. Добавьте тег <i> с классом нужной Вам иконки.

Горизонтальный разделитель

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

<ul class="nav nav-list">
  ...
  <li class="divider"></li>
  ...
</ul>

Пример навигационного списка

К списку ссылок добавьте class="nav nav-list":

<ul class="nav nav-list">
  <li class="nav-header">
    Заголовок
  </li>
  <li class="active">
    <a href="#">Главная</a>
  </li>
  <li>
    <a href="#">Библиотека</a>
  </li>
  ...
</ul>

Пример с иконками

Такой же пример, но с добавлением иконок через тег <i>.

<ul class="nav nav-list">
  ...
  <li>
    <a href="#">
      <i class="icon-book"></i>
      Библиотека
    </a>
  </li>
  ...
</ul>

Что включено?

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

Для изменения стиля расположения нужно лишь изменить один класс.

"Fade in" вкладки

Для плавного переключения между кладками, добавьте класс .fade к каждому .tab-pane.

jQuery плагин

Все вкладки управляются jQuery плагином. Изучите больше о javascript плагине.

Ознакомиться с javascript →

Пример вкладок

Для создания переключаемых вкладок создайте .tab-pane с уникальным ID для каждой вкладки и поместите их в элемент с классом .tab-content.

Для выравнивания вкладок по левому или правому краю поместите .nav-tabs и .tab-content в родительский элемент .tabbable.

Код

Использование вкладок подразумевает расположение всего кода в едином родительском элементе, см. пример ниже:

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Вкладка 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Вкладка 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>Я 1-я секция.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Хей, я 2-я секция.</p>
    </div>
  </div>
</div>

Расположение внизу

<div class="tabbable tabs-below">
  <div class="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

Расположение слева

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

Расположение справа

<div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

Разметка Navbar'а

Для создания фиксированного или статичного Navbar'а требуется создать всего три div элемента.

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      ...
    </div>
  </div>
</div>

Фиксированный Navbar

Для создания фиксированного Navbar'а сверху или снизу необходимо добавить всего один класс к .navbar.

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

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

При создании фиксированного Navbar'а не забудьте что учесть месть которое он скрывает под собой. Добавьте 40px или более в качестве отступа для <body> элемента. Добавьте новое правило после основного Bootstrap CSS, но перед responsive CSS.

Имя проекта

Добавьте имя проекта используя тег a.

<a class="brand" href="#">
  Имя проекта
</a>

Формы в navbar'е

Для использования форм в Navbar'е, добавьте необходимые классы как в примере ниже. Для создания формы по умолчанию добавьте класс .navbar-form и .pull-left или .pull-right для выравнивания по левому или правому краю.

<form class="navbar-form pull-left">
  <input type="text" class="span2">
</form>

Для формы поиска добавьте класс .navbar-search к тегу form и класс .search-query к input элементу.

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Поиск">
</form>

Динамический Navbar

Взависимости от количества контента, вы можете задать скрытие некоторых элементов. Для этого, поместите контент в дополнительный div элемент с классом .nav-collapse, и добавьте кнопку с классом .btn-navbar.

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar используется для показа/скрытия контента -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Расположите элемент с именем проекта отдельно, если вы не хотите его скрывать -->
      <a class="brand" href="#">Project name</a>

      <!-- Поместите сюда все что вы хотите скрыть на дисплеях с шириной менее 940px -->
      <div class="nav-collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>

    </div>
  </div>
</div>

Навигационные ссылки

Навигационные пункты легко добавить через неупорядоченные списки.

<ul class="nav">
  <li class="active">
    <a href="#">Главная</a>
  </li>
  <li><a href="#">Ссылка</a></li>
  <li><a href="#">Ссылка</a></li>
</ul>

Вы можете добавить вертикальный разделитель в Navbar, смотрите пример ниже:

<ul class="nav">
  ...
  <li class="divider-vertical"></li>
  ...
</ul>

Выравнивание элементов

Для выравнивания навигации, формы поиска или текста - используйте классы .pull-left и .pull-right. Оба класса добавляют условие CSS float.

Добавление выпадающего меню

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

<ul class="nav">
  <li class="dropdown">
    <a href="#"
          class="dropdown-toggle"
          data-toggle="dropdown">
          Account
          <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

Ознакомиться с javascript →

Текст в Navbar'е

Поместите строку текста в <.navbar-text>, хорошо если текст будет в параграфе <p>.

Зачем использовать?

Навигационная последовательность используется для отображения насколько глубоко забрел пользователь на вашем сайте или приложении, это не совсем навигация. Используйте этот элемент только там где это уместно.

Примеры

Пример показывает последовательность перехода по страницам.

• Главная

• Главная /
• Библиотека

• Главная /
• Библиотека /
• Информация

Код

HTML-разметка как у стандартного неупорядоченного списка.

<ul class="breadcrumb">
  <li>
    <a href="#">Главная</a> <span class="divider">/</span>
  </li>
  <li>
    <a href="#">Библиотека</a> <span class="divider">/</span>
  </li>
  <li class="active">Информация</li>
</ul>

Когда использовать?

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

Состояние ссылок

Состояния ссылок легко настраиваются при помощи классов .disabled Для некликабельного элемента и .active для текущей страницы.

Гибкая настройка

Используйте два класса для настройки отображения и выравнивания блока навигации: .pagination-centered и .pagination-right.

Примеры

Стандартная нумерация страниц.

Структура кода

В родительском <div> элементе, нумерация страниц это просто список <ul>.

<div class="pagination">
  <ul>
    <li><a href="#">Пред</a></li>
    <li class="active">
      <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="#">След</a></li>
  </ul>
</div>

Что это?

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

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

Постраничная навигация использует класс .disabled для отключения элемента.

Пример

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

• Назад
• Вперед

<ul class="pager">
  <li>
    <a href="#">Назад</a>
  </li>
  <li>
    <a href="#">Вперед</a>
  </li>
</ul>

Выравнивание элемента

Вы так же можете выранять элементы по краям блока:

• ← Назад
• Вперед →

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Назад</a>
  </li>
  <li class="next">
    <a href="#">Вперед &rarr;</a>
  </li>
</ul>

Зачем?

Бейдж это маленький и простой элемент для отображения состояния или счета чего-либо. Данные бейджы могут быть найдены в приложениях например в Mail.app или в мобильных приложениях.

Классы

Bootstrap поставляется с элементом Hero!, основное предназначение которого это выделение самой главной и важной информации. Этот элемент подойдет для маркетинговых и других целей.

Код

Поместите текст в div элемент вот таким образом:

<div class="hero-unit">
  <h1>Заголовок</h1>
  <p>Ключевой текст</p>
  <p>
    <a class="btn btn-primary btn-large">
      Узнать больше
    </a>
  </p>
</div>

Пример использования тега h1 с дополнительным текстом. Просто добавьте в тег h1 тег small с дополнительным текстом, смотрите пример справа.

<div class="page-header">
  <h1>Пример заголовка страницы <small>Дополнительный текст здесь</small></h1>
</div>

Пример

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

Легко изменяемые

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

• 

  Заголовок

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

  Подробнее Поделиться

• 

  Заголовок

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

  Подробнее Поделиться

Зачем использовать?

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

HTML-разметка

Миниатюры представлены в виде списка— ul с любым количеством вложенных li элементов.

Используйте размеры сетки шаблона

Миниатюры используют классы размеров от сетки шаблона—такие как .span2 или .span3.

Пример кода

Базовый пример для миниатюр-ссылок:

<ul class="thumbnails">
  <li class="span3">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/260x180" alt="">
    </a>
  </li>
  ...
</ul>

Другой пример, для статичного контента мы поменяли тег <a> на <div>:

<ul class="thumbnails">
  <li class="span3">
    <div class="thumbnail">
      <img src="http://placehold.it/260x180" alt="">
      <h5>Заголовок</h5>
      <p>Описание и текст….</p>
    </div>
  </li>
  ...
</ul>

Размеры

Мы преминили разные размеры миниатюр в пределах одного ul списка. Как Вы видите миниатюры располагаются таким образом чтобы максимально заполнить родительский элемент.

Основной класс

В Bootstrap 2 для сообщений используется класс .alert. Внутри тела сообщения тег <p> не является обязательным, текст сообщения можно просто поместить в <div>.

Простые сообщения

Для простого сообщения содержащего большее количество текста мы предлагаем использовать элемент с классом .alert-block.

Поставляется с javascript

В Bootstrap входит jQuery плагин который поддерживает сообщения и позволяет скрывать из в один клик.

Ознакомиться с плагином »

Пример

Поместите сообщение и дополнительную кнопку скрытия в div элемент с классом alert.

<div class="alert">
  <button class="close" data-dismiss="alert">×</button>
  <strong>Предупреждение!</strong> Nulla vitae elit libero, a pharetra augue.
</div>

Внимание! iOS-устройства требуют атрибут href="#" для элемента скрывающего сообщение. не забудьте добавить аттрибут для корректной работы иконки скрытия сообщения. В другом случае Вы можете использовать элемент button.

Вы можете расширить стандартное сообщение c помощью дополнительныз классов: для больших отступов и читабельного текста используйте .alert-block. Для заголовка используйте .alert-heading.

<div class="alert alert-block">
  <a class="close" data-dismiss="alert" href="#">×</a>
  <h4 class="alert-heading">Предупреждение!</h4>
  Nulla vitae elit libero, a pharetra augue. Praesent commodo...
</div>

Ошибка

<div class="alert alert-error">
  ...
</div>

Успех

<div class="alert alert-success">
  ...
</div>

Информация

<div class="alert alert-info">
  ...
</div>

Основной

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

<div class="progress">
  <div class="bar"
       style="width: 60%;"></div>
</div>

Полосатый

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

<div class="progress progress-striped">
  <div class="bar"
       style="width: 20%;"></div>
</div>

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

Используется полосатый пример и анимируется через CSS (IE не поддерживается).

<div class="progress progress-striped
     active">
  <div class="bar"
       style="width: 40%;"></div>
</div>

Дополнительные цвета

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

Полосатый

Так же как в предыдущем примере, только в полосочку.

Поведение

Индикатор загрузки использует CSS3 transitions, так что при изменении размера это произойдет плавно, например через javascript.

Если вы используете класс .active, совместно с .progress-striped индикатор загрузки будет анимирован слева на право.

Поддержка браузерами

Индикатор загрузки для эффектов использует CSS3 gradient, transition, и animation. Эти опции не работают в IE7-9, а так же в старых версиях Firefox.

Opera и IE не поддерживают анимацию на текущий момент.

.Well

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

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

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

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

×

<button class="close">&times;</button>

iOS-устройства требуют использование атрибута href="#" для вызова событий, см. пример ниже.

<a class="close" href="#">&times;</a>