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

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

Вы также можете комбинировать наборы <div class="btn-group">в <div class="btn-toolbar">более сложные проекты.

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

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

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

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

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

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

Получить javascript »

Берегись

CSS для групп кнопок находится в отдельном файле button-groups.less.

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

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

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

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

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

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

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

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

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

Почему вкладки и таблетки

Вкладки и пилюли в Bootstrap построены на основе одного <ul>и того же ядра HTML — списка ссылок. Переключайтесь между вкладками или таблетками только с классом.

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

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

Возьмите ряд <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.

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

• Дом
• Профиль
• Падать
  • Действие
  • Другое действие
  • Что-то еще здесь
  • Отдельная ссылка

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

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

• Дом
• Профиль
• Падать
  • Действие
  • Другое действие
  • Что-то еще здесь
  • Отдельная ссылка

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

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

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

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

С иконками

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

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

Возьмите список ссылок и добавьте 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 класс = "навигационная панель" > 
  < класс деления =  "navbar-inner" >
    < класс деления =  "контейнер" >
      ...
    </div>
  </div>
</div>

Чтобы панель навигации была зафиксирована в верхней части области просмотра, добавьте .navbar-fixed-topк самому внешнему элементу div .navbar. В вашем CSS вам также нужно будет учитывать перекрытие, которое он вызывает, добавляя padding-top: 40px;к вашему<body> .

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

Имя бренда

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

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

Форма поиска

Формы поиска получают пользовательские стили на панели навигации с .navbar-searchклассом. Включите .pull-leftили .pull-rightна , formчтобы выровнять его.

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

Добавление раскрывающихся списков

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

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

Получить javascript →

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

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

Примеры

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

• Дом

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

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

Разметка

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

<ul class = "хлебные крошки" > 
  <li>
    <a href = "#" > Главная </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Библиотека </a> <span class = "divider" > / </span>   
  </li>
  <li класс = "активный" > 
    <a href = "#" > Данные </a> 
  </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>

О пейджере

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

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

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

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

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

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

По умолчанию миниатюры 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 = "закрыть" > × </a> 
  <strong> Внимание! </strong> Лучше проверьте себя, вы не слишком хорошо выглядите.
</div>

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

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

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

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

Успех

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

Информация

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

Базовый

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

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

Полосатый

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

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

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

Берет полосатый пример и анимирует его.

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

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

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

• .progress-info
• .progress-success
• .progress-danger

Кроме того, вы можете настроить файлы LESS и выбрать свои собственные цвета и размеры.

Поведение

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

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

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

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

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

Уэллс

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

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

Значки

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

<span class = "значок" > 3 </div> 

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

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

×

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