bootstrap学习27---带有响应式特性的嵌入式内容

响应式特性说明

根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放。

这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。如果你希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类。

超级提示： 不需要为 <iframe> 元素设置 frameborder=”0” 属性，因为我们已经替你这样做了！

示例

<!-- 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>

理解

就是如果使用上述样式嵌入iframe 等嵌入式组件 ，始终保持适应各种设备的尺寸不至于尺寸溢出

要么 16:9 embed-responsive-16by9
要么 4:3 embed-responsive-4by3