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

Используйте группы кнопок, чтобы объединить несколько кнопок в один составной компонент. Стройте их из ряда <a>или <button>элементов.

Лучшие практики

Мы рекомендуем следующие рекомендации по использованию групп кнопок и панелей инструментов:

• Всегда используйте один и тот же элемент в одной группе кнопок <a>или <button>.
• Не смешивайте кнопки разных цветов в одной группе кнопок.
• Используйте значки в дополнение к тексту или вместо него, но не забудьте включить замещающий текст и текст заголовка, где это уместно.

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

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

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

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

Пример панели инструментов

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

<div класс = "кнопка-панель инструментов" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Чекбокс и радио вкусы

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

Получить javascript »

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

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

Обзор и примеры

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

Пример разметки

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

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Действие
    <span class = "каретка" ></span> 
  </a>
  <ul class = "раскрывающееся меню" > 
    <!-- ссылки в выпадающем меню -->
  </ul>
</div>

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

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

Требуется JavaScript

Для работы раскрывающихся списков кнопок требуется плагин раскрывающегося списка Bootstrap .

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

Обзор и примеры

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

Размеры

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

<div class = "btn-group" > 
  ...
  <ul class = "раскрывающееся меню справа" > 
    <!-- ссылки в выпадающем меню -->
  </ul>
</div>

Пример разметки

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

<div class = "btn-group" > 
  <button class = "btn" > Действие </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "каретка" ></span> 
  </кнопка>
  <ul class = "раскрывающееся меню" > 
    <!-- ссылки в выпадающем меню -->
  </ul>
</div>

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

Выпадающие меню также можно переключать снизу вверх, добавляя один класс к непосредственному родителю .dropdown-menu. Он изменит направление .caretи переместит само меню так, чтобы оно перемещалось снизу вверх, а не сверху вниз.

<div class = "выпадение группы btn" > 
  <button class = "btn" > Выпадающий список </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "каретка" ></span> 
  </кнопка>
  <ul class = "раскрывающееся меню" > 
    <!-- ссылки в выпадающем меню -->
  </ul>
</div>

Мощный базовый класс

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

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

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

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

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

Основные вкладки

Возьмите ряд <ul>ссылок и добавьте .nav-tabs:

• Дом
• Профиль
• Сообщения

<ul class = "nav nav-tabs" > 
  <li класс = "активный" > 
    <a href = "#" > Главная страница </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

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

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

• Дом
• Профиль
• Сообщения

<ul class = "nav nav-таблетки" > 
  <li класс = "активный" > 
    <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 очень просты и требуют лишь небольшого дополнительного кода HTML и облегченного плагина jQuery.

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

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

• Дом
• Помощь
• Падать
  • Action
  • Another action
  • Something else here
  • Separated link
• Выпадающий
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li класс = "раскрывающийся список" > 
    <a class = "раскрывающийся список" 
       data-toggle = "раскрывающийся список"
       ссылка = "#" >
        Падать
        <b class = "вставка" ></b> 
      </a>
    <ul class = "раскрывающееся меню" > 
      <!-- ссылки -->
    </ul>
  </li>
</ul>

Таблетки с выпадающими списками

• Дом
• Помощь
• Падать
  • Action
  • Another action
  • Something else here
  • Separated link
• Выпадающий
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-таблетки" > 
  <li класс = "раскрывающийся список" > 
    <a class = "раскрывающийся список" 
       data-toggle = "раскрывающийся список"
       ссылка = "#" >
        Падать
        <b class = "вставка" ></b> 
      </a>
    <ul class = "раскрывающееся меню" > 
      <!-- ссылки -->
    </ul>
  </li>
</ul>

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

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

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

С иконками

Списки навигации также легко оборудовать значками. Добавьте правильный <i>тег с классом, и все готово.

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

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

<ul class = "nav-nav-list" > 
  ...
  <li класс = "разделитель" ></li> 
  ...
</ul>

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

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

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

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

Тот же пример, но с <i>тегами для иконок.

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

Что включено

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

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

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

Чтобы сделать вкладки доступными, оберните их .nav-tabsв другой div с классом .tabbable.

Пользовательский плагин jQuery

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

Получить javascript →

Вкладки внизу

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

<div class = "вкладки с вкладками внизу" > 
  <div класс = "контент вкладки" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Вкладки слева

Поменяйте местами класс, чтобы разместить вкладки слева.

<div class = "вкладки слева" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div класс = "контент вкладки" > 
    ...
  </div>
</div>

Вкладки справа

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

<div class = "вкладки с вкладками справа" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div класс = "контент вкладки" > 
    ...
  </div>
</div>

Навбар строительные леса

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

<div класс = "навигационная панель" > 
  <div class = "navbar-inner" > 
    <div класс = "контейнер" > 
      ...
    </div>
  </div>
</div>

Фиксированная панель навигации

Зафиксируйте панель навигации в верхней или нижней части области просмотра с помощью дополнительного класса в самом внешнем элементе div, .navbar.

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

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

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

Имя бренда

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

<a class = "бренд" href = "#" >  
  Название проекта
</a>

Формы на панели навигации

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

<form class = "navbar-form pull-left" > 
  < тип ввода = "текст" класс = "span2" >  
</форма>

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

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</форма>

Необязательный адаптивный вариант

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

<div класс = "навигационная панель" > 
  <div class = "navbar-inner" > 
    <div класс = "контейнер" > 
 
      <!-- .btn-navbar используется как переключатель для свернутого содержимого панели навигации -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "значок-бар" ></span> 
        <span class = "значок-бар" ></span> 
        <span class = "значок-бар" ></span> 
      </a>
 
      <!-- Убедитесь, что бренд не указан, если вы хотите, чтобы он отображался -->
      <a class = "brand" href = "#" > Название проекта </a>  
 
      <!-- Все, что вы хотите скрыть в разрешении 940 пикселей или меньше, поместите сюда -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form и т. д. -->
      </div>
 
    </div>
  </div>
</div>

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

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

<ул класс = "навигация" > 
  <li класс = "активный" > 
    <a href = "#" > Главная страница </a> 
  </li>
  <li><a href = "#" > Ссылка </a></li> 
  <li><a href = "#" > Ссылка </a></li> 
</ul>

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

<ул класс = "навигация" > 
  ...
  <li class = "вертикальный разделитель" ></li> 
  ...
</ul>

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

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

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

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

<ул класс = "навигация" > 
  <li класс = "раскрывающийся список" > 
    < ссылка = "#" 
          class = "раскрывающийся список"
          data-toggle = "раскрывающийся список" >
          Счет
          <b class = "вставка" ></b> 
    </a>
    <ul class = "раскрывающееся меню" > 
      ...
    </ul>
  </li>
</ul>

Получить javascript →

Текст в навигационной панели

Оберните строки текста в <p>тег для правильного интерлиньяжа и цвета.

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

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

Примеры

Показан один пример, поскольку он может отображаться на нескольких страницах.

• Дом

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

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

Разметка

HTML — это стандартный неупорядоченный список со ссылками.

<ul class = "хлебные крошки" > 
  <li>
    <a href = "#" > Главная </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Библиотека </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Данные </li> 
</ul>

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

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

Ссылки на страницы с отслеживанием состояния

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

Гибкое выравнивание

Добавьте любой из двух необязательных классов, чтобы изменить выравнивание ссылок на страницы: .pagination-centeredи .pagination-right.

Примеры

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

Разметка

Обернутый в <div>, нумерация страниц - это просто <ul>.

<div класс = "разбивка на страницы" > 
  <ул>
    <li><a href = "#" > Предыдущая </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 = "#" > Далее </a></li> 
  </ul>
</div>

О пейджере

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

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

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

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

По умолчанию пейджер центрирует ссылки.

• Предыдущий
• Следующий

<ul class = "пейджер" > 
  <li>
    <a href = "#" > Предыдущий </a> 
  </li>
  <li>
    <a href = "#" > Далее </a> 
  </li>
</ul>

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

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

• ← Старые
• Новые →

