Bootstrap-HTML(五)图像基础样式

Bootstrap-HTML(五)图像基础样式


前言

  • 在之前的博客中,我们已经详细了解了 Bootstrap5 中诸多实用的组件和样式类,比如徽章与表格等,它们在网页布局和内容展示方面发挥着重要作用。
  • 在这篇文章里,我们将深入探讨 Bootstrap5 中图像相关的样式类,看看如何利用它们打造出更美观、更符合网页设计需求的图片展示效果。

一、圆角图片

  • 在网页设计中,有时我们希望图片呈现出圆角的效果,使页面看起来更加柔和、美观。Bootstrap5 中提供了 .rounded 类来轻松实现这一需求。只需要在 <img> 标签上添加 .rounded 类,就能为图像添加圆角,示例代码如下:

我们以这张照片为例

使用方法

html 复制代码
<img src="1.png" class="rounded">
html 复制代码
<!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 类就派上用场了。使用这个类可以将图片变成圆形,代码示例如下:

使用方法

html 复制代码
<img src="1.png" class="rounded-circle">
html 复制代码
<!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 类。它能为图片添加合适的边框,营造出缩略图的效果,示例如下:

html 复制代码
<img src="1.png" class="img-thumbnail">
html 复制代码
<!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 类则能使图像向右浮动,靠页面右侧排列,示例代码如下:

  • 我们通过两张不同图片展示左右对齐效果
  • 向左浮动使用方法
html 复制代码
<img src="1.png" class="float-start">
html 复制代码
<!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>
  • 向右浮动使用方法
html 复制代码
<img src="2.png" class="float-end">
html 复制代码
<!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) 这两个类,示例如下:

  • 使用方法

html 复制代码
<img src="1.png" class="mx-auto d-block">
html 复制代码
<!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; 应用于图像,使得图像可以很好地缩放以适合包含元素,示例如下:
  • 使用方法
html 复制代码
<img src="1.png" class="img-fluid">
html 复制代码
<!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>

|--------------------|
| 非常感谢您的阅读,喜欢的话记得三连哦 |

相关推荐
运维行者_8 分钟前
Azure数据库监控:如何在2025年选择合适的工具
运维·服务器·网络·数据库·flask·自动化·azure
qq19257230271 小时前
网络协议传输层
网络·网络协议
芯盾时代1 小时前
安全大模型智驱网络和数据安全效能跃迁
网络·人工智能·安全·网络安全
dualven_in_csdn2 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友2 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程3 小时前
纯前端做图片压缩
开发语言·前端·javascript
应巅3 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
Jimmy4 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz4 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar4 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript