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

Bootstrap的媒体对象组件(图文展示组件),挺有用的一个组件。

news 2026/2/9 1:34:56

Bootstrap的.media类是用于创建媒体对象的，媒体对象通常用于展示图像（图片）和文本内容的组合，这种布局在展示新闻文章、博客帖子等方面非常常见。.media类使得创建这样的媒体对象非常简单，通常包含一个图像和相关的文本描述。

以下是使用Bootstrap的.media类的基本示例：

<div class="media"><img src="image.jpg" class="mr-3" alt="媒体图片"><div class="media-body"><h5 class="mt-0">媒体标题</h5><p>这是媒体对象的文本描述，可以包含各种内容，如段落文本、链接等。</p></div>
</div>

上述示例中，.media类用于包裹整个媒体对象，其中包含了一个<img>元素和一个.media-body类的<div>元素。

  • <img>元素用于显示媒体对象的图像。.mr-3类用于添加右侧外边距，以控制图像与文本之间的距离。
  • .media-body类用于包裹媒体对象的文本内容。在这个<div>内部，你可以放置标题、文本段落、链接和其他文本内容。

你可以根据需要自定义媒体对象的样式，例如添加边框、背景颜色、文本颜色等。Bootstrap提供了一系列的类来帮助你自定义媒体对象的外观。

此外，你可以将多个媒体对象垂直排列，创建一个媒体列表，每个列表项包含不同的图像和文本内容。这对于展示新闻文章、博客帖子列表等非常有用。

目录

  • 01-基本的媒体对象组件示例
  • 02-设置图片的位置(居上、居中、居下)
  • 03-列表型媒体对象(多个图文展示)

01-基本的媒体对象组件示例

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>媒体版式</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">媒体版式</h3>
<div class="media"><img src="31.png" class="mr-4 w-25" alt=""><div class="media-body"><h5 class="mt-0">媒体标题</h5><p>这是媒体对象的文本描述，可以包含各种内容，如段落文本、链接等。</p></div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

02-设置图片的位置(居上、居中、居下)

为图片元素添加类align-self-start、align-self-center、align-self-end可以实现图片元素的居上、居中、居下对齐方式。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>媒体对齐方式</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">媒体对齐方式</h3>
<hr/>
<div class="media"><img src="3.jpg" class="align-self-start mr-3" alt="" width="60"><div class="media-body"><h5 class="mt-0">苹果</h5><div>1.山鹰的眼睛不怕迷雾，真理的光辉不怕笼罩。</div><div>2.我宁可做饥饿的雄鹰，也不愿做肥硕的井蛙。</div><div>3.雄鹰当展翅高飞，翱翔于九天之上。</div></div>
</div><hr/>
<div class="media"><img src="3.jpg" class="align-self-center mr-3" alt="" width="60"><div class="media-body"><h5 class="mt-0">苹果</h5><div>1. 苹果是蔷薇科苹果亚科苹果属植物，其树为落叶乔木。</div> <div>2. 苹果营养价值很高，富含矿物质和维生素，含钙量丰富，有助于代谢掉体内多余盐分。</div><div>3. 苹果酸可代谢热量，防止肥胖。</div></div>
</div><hr/>
<div class="media"><img src="3.jpg" class="align-self-end mr-3" alt="" width="60"><div class="media-body"><h5 class="mt-0">苹果</h5><div>1. 苹果是蔷薇科苹果亚科苹果属植物，其树为落叶乔木。</div> <div>2. 苹果营养价值很高，富含矿物质和维生素，含钙量丰富，有助于代谢掉体内多余盐分。</div><div>3. 苹果酸可代谢热量，防止肥胖。</div></div>
</div><hr/>
</body>
</html>

运行效果如下：
在这里插入图片描述

03-列表型媒体对象(多个图文展示)

可以用标签<ul>和<li>实现“列表型媒体对象(多个图文展示)”。
示例代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>媒体列表</title><meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css"><script src="jquery-3.5.1.slim.js"></script><script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">媒体列表</h3>
<ul class="list-unstyled"><li class="media"><img src="41.png" class="mr-3 w-25" alt=""><div class="media-body"><h5 class="mt-0 mb-2">王漫妮</h5>王漫妮是众人眼中的标准都市女性，她独立、清醒，同时也是典型的“精致穷”。身为柜姐的她需要对顾客进行极致化服务，却遭到嘲讽。</div></li><li class="media my-4"><img src="42.png" class="mr-3 w-25" alt=""><div class="media-body"><h5 class="mt-0 mb-2">顾佳</h5>全职太太，双商在线能力强，将自己的小家庭和丈夫的公司都打理得井井有条。然而正是这样的过于追求完美，让身边的人感到压力。</div></li><li class="media"><img src="43.png" class="mr-3 w-25" alt=""><div class="media-body"><h5 class="mt-0 mb-2">钟晓芹</h5>钟晓芹是标准化的大多数，嫁给事业单位铁饭碗的老公，自己保有一份普通工作，安心做一个平凡妻子。</div></li>
</ul>
</body>
</html>

