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

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

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

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

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Работа со спецификой

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

Значек меню

Как и цвет текста контекстных классов, легко устанавливать фон элемента к любому контекстному классу. Якорные компоненты будут темнеть при наведении, как и текстовые классы.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

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

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

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

Значек меню

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

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

Быстрое выравнивание

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

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Не использовать в Navbars

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

Центровка содержимого блоков

Установите для элемента блочное отображения через display: block, и отражение по центру через margin. Такая установка является доступной в качестве класса и реализован.

<div class="center-block">...</div>
// Classes
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as mixins
.element {
  .center-block();
}

Clearfix

Отмените float на любом элементе с помощью класса .clearfix. Здесь используется the micro clearfix, предоставленный Nicolas Gallagher. Это также может применяться в качестве реализован.

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a Mixin
.element {
  .clearfix();
}

Отображения и скрытия содержимого

Чтобы скрыть или отобразить элемент, в том числе, для программ чтения с экрана, используйте классы .show и .hidden. Эти классы используют !important, чтобы избежать специфических конфликтов, подобно быстрому выравниванию. Они являются доступными для блочного уровня переключения. Они также могут использоваться в качестве mixins.

Класс .hide является доступным, но он не всегда обрабатывается программами чтения экранов и является устаревшимначиная с v3.0.1. Используйте вместо него класс .hidden или .sr-only.

Кроме этого, .invisible может использоваться для переключения лишь видимости элемента, то есть его display не изменен, и этот элемент все еще может влиять на работу документа.

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Считывания содержимого экрана

Скрывайте элементы для всех устройств кроме программ считывания с помощью класса .sr-only. Это является необходимостью для соблюдения передовой практики доступности. Этот класс также может использоваться в качестве реализован.

<a class="sr-only" href="#content">Skip to main content</a>
// Usage as a Mixin
.skip-navigation {
  .sr-only();
}

Замещение изображений

Применяйте класс .text-hide или реализован для замены текстового элемента контента фоновым изображением.

<h1 class="text-hide">Custom heading</h1>
// Usage as a Mixin
.heading {
  .text-hide();
}

 

Translate »