Bootstrap内嵌

在Bootstrap中，内嵌是一种创建响应式视频或幻灯片嵌入的方法。通过设置固有比率，可以根据父级的宽度进行缩放，从而实现在任何设备上的自适应显示。这种方式可以让我们更加灵活地设计网页布局，提高用户体验。

一、内嵌

在Bootstrap中，规则直接应用于<iframe>、<embed>、<video>和<object>元素。如果需要为其他属性的样式进行匹配，可以使用明确的后代类。需要注意的是，不需要在<iframe>中包含frameborder=”0″，因为Bootstrap会自动覆盖这个属性。

二、示例

将任何嵌入内容嵌入到具有纵横比<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>

还可以更改要使用的纵横比。下面是列表的示例：

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