Bootstrap 4 多媒体对象

最新推荐文章于 2022-01-14 14:06:28 发布
最新推荐文章于 2022-01-14 14:06:28 发布
阅读量210 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45116096/article/details/107302616
版权

Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等:

基础多媒体对象 要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>多媒体对象</h2>
  <p>使用 .media 和 .media-body 类创建多媒体对象:</p>
  <div class="media border p-3">
    <img src="https://static.runoob.com/images/mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
      <h4>菜鸟教程</h4>
      <p>学的不仅是技术，更是梦想！！！</p>      
    </div>
  </div>
</div>

</body>
</html>

在这里插入图片描述

多媒体对象嵌套 多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象） 要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>多媒体对象嵌套</h2>
  <p>多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）:</p><br>
  <div class="media border p-3">
    <img src="https://static.runoob.com/images/mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
      <h4>菜鸟教程</h4>
      <p>学的不仅是技术，更是梦想！！！</p>
      <div class="media p-3">
        <img src="https://static.runoob.com/images/mobile-icon.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
        <div class="media-body">
          <h4>菜鸟教程</h4>
          <p>学的不仅是技术，更是梦想！！！</p>
        </div>
      </div>  
    </div>
  </div>
</div>

</body>
</html>

在这里插入图片描述

多媒体对象图片显示在右边 如果你想将头像图片显示在右侧，可以在 .media-body 容器后添加图片:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>图片显示在右边</h2>
  <p>如果你想将头像图片显示在右侧，可以在 .media-body 容器后添加图片:</p>
  <div class="media border p-3">
    <div class="media-body">
      <h4>菜鸟教程</h4>
      <p>学的不仅是技术，更是梦想！！！</p>      
    </div>
    <img src="https://static.runoob.com/images/mobile-icon.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
  </div>
</div>

</body>
</html>

在这里插入图片描述

定位多媒体图片位置 我们可以使用 align-self- 相关类来设置多媒体对象的图片显示位置：*

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>多媒体对象</h2>
  <p>我们可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置：</p><br>
  <!-- 头部 -->
  <div class="media">
    <img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-start mr-3" style="width:60px">
    <div class="media-body">
      <h4>头部 -- 菜鸟教程</h4>
      <p>学的不仅是技术，更是梦想！！
      <p>学的不仅是技术，更是梦想！！
      <p>学的不仅是技术，更是梦想！！
    </div>
  </div>

  <!-- 居中 -->
  <div class="media mt-3">
    <img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-center mr-3" style="width:60px">
    <div class="media-body">
      <h4>居中 -- 菜鸟教程</h4>
      <p>学的不仅是技术，更是梦想！！
      <p>学的不仅是技术，更是梦想！！
      <p>学的不仅是技术，更是梦想！！
    </div>
   </div>

  <!-- 底部 -->
  <div class="media mt-3">
    <img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-end mr-3" style="width:60px">
    <div class="media-body">
      <h4>底部 -- 菜鸟教程</h4>
      <p>学的不仅是技术，更是梦想！！
      <p>学的不仅是技术，更是梦想！！
      <p>学的不仅是技术，更是梦想！！
    </div>
  </div>
</div>

</body>
</html>

在这里插入图片描述

