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

Bootstrap-HTML（五）图像基础样式

news 2026/4/2 5:30:54

Bootstrap-HTML（五）图像基础样式

  • 前言
  • 一、圆角图片
  • 二、圆形图片
  • 三、缩略图
  • 四、对齐图像
  • 五、图片居中
  • 六、响应式图片

前言

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

一、圆角图片

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

我们以这张照片为例

在这里插入图片描述

使用方法

<img src="1.png" class="rounded">

<!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 类就派上用场了。使用这个类可以将图片变成圆形，代码示例如下：

使用方法

<img src="1.png" class="rounded-circle">

<!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 类。它能为图片添加合适的边框，营造出缩略图的效果，示例如下：

<img src="1.png" class="img-thumbnail">

<!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 类则能使图像向右浮动，靠页面右侧排列，示例代码如下：

  • 我们通过两张不同图片展示左右对齐效果
  • 向左浮动使用方法
<img src="1.png" class="float-start">

<!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>

在这里插入图片描述

  • 向右浮动使用方法
<img src="2.png" class="float-end">

<!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） 这两个类，示例如下：

  • 使用方法

<img src="1.png" class="mx-auto d-block">

<!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; 应用于图像，使得图像可以很好地缩放以适合包含元素，示例如下：
  • 使用方法
<img src="1.png" class="img-fluid">

<!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>
非常感谢您的阅读，喜欢的话记得三连哦

在这里插入图片描述

相关文章：

Bootstrap-HTML（五）图像基础样式

Bootstrap-HTML&#xff08;五&#xff09;图像基础样式 前言一、圆角图片二、圆形图片三、缩略图四、对齐图像五、图片居中六、响应式图片 前言 在之前的博客中&#xff0c;我们已经详细了解了 Bootstrap5 中诸多实用的组件和样式类&#xff0c;比如徽章与表格等&#xff0c;…...

编程日记 2024/12/18 14:04:02

bain.js（十二）：RNN神经网络实战教程 - 音乐乐谱生成 -人人都是作曲家~

系列文章&#xff1a; &#xff08;一&#xff09;&#xff1a;可以在浏览器运行的、默认GPU加速的神经网络库概要介绍&#xff08;二&#xff09;&#xff1a;项目集成方式详解&#xff08;三&#xff09;&#xff1a;手把手教你配置和训练神经网络&#xff08;四&#xff09…...

编程日记 2024/12/18 14:02:57

Endnote | 查看文献所在分组

软件版本&#xff1a;Endnote X8 第一种方式&#xff1a; 在文献上右键——记录摘要&#xff0c;即可在弹出页面上看到自定义和智能组的分组情况。 第二种方式&#xff1a; 在菜单栏点击文献——记录摘要&#xff0c;也可以查看分组情况。 注&#xff1a; 新版本的endnote软件…...

编程日记 2024/12/18 13:59:53

DateRangePickerDialog组件的用法

文章目录 概念介绍使用方法示例代码我们在上一章回中介绍了DatePickerDialog Widget相关的内容,本章回中将介绍DateRangePickerDialog Widget.闲话休提，让我们一起Talk Flutter吧。 概念介绍 我们在这里说的DateRangePickerDialog是一种弹出窗口，只不过窗口的内容固定显示为…...

编程日记 2024/12/18 13:58:52

数据库合并操作：深入理解 MERGE INTO 语句

在数据管理和操作中&#xff0c;我们常常面临着将源数据合并到目标表中的需求。无论是对现有记录进行更新&#xff0c;还是对缺失的记录进行插入&#xff0c;甚至有时候需要删除不再符合条件的记录&#xff0c;这些操作通常都需要多条 SQL 语句来完成。然而&#xff0c;SQL 中有…...

编程日记 2024/12/18 13:55:48

联发科MTK8788_MT8788安卓核心板安兔兔跑分_安卓主板方案商

MT8788安卓核心板具有集成的蓝牙、fm、WLAN和gps模块&#xff0c;是一个高度集成的基带平台&#xff0c;包括调制解调器和应用处理子系统&#xff0c;启用LTE/LTE-A和C2K智能设备应用程序。该芯片集成了工作在2.0GHz的ARM Cortex-A73、最高可达2.0GHz的ARM Cortex-A53和功能强大…...

编程日记 2024/12/18 13:53:45

计算机网络技术基础：6.数据传输方式

数据传输是指利用信号把数据从发送端传送到接收端的过程&#xff0c;通常可以从多个不同的角度对数据传输方式进行描述。 一、并行传输和串行传输 数据在信道上传输时&#xff0c;按照使用信道的多少可以分为串行传输和并行传输两种方式。 1.串行传输 在计算机中&#xff0c;…...

编程日记 2024/12/18 13:46:38

免费开源了一个图床工具 github-spring-boot-starter

