Bootstrap5 嵌入(Embeds)

半兽人 发表于: 2020-07-17   最后更新时间: 2020-07-17  

嵌入

通过创建可在任何设备上缩放的内在比率,根据父对象的宽度创建响应的视频或幻灯片嵌入。

关于

可以直接应用于<iframe><embed><video><object>元素;当你想为其他属性匹配样式时,可选择使用显式子类.embed-responsive-item

专业提示! 你不需要在你的<iframe>中设置frameborder="0",因为我们会在重启时覆盖它。

实例

将所有像<iframe>一样的嵌入内容包装在.embed-sensitive和长宽比的父元素中。.embed-active-item不是严格要求的,但我们鼓励这么用。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

在线运行

长宽比

可以使用modifier自定义长宽比。默认情况下,提供以下比率类:

<!-- 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: (
  "21by9": (
    x: 21,
    y: 9
  ),
  "16by9": (
    x: 16,
    y: 9
  ),
  "4by3": (
    x: 4,
    y: 3
  ),
  "1by1": (
    x: 1,
    y: 1
  )
);


您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: Bootstrap5 链接颜色(Colored links)
下一条: Bootstrap5 位置(Position)