Bootstrap 图像
在本教程中，您将学习如何设置图像样式，以及如何使用 Bootstrap 创建响应式图像和视频。
使用 Bootstrap 设置图像样式
图像在现代网页设计中非常常见。 因此，设置图像样式并将其正确放置在网页上对于改善用户体验非常重要。
使用 Bootstrap 内置类，您可以轻松地设置图像的样式，例如制作圆角或圆形图像，或赋予它们像缩略图一样的效果。
<img src="images/avatar.svg" class="rounded" alt="Rounded Image">
<img src="images/avatar.svg" class="rounded-circle" alt="Circular Image">
<img src="images/avatar.svg" class="img-thumbnail" alt="Thumbnail Image">— 上面示例的输出将如下所示：
创建响应式图像和视频
使用 Bootstrap，您也可以使图像响应。 只需将类 .img-fluid 添加到 <img> 标记。 此类主要将样式 max-width: 100%; 和 height: auto; 应用于图像，以便它很好地缩放以适合包含元素 — 如果图像的宽度大于包含元素本身。 查看以下示例以了解其工作原理：
<img src="images/kites.jpg" class="img-fluid" alt="Flying Kites">
<img src="images/sky.jpg" class="img-fluid" alt="Cloudy Sky">
<img src="images/balloons.jpg" class="img-fluid" alt="Hot Air Balloons">注意：在制作响应式布局时，请考虑让您的图片也响应式，否则如果图片宽度大于父元素的宽度，无论如何都会溢出并可能破坏您的网页布局。
您还可以使嵌入网页的 video 或幻灯片具有响应性，而不会影响其原始纵横比。 为此，将任何嵌入（如 <iframe>, 或 <video>）包装在 <div> 元素中，并应用类 .embed-responsive 和纵横比类（如 .embed-responsive-16by9）。
您可以选择在嵌入元素上应用显式后代类 .embed-responsive-item 以匹配其他属性的样式。 这是一个例子：
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>在上面的示例中，我们分别使用类 .embed-responsive-21by9, .embed-responsive-16by9, .embed-responsive-4by3, 和 .embed-responsive-1by1 创建了 4 个具有 4 个不同纵横比 (21:9, 16:9, 4:3, 和 1:1) 的响应式视频。
提示：图像的纵横比描述了其宽度和高度之间的比例关系。 两种常见的视频宽高比是 16:9 和 4:3。
图像的水平对齐
您可以使用 .float-left 或 .float-right 类在较大的框中左对齐或右对齐图像。 您还可以使用父容器上的 .text-left, .text-right, 和 .text-center 等文本对齐类来将内联图像水平左、右和居中对齐。
但是，要使块级图像居中对齐，您需要使用 .mx-auto 边距实用程序类。
让我们看看下面的例子，看看它是如何工作的：
<!-- 使用浮点类进行水平对齐 -->
<div class="box clearfix">
<img src="images/avatar.svg" class="float-left" alt="Sample Image">
<img src="images/avatar.svg" class="float-right" alt="Sample Image">
</div>
<!-- 使用文本对齐类左对齐 -->
<div class="box text-left">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<!-- 使用文本对齐类右对齐 -->
<div class="box text-right">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<!-- 使用文本对齐类居中对齐 -->
<div class="box text-center">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<!-- 使用自动边距使块级图像居中对齐 -->
<div class="box">
<img src="images/avatar.svg" class="d-block mx-auto" alt="Sample Image">
</div>