文章目录 第一步&#xff0c;新建一个SpringBoot项目第二步&#xff0c;在pom文件里面引入jar包第三步&#xff0c;配置你的github信息github.authorization1、进入github官网&#xff0c;登录账号&#xff0c;点击头像&#xff0c;选择setting2、选择[Developer Settings](htt…...

编程日记 2024/12/18 13:45:37

Mysql之YUM安装时GPG 密钥报错问题处理

一、背景说明 使用YUM安装mysql5.7的时候报错&#xff0c;报错信息提示未安装公钥。博主查看/etc/yum.repos.d/mysql-community.repo配置文件中关于公钥的配置&#xff0c;确实启用了公钥验证&#xff0c;博主再排查过程中还是走了一些弯路&#xff0c;最终顺利解决了&#xff…...

编程日记 2024/12/18 13:43:34

Hw亮度省电

1. 亮度控制策略 /decompile-hw/decompile/app/HwPowerGenieEngine3/src/main/res/xml/backlight_policy.xml <?xml version"1.0" encoding"utf-8"?> 2 <backlight_policy xmlns:android"http://schemas.android.com/apk/res/android&qu…...

编程日记 2024/12/18 13:42:33

【信息系统项目管理师-论文真题】2015下半年论文详解

更多内容请见： 备考信息系统项目管理师-专栏介绍和目录 文章目录 论题一：大项目或多项目的成本管理解题思路写作要点论题二：项目的采购管理解题思路写作要点论题一：大项目或多项目的成本管理 随着移动互联网、物联网、云计算、大数据等新一代信息技术的广泛应用，我国目前…...

编程日记 2024/12/18 13:39:31

django的model中定义【记录修改次数】的这个字段该用什么类型

django中定义对于某个文章应用的数据库中使用到记录修改次数的这个字段 如models.py中的配置 from django.db import models from django.utils import timezone from django.contrib.postgres.fields import ArrayFieldclass Article(models.Model):# Titlestitle_cn model…...

编程日记 2024/12/18 13:38:30

windows openssl编译x64版libssl.lib，编译x64版本libcurl.lib，支持https，vs2015编译器

不要纠结&#xff0c;直接选择用perl编译&#xff01; 告诫想要用弄成vs编译版的&#xff0c;暂时先别给自己增加麻烦 告诫&#xff0c;以下执行的每一步&#xff0c;都不要纠结 先安装环境 nasm 64位版本 https://www.nasm.us/pub/nasm/releasebuilds/2.16.01/win64/nasm-…...

编程日记 2024/12/18 13:36:27

搭建 Elasticsearch 集群：完整教程

本文将详细介绍如何在 Linux 环境下搭建一个 Elasticsearch 集群&#xff0c;涵盖环境准备、配置优化、服务启动等多个环节。 一、环境准备 创建安装目录 mkdir /es cd /es解压 Elasticsearch 安装包 tar -xzf elasticsearch-7.10.1-linux-x86_64.tar.gz -C /es配置环境变量 编…...

编程日记 2024/12/18 13:34:24

如何实现序列化和反序列化？如何处理对象的生命周期管理？

序列化和反序列化 实现思路&#xff1a; 序列化&#xff1a;将对象的状态信息转换为可以存储或传输的格式&#xff0c;通常是字节流。 确定要序列化的对象的数据成员。将这些数据成员按照一定的规则&#xff08;如二进制、文本、JSON、XML 等&#xff09;编码为字节序列。将生…...

编程日记 2024/12/18 13:33:22

WPF+MVVM案例实战与特效（三十八）- 封装一个自定义的数字滚动显示控件

文章目录 1、运行效果2、案例实现1、功能设计2、页面布局3、控件使用4、运行效果3、拓展：多数字自定义控件1、控件应用4、总结1、运行效果 在Windows Presentation Foundation (WPF)应用程序中，自定义控件允许开发者创建具有特定功能和外观的独特UI元素。本博客将介绍一个名…...

编程日记 2024/12/18 13:32:21

docker安装Redis、docker使用Redis、docker离线安装redis、Redis离线安装

服务器到期了&#xff0c;换了一个新的环境要重搭&#xff0c;就记录一下好了&#xff1a; -----docker在线安装Redis 拉取 Redis 镜像 docker pull redis:6.2 运行 Redis 容器 docker run --name redis -d redis docker run --name redis -d redis:6.2 映射端口 docker run -…...

编程日记 2024/12/18 13:31:20

单目动态新视角合成

目录 单目动态新视角合成 Generative Camera Dolly:Extreme Monocular Dynamic Novel View Synthesis 单目动态新视角合成 Generative Camera Dolly: Extreme Monocular Dynamic Novel View Synthesis Generative Camera Dolly: Extreme Monocular Dynamic Novel View Synth…...

编程日记 2024/12/18 13:29:18

STM32--IO引脚复用

IO引脚复用...

编程日记 2024/12/18 13:27:15

Python字符串及正则表达式（十）：字符串常用操作、字符串编码转换

