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>

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

相关推荐
全职计算机毕业设计16 分钟前
基于Java Web的校园失物招领平台设计与实现
java·开发语言·前端
你的人类朋友33 分钟前
✍️Node.js CMS框架概述:Directus与Strapi详解
javascript·后端·node.js
啊~哈41 分钟前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
xiaogg36781 小时前
vue+elementui 网站首页顶部菜单上下布局
javascript·vue.js·elementui
weixin_527550401 小时前
初级程序员入门指南
javascript·python·算法
小小小小宇1 小时前
前端小tips
前端
小小小小宇1 小时前
二维数组按顺时针螺旋顺序
前端
钡铼技术ARM工业边缘计算机1 小时前
千元级PLC平台支持梯形图+Python双开发
javascript
是小满满满满吗2 小时前
传输层:udp与tcp协议
linux·服务器·网络
安木夕2 小时前
C#-Visual Studio宇宙第一IDE使用实践
前端·c#·.net