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

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

news 2026/2/11 7:38:24

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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2026/1/31 13:04:44

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

编程新知 2025/7/17 8:16:30

计算机系统结构复习-名词解释2

1.定向&#xff1a;在某条指令产生计算结果之前&#xff0c;其他指令并不真正立即需要该计算结果&#xff0c;如果能够将该计算结果从其产生的地方直接送到其他指令中需要它的地方&#xff0c;那么就可以避免停顿。 2.多级存储层次&#xff1a;由若干个采用不同实现技术的存储…...

编程新知 2025/12/9 20:41:12

第22节 Node.js JXcore 打包

Node.js是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。 JXcore是一个支持多线程的 Node.js 发行版本&#xff0c;基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。 本文主要介绍JXcore的打包功能。 JXcore 安装 下载JXcore安装包&a…...

编程新知 2025/12/18 2:20:04

LeetCode 0386.字典序排数：细心总结条件

【LetMeFly】386.字典序排数&#xff1a;细心总结条件 力扣题目链接&#xff1a;https://leetcode.cn/problems/lexicographical-numbers/ 给你一个整数 n &#xff0c;按字典序返回范围 [1, n] 内所有整数。 你必须设计一个时间复杂度为 O(n) 且使用 O(1) 额外空间的算法。…...

编程新知 2026/2/1 1:07:06

LTR-381RGB-01RGB+环境光检测应用场景及客户类型主要有哪些？

RGB环境光检测 功能&#xff0c;在应用场景及客户类型&#xff1a; 1. 可应用的儿童玩具类型 (1) 智能互动玩具 功能&#xff1a;通过检测环境光或物体颜色触发互动&#xff08;如颜色识别积木、光感音乐盒&#xff09;。 客户参考&#xff1a; LEGO&#xff08;乐高&#x…...

编程新知 2026/2/5 5:41:34