前言
- 在之前的博客中，我们已经详细了解了 Bootstrap5 中诸多实用的组件和样式类，比如徽章与表格等，它们在网页布局和内容展示方面发挥着重要作用。
- 在这篇文章里，我们将深入探讨 Bootstrap5 中图像相关的样式类，看看如何利用它们打造出更美观、更符合网页设计需求的图片展示效果。
一、圆角图片
- 在网页设计中，有时我们希望图片呈现出圆角的效果，使页面看起来更加柔和、美观。Bootstrap5 中提供了
.rounded类来轻松实现这一需求。只需要在<img>标签上添加 .rounded 类，就能为图像添加圆角，示例代码如下：
我们以这张照片为例
使用方法
<img src="1.png" class="rounded">
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 最新的 Bootstrap5 核心 css 文件 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!--最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="">
<img src="../图片/山.jpg" class="rounded">
</div>
</body>
</html>
效果图
二、圆形图片
- 如果想要把椭圆形的图片设置成圆形展示，
.rounded-circle类就派上用场了。使用这个类可以将图片变成圆形，代码示例如下：
使用方法
<img src="1.png" class="rounded-circle">
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="">
<img src="../图片/山.jpg" class="rounded-circle">
</div>
</body>
</html>
三、缩略图
当需要展示图片缩略图且希望图片带有边框时，可以使用
.img-thumbnail类。它能为图片添加合适的边框，营造出缩略图的效果，示例如下：
<img src="1.png" class="img-thumbnail">
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="">
<img src="../图片/缩略图示例图.jpg" class="img-thumbnail">
</div>
</body>
</html>
四、对齐图像
对于图像在页面中的对齐方式，Bootstrap5 也提供了便捷的样式类。使用 .float-start 类可以将图像向左浮动，让其靠页面左侧排列；而使用 .float-end 类则能使图像向右浮动，靠页面右侧排列，示例代码如下：
- 我们通过两张不同图片展示左右对齐效果
- 向左浮动使用方法
<img src="1.png" class="float-start">
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="">
<img src="../图片/左对齐示例图.jpg" class="float-start">
</div>
</body>
</html>
- 向右浮动使用方法
<img src="2.png" class="float-end">
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="">
<img src="../图片/右对齐示例图.jpg" class="float-end">
</div>
</body>
</html>
五、图片居中
要让图片在页面中居中对齐，需要同时使用 .mx-auto（margin:auto） 和 .d-block（display:block） 这两个类，示例如下：
使用方法
<img src="1.png" class="mx-auto d-block">
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="">
<img src="../图片/山.jpg" class="mx-auto d-block">
</div>
</body>
</html>
六、响应式图片
- 由于图像有着各种各样的尺寸，为了让它们能根据屏幕的大小自动适应，Bootstrap5 提供了 .img-fluid 类。将这个类添加到
<img>标签中，它主要会把样式 max-width: 100%; 和 height: auto; 应用于图像，使得图像可以很好地缩放以适合包含元素，示例如下： - 使用方法
<img src="1.png" class="img-fluid">
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="">
<img src="../图片/响应式示例图.jpg" class="img-fluid">
</div>
</body>
</html>
| 非常感谢您的阅读，喜欢的话记得三连哦 |
