Bootstrap 图片

Bootstrap 支持图片。 Bootstrap 中有三个类可用于向图像应用一些简单的样式。

以下类向图像添加样式

Bootstrap 图片圆角示例

类 .img-rounded 用于向图像添加圆角（IE8 不支持圆角）。

示例

Bootstrap 图片圆形示例

类 .img-circle 用于将图像塑造成圆形（IE8 不支持圆角）。

示例

Bootstrap 缩略图图像示例

类 .img-thumbnail 用于将图像塑造成缩略图。

示例

Bootstrap 响应式图片

响应式图片可以自动调整以适合屏幕的大小。 您可以通过向 <img> 标签添加 .img-responsive 类来创建响应式图像。 然后图像将很好地缩放到父元素。

.img-responsive 类应用于 display: block; 和 max-width: 100%; 和 height: auto; 到图像。

示例

Bootstrap 响应式视频/嵌入

在 Bootstrap 中，您还可以添加视频并在任何设备上正确缩放它们。 类 .embed-responsive-item 用于创建响应式视频。 类可以直接应用于 <iframe>、<embed>、<video> 和 <object> 元素。

让我们举个例子

在下面的示例中，我们向 <iframe> 标签添加 .embed-responsive-item 类以使视频具有响应性。 它可以根据父元素很好地缩放视频。

示例

Bootstrap4 图片

对齐图像用于使用 .float-right 类将图像浮动到右侧，或使用 .float-left 类将图像浮动到左侧。

示例