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

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

news 2026/2/11 1:01:39

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

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/12/14 22:32:59

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2026/2/10 1:20:48

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/10/6 4:03:40

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/11/15 6:48:52

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2026/1/29 3:35:37

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2026/1/29 17:54:05

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2026/2/6 11:54:58

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2026/2/9 22:04:45

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/11/12 0:06:50