活动公告

系统通知
通知：关于部分勋章领取条件及购买价格调整的通知
05-18 21:22
系统通知
通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，资源失效请在帖子内回复要求补档，会尽快处理！
10-23 09:31
>社区 > 科技 > 经验交流 >帖子
本版发帖返回

Bootstrap4媒体对象应用指南 轻松掌握网页布局技巧 提升前端开发效率

这是个蓝孩子 当前离线 威震华夏关云长
SunJu_FaceMall

3万

主题

2860

科技点

3万

积分

白金月票

碾压王

积分
32872

塔罗立华奏
<font color=白金月票" /> 发表于 2025-9-25 23:10:33 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
引言

Bootstrap作为最受欢迎的前端框架之一，为开发者提供了丰富的组件和工具，极大地简化了网页开发过程。在Bootstrap4中，媒体对象(Media Object)是一个轻量级但功能强大的组件，它提供了一种优雅的方式来处理对齐的媒体内容（如图片、视频等）与文本或其他内容的组合。媒体对象常用于评论、推文、文章列表等场景，能够快速创建结构清晰、视觉统一的布局。本文将深入探讨Bootstrap4媒体对象的应用，帮助开发者轻松掌握这一布局技巧，提升前端开发效率。

Bootstrap4媒体对象基础

媒体对象的基本结构

Bootstrap4的媒体对象基于HTML结构，通过添加特定的CSS类来实现样式和布局。最基本的媒体对象结构包含两个主要部分：媒体内容（通常是图片）和媒体主体（文本或其他内容）。

下面是一个基本媒体对象的HTML结构示例：
  2. <div class="media">
  3.   <img src="path/to/image.jpg" class="mr-3" alt="示例图片">
  4.   <div class="media-body">
  5.     <h5 class="mt-0">媒体标题</h5>
  6.     <p>这是媒体对象的主体内容，可以包含任何HTML内容，如文本、链接、按钮等。</p>
  7.   </div>
  8. </div>
复制代码

在这个结构中：

• .media是媒体对象的容器类
• img元素代表媒体内容，通常添加间距类如.mr-3（右边距）来控制与媒体主体的间距
• .media-body是媒体主体的容器类，包含标题和内容

媒体对象的核心类

Bootstrap4为媒体对象提供了几个核心类，用于控制布局和样式：

1. .media：媒体对象的容器类，用于创建媒体对象的基本布局结构
2. .media-body：媒体主体的容器类，包含标题和内容
3. .media-left或.media-right：用于指定媒体内容的位置（在Bootstrap4中，推荐使用间距工具类如.mr-3或.ml-3来实现类似效果）
4. .media-middle：垂直居中对齐媒体内容
5. .media-bottom：底部对齐媒体内容

媒体对象的嵌套

媒体对象支持嵌套，即在一个媒体对象的主体内再放置另一个媒体对象。这种特性非常适合用于评论的回复、多级列表等场景。

下面是一个媒体对象嵌套的示例：
  2. <div class="media">
  3.   <img src="path/to/avatar1.jpg" class="mr-3" alt="用户头像">
  4.   <div class="media-body">
  5.     <h5 class="mt-0">用户A</h5>
  6.     <p>这是第一条评论。</p>
  7.    
  8.     <!-- 嵌套的媒体对象 -->
  9.     <div class="media mt-3">
  10.       <img src="path/to/avatar2.jpg" class="mr-3" alt="用户头像">
  11.       <div class="media-body">
  12.         <h5 class="mt-0">用户B</h5>
  13.         <p>这是对第一条评论的回复。</p>
  14.       </div>
  15.     </div>
  16.   </div>
  17. </div>
复制代码

媒体对象的变体和扩展

对齐方式

Bootstrap4提供了多种媒体内容的对齐方式，通过添加不同的类可以实现顶部对齐（默认）、中间对齐和底部对齐。

1. 顶部对齐（默认）：
  2. <div class="media">
  3.   <img src="path/to/image.jpg" class="mr-3" alt="示例图片">
  4.   <div class="media-body">
  5.     <h5 class="mt-0">顶部对齐（默认）</h5>
  6.     <p>这是媒体对象的主体内容，媒体内容默认与主体顶部对齐。</p>
  7.     <p>添加更多内容以展示对齐效果。</p>
  8.   </div>
  9. </div>
