Служебные классы

Bootstrap включает в себя десятки утилит—классы с одной-единственной целью. Они предназначены для уменьшения частоты высокой повторяемостью объявления в CSS пока позволяющ для быстрого и легкого развития.

Содержание

• Содержание
• Расстояние
  • Горизонтальное центрирование
• Выравнивание текста
• Преобразования текста
• Вес шрифтом и курсивом
• Контекстная цветов и фонов
• Ширин
• CSS display (block, inline, inline-block)
• Закрыть иконка
• Адаптивный поплавки
• Clearfix
• Фиксированное позиционирование
• Невидимого содержимого
• Читатели экрана и клавиатуры
• Замена изображения
• Адаптивный встраивает

Расстояние

Назначьте margin или padding элемент или подмножество его сторон Сокращенное классов. Включает поддержку отдельных свойств, все свойства, и вертикальные и горизонтальные свойства. Все классы презентации глобальное значение по умолчанию 1rem.

Классы имеют имена в формате: {property}-{sides}-{size}

Где property одно из:

• m - для классов, набор margin
• p - для классов, набор padding

Где sides одно из:

• t - для классов, набор margin-top или padding-top
• b - для классов, набор margin-bottom или padding-bottom
• l - для классов, набор margin-left или padding-left
• r - для классов, набор margin-right или padding-right
• x - для классов, которые выделяют оба *-left и *-right
• y - для классов, которые выделяют оба *-top и *-bottom
• a - для классов, комплект margin или padding на все 4 стороны элемента

Где size одно из:

• 0 - для классов, которые устраняют margin или padding значение 0
• 1 - (по умолчанию) для классов, которые выделяют The margin или padding для $spacer-x или $spacer-y
• 2 - (по умолчанию) для классов, которые выделяют The margin или padding для $spacer-x * 1.5 или $spacer-y * 1.5
• 3 - (по умолчанию) для классов, которые выделяют The margin или padding для $spacer-x * 3 или $spacer-y * 3

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

Вот некоторые типичные примеры из этих классов:

.m-t-0 {
  margin-top: 0 !important;
}

.m-l-1 {
  margin-left: $spacer-x !important;
}

.p-x-2 {
  padding-left: ($spacer-x * 1.5) !important;
  padding-right: ($spacer-x * 1.5) !important;
}

.p-a-3 {
  padding: ($spacer-y * 3) ($spacer-x * 3) !important;
}

Горизонтальное центрирование

Кроме того, Bootstrap также включает в себя .m-x-auto класс для горизонтального центрирования фиксированной ширины содержимого блока с помощью установки горизонтальных отступов auto.

<div class="m-x-auto" style="width: 200px;">
  Centered element
</div>

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

Легко перестроить текст с компонентами с текстом, классы выравнивания.

<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

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

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Преобразования текста

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

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Обратите внимание, как text-capitalize меняет только первую букву каждого слова, оставляя в случае любого другого письма без изменений.

Жирный и курсивный текст

Быстро изменить жирность текста или наличие курсива.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-italic">Italic text.</p>

Контекстная цветов и фонов

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

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Контекстной классы также хорошо работать на анкеры с наведение и фокусом состояния.

<a href="#" class="text-muted">Muted link</a>
<a href="#" class="text-primary">Primary link</a>
<a href="#" class="text-success">Success link</a>
<a href="#" class="text-info">Info link</a>
<a href="#" class="text-warning">Warning link</a>
<a href="#" class="text-danger">Danger link</a>

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

<div class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
<div class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
<div class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
<div class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</div>
<div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
<div class="bg-inverse">Cras mattis consectetur purus sit amet fermentum.</div>

Ширина

Легко сделать элемент так велик, как его родитель с помощью .w-100 класс-утилиту, которая устанавливает width: 100%.

<img class="w-100" src="..." alt="Width = 100%">

CSS display (block, inline, inline-block)

Используйте .d-block, .d-inline или .d-inline-block, чтобы просто установить элемент display опция в block, inline, или inline-block (соответственно).

Чтобы сделать элемент display: none используйте наш aдаптивный коммунальные услуги вместо.

<div class="d-inline bg-success">Inline</div>
<div class="d-inline bg-success">Inline</div>

<span class="d-block bg-primary">Block</span>

<div class="d-inline-block bg-warning">
  <h3>inline-block</h3>
  Boot that strap!
</div>
<div class="d-inline-block bg-warning">
  <h3>inline-block</h3>
  Strap that boot!
</div>

Иконка "закрыть"

Использование универсального закрыть иконка для удаления Контента, как модальные глаголы и оповещения. Будьте уверены, чтобы включать в себя текст для чтения с экрана, как мы сделали с aria-label.

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

Адаптивное смещение

Эти классы поплавковый элемент влево или вправо, или отключить плавающий, в зависимости от текущего размера окна просмотра, используя CSS float собственность. !important включен, чтобы избежать проблем специфики. Они используют одинаковую ширину вьюпорта точки останова как блочная система.

Также доступны два одинаковых не-отзывчивых Sass миксина (pull-left и pull-right)

<div class="pull-xs-left">Float left on all viewport sizes</div><br>
<div class="pull-xs-right">Float right on all viewport sizes</div><br>
<div class="pull-xs-none">Don't float on all viewport sizes</div><br>

<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

// Связанных просто не-aдаптивной примеси
.element {
  @include pull-left;
}
.another-element {
  @include pull-right;
}

Clearfix

Легко очистить float путем добавления .clearfix к родительскому элементу. Использует микро clearfix популяризируемый Николас Галлахер. Также может быть использован в качестве mixin.

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

//Сам mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Использования в качестве mixin
.element {
  @include clearfix;
}

Фиксированное позиционирование

На .pos-f-t класс может быть легко использованы для установки элементов в верхней части области просмотра и сделать их шире области просмотра. Убедитесь, что вы понимаете последствия фиксированной установки элементов в проекте. вот как класс определен:

.pos-f-t {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $zindex-navbar-fixed;
}

Невидимого содержимого

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

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

// Класс
.invisible {
  visibility: hidden;
}

// Использования в качестве mixin
.element {
  @include invisible;
}

Читатели экрана и клавиатуры

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

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Использования в качестве mixin
.skip-navigation {
  @include sr-only;
  @include sr-only-focusable;
}

Замена изображения

Использовать .text-hide класс или mixin чтобы помочь заменить текстовое содержимое элемента с фоновым изображением.

<h1 class="text-hide">Custom heading</h1>

// Использования в качестве mixin
.heading {
  @include text-hide;
}

Адаптивная вставка

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

Правила применяются к <iframe>, <embed>, <video>, и <object> элементы; при необходимости использовать явную класс потомок .embed-responsive-item Если вы хотите, чтобы соответствовать стайлинг для других атрибутов.

Pro-Совет! Вы не должны включать frameborder="0" в <iframe>, как мы переопределить это для вас.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Пропорции могут быть настроены с классами модификатор.

<!-- 21:9 Соотношение сторон -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 Соотношение сторон -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 Соотношение сторон -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 Соотношение сторон -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>