当前位置： 首页 > news >正文

Bootstrap 5学习教程，从入门到精通，Bootstrap 5 图像形状（Image Shapes）语法知识点及案例代码（8）

news 2025/6/9 5:36:19

Bootstrap 5 图像形状（Image Shapes）语法知识点及案例代码

Bootstrap 5 提供了多种工具类来轻松实现图像的不同形状，如圆角、圆形和椭圆形。

目录

  1. 基本图像类
  2. 圆角图像
  3. 圆形图像
  4. 椭圆形图像
  5. 响应式图像
  6. 案例代码

1. 基本图像类

1.1 .img-fluid

使图像在其父容器中自适应大小，保持其原始比例。

<img src="..." class="img-fluid" alt="Responsive image">

1.2 .img-thumbnail

为图像添加一个带有边框的缩略图效果。

<img src="..." class="img-thumbnail" alt="Thumbnail image">

2. 圆角图像

Bootstrap 5 使用 border-radius 类来控制图像的圆角效果。

2.1 .rounded

为图像添加标准的圆角。

<img src="..." class="rounded" alt="Rounded image">

2.2 .rounded-top

仅在图像的顶部添加圆角。

<img src="..." class="rounded-top" alt="Rounded top image">

2.3 .rounded-end

在图像的右侧（对于 LTR 语言）添加圆角。

<img src="..." class="rounded-end" alt="Rounded end image">

2.4 .rounded-bottom

仅在图像的底部添加圆角。

<img src="..." class="rounded-bottom" alt="Rounded bottom image">

2.5 .rounded-start

在图像的左侧（对于 LTR 语言）添加圆角。

<img src="..." class="rounded-start" alt="Rounded start image">

2.6 .rounded-circle

将图像裁剪为圆形。

<img src="..." class="rounded-circle" alt="Rounded circle image">

2.7 .rounded-0

移除图像的所有圆角。

<img src="..." class="rounded-0" alt="No rounded image">

3. 圆形图像

使用 .rounded-circle 类可以将图像裁剪为完美的圆形。

<img src="..." class="rounded-circle" alt="Circular image">

4. 椭圆形图像

Bootstrap 5 没有直接的椭圆形类，但可以通过自定义 CSS 实现。

4.1 使用自定义 CSS 实现椭圆形

<style>.img-ellipse {border-radius: 50% / 25%;}
</style><img src="..." class="img-fluid img-ellipse" alt="Ellipse image">

5. 响应式图像

5.1 .img-fluid

使图像在其父容器中自适应大小，保持其原始比例。

<img src="..." class="img-fluid" alt="Responsive image">

5.2 结合其他类

可以结合圆角、圆形等类，实现响应式且具有特定形状的图像。

<img src="..." class="img-fluid rounded-circle" alt="Responsive circular image">

6. 案例代码

以下是一个综合示例，展示如何使用 Bootstrap 5 的图像形状类。该示例包含：

  • 基本的响应式图像
  • 圆角图像
  • 圆形图像
  • 椭圆形图像（通过自定义 CSS）
  • 带有缩略图效果的图像
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Bootstrap 5 图像形状示例</title><!-- 引入 Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><style>/* 自定义椭圆形类 */.img-ellipse {border-radius: 50% / 25%;}</style>
</head>
<body><div class="container my-5"><h1 class="mb-4">Bootstrap 5 图像形状示例</h1><!-- 1. 基本响应式图像 --><div class="row mb-4"><div class="col-md-6"><h3>基本响应式图像</h3><img src="https://via.placeholder.com/300" class="img-fluid" alt="Responsive image"><p>使用 <code>.img-fluid</code> 类使图像在父容器中自适应大小。</p></div></div><!-- 2. 圆角图像 --><div class="row mb-4"><div class="col-md-6"><h3>圆角图像</h3><img src="https://via.placeholder.com/300" class="img-fluid rounded" alt="Rounded image"><p>使用 <code>.rounded</code> 类为图像添加标准圆角。</p></div><div class="col-md-6"><h3>仅顶部圆角</h3><img src="https://via.placeholder.com/300" class="img-fluid rounded-top" alt="Rounded top image"><p>使用 <code>.rounded-top</code> 类仅在图像顶部添加圆角。</p></div></div><!-- 3. 圆形图像 --><div class="row mb-4"><div class="col-md-6"><h3>圆形图像</h3><img src="https://via.placeholder.com/300" class="img-fluid rounded-circle" alt="Circular image"><p>使用 <code>.rounded-circle</code> 类将图像裁剪为圆形。</p></div><div class="col-md-6"><h3>椭圆形图像（自定义）</h3><img src="https://via.placeholder.com/300" class="img-fluid img-ellipse" alt="Ellipse image"><p>使用自定义 CSS 类 <code>.img-ellipse</code> 实现椭圆形图像。</p></div></div><!-- 4. 缩略图图像 --><div class="row mb-4"><div class="col-md-6"><h3>缩略图图像</h3><img src="https://via.placeholder.com/300" class="img-thumbnail" alt="Thumbnail image"><p>使用 <code>.img-thumbnail</code> 类为图像添加缩略图效果。</p></div><div class="col-md-6"><h3>组合使用</h3><img src="https://via.placeholder.com/300" class="img-fluid rounded-circle" alt="Combined image"><p>结合使用 <code>.img-fluid</code> 和 <code>.rounded-circle</code> 类，实现响应式且圆形的图像。</p></div></div><!-- 5. 移除圆角 --><div class="row"><div class="col-md-6"><h3>移除圆角</h3><img src="https://via.placeholder.com/300" class="img-fluid rounded-0" alt="No rounded image"><p>使用 <code>.rounded-0</code> 类移除图像的所有圆角。</p></div></div>
</div><!-- 引入 Bootstrap 5 JS（可选） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script></body>
</html>

