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

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

news 2026/2/9 1:05:09

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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2026/2/7 23:18:37

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2026/2/8 8:16:14

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2026/1/22 21:24:01

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2026/1/30 12:10:19

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2026/1/31 11:18:29

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2026/1/28 11:47:09

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01