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

Адаптивные вставки

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

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

Pro-Tip! Вам не нужно включать 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 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Адаптивное "плавание"

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

Также доступны два аналогичных не-адаптивных Sass миксинов (float-left and float-right).

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

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

// Related simple non-responsive mixins
.element {
  @include float-left;
}
.another-element {
  @include float-right;
}