效果如下：
在这里插入图片描述

相关文章：

Bootstrap的媒体对象组件(图文展示组件),挺有用的一个组件。

Bootstrap的.media类是用于创建媒体对象的&#xff0c;媒体对象通常用于展示图像&#xff08;图片&#xff09;和文本内容的组合&#xff0c;这种布局在展示新闻文章、博客帖子等方面非常常见。.media类使得创建这样的媒体对象非常简单&#xff0c;通常包含一个图像和相关的文本…...

编程日记 2023/10/18 0:33:31

Day2力扣打卡

打卡记录 无限数组的最短子数组&#xff08;滑动窗口&#xff09; 链接 思路&#xff1a;先求单个数组的总和&#xff0c;再对两个重复数组所组成的新数组上使用 不定长的滑动窗口 来求得满足目标的最小长度。 class Solution { public:int minSizeSubarray(vector<int>…...

编程日记 2023/10/18 0:32:29

项目经理每天，每周，每月的工作清单

很多不懂项目管理的伙伴问&#xff0c;项目经理每天每周每个月的工作是什么呢&#xff1f; 仿佛他们什么都管&#xff0c;但是又没有具体的产出&#xff0c;但是每天看他们比谁都忙&#xff0c;其实很简单&#xff0c;项目中的每个环节负责具体的事情&#xff0c;但是每个环节…...

编程日记 2023/10/18 0:30:26

Java —— 运算符

目录 1. 什么是运算符 2. 算术运算符 2.1 基本四则运算符: 加减乘除模( - * / %) 2.2 增量运算符 - * %与 自增/自减运算符 -- 3. 关系运算符 4. 逻辑运算符 4.1 逻辑与 && 4.2 逻辑或|| 4.3 逻辑非 ! 4.4 短路求值 5. 位运算符 5.1 按位与 & 5.2 按位或 5.3 按位…...

编程日记 2023/10/18 0:29:25

【C++ 中的友元函数：解密其神秘面纱】

友元函数&#xff0c;作为C中一个重要但常常被误解的概念&#xff0c;经常让初学者感到困惑。本文将带您逐步了解友元函数的含义、用途以及如何正确使用它们。 什么是友元函数&#xff1f; 在C中&#xff0c;友元函数是一种特殊的函数&#xff0c;它允许某个类或类的成员函数…...

编程日记 2023/10/18 0:28:23

YOLOv8涨点技巧：手把手教程，注意力机制如何在不同数据集上实现涨点的工作，内涵多种网络改进方法

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文独家改进&#xff1a;手把手教程&#xff0c;解决注意力机制引入到YOLOv8在自己数据集不涨点的问题点&#xff0c;本文提供五种改进方法来解决此问题&#xff1b; ContextAggregation | 亲测在血细胞检测项目中涨点&#xff0c;…...

编程日记 2023/10/18 0:27:22

牛客：FZ12 牛牛的顺时针遍历

FZ12 牛牛的顺时针遍历 文章目录 FZ12 牛牛的顺时针遍历题目描述题解思路题解代码 题目描述 题解思路 通过一个变量来记录当前方向&#xff0c;遍历矩阵&#xff0c;每次遍历一条边&#xff0c;将该边的信息加入到结果中 题解代码 func spiralOrder(matrix [][]int) []int {…...

编程日记 2023/10/18 0:25:19

函数防抖（javaScript）

防抖说明 &#xff08;1&#xff09;防抖的目的&#xff1a; 当多次执行某一个动作的时候&#xff0c;限制函数调用的次数&#xff0c;节约资源。 &#xff08;2&#xff09;防抖的概念&#xff1a; 函数防抖&#xff08;debounce&#xff09;&#xff1a;就是指触发事件后&…...

编程日记 2023/10/18 0:24:19

日常学习记录随笔-redis实战

redis的持久化&#xff08;rdb,aof,混合持久化&#xff09; redis的主从架构以及redis的哨兵架构 redis的clusterredis 是要做持久化的&#xff0c;一般用redis会把数据放到缓存中为了提升系统的性能 如果redis没有持久化&#xff0c;重启的化数据就会丢失&#xff0c;所有的请…...

编程日记 2023/10/18 0:23:18

MySQL事务MVCC详解

一、概述 MVCC (MultiVersion Concurrency Control) 叫做多版本并发控制机制。主要是通过数据多版本来实现读-写分离&#xff0c;做到即使有读写冲突时&#xff0c;也能做到不加锁&#xff0c;非阻塞并发读&#xff0c;从而提高数据库并发性能。 MVCC只在已提交读&#xff08…...