jhfsdhsgfsdggreqZa
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 多媒体对象（Media Object）
01-19
Bootstrap 多媒体对象（Media Object） 本章我们将讲解 Bootstrap 中的多媒体对象（Media Object），如：图像、视频、音频等。 多媒体对象的样式可用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用...
Bootstrap媒体对象学习使用
08-31
Bootstrap媒体对象是前端开发中非常实用的一个组件，它允许开发者以优雅的方式排列和展示多媒体内容，如图片、视频或音频，通常与相关的文本内容（如标题、描述等）结合使用。Bootstrap框架通过预定义的CSS类，使得...
Bootstrap4知识(1)
airar的博客
09-24 1294
1.Bootstrap简介 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目 Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利 用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大 的插件系统，能够快速为你的想法开发出原型或者构建整个 app Sass--CSS扩展语言 Mixin--包含一段合法Sass代码，类似...
Bootstrap4——学习总结
m0_63348818的博客
11-20 1377
关于bootstrap的学习 Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签， <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> Bootstrap 4 需要一个容器元素来
使用 Bootstrap 4 提升网页实战教程
03-01
使用Bootstrap 4提升网页实战视频课程，课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您！这堂课会手把手地透过Bootstrap 4 实作各种业界案例，有了这样的加持，面对各种版型的网站，都能轻松应对。Bootstrap入门到进阶必备教程。
细说BootStrap
07-19
本课程工34节内容，详细讲述了BootStrap的样式、组件和JavaScript组件。
BootStrap4布局系列之媒体对象
爱喝水的qdy的博客
11-25 1012
目录官方地址菜鸟教程地址ntp.org文档地址基本结构右展示媒体内容调整HTML顺序通过order媒体内容对齐align-self-startalign-self-centeralign-self-end媒体嵌套媒体列表 官方地址 https://v4.bootcss.com/docs/4.3/components/media-object/ 菜鸟教程地址 https://www.runoob.c...
Bootstrap个人简网站模板
06-01
JavaScript是一种广泛使用的客户端脚本语言，可以处理用户交互、改变DOM（文档对象模型）结构，以及与服务器进行异步通信。jQuery则是一个JavaScript库，简化了DOM操作、事件处理和动画制作，使得开发者能更高效地...
bootstrap全套教程-PPT教程
05-07
“媒体对象”用于组织和展示多媒体内容，如图片和视频，同时提供对对齐、环绕文本等的控制。 “面板”是一种封装内容的容器，可以添加标题、边框和阴影效果，常用于数据展示或信息区块。 “弹窗框”（Modal）是...
Bootstrap中的fileinput 多图片上传及编辑功能
09-01
这个功能在网页应用中非常常见，尤其是在涉及到用户需要上传或修改多媒体内容时。 首先，我们来看一下页面部分的代码。在HTML结构中，`<input>`标签用于选择文件，`class="file-loading"`表明我们打算使用Bootstrap...
Bootstrap多媒体对象
遇见更好的自己
06-13 914
1..media 允许将媒体对象里的多媒体（图像，视频，音频）浮动到内容块的左边或者右边 .media-list:各项内容是武学列表的一部分，可以使用该class。用于评论列表和文章列表<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="../images/1.jpg"
Bootstrap4(一)重点----网格系统，图像形状，轮播，多媒体对象，滚动监听
m0_61016904的博客
11-19 1325
Bootstrap4重点一 . 网格系统二. 图像形状三. 轮播四 . 滚动监听(Scrollspy)五. 多媒体对象 一 . 网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。 1. 网格系统规则: 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。 使用行来创建水平的列组。 内容需
BootStrap框架模块：BootStrap4基础
LiLi的博客
01-14 4825
BootStrap简介 Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并自定义你的网站。 利用 BootstrapCDN 和一个最简模板快速上手 Bootstrap。Bootstrap 是全球最流行的前端框架，用于构建响应式、移动设备优先的 WEB 站点。 BootStrap中文官网 第一章 BootStrap4基础 下载 Bootstr
Bootstrap4——字体大小根据屏幕改变解决方案
热门推荐
无限迭代中......
02-13 1万+
官方文档 https://v4.bootcss.com/docs/content/typography/#responsive-font-sizes 说明 「自适应字体尺寸」，下简称 RFS，这也是 Bootstrap GitHub 仓库中的一个新项目。RFS根据访问者设备或浏览器窗口的尺寸自动计算合适的字体大小(font-size)。 下面是它的工作过程： 所有font-siz...
BootStrap 媒体对象
刚哥的博客
07-21 1139
媒体对象可以包含图片、视频或者音频等媒体，以达到对象和文本组合显示的样式效果 基本示例                                 红杏                      杏（学名：Armeniaca vulgaris Lam.）落叶乔木。地生，植株无毛。叶互生，阔卵形或圆卵形叶子，边缘有钝锯齿；近叶柄顶端有二腺体；淡红色花单生或2-3个同生
bootstrap4知识点总结
qq_44713502的博客
12-01 1563
Bootstrap4 网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。 我们也可以根据自己的需要，定义列数： 1 1 1 1 1 1 1 1 1 1 1 1 4 4 4 4 8 6 6 12 Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。 网格类 Bootstrap...
Bootstrap的响应式,当文字超过div长度,换行问题的处理!
weixin_30512089的博客
01-20 3438
(1)overflow: hiddenoverflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。hidden 表示内容会被修剪，并且剪掉的内容是不可见的。 (2)white-space: nowrap规定文本不进行换行。white-space 属性设置如何处理元素内的空白。nowrap 表示文本不会换行，文本会在在同一行上继续，直到遇到 &lt...
Bootstrap 多媒体对象
书香水墨
07-24 515
一、Bootstrap 多媒体对象 1.1 基础多媒体对象 要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果: <div class="container mt-3"> <div class="media border p-3"> ...
Bootstrap 4入门与布局指南
《Bootstrap4 Cookbook》是一本专注于前端编程的实用指南，专为开发人员提供Bootstrap 4框架的深入理解和应用技巧。Bootstrap 4是流行的前端开发工具，它致力于简化网页设计与开发流程，使响应式布局和组件化开发变...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值