Bootstrap系列之内嵌

---

创建响应式视频或幻灯片嵌入基于父的宽度通过创建内在的比例缩放任何设备。

1、简介

规则直接应用于<iframe>、<embed>、<video>和<object>元素；如果要匹配其他属性的样式，可以选择使用显式子类.embed- response -item。

Pro-Tip!当我们为您覆盖它时，您不需要在<iframe>中包含frameborder="0"。

2、示例

将任何嵌入(如<iframe>)用.embed-responsive和一个长宽比包装到父元素中。.embed- response -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>

3、纵横比

纵横比可以用修改器类定制。默认情况下，提供了一下比率类：

<!-- 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，您可以更改您想要使用的纵横比。下面是$ embedded - response -aspect-ratios列表的示例

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

---

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！