<ul class = "пейджер" > 
  <li класс = "предыдущий" > 
    <a href = "#" > ← Старые </a> 
  </li>
  <li класс = "следующий" > 
    <a href = "#" > Новое → </a> 
  </li>
</ul>

О

Значки — это небольшие простые компоненты для отображения какого-либо индикатора или подсчета. Их обычно можно найти в почтовых клиентах, таких как Mail.app, или в мобильных приложениях для push-уведомлений.

Доступные классы

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

Разметка

Оберните свой контент divпримерно так:

<div class = "герой-юнит" > 
  <h1> Заголовок </h1>
  <p> Слоган </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Учить больше
    </a>
  </p>
</div>

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

<div класс = "заголовок страницы" > 
  <h1> Пример заголовка страницы </h1>
</div>

Миниатюры по умолчанию

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

Широкие возможности настройки

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

• 

  Ярлык миниатюры

  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.

  Действие Действие

Зачем использовать миниатюры

Миниатюры (ранее .media-gridдо версии 1.4) отлично подходят для сетки фотографий или видео, результатов поиска изображений, розничных продуктов, портфолио и многого другого. Это могут быть ссылки или статический контент.

Простая и гибкая разметка

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

Использует размеры столбцов сетки

Наконец, компонент эскизов использу��т существующие классы системы сетки, такие как .span2или , .span3для управления размерами эскизов.

Разметка

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

<ul class = "миниатюры" > 
  <li класс = "span3" > 
    <a href = "#" класс = "миниатюра" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Для пользовательского HTML-контента в миниатюрах разметка немного меняется. Чтобы разрешить содержимое блочного уровня в любом месте, мы заменяем <a>его <div>следующим образом:

<ul class = "миниатюры" > 
  <li класс = "span3" > 
    <div класс = "миниатюра" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Ярлык миниатюры </h5>
      <p> Подпись к миниатюре прямо здесь... </p>
    </div>
  </li>
  ...
</ul>

Другие примеры

Исследуйте все свои варианты с различными классами сетки, доступными вам. Вы также можете смешивать и сочетать разные размеры.

Переписанный базовый класс

В Bootstrap 2 мы упростили базовый класс: .alertвместо .alert-message. Мы также уменьшили минимально необходимую разметку <p>— по умолчанию не требуется, только внешний <div>.

Одно предупреждающее сообщение

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

Отлично сочетается с javascript

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

Получить плагин »

Примеры оповещений

Оберните свое сообщение и необязательный значок закрытия в div с простым классом.

<div класс = "предупреждение" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <strong> Внимание! </strong> Лучше проверьте себя, вы не слишком хорошо выглядите.
</div>

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

<div class = "предупреждающий блок-предупреждение" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <h4 class = "alert-heading" > Внимание! </h4> 
  Лучше проверь себя, ты не...
</div>

Ошибка или опасность

<div class = "оповещение об ошибке" > 
  ...
</div>

Успех

<div class = "успех предупреждения" > 
  ...
</div>

Информация

<div class = "оповещение о предупреждении-информация" > 
  ...
</div>

Базовый

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

<div класс = "прогресс" > 
  <div класс = "бар" 
       стиль = " ширина : 60 ​​%; " ></div> 
</div>

Полосатый

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

<div class = "прогресс полосатый прогресс" > 
  <div класс = "бар" 
       стиль = " ширина : 20 %; " ></div> 
</div>

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

Берет полосатый пример и анимирует его (без IE).

<div class = "прогресс полосатый прогресс 
     активен" >
  <div класс = "бар" 
       стиль = " ширина : 40 %; " ></div> 
</div>

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

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

Полосатые бары

Как и в случае со сплошными цветами, у нас есть различные полосатые индикаторы выполнения.

Поведение

Индикаторы выполнения используют переходы CSS3, поэтому, если вы динамически настраиваете ширину с помощью javascript, она будет плавно изменяться.

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

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

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

В настоящее время Opera и IE не поддерживают анимацию.

Уэллс

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

<div класс = "хорошо" > 
  ...
</div>

Значок закрытия

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

×

<a class = "close" > × </a>