Составные части

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Получить javascript »

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

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

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

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

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

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

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

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Действие
  4. <span class = "каретка" ></span>
  5. </a>
  6. <ul class = "раскрывающееся меню" >
  7. <!-- ссылки в выпадающем меню -->
  8. </ul>
  9. </div>

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

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

Требуется JavaScript

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

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


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

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

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

Размеры

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

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

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

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > Действие </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "каретка" ></span>
  5. </кнопка>
  6. <ul class = "раскрывающееся меню" >
  7. <!-- ссылки в выпадающем меню -->
  8. </ul>
  9. </div>

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

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

  1. <div class = "выпадение группы btn" >
  2. <button class = "btn" > Выпадающий список </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "каретка" ></span>
  5. </кнопка>
  6. <ul class = "раскрывающееся меню" >
  7. <!-- ссылки в выпадающем меню -->
  8. </ul>
  9. </div>

Многостраничная пагинация

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

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

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

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

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

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

Примеры

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

Разметка

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

  1. <div класс = "разбивка на страницы" >
  2. <ул>
  3. <li><a href = "#" > Предыдущая </a></li>
  4. <li класс = "активный" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href="#" > 2 </a> < / li>
  8. <li><a href="#" > 3 </a> < / li>
  9. <li><a href="#" > 4 ​​</a> < / li>
  10. <li><a href = "#" > Далее </a></li>
  11. </ul>
  12. </div>

Пейджер Для быстрой предыдущей и следующей ссылок

О пейджере

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

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

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

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

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

  1. <ul class = "пейджер" >
  2. <li>
  3. <a href = "#" > Предыдущий </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Далее </a>
  7. </li>
  8. </ul>

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

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

  1. <ul class = "пейджер" >
  2. <li класс = "предыдущий" >
  3. <a href = "#" > Старые </a>
  4. </li>
  5. <li класс = "следующий" >
  6. <a href = "#" > Новое </a>
  7. </li>
  8. </ul>
Этикетки Разметка
По умолчанию <span class="label">Default</span>
Успех <span class="label label-success">Success</span>
Предупреждение <span class="label label-warning">Warning</span>
Важный <span class="label label-important">Important</span>
Информация <span class="label label-info">Info</span>
Обратный <span class="label label-inverse">Inverse</span>

О

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

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

Имя Пример Разметка
По умолчанию 1 <span class="badge">1</span>
Успех 2 <span class="badge badge-success">2</span>
Предупреждение 4 <span class="badge badge-warning">4</span>
Важный 6 <span class="badge badge-important">6</span>
Информация 8 <span class="badge badge-info">8</span>
Обратный 10 <span class="badge badge-inverse">10</span>

Герой

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

Разметка

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

  1. <div class = "герой-юнит" >
  2. <h1> Заголовок </h1>
  3. <p> Слоган </p>
  4. <р>
  5. <a class = "btn btn-primary btn-large" >
  6. Учить больше
  7. </a>
  8. </p>
  9. </div>

Привет, мир!

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

Учить больше

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

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

  1. <div класс = "заголовок страницы" >
  2. <h1> Пример заголовка страницы </h1>
  3. </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для управления размерами эскизов.

Разметка

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

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

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

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

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

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

Облегченные значения по умолчанию

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

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

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

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


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

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

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

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

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

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

Берегись! Устройства iOS требуют href="#"для отклонения предупреждений. Обязательно включите его и атрибут данных для значков закрытия привязки. В качестве альтернативы вы можете использовать <button>элемент с атрибутом данных, что мы решили сделать для наших документов. При использовании <button>вы должны включить, type="button"иначе ваши формы могут не отправляться.

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

Предупреждение!

Лучше проверь себя, ты выглядишь не слишком хорошо. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

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

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

О хват! Измените несколько вещей и попробуйте отправить еще раз.
  1. <div class = "оповещение об ошибке" >
  2. ...
  3. </div>

Успех

Отличная работа! Вы успешно прочитали это важное предупреждающее сообщение.
  1. <div class = "успех предупреждения" >
  2. ...
  3. </div>

Информация

Берегись! Это предупреждение требует вашего внимания, но это не очень важно.
  1. <div class = "оповещение о предупреждении-информация" >
  2. ...
  3. </div>

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

Базовый

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

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

Полосатый

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

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

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

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

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

Опции и поддержка браузера

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

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

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

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

Поведение

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

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

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

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

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

Уэллс

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

Смотри, я в колодце!
  1. <div класс = "хорошо" >
  2. ...
  3. </div>

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

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

  1. <button class = "закрыть" > × </кнопка>

Устройства iOS требуют href="#" для событий щелчка, если вы предпочитаете использовать привязку.

  1. <a class = "close" href = "#" > × </a>