前言&#xff1a;在编程的世界里&#xff0c;字符串无处不在。它们是构建用户界面、存储数据、进行通信的基础元素。无论是财务系统的总账报表、电子游戏的比赛结果&#xff0c;还是火车站的列车时刻表&#xff0c;这些信息最终都需要以文本的形式呈现给用户。这些文本的背后&a…...

编程日记 2024/12/18 13:22:11

Dash.js终极指南：5分钟掌握专业级流媒体播放技术

Dash.js终极指南&#xff1a;5分钟掌握专业级流媒体播放技术 【免费下载链接】dash.js A reference client implementation for the playback of MPEG DASH via Javascript and compliant browsers. 项目地址: https://gitcode.com/gh_mirrors/da/dash.js Dash.js是一个…...

编程新知 2026/4/2 4:59:37

【STM32】幻尔16路舵机控制板串口协议解析与实战编程

1. 幻尔16路舵机控制板基础认知 第一次拿到幻尔16路舵机控制板时&#xff0c;我盯着密密麻麻的接口有点发懵。这块巴掌大的绿色电路板&#xff0c;居然能同时控制16个舵机&#xff1f;经过半年多的项目实战&#xff0c;我可以负责任地说&#xff1a;这绝对是多舵机项目的开发神…...

编程新知 2026/4/2 4:13:12

2026年Java程序员冲大厂有何经验套路？

前几天&#xff0c;跟个老朋友吃饭&#xff0c;他最近想跳槽去大厂&#xff0c;觉得压力很大&#xff0c;问我能不能分享些所谓的经验套路。每次有这类请求&#xff0c;都觉得有些有趣&#xff0c;不知道你发现没有大家身边真的有很多人不知道怎么面试&#xff0c;也不知道怎么…...

编程新知 2026/4/2 3:59:07

漫画脸描述生成企业级安全方案：私有化部署保障原创角色数据不出域

漫画脸描述生成企业级安全方案&#xff1a;私有化部署保障原创角色数据不出域 1. 项目背景与核心价值 在二次元创作领域&#xff0c;角色设计是核心创作环节。传统的角色设计需要专业画师投入大量时间&#xff0c;从概念设计到细节刻画都需要反复修改。随着AI技术的发展&…...

编程新知 2026/4/2 3:36:13

如何高效突破Cursor试用限制：全功能AI编程助手解锁指南

如何高效突破Cursor试用限制&#xff1a;全功能AI编程助手解锁指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your tr…...

编程新知 2026/4/2 2:47:16

[Python3高阶编程] - [Python3高阶编程] - 异步编程深度学习指南三：手动实现AsyncRLock

一、手动实现 AsyncRLockimport asyncio from typing import Optionalclass AsyncRLock:def __init__(self):self._lock asyncio.Lock() # 底层互斥锁self._owner: Optional[asyncio.Task] None # 当前持有锁的协程&#xff08;Task&#xff09;self._count 0 …...

编程新知 2026/4/2 2:43:04

记录模式 vs Lombok vs Record类，全维度性能与可维护性对比测试（含JMH压测数据）

第一章&#xff1a;Java记录模式的核心概念与演进背景Java记录模式&#xff08;Record Patterns&#xff09;是JDK 21中正式引入的预览特性&#xff08;JEP 440&#xff09;&#xff0c;并在JDK 22中进一步增强&#xff08;JEP 441&#xff09;&#xff0c;旨在为结构化数据解构…...

编程新知 2026/4/2 2:41:04

GLM-4.1V-9B-Base实战教程：跨境电商A+页面图像卖点自动提炼

GLM-4.1V-9B-Base实战教程&#xff1a;跨境电商A页面图像卖点自动提炼 1. 为什么需要自动提炼图像卖点 跨境电商卖家每天需要处理大量商品图片&#xff0c;传统人工标注方式存在三个痛点&#xff1a; 效率低下&#xff1a;一个运营人员每天最多处理50-100张图片成本高昂&…...

编程新知 2026/4/2 1:12:02

fSpy完全上手指南：从基础到实战的零门槛教程

fSpy完全上手指南&#xff1a;从基础到实战的零门槛教程 【免费下载链接】fSpy A cross platform app for quick and easy still image camera matching 项目地址: https://gitcode.com/gh_mirrors/fs/fSpy 当你需要将一张普通的2D照片转换为精确的3D场景时&#xff0c;…...

编程新知 2026/4/2 1:03:55

嵌入式开发中数据结构的优化与应用实践

1. 数据结构在嵌入式开发中的核心价值作为一名在嵌入式领域摸爬滚打十年的老兵&#xff0c;我深刻体会到数据结构就像瑞士军刀里的各种工具——选对工具能让工作事半功倍。在资源受限的MCU环境中&#xff0c;一个精心选择的数据结构可能意味着程序能否流畅运行和内存是否会爆掉…...

编程新知 2026/4/2 0:57:49