Компоненты

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

Примеры

Две основные опции вместе с двумя специфическими разновидностями.

Отдельная группа кнопок

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

  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 class="btn-toolbar">
  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 для точного отображения.

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

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

  1. <div class="btn-group">
  2. <a class="btn dropdown-toggle" Переключение данных="dropdown" href="#">
  3. Действие
  4. <span class="caret"></span>
  5. </a>
  6. <ul class="dropdown-menu">
  7. <!-- dropdown menu links -->
  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="caret"></span>
  5. </button>
  6. <ul class="dropdown-menu">
  7. <!-- dropdown menu links -->
  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="caret"></span>
  5. </button>
  6. <ul class="dropdown-menu">
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

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

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

  1. <div class="btn-group dropup">
  2. <button class="btn">Выпадающие вверх списки</button>
  3. <button class="btn dropdown-toggle" data-toggle="dropdown">
  4. <span class="caret"></span>
  5. </button>
  6. <ul class="dropdown-menu">
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Стандартное разбиение на страницы

Простое разбиение на страницы, представленное Rdio, идеально подходит для приложениц и результатов поиска. Блок большого размера трудно не заметить, в нем легко изменить масштаб. В блоке имеются большие области для нажатия.

  1. <div class="pagination">
  2. <ul>
  3. <li><a href="#">Prev</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="#">Next</a></li>
  9. </ul>
  10. </div>

Опции

Неактивные и активные состояния

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

  1. <div class="pagination">
  2. <ul>
  3. <li class="disabled"><a href="#">Prev</a></li>
  4. <li class="active"><a href="#">1</a></li>
  5. ...
  6. </ul>
  7. </div>

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

  1. <div class="pagination">
  2. <ul>
  3. <li class="disabled"><span>Prev</span></li>
  4. <li class="active"><span>1</span></li>
  5. ...
  6. </ul>
  7. </div>

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

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

  1. <div class="pagination pagination-centered">
  2. ...
  3. </div>

  1. <div class="pagination pagination-right">
  2. ...
  3. </div>

Страницы

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

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

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

  1. <ul class="pager">
  2. <li><a href="#">Previous</a></li>
  3. <li><a href="#">Next</a></li>
  4. </ul>

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

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

  1. <ul class="pager">
  2. <li class="previous">
  3. <a href="#">&larr; Older</a>
  4. </li>
  5. <li class="next">
  6. <a href="#">Newer &rarr;</a>
  7. </li>
  8. </ul>

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

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

  1. <ul class="pager">
  2. <li class="previous disabled">
  3. <a href="#">&larr; Older</a>
  4. </li>
  5. ...
  6. </ul>

Labels

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

Элемент Hero

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

Привет, мир!

Это простой элемент hero, основное назначение которого — выделение самой главной и важной информации.

Узнать больше

  1. <div class="hero-unit">
  2. <h1>Заголовок</h1>
  3. <p>Tagline</p>
  4. <p>
  5. <a class="btn btn-primary btn-large">
  6. Узнать больше
  7. </a>
  8. </p>
  9. </div>

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

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

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

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

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

    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.

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

h3>Для чего используют миниатюры

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

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

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

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

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

Разметка

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

  1. <ul class="thumbnails">
  2. <li class="span4">
  3. <a href="#" class="thumbnail">
  4. <img src="http://placehold.it/300x200" alt="">
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class="thumbnails">
  2. <li class="span4">
  3. <div class="thumbnail">
  4. <img src="http://placehold.it/300x200" alt="">
  5. <h3>Ярлык миниатюры</h3>
  6. <p>Заголовок миниатюры...</p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

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

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











  • Сообщение по умолчанию

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


    Предупреждение! Посмотрите на себя — вы не очень-то хорошо выглядите.

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

    Кнопки отмены

    Мобильные браузеры Safari и 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">?</button>

    Отмена данных посредством javascript

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


    Опции

    Для длинного сообщения используйте элемент с классом .alert-block.

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

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

    1. <div class="alert alert-block">
    2. <button type="button" class="close" data-dismiss="alert">?</button>
    3. <h4>Предупреждение!</h4>
    4. Посмотрите на себя - вы не очень-то...
    5. </div>

    Варианты контекста

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

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


    Какой ужас! Измените кое-какие детали и попробуйте снова.

    1. <div class="alert alert-error">
    2. ...
    3. </div>

    Успешное действие


    Хорошо сделано! Вы успешно прочитали это сообщение.

    1. <div class="alert alert-success">
    2. ...
    3. </div>

    Информация


    Внимание! Это сообщение требует вашего внимания, но оно не такое уж слишком важное.

    1. <div class="alert alert-info">
    2. ...
    3. </div>

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

    Основной

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

    1. <div class="progress">
    2. <div class="bar" style="width: 60%;"></div>
    3. </div>

    Полосы

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

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

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

    Добавьте .active в .progress-striped для анимированного движения полос справа налево. Не поддерживается ни в одной версии IE.

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

    Вертикальный

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

    1. <div class="progress">
    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="progress progress-info">
    2. <div class="bar" style="width: 20%"></div>
    3. </div>
    4. <div class="progress progress-success">
    5. <div class="bar" style="width: 40%"></div>
    6. </div>
    7. <div class="progress progress-warning">
    8. <div class="bar" style="width: 60%"></div>
    9. </div>
    10. <div class="progress progress-danger">
    11. <div class="bar" style="width: 80%"></div>
    12. </div>

    Полосатые индикаторы

    Как и одноцветных, полосатых индикаторов процесса тоже имеется несколько.

    1. <div class="progress progress-info progress-striped">
    2. <div class="bar" style="width: 20%"></div>
    3. </div>
    4. <div class="progress progress-success progress-striped">
    5. <div class="bar" style="width: 40%"></div>
    6. </div>
    7. <div class="progress progress-warning progress-striped">
    8. <div class="bar" style="width: 60%"></div>
    9. </div>
    10. <div class="progress progress-danger progress-striped">
    11. <div class="bar" style="width: 80%"></div>
    12. </div>

    Совместимость с браузерами

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

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

    Классы .well

    Используйте классы .well для выделения текста в отдельную ячейку.

    Смотрите, я в ячейке!

    1. <div class="well">
    2. ...
    3. </div>

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

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

    Смотрите, я в ячейке!

    1. <div class="well well-large">
    2. ...
    3. </div>
    Смотрите, я в ячейке!

    1. <div class="well well-small">
    2. ...
    3. </div>

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

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

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

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

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

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

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

    Класс .pull-left

    Обтекание элемента слева

    1. class="pull-left"
    1. .pull-left {
    2. float: left;
    3. }

    Класс .pull-right

    Обтекание элемента справа

    1. class="pull-right"
    1. .pull-right {
    2. float: right;
    3. }

    Класс .muted

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

    1. class="muted"
    1. .muted {
    2. color: #999;
    3. }

    Класс .clearfix

    Отменяет обтекание любого элемента

    1. class="clearfix"
    1. .clearfix {
    2. *zoom: 1;
    3. &:before,
    4. &:after {
    5. display: table;
    6. content: "";
    7. }
    8. &:after {
    9. clear: both;
    10. }
    11. }

    Scroll to top