编程日记 2023/10/18 0:22:17

SQL RDBMS 概念

SQL RDBMS 概念 RDBMS是关系数据库管理系统(Relational Database Management System)的缩写。 RDBMS是SQL的基础&#xff0c;也是所有现代数据库系统(如MS SQL Server、IBMDB2、Oracle、MySQL和MicrosoftAccess)的基础。 关系数据库管理系统(Relational Database Management Sy…...

编程日记 2023/10/18 0:21:15

onlyoffice的介绍搭建、集成过程。Windows、Linux

文章目录 什么是onlyoffice功能系统要求安装必备组件 windows搭建资源下载安装数据库onlyoffice安装测试 Linux搭建dockerdocker-compose 项目中用到的技术&#xff0c;做个笔记哈~ 什么是onlyoffice 在本地服务器上安装ONLYOFFICE Docs Community Edition Community Edition…...

编程日记 2023/10/18 0:20:15

37. 解数独

编写一个程序&#xff0c;通过填充空格来解决数独问题。 数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例图&#xff09; 数独部分空…...

编程日记 2023/10/18 0:19:14

git cherry-pick 合并某次提交

一、无冲突的情况 1、合并其它分支某次提交 切换到主分支&#xff0c;想把其他分支的某次commit修改 合并到主分支上&#xff0c; 可以用 git cherry-pick 命令 比如&#xff0c;其它分支&#xff0c;某次提交的commit Hash 是30e48158badc39801f1ce3cb375a07b872d6f220 &a…...

编程日记 2023/10/18 0:18:13

【面试HOT100】子串普通数组矩阵

系列综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了秋招面试的&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于LeetCodeHot100进行的&#xff0c;每个知识点的修正和深入主要参考…...

编程日记 2023/10/18 0:17:11

XPSpeak软件教程-科学指南针

在做X 射线光电子能谱(XPS)测试时&#xff0c;科学指南针检测平台工作人员在与很多同学沟通中了解到&#xff0c;好多同学仅仅是通过文献或者师兄师姐的推荐对XPS测试有了解&#xff0c;但是对于其软件操作还属于小白阶段&#xff0c;针对此&#xff0c;科学指南针检测平台团队…...

编程日记 2023/10/18 0:16:09

NLP算法面经 | 腾讯 VS 美团

作者 | 曾同学 编辑 | NewBeeNLP 面试锦囊之面经分享系列&#xff0c;持续更新中 后台回复『面试』加入讨论组交流噢 lz从3月初脚因打球扭伤了开始&#xff0c;投递简历&#xff0c;接二连三的面试鞭尸又面试&#xff0c;昨天才终于上岸了&#xff0c;分享经验~ 腾讯PCG看点&…...

编程日记 2023/10/18 0:15:09

【广州华锐互动】塔吊多人安拆VR互动培训系统

塔吊多人安拆VR互动培训系统由广州华锐互动制作&#xff0c;是一种基于VR技术的模拟实训系统&#xff0c;专门用于培训塔吊驾驶员和操作员。 在现实生活中&#xff0c;塔吊操作具有一定的危险性&#xff0c;尤其是在培训过程中容易发生意外。而使用VR互动实训系统&#xff0c;学…...

编程日记 2023/10/18 0:13:07

Linux性能优化--性能工具：特定进程内存

5.0 概述 本章介绍的工具使你能诊断应用程序与内存子系统之间的交互&#xff0c;该子系统由Linux内核和CPU管理。由于内存子系统的不同层次在性能上有数量级的差异&#xff0c;因此&#xff0c;修复应用程序使其有效地使用内存子系统会对程序性能产生巨大的影响。 阅读本章后&…...

编程日记 2023/10/18 0:12:06

MyLife - Docker安装rabbitmq

Docker安装rabbitmq 个人觉得像rabbitmq之类的基础设施在线上环境直接物理机安装使用可能会好些。但是在开发测试环境用docker容器还是比较方便的。这里学习下docker安装rabbitmq使用。 1. rabbitmq 镜像库地址 rabbitmq 镜像库地址&#xff1a;https://hub.docker.com/_/rabbi…...

编程日记 2023/10/18 0:11:03

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/11/9 1:27:18

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2026/2/2 3:59:34

抽象类和接口（全）

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

编程新知 2026/2/5 4:38:22

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2026/2/6 12:27:51

【UE5 C++】通过文件对话框获取选择文件的路径

目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 &#xff0c;这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器&#xff0c;右键点击 .uproject 文件&#xff0c;选择 "Generate Visual Studio project files"&#xff0c;重…...

编程新知 2026/2/7 16:24:49

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...

编程新知 2026/2/5 1:50:16