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

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

Примеры

Два основных варианта, а также два более специфических варианта.

Группа с одной кнопкой

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > Влево </button>
  3. <button class = "btn" > Средний </button>
  4. <button class = "btn" > Вправо </button>
  5. </div>

Несколько групп кнопок

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

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

Вертикальные группы кнопок

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

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

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

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

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

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

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

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

  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.


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

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

  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>

Размеры

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

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Действие </button>
  3. <button class = "btn btn-mini 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, отлично подходит для приложений и результатов поиска. Большой блок трудно не заметить, он легко масштабируется и обеспечивает большие области кликов.

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

Опции

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

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

  1. <div класс = "разбивка на страницы" >
  2. <ул>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

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

  1. <div класс = "разбивка на страницы" >
  2. <ул>
  3. <li class = "отключено" ><span> « </span></li>
  4. <li class = "active" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Размеры

Хотите большую или меньшую нумерацию страниц? Добавьте .pagination-large, .pagination-smallили .pagination-miniдля дополнительных размеров.

  1. <div class = "pagination pagination-large" >
  2. <ул>
  3. ...
  4. </ul>
  5. </div>
  6. <div класс = "разбивка на страницы" >
  7. <ул>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination-small" >
  12. <ул>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination-mini" >
  17. <ул>
  18. ...
  19. </ul>
  20. </div>

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

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

  1. <div class = "разбивка по страницам по центру" >
  2. ...
  3. </div>
  1. <div class = "разбивка на страницы справа" >
  2. ...
  3. </div>

Пейджер

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

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

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

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

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

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

  1. <ul class = "пейджер" >
  2. <li класс = "предыдущий" >
  3. <a href = "#" > Старые </a>
  4. </li>
  5. <li класс = "следующий" >
  6. <a href = "#" > Новое </a>
  7. </li>
  8. </ul>

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

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

  1. <ul class = "пейджер" >
  2. <li class = "предыдущий отключен" >
  3. <a href = "#" > Старые </a>
  4. </li>
  5. ...
  6. </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>

Значки

Имя Пример Разметка
По умолчанию 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>

Легко складывается

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

Герой

Легкий и гибкий компонент для демонстрации ключевого контента на вашем сайте. Он хорошо работает на сайтах с маркетингом и контентом.

Привет, мир!

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

Учить больше

  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>

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

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

  1. <div класс = "заголовок страницы" >
  2. <h1> Пример заголовка страницы <small> Подтекст для заголовка </small></h1>
  3. </div>

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

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

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

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

  • 300x200

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

    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.

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

  • 300x200

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

    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.

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

  • 300x200

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

    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 класс = "span4" >
  3. <a href = "#" класс = "миниатюра" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "миниатюры" >
  2. <li класс = "span4" >
  3. <div класс = "миниатюра" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Ярлык миниатюры </h3>
  6. <p> Заголовок миниатюры... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

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

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

Оповещение по умолчанию

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

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

Кнопки закрытия

Браузеры Mobile Safari и Mobile Opera, помимо data-dismiss="alert"атрибута, требуют href="#"для отклонения предупреждений при использовании <a>тега.

  1. <a href = "#" class = "close" data-dismiss = "alert" > × </a>

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

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </кнопка>

Отклонить оповещения через JavaScript

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


Опции

Для более длинных сообщений увеличьте отступ вверху и внизу оболочки оповещения, добавив .alert-block.

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

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

  1. <div class = "предупреждающий блок-предупреждение" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </кнопка>
  3. <h4> Внимание! </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 class = "bar" style = " width : 60 %; " ></div>
  3. </div>

Полосатый

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

  1. <div class = "прогресс полосатый прогресс" >
  2. <div class = "bar" style = " width : 20 %; " ></div>
  3. </div>

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

Добавьте .active, чтобы .progress-stripedанимировать полосы справа налево. Доступно не во всех версиях IE.

  1. <div class = "прогресс с чередованием прогресса активен" >
  2. <div class = "bar" style = " width : 40 %; " ></div>
  3. </div>

Сложены

Поместите несколько стержней в одно и то же .progress, чтобы сложить их.

  1. <div класс = "прогресс" >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

Опции

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

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

  1. <div class = "информация о прогрессе" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "прогресс прогресс-успех" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "предупреждение о прогрессе" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "прогресс прогресс-опасность" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

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

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

  1. <div class = "прогресс, информация о прогрессе, полосатый прогресс" >
  2. <div class = "bar" style = " width : 20 % " ></div>
  3. </div>
  4. <div class = "прогресс прогресс-успех прогресс-полосатый" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "прогресс, предупреждение о прогрессе, полосатый прогресс" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "прогресс прогресс-опасность прогресс-полосатый" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

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

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

Версии до Internet Explorer 10 и Opera 12 не поддерживают анимацию.

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

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

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

64x64

Заголовок СМИ

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Заголовок СМИ

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Заголовок СМИ

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1. <div класс = "медиа" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "медиа-тело" >
  6. <h4 class = "media-heading" > Заголовок мультимедиа </h4>
  7. ...
  8.  
  9. <!-- Вложенный медиа-объект -->
  10. <div класс = "медиа" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Список СМИ

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

  • 64x64

    Заголовок СМИ

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.

    64x64

    Заголовок вложенного носителя

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
    64x64

    Заголовок вложенного носителя

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
    64x64

    Заголовок вложенного носителя

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
  • 64x64

    Заголовок СМИ

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, преддверие в vulputate at, tempus viverra turpis.
  1. <ul class = "медиа-список" >
  2. <li класс = "медиа" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "медиа-тело" >
  7. <h4 class = "media-heading" > Заголовок мультимедиа </h4>
  8. ...
  9.  
  10. <!-- Вложенный медиа-объект -->
  11. <div класс = "медиа" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Уэллс

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

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

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

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

Смотри, я в колодце!
  1. <div class = "хорошо-большой" >
  2. ...
  3. </div>
Смотри, я в колодце!
  1. <div class = "ну-ну-маленький" >
  2. ...
  3. </div>

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

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

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

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

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

Вспомогательные классы

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

.pull-left

Плавающий элемент влево

  1. класс = "левый"
  1. . тянуть - влево {
  2. поплавок : слева ;
  3. }

.тянуть вправо

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

  1. класс = "тянуть вправо"
  1. . тянуть - вправо {
  2. поплавок : справа ;
  3. }

.приглушено

Измените цвет элемента на#999

  1. класс = "приглушенный"
  1. . отключен {
  2. цвет : #999;
  3. }

.clearfix

Очистить floatлюбой элемент

  1. класс = "clearfix"
  1. . яснофикс {
  2. * масштаб : 1 ;
  3. &: перед ,
  4. &: после {
  5. дисплей : таблица ;
  6. содержание : "" ;
  7. }
  8. &: после {
  9. ясно : оба ;
  10. }
  11. }