Bootstrap 4参考手册
实用工具 | Utilities
内嵌 | Embeds
通过创建可在任何设备上缩放的固有比率,根据父级的宽度创建响应式视频或幻灯片嵌入。
关于
规则被直接施加到<iframe>
,<embed>
,<video>
和<object>
元件;.embed-responsive-item
如果要为其他属性的样式进行匹配,可以使用明确的后代类。
专家提示!你不需要包含frameborder="0"
在你的<iframe>
s中,因为我们会为你覆盖。
示例
将任何嵌入内容嵌入到具有纵横比<iframe>
的父元素中.embed-responsive
。.embed-responsive-item
并非严格要求,但鼓励使用。
打开getbootstrap.com上的示例
<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>
实用工具 | Utilities相关
Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
主页 | https://getbootstrap.com/ |
源码 | https://github.com/twbs/bootstrap |
版本 | 4 |
发布版本 | 4.0.0-beta.2 |