复制代码

1. 中间对齐：
  2. <div class="media">
  3.   <img src="path/to/image.jpg" class="mr-3 align-self-center" alt="示例图片">
  4.   <div class="media-body">
  5.     <h5 class="mt-0">中间对齐</h5>
  6.     <p>这是媒体对象的主体内容，媒体内容与主体中间对齐。</p>
  7.     <p>添加更多内容以展示对齐效果。</p>
  8.   </div>
  9. </div>
复制代码

1. 底部对齐：
  2. <div class="media">
  3.   <img src="path/to/image.jpg" class="mr-3 align-self-end" alt="示例图片">
  4.   <div class="media-body">
  5.     <h5 class="mt-0">底部对齐</h5>
  6.     <p>这是媒体对象的主体内容，媒体内容与主体底部对齐。</p>
  7.     <p>添加更多内容以展示对齐效果。</p>
  8.   </div>
  9. </div>
复制代码

媒体对象的顺序

默认情况下，媒体内容位于媒体主体的左侧。通过调整HTML元素的顺序和添加适当的类，可以轻松改变媒体内容的位置。

1. 媒体内容在右侧：
  2. <div class="media">
  3.   <div class="media-body">
  4.     <h5 class="mt-0">媒体内容在右侧</h5>
  5.     <p>这是媒体对象的主体内容，媒体内容位于右侧。</p>
  6.   </div>
  7.   <img src="path/to/image.jpg" class="ml-3" alt="示例图片">
  8. </div>
复制代码

媒体列表

媒体对象可以组合成列表，非常适合用于文章列表、评论列表等场景。使用.list-unstyled移除默认的列表样式，然后为每个列表项添加.media类。
  2. <ul class="list-unstyled">
  3.   <li class="media">
  4.     <img src="path/to/image1.jpg" class="mr-3" alt="示例图片">
  5.     <div class="media-body">
  6.       <h5 class="mt-0 mb-1">列表项1</h5>
  7.       <p>这是第一个列表项的内容。</p>
  8.     </div>
  9.   </li>
  10.   <li class="media my-4">
  11.     <img src="path/to/image2.jpg" class="mr-3" alt="示例图片">
  12.     <div class="media-body">
  13.       <h5 class="mt-0 mb-1">列表项2</h5>
  14.       <p>这是第二个列表项的内容。</p>
  15.     </div>
  16.   </li>
  17.   <li class="media">
  18.     <img src="path/to/image3.jpg" class="mr-3" alt="示例图片">
  19.     <div class="media-body">
  20.       <h5 class="mt-0 mb-1">列表项3</h5>
  21.       <p>这是第三个列表项的内容。</p>
  22.     </div>
  23.   </li>
  24. </ul>
复制代码

实际应用案例

评论系统

媒体对象非常适合用于构建评论系统，包括用户头像、用户名、评论内容和时间等信息。
  2. <div class="container mt-4">
  3.   <h2>评论系统</h2>
  4.   
  5.   <!-- 评论表单 -->
  6.   <div class="card mb-4">
  7.     <div class="card-body">
  8.       <h5 class="card-title">发表评论</h5>
  9.       <form>
  10.         <div class="form-group">
  11.           <textarea class="form-control" rows="3" placeholder="写下你的评论..."></textarea>
  12.         </div>
  13.         <button type="submit" class="btn btn-primary">提交评论</button>
  14.       </form>
  15.     </div>
  16.   </div>
  17.   
  18.   <!-- 评论列表 -->
  19.   <div class="media">
  20.     <img src="https://io.pixtech.org/pixtech/forum/202509/25/e65e95ad8d304739.webp" class="mr-3 rounded-circle" alt="用户头像">
  21.     <div class="media-body">
  22.       <h5 class="mt-0">张三 <small class="text-muted">2023-05-15 10:30</small></h5>
  23.       <p>这是一条评论内容。Bootstrap4的媒体对象使得创建评论系统变得非常简单和高效。</p>
  24.       
  25.       <!-- 评论回复 -->
  26.       <div class="media mt-3">
  27.         <img src="https://io.pixtech.org/pixtech/forum/202509/25/30064ec852bf4d32.webp" class="mr-3 rounded-circle" alt="用户头像">
  28.         <div class="media-body">
  29.           <h5 class="mt-0">李四 <small class="text-muted">2023-05-15 11:45</small></h5>
  30.           <p>这是对张三评论的回复。媒体对象的嵌套功能使得构建多级评论变得轻而易举。</p>
  31.         </div>
  32.       </div>
  33.     </div>
  34.   </div>
  35.   
  36.   <div class="media mt-4">
  37.     <img src="https://io.pixtech.org/pixtech/forum/202509/25/e1600bd7ffff4728.webp" class="mr-3 rounded-circle" alt="用户头像">
  38.     <div class="media-body">
  39.       <h5 class="mt-0">王五 <small class="text-muted">2023-05-15 14:20</small></h5>
  40.       <p>这是另一条评论。通过媒体对象，我们可以轻松创建结构清晰、视觉统一的评论系统。</p>
  41.     </div>
  42.   </div>
  43. </div>
