🌈 搜索
📅 最后修改于: 2021-05-25 17:55:29 🧑 作者: Mango
Bootstrap允许通过创建随设备缩放的本机比例，根据显示器或父元素的宽度创建响应式视频或幻灯片嵌入。使用自适应视频或幻灯片嵌入，可以根据屏幕大小或父容器元素自动缩放内容，这使UI更具响应性。
Bootstrap提供了一个名为embed- sensitive的类，用于创建响应式嵌入。此类分配给包含以下任何嵌入元素的父级：，<embed>，<video>和<object>。</p> <p>可选地，与<strong>embed-response</strong>类一起，可以将另外一个class <em>embed-response-item</em>与embedding元素一起使用。</p> <p> Bootstrap还提供了一些修饰符类来调整元素的长宽比：</p> <ul> <li>嵌入响应式16by9</li> <li> embed-active-21by9</li> <li>嵌入响应式1by1</li> <li>嵌入响应式4by3</li> </ul> <p>下面的程序说明了<strong>嵌入响应</strong>类： </p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-cpp" data-lang="C++"><code class="replace"><!DOCTYPE html> <html> <head> <!-- Link Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title> Responsive Video </title> </head> <body> <div class="embed-responsive embed-responsive-21by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/HMAwoMt3kek" allowfullscreen>