在本教程中，我们将学习有关Bootstrap中的响应式嵌入和孔的信息。

我们使用响应式嵌入，使浏览器可以根据其包含块的宽度来确定视频或者幻灯片的尺寸，并保持可在任何给定设备上正确缩放的必要比例。

响应式嵌入规则直接应用于 <iframe>，<embed>，<video>和<object>元素。

我们不必在您的<iframe>中包含frameborder =" 0"，因为Bootstrap将为我们覆盖它。

4：3宽高比的自适应嵌入

要创建4：3长宽比的自适应嵌入，我们使用.embed-sensitive-4by3类。

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item"
          src="https://www.youtube.com/embed/3OLTJlwyIqQ?rel=0"
          frameborder="0" 
          allowfullscreen></iframe>
</div>

16：9宽高比的自适应嵌入

为了创建16：9宽高比的自适应嵌入，我们使用.embed-sensitive-16by9类。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item"
          src="https://www.youtube.com/embed/6jJHw9YJnQY?rel=0"
          frameborder="0" 
          allowfullscreen></iframe>
</div>

响应式嵌入是在您的博客和上嵌入YouTube视频的理想选择，它会根据设备的不同而扩展。

well

我们使用孔使元素具有插图效果。
要创建一个well，请使用"well"类。

<div class="well">
  <p>This is a sample text inside a well.</p>
</div>

尺寸合适

我们可以使用.well-lg类创建一个大孔，并使用.well-sm类创建一个小孔。

<!-- large well -->
<div class="well well-lg">
  <p>Text inside well-lg</p>
</div>

<!-- small well -->
<div class="well well-sm">
  <p>Text inside well-sm</p>
</div>