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

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

news 2026/2/10 7:27:46

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

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2026/2/8 4:37:27

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

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

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

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

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2026/1/25 11:13:37

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2026/1/20 17:18:59

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2026/1/27 13:20:11

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/2/8 3:32:52

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2026/1/31 14:34:46