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>

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

相关推荐
漂流瓶jz5 分钟前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
achene_ql6 分钟前
select、poll、epoll 与 Reactor 模式
linux·服务器·网络·c++
SamHou022 分钟前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干33 分钟前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
黎相思41 分钟前
应用层自定义协议与序列化
运维·服务器·网络
开航母的李大1 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu1 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端1 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
coding随想1 小时前
JavaScript中的原始值包装类型:让基本类型也能“变身”对象
开发语言·javascript·ecmascript
zhangxingchao1 小时前
Flutter入门:Flutter开发必备Dart基础
前端