Skip to main content

Компоненты

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

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

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

Содержание

Расстояние

Назначьте 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.

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

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

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

Justified text.

No wrap text.

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

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

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

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

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

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

Lowercased text.

Uppercased text.

CapiTaliZed text.

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

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

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

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

Bold text.

Normal weight text.

Italic text.

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

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

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

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

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

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.
Cras mattis consectetur purus sit amet fermentum.
<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>

Общаясь со спецификой

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

Передать смысл для ассистивных технологий

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

Ширина

Легко сделать элемент так велик, как его родитель с помощью .w-100 класс-утилиту, которая устанавливает width: 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даптивный коммунальные услуги вместо.

Inline
Inline
Block

inline-block

Boot that strap!

inline-block

Strap that boot!
<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)

Float left on all viewport sizes

Float right on all viewport sizes

Don't float on all viewport sizes

Float left on viewports sized SM (small) or wider

Float left on viewports sized MD (medium) or wider

Float left on viewports sized LG (large) or wider

Float left on viewports sized XL (extra-large) or wider

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