Source

Вградува

Создадете респонзивни вградувања на видео или слајдшоу врз основа на ширината на родителот со создавање на внатрешен сооднос што се зголемува на кој било уред.

За

Правилата директно се применуваат на <iframe>, <embed>, <video>и <object>елементи; опционално користете експлицитна класа на потомок .embed-responsive-itemкога сакате да го усогласите стилот за други атрибути.

Про-Совет! Вие не треба да го вклучите frameborder="0"во вашиот <iframe>s бидејќи ние го отфрламе тоа за вас.

Пример

Завиткајте го секое вметнување како <iframe>во родителски елемент со .embed-responsiveи сооднос. Не .embed-responsive-itemе строго потребно, но ние го охрабруваме.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://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>

Во рамките _variables.scssна , можете да ги промените соодносите што сакате да ги користите. Еве пример од $embed-responsive-aspect-ratiosсписокот:

$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (1 1)
) !default;