复制代码

文章列表

媒体对象也常用于创建文章列表，包括文章缩略图、标题、摘要和发布时间等信息。
  2. <div class="container mt-4">
  3.   <h2>最新文章</h2>
  4.   
  5.   <ul class="list-unstyled">
  6.     <li class="media mb-4">
  7.       <img src="https://io.pixtech.org/pixtech/forum/202509/25/51eeae0590ce4fcb.webp" class="mr-3" alt="文章缩略图">
  8.       <div class="media-body">
  9.         <h5 class="mt-0 mb-1">Bootstrap4入门指南</h5>
  10.         <p class="mb-2">Bootstrap4是一个强大的前端框架，本文将介绍如何快速上手Bootstrap4，包括安装、基本组件和布局系统等内容。</p>
  11.         <small class="text-muted">发布于 2023-05-10 | 分类：前端开发</small>
  12.       </div>
  13.     </li>
  14.    
  15.     <li class="media mb-4">
  16.       <img src="https://io.pixtech.org/pixtech/forum/202509/25/dd8de5bb3c964769.webp" class="mr-3" alt="文章缩略图">
  17.       <div class="media-body">
  18.         <h5 class="mt-0 mb-1">响应式网页设计最佳实践</h5>
  19.         <p class="mb-2">响应式设计已成为现代网页开发的标准。本文将分享响应式网页设计的最佳实践，帮助开发者创建适应各种设备的网站。</p>
  20.         <small class="text-muted">发布于 2023-05-08 | 分类：网页设计</small>
  21.       </div>
  22.     </li>
  23.    
  24.     <li class="media mb-4">
  25.       <img src="https://io.pixtech.org/pixtech/forum/202509/25/6cd51ec2c893402a.webp" class="mr-3" alt="文章缩略图">
  26.       <div class="media-body">
  27.         <h5 class="mt-0 mb-1">CSS Grid布局完全指南</h5>
  28.         <p class="mb-2">CSS Grid是一个强大的布局系统，本文将详细介绍CSS Grid的基本概念、属性和实际应用，帮助你掌握这一现代布局技术。</p>
  29.         <small class="text-muted">发布于 2023-05-05 | 分类：CSS</small>
  30.       </div>
  31.     </li>
  32.   </ul>
  33. </div>
复制代码

用户资料卡

