Вградува

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

За

Правилата директно се применуваат на <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;