На этом уроке мы познакомимся со вспомогательными классами Twitter Bootstrap 3.

В Twitter Bootstrap 3 имеются вспомогательные акцентные классы, с помощью которых вы можете установить цвет некоторому фрагменту тексту. Кроме текста эти классы также можно применять к ссылкам, которые не только изменяют цвет данной ссылки, но и делают её темнее при поднесении к ней курсора.

Например:

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
<a class="text-muted" href="#">Пример ссылки</a> 
<a class="text-primary" href="#">Пример ссылки</a> 
<a class="text-success" href="#">Пример ссылки</a> 
<a class="text-info" href="#">Пример ссылки</a> 
<a class="text-warning" href="#">Пример ссылки</a> 
<a class="text-danger" href="#">Пример ссылки</a> 

Текст:

Lorem ipsum dolor sit amet. Officiis debitis aut reiciendis voluptatibus maiores alias consequatur aut fugit.

Sint et dolorum fuga sit voluptatem accusantium. Cum soluta nobis est et dolorum fuga obcaecati cupiditate.

Delectus, ut aut perferendis doloribus asperiores repellat.. Excepturi sint, obcaecati cupiditate non provident, similique sunt.

Optio, cumque nihil impedit, quo minus. Similique sunt in culpa. Nam libero tempore, cum soluta.

Magni dolores et voluptates repudiandae. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor repellendus quibusdam.

Repudiandae sint et aut fugit. Odit aut fugit, sed quia dolor sit, aspernatur aut rerum. Consectetur, adipisci velit, sed ut enim ipsam voluptatem, quia consequuntur magni.

Ссылки:

Примечание: Иногда акцентные классы могут не изменить цвет текста, который заключен в некоторый элемент в связи c влияния на данный элемент стилей других классов или селекторов. В большинстве случаев для решения подобной проблемы достаточно обернуть данный текст с помощью элемента span и добавить к нему акцентный класс.

Кроме классов, предназначенных для выделения текста цветом, в Twitter Bootstrap 3 есть ещё несколько классов, которые предназначены для установления цветного фона блочным элементам HTML.

Например:

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
<a class="bg-primary" href="#">Пример ссылки</a> 
<a class="bg-success" href="#">Пример ссылки</a> 
<a class="bg-info" href="#">Пример ссылки</a> 
<a class="bg-warning" href="#">Пример ссылки</a> 
<a class="bg-danger" href="#">Пример ссылки</a> 

Абзацы с различным фоном:

Lorem ipsum dolor sit amet. Officiis debitis aut reiciendis voluptatibus maiores alias consequatur aut fugit.

Sint et dolorum fuga sit voluptatem accusantium. Cum soluta nobis est et dolorum fuga obcaecati cupiditate.

Delectus, ut aut perferendis doloribus asperiores repellat.. Excepturi sint, obcaecati cupiditate non provident, similique sunt.

Optio, cumque nihil impedit, quo minus. Similique sunt in culpa. Nam libero tempore, cum soluta.

Magni dolores et voluptates repudiandae. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor repellendus quibusdam.

Ссылки:

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

Иконка "Close" применяется для закрытия модальных окон (modals) и сообщений (alerts).

<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Значок "Carets" указывает на наличие у элемента выпадающего списка. Кроме этого этот значок также указывает направление, в каком данный список будет выпадать (вверх или вниз).

<span class="caret"></span>

Данные классы предназначены для создания плавающих элементов, которые смещаются насколько возможно влево (класс .pull-left) или вправо (.pull-right). Кроме этого в данные классы добавлено правило !important, которое повышает приоритет свойства float и предотвращает данные классы Bootstrap от возможных проблем.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

Примечание: классы .pull-left и .pull-right нельзя использовать для выравнивания элементов в компоненте navbar. Если вы хотите выровнять некоторые элементы в навигационном меню, то используйте специальные предназначенные для этого служебные классы .navbar-left и .navbar-right. Более подробно познакомиться с данными классами можно в статье, посвященной рассмотрению компонента navbar.

Класс .center-block предназначен для центрирования блочных элементов. Т.е. если к элементу применить класс .center-block, то он делает данный элемент блочным (display:block) и центрирует его в горизонтальном направлении по центру (margin: 0 auto).

<div class="center-block">...</div>

Класс .clerfix предназначен для отмены обтекания элемента, к которому он добавлен, другими плавающими блоками.

<div class="clearfix">...</div>

Например, рассмотрим создания макета, состоящего из 4 блоков, каждый из которых должен занимать по 6 колонок Twitter Bootstrap. Причём блоки 3 и 4 должны располагаться с новой строки.

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

<div class="row">
  <div class="col-md-6">...</div>
  <div class="col-md-6">...</div>
  <div class="col-md-6">...</div>
  <div class="col-md-6">...</div>
</div>

Расположение блоков без использования блока div с классом clearfix

Чтобы расположить блоки в соответствии с заданием, нам необходимо, чтобы блоки 3 и 4 не обтекали блоки 1 и 2. Следовательно, нам необходимо расположить пустой блок div с классом .clearfix до блоков 3 и 4. Этот пустой блок с классом .clearfix запретит блокам расположенным после него, т.е. блокам 3 и 4 его обтекать.

<div class="row">
  <div class="col-md-6">...</div>
  <div class="col-md-6">...</div>
  <div class="clearfix"></div>
  <div class="col-md-6">...</div>
  <div class="col-md-6">...</div>
</div>

Расположение блоков при использования блока div с классом clearfix

Чтобы заставить элемент отобразиться или скрыться вы можете использовать классы .show (display: block !important) и .hidden (display: none !important; visibility: hidden !important). Эти классы так же как классы .pull-left и .pull-right имеют правило !important, которое повышает приоритет стилей данных классов перед стилями других классов или селекторов, которые могут эти стили вытеснить. Данные классы можно применять только к блочным элементам HTML.

Кроме того, в Bootstrap есть ещё один класс .invisible, который предназначен для отключения видимости элемента, к которому он применён. Но, в отличие от вышеперечисленных классов, данный класс не изменяет свойство display у элемента и, следовательно, он по-прежнему занимает место, хоть и становится не видимым.

<div class="show">...</div>
<div class="hidden">...</div>
<div class="invisible">...</div>

В Twitter Bootstrap 3 разработан специальный класс (.sr-only), с помощью которого вы можете настроить свой сайт под вспомогательные технологии (чтение голосом текста, картинок, меню и других элементов с экрана).

Класс .sr-only применяется для скрытия элемента на всех устройствах кроме технологий, осуществляющих чтение с экрана. Также класс .sr-only можно объединить с классом .sr-only-focusable, в этом случае элемент, к которому применены данные классы, будет отображаться на экране, но только в момент времени его нахождения в фокусе (например: при использовании клавиатуры).

<body>
  <!-- Ссылка для перехода к основному контенту сайта -->
  <a href="#content" class="sr-only sr-only-focusable">Перейти к основному содержанию страницы</a>
  ...
  <div class="container" id="content">
    <!-- Основной контент страницы -->
  </div>
</body>

В Twitter Bootstrap 3 разработан специальный класс .text-hide, который можно применить к элементу для того чтобы в нём скрыть текст. Например, это можно использовать, чтобы заменить скрытый текст фоновым изображением.

<h1 class="text-hide">Текст этого заголовка не видим</h1>
<p class="text-hide">Текст этого абзаца не видим</p>