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

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

news 2025/12/15 11:52:32

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

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/12/10 19:13:55

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/11/30 16:55:20

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/12/5 1:20:46

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/12/5 5:10:52

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/12/10 0:09:41

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2025/12/11 6:17:00

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2025/12/9 14:16:19

Python环境安装与虚拟环境配置详解

本文档旨在为Python开发者提供一站式的环境安装与虚拟环境配置指南&#xff0c;适用于Windows、macOS和Linux系统。无论你是初学者还是有经验的开发者&#xff0c;都能在此找到适合自己的环境搭建方法和常见问题的解决方案。 快速开始 一分钟快速安装与虚拟环境配置 # macOS/…...

编程新知 2025/12/15 6:13:26

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

编程新知 2025/10/1 4:57:11