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>

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

相关推荐
Kagerou10 分钟前
vue3基础知识(结合TypeScript)
前端
市民中心的蟋蟀15 分钟前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
逆袭的小黄鸭20 分钟前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试
carterwu31 分钟前
各个大厂是怎么实现组件库和相应扩展的?基础组件、区块、页面
前端
Face32 分钟前
promise 规范应用
前端
Mintopia32 分钟前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face34 分钟前
事件循环
前端·javascript
ONE_Gua35 分钟前
chromium魔改——navigator.webdriver 检测
前端·后端·爬虫
CodePencil36 分钟前
CSS专题之盒模型
前端·css
谦谦橘子36 分钟前
服务端渲染原理解析
前端·javascript·react.js