媒体对象还可以用于创建用户资料卡，展示用户头像、姓名、简介等信息。
  2. <div class="container mt-4">
  3.   <h2>团队成员</h2>
  4.   
  5.   <div class="row">
  6.     <div class="col-md-6 mb-4">
  7.       <div class="card">
  8.         <div class="card-body">
  9.           <div class="media">
  10.             <img src="https://io.pixtech.org/pixtech/forum/202509/25/017e9ee9f62441ff.webp" class="mr-3 rounded-circle" alt="用户头像">
  11.             <div class="media-body">
  12.               <h5 class="mt-0">张明</h5>
  13.               <p class="text-muted">前端开发工程师</p>
  14.               <p>负责公司产品的前端开发工作，精通HTML、CSS、JavaScript等前端技术，有丰富的Bootstrap使用经验。</p>
  15.               <div class="mt-2">
  16.                 <a href="#" class="btn btn-sm btn-primary">查看详情</a>
  17.                 <a href="#" class="btn btn-sm btn-outline-secondary ml-2">发送消息</a>
  18.               </div>
  19.             </div>
  20.           </div>
  21.         </div>
  22.       </div>
  23.     </div>
  24.    
  25.     <div class="col-md-6 mb-4">
  26.       <div class="card">
  27.         <div class="card-body">
  28.           <div class="media">
  29.             <img src="https://io.pixtech.org/pixtech/forum/202509/25/2bddde70b40e4aa3.webp" class="mr-3 rounded-circle" alt="用户头像">
  30.             <div class="media-body">
  31.               <h5 class="mt-0">李华</h5>
  32.               <p class="text-muted">UI/UX设计师</p>
  33.               <p>负责产品的用户界面设计和用户体验优化，擅长创建美观、实用的界面设计，注重细节和用户需求。</p>
  34.               <div class="mt-2">
  35.                 <a href="#" class="btn btn-sm btn-primary">查看详情</a>
  36.                 <a href="#" class="btn btn-sm btn-outline-secondary ml-2">发送消息</a>
  37.               </div>
  38.             </div>
  39.           </div>
  40.         </div>
  41.       </div>
  42.     </div>
  43.   </div>
  44. </div>
复制代码

高级技巧

自定义媒体对象样式

虽然Bootstrap4提供了默认的媒体对象样式，但我们可以通过自定义CSS来调整媒体对象的外观，以满足特定的设计需求。
  2. <style>
  3.   /* 自定义媒体对象样式 */
  4.   .custom-media {
  5.     border: 1px solid #e9ecef;
  6.     border-radius: 0.25rem;
  7.     padding: 1rem;
  8.     background-color: #f8f9fa;
  9.     transition: all 0.3s ease;
  10.   }
  11.   
  12.   .custom-media:hover {
  13.     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  14.     transform: translateY(-3px);
  15.   }
  16.   
  17.   .custom-media .media-body h5 {
  18.     color: #0056b3;
  19.     font-weight: 600;
  20.   }
  21.   
  22.   .custom-media img {
  23.     border-radius: 0.25rem;
  24.     transition: transform 0.3s ease;
  25.   }
  26.   
  27.   .custom-media:hover img {
  28.     transform: scale(1.05);
  29.   }
  30. </style>
  32. <div class="container mt-4">
  33.   <h2>自定义样式的媒体对象</h2>
  34.   
  35.   <div class="media custom-media mb-4">
  36.     <img src="https://io.pixtech.org/pixtech/forum/202509/25/459ae03f4a5347a2.webp" class="mr-3" alt="示例图片">
  37.     <div class="media-body">
  38.       <h5 class="mt-0">自定义样式标题</h5>
  39.       <p>这是一个自定义样式的媒体对象。通过添加自定义CSS，我们可以改变媒体对象的外观，包括边框、背景色、悬停效果等。</p>
  40.       <button class="btn btn-sm btn-outline-primary">了解更多</button>
  41.     </div>
  42.   </div>
  43.   
  44.   <div class="media custom-media">
  45.     <img src="https://io.pixtech.org/pixtech/forum/202509/25/f4f312f6c8334897.webp" class="mr-3" alt="示例图片">
  46.     <div class="media-body">
  47.       <h5 class="mt-0">另一个自定义样式媒体对象</h5>
  48.       <p>自定义样式使得媒体对象能够更好地融入网站的整体设计风格，提升用户体验。</p>
  49.       <button class="btn btn-sm btn-outline-primary">了解更多</button>
  50.     </div>
  51.   </div>
  52. </div>
复制代码

与JavaScript结合使用

