Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Bootstrap включает в себя десятки утилит—классы с одной-единственной целью. Они предназначены для уменьшения частоты высокой повторяемостью объявления в CSS пока позволяющ для быстрого и легкого развития.
display
(block
, inline
, inline-block
)Назначьте 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>
Легко перестроить текст с компонентами с текстом, классы выравнивания.
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>
Похожие на контекстной цвет оправы, легко установить фоновый элемент для любого контекстуального класса. Якорь компонентов будет темным на наведении, как и текст классы.
<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%
.
<img class="w-100" src="..." alt="Width = 100%">
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">×</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;
}
Легко очистить 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>