代码说明

  1. 引入 Bootstrap 5 CSS

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    通过 CDN 引入 Bootstrap 5 的 CSS 文件，确保可以使用 Bootstrap 的所有功能。

  2. 自定义 CSS

    .img-ellipse {border-radius: 50% / 25%;
}

    使用自定义类 .img-ellipse 实现椭圆形图像。通过调整 border-radius 的比例，可以实现不同的椭圆形效果。

  3. 图像示例

    • 基本响应式图像

      <img src="https://via.placeholder.com/300" class="img-fluid" alt="Responsive image">

      使用 .img-fluid 类使图像自适应父容器大小。

    • 圆角图像

      <img src="https://via.placeholder.com/300" class="img-fluid rounded" alt="Rounded image">

      使用 .rounded 类为图像添加标准圆角。

    • 圆形图像

      <img src="https://via.placeholder.com/300" class="img-fluid rounded-circle" alt="Circular image">

      使用 .rounded-circle 类将图像裁剪为圆形。

    • 椭圆形图像

      <img src="https://via.placeholder.com/300" class="img-fluid img-ellipse" alt="Ellipse image">

      使用自定义类 .img-ellipse 实现椭圆形图像。

    • 缩略图图像

      <img src="https://via.placeholder.com/300" class="img-thumbnail" alt="Thumbnail image">

      使用 .img-thumbnail 类为图像添加缩略图效果。

    • 移除圆角

      <img src="https://via.placeholder.com/300" class="img-fluid rounded-0" alt="No rounded image">

      使用 .rounded-0 类移除图像的所有圆角。

  4. 组合使用

    <img src="https://via.placeholder.com/300" class="img-fluid rounded-circle" alt="Combined image">

    结合使用 .img-fluid 和 .rounded-circle 类，实现响应式且圆形的图像。

总结

通过上述语法知识点和案例代码，Bootstrap 5 初学者可以轻松实现各种图像形状效果。掌握这些工具类后，可以根据项目需求灵活应用，提升网页的视觉效果和用户体验。

http://www.xdnf.cn/news/932671.html

相关文章：

  • 基于 Transformer robert的情感分类任务实践总结之三——FGM
  • 从代码学习深度强化学习 - 多臂老虎机 PyTorch版
  • 【深度学习|学习笔记】自监督学习（Self-Supervised Learning, SSL）在遥感领域中的典型应用案例及其在小样本学习中的作用，附代码。
  • LeetCode --- 452周赛
  • 高保真组件库：按钮
  • GitHub 趋势日报 (2025年06月07日)
  • Langgraph实战-自省式RAG: Self-RAG
  • 材料力学速通
  • 北京工作周期7，8，9，10
  • 【react实战】如何实现监听窗口大小变化
  • 2025HNCTF - Crypto
  • webstorm 配置Eslint
  • Springboot 基于MessageSource配置国际化
  • C#调用Rust动态链接库DLL的案例
  • ​RBAC（基于角色的访问控制）权限管理详解
  • 学习日记-day24-6.8
  • 鸿蒙API自翻译
  • 70常用控件_QVBoxLayout的使用
  • 指针的使用——字符、字符串、字符串数组（char*）
  • C++进阶--C++11--智能指针（重点）
  • 12.7Swing控件6 JList
  • gitcode与github加速计划
  • LabVIEW Modbus 主站冗余控制
  • css | class中 ‘.‘ 和 ‘:‘ 的使用 | 如，何时用 .is-selected{ ... } 何时用 :hover{...}？
  • 3Ds Max 2026安装包+教程网盘下载与安装教程指南
  • [特殊字符] Whisper 模型介绍（OpenAI 语音识别系统）
  • WEB3全栈开发——面试专业技能点P1Node.js / Web3.js / Ethers.js
  • 【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）
  • 图神经网络(GNN)模型的基本原理
  • MySQL：CTE 通用表达式