媒体对象可以与JavaScript结合使用，创建动态交互效果，如展开/折叠内容、动态加载等。
  2. <div class="container mt-4">
  3.   <h2>动态媒体对象</h2>
  4.   
  5.   <div class="media mb-4">
  6.     <img src="https://io.pixtech.org/pixtech/forum/202509/25/5f6e826cd4ca468e.webp" class="mr-3" alt="示例图片">
  7.     <div class="media-body">
  8.       <h5 class="mt-0">可展开的媒体对象</h5>
  9.       <p>点击按钮可以展开或折叠额外内容。</p>
  10.       <button class="btn btn-sm btn-primary" onclick="toggleContent(this)">展开/折叠</button>
  11.       <div class="extra-content mt-3" style="display: none;">
  12.         <p>这是额外显示的内容。通过JavaScript控制，我们可以实现内容的动态展开和折叠，使页面更加简洁和交互友好。</p>
  13.         <p>这种技术特别适合用于显示详细信息、长文本或附加内容，避免一次性展示过多信息造成页面拥挤。</p>
  14.       </div>
  15.     </div>
  16.   </div>
  17.   
  18.   <div class="media">
  19.     <img src="https://io.pixtech.org/pixtech/forum/202509/25/ec86029191a94c85.webp" class="mr-3" alt="示例图片">
  20.     <div class="media-body">
  21.       <h5 class="mt-0">动态加载内容的媒体对象</h5>
  22.       <p>点击按钮可以动态加载更多内容。</p>
  23.       <button class="btn btn-sm btn-primary" onclick="loadContent(this)">加载更多</button>
  24.       <div class="loading-content mt-3"></div>
  25.     </div>
  26.   </div>
  27. </div>
  29. <script>
  30.   // 切换内容显示/隐藏
  31.   function toggleContent(button) {
  32.     const extraContent = button.nextElementSibling;
  33.     if (extraContent.style.display === 'none') {
  34.       extraContent.style.display = 'block';
  35.       button.textContent = '折叠';
  36.     } else {
  37.       extraContent.style.display = 'none';
  38.       button.textContent = '展开';
  39.     }
  40.   }
  41.   
  42.   // 模拟动态加载内容
  43.   function loadContent(button) {
  44.     const loadingContent = button.nextElementSibling;
  45.     loadingContent.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"><span class="sr-only">加载中...</span></div>';
  46.    
  47.     // 模拟网络请求延迟
  48.     setTimeout(() => {
  49.       loadingContent.innerHTML = `
  50.         <p>这是动态加载的内容。在实际应用中，这些内容可能来自服务器端API或数据库查询。</p>
  51.         <p>通过动态加载，我们可以优化页面性能，减少初始加载时间，提升用户体验。</p>
  52.       `;
  53.       button.disabled = true;
  54.       button.textContent = '已加载';
  55.     }, 1000);
  56.   }
  57. </script>
复制代码

响应式媒体对象

Bootstrap4的媒体对象本身就具有良好的响应式特性，但我们可以进一步优化，使其在不同屏幕尺寸下有更好的表现。
  2. <div class="container mt-4">
  3.   <h2>响应式媒体对象</h2>
  4.   
  5.   <!-- 响应式媒体对象：在小屏幕上堆叠，在大屏幕上并排 -->
  6.   <div class="media flex-column flex-md-row mb-4">
  7.     <img src="https://io.pixtech.org/pixtech/forum/202509/25/8cfc815de790406b.webp" class="mr-3 mb-3 mb-md-0 align-self-center" alt="示例图片">
  8.     <div class="media-body">
  9.       <h5 class="mt-0">响应式媒体对象示例</h5>
  10.       <p>这是一个响应式媒体对象。在小屏幕设备上，图片和内容会垂直堆叠；在大屏幕设备上，它们会水平排列。</p>
  11.       <p>通过使用Bootstrap4的响应式工具类，如flex-column和flex-md-row，我们可以轻松实现这种布局变化。</p>
  12.     </div>
  13.   </div>
  14.   
  15.   <!-- 另一个响应式媒体对象：图片大小随屏幕尺寸变化 -->
  16.   <div class="media flex-column flex-md-row-reverse">
  17.     <img src="https://io.pixtech.org/pixtech/forum/202509/25/972a009c820c4607.webp" class="ml-0 ml-md-3 mb-3 mb-md-0 img-fluid" alt="示例图片">
  18.     <div class="media-body">
  19.       <h5 class="mt-0">另一个响应式媒体对象示例</h5>
  20.       <p>在这个示例中，图片位于右侧（在大屏幕上），并且使用了img-fluid类使图片能够响应式缩放。</p>
  21.       <p>通过结合使用Bootstrap4的响应式工具类和图片类，我们可以创建在各种设备上都能良好显示的媒体对象。</p>
  22.     </div>
  23.   </div>
  24. </div>
复制代码

最佳实践和注意事项

最佳实践

1. 保持结构清晰：始终使用正确的HTML结构和Bootstrap类来创建媒体对象，这有助于保持代码的一致性和可维护性。
2. 合理使用间距：使用Bootstrap的间距工具类（如.mr-3、.ml-3、.mt-3等）来控制媒体内容与媒体主体之间的间距，避免内容过于拥挤。
3. 注意图片优化：在媒体对象中使用图片时，确保图片大小适当，并考虑使用响应式图片类（如.img-fluid）来优化不同设备上的显示效果。
4. 考虑可访问性：为图片提供有意义的alt文本，确保屏幕阅读器能够正确解读媒体对象的内容。
5. 合理使用嵌套：虽然媒体对象支持嵌套，但应避免过度嵌套，以免造成结构复杂和样式混乱。

保持结构清晰：始终使用正确的HTML结构和Bootstrap类来创建媒体对象，这有助于保持代码的一致性和可维护性。

合理使用间距：使用Bootstrap的间距工具类（如.mr-3、.ml-3、.mt-3等）来控制媒体内容与媒体主体之间的间距，避免内容过于拥挤。

注意图片优化：在媒体对象中使用图片时，确保图片大小适当，并考虑使用响应式图片类（如.img-fluid）来优化不同设备上的显示效果。

考虑可访问性：为图片提供有意义的alt文本，确保屏幕阅读器能够正确解读媒体对象的内容。

合理使用嵌套：虽然媒体对象支持嵌套，但应避免过度嵌套，以免造成结构复杂和样式混乱。

注意事项

1. 浏览器兼容性：Bootstrap4的媒体对象在现代浏览器中表现良好，但在一些旧版浏览器中可能存在兼容性问题。在开发过程中，应测试目标浏览器中的显示效果。
2. 性能考虑：在媒体列表中包含大量图片时，应考虑图片懒加载技术，以减少初始页面加载时间和带宽消耗。
3. 自定义样式覆盖：在自定义媒体对象样式时，注意Bootstrap的默认样式可能会被意外覆盖。建议使用特定的类名或ID来限定自定义样式的范围。
4. 内容长度控制：媒体主体中的内容长度应适中，过长的内容可能会破坏媒体对象的视觉平衡。考虑使用文本截断或展开/折叠功能来处理长文本。
5. 移动设备优化：在移动设备上，媒体对象可能需要特殊的布局调整。使用Bootstrap的响应式工具类来优化小屏幕上的显示效果。

浏览器兼容性：Bootstrap4的媒体对象在现代浏览器中表现良好，但在一些旧版浏览器中可能存在兼容性问题。在开发过程中，应测试目标浏览器中的显示效果。

性能考虑：在媒体列表中包含大量图片时，应考虑图片懒加载技术，以减少初始页面加载时间和带宽消耗。

自定义样式覆盖：在自定义媒体对象样式时，注意Bootstrap的默认样式可能会被意外覆盖。建议使用特定的类名或ID来限定自定义样式的范围。

内容长度控制：媒体主体中的内容长度应适中，过长的内容可能会破坏媒体对象的视觉平衡。考虑使用文本截断或展开/折叠功能来处理长文本。

移动设备优化：在移动设备上，媒体对象可能需要特殊的布局调整。使用Bootstrap的响应式工具类来优化小屏幕上的显示效果。

结论

Bootstrap4的媒体对象是一个简单而强大的组件，它为开发者提供了一种优雅的方式来处理媒体内容与文本的组合。通过本文的介绍，我们了解了媒体对象的基本结构、变体和扩展方式，以及如何在实际项目中应用媒体对象来创建评论系统、文章列表和用户资料卡等常见UI元素。

媒体对象的优势在于其简洁的HTML结构、灵活的布局选项和良好的响应式特性。通过结合Bootstrap4的其他组件和工具类，开发者可以快速创建出结构清晰、视觉统一的界面，大大提升前端开发效率。

随着前端技术的不断发展，媒体对象作为一种基础布局组件，将继续在网页设计中发挥重要作用。掌握Bootstrap4媒体对象的使用技巧，不仅能够提高开发效率，还能够为用户创造更好的浏览体验。希望本文能够帮助读者更好地理解和应用Bootstrap4媒体对象，在实际项目中发挥其最大价值。
「七転び八起き（ななころびやおき）」
回复

使用道具 举报

返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册
高级模式
B Color Image Link Quote Code Smilies

本版积分规则