Bootstrap CSS——媒体对象

最新推荐文章于 2024-04-05 13:35:41 发布
最新推荐文章于 2024-04-05 13:35:41 发布
阅读量523 收藏
点赞数
分类专栏： Bootstrap 文章标签： bootstrap css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011350527/article/details/48953981
版权

http://v3.bootcss.com/components/#media
mark

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        body{
            margin: 10px 0px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!--<div class="media">-->
            <!--<a class="media-left" href="#">-->
                <!--<img src="plus.png" alt="图片">-->
            <!--</a>-->
            <!--<div class="media-body">-->
                <!--<h4 class="media-heading">-->
                    <!--欢迎来到量投-->
                <!--</h4>-->
                <!--<p>-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投-->
                <!--</p>-->

                <!--&lt;!&ndash;嵌套使用&ndash;&gt;-->
                <!--<div class="media">-->
                    <!--<a class="media-left" href="#">-->
                        <!--<img src="plus.png" alt="图片">-->
                    <!--</a>-->
                    <!--<div class="media-body">-->
                        <!--<h4 class="media-heading">-->
                            <!--欢迎来到量投-->
                        <!--</h4>-->
                        <!--<p>-->
                            <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                            <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                            <!--欢迎来到量投欢迎来到量投欢迎来到量投-->
                        <!--</p>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->

        <!--<div class="media">-->
            <!--<a class="media-left media-middle" href="#">-->
                <!--<img src="plus.png" alt="图片">-->
            <!--</a>-->
            <!--<div class="media-body">-->
                <!--<h4 class="media-heading">-->
                    <!--欢迎来到量投-->
                <!--</h4>-->
                <!--<p>-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投-->
                <!--</p>-->
            <!--</div>-->
        <!--</div>-->

        <!--&lt;!&ndash;图片置于右边 media-right且标签顺序改变&ndash;&gt;-->
        <!--<div class="media">-->

            <!--<div class="media-body">-->
                <!--<h4 class="media-heading">-->
                    <!--欢迎来到量投-->
                <!--</h4>-->
                <!--<p>-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投-->
                    <!--欢迎来到量投欢迎来到量投欢迎来到量投-->
                <!--</p>-->
            <!--</div>-->
            <!--<a class="media-right media-bottom" href="#">-->
                <!--<img src="plus.png" alt="图片">-->
            <!--</a>-->
        <!--</div>-->

        <!--列表方式实现-->
        <ul class="media-list">
            <li class="media">
                <a class="media-left" href="#">
                    <img src="plus.png" alt="">
                </a>
                <div class="media-body">
                    <h4>欢迎来到量投</h4>
                    <p>
                        欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投
                        欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投
                        欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投
                    </p>
                </div>
            </li>

            <li class="media">
                <a class="media-left" href="#">
                    <img src="plus.png" alt="">
                </a>
                <div class="media-body">
                    <h4>欢迎来到量投</h4>
                    <p>
                        欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投
                        欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投
                        欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投
                    </p>
                </div>
            </li>

            <li class="media">
                <a class="media-left" href="#">
                    <img src="plus.png" alt="">
                </a>
                <div class="media-body">
                    <h4>欢迎来到量投</h4>
                    <p>
                        欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投
                        欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投
                        欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投
                    </p>
                </div>
            </li>

            <li class="media">
                <a class="media-left" href="#">
                    <img src="plus.png" alt="">
                </a>
                <div class="media-body">
                    <h4>欢迎来到量投</h4>
                    <p>
                        欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投
                        欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投
                        欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投欢迎来到量投
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
Tarkzeng
关注
专栏目录
Bootstrap 组件：媒体对象组件（media）
WangMin@汪末末
09-07 2814
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 在web页面中，图片居左，内容居右排列（图片居右，内容居左排列），是非常常见的效果，它也就是媒体对象，它是一种抽象的样式，可以用来构建不同类型的组件。 默认样式 默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。 媒体对象一般是成组出现，一组媒体对象一般包括以下几部分： 1、媒体对象的容器：用来容纳媒体对象的所有内容，容器上需使用类名.media 2、媒体对
Bootstrap学习笔记——缩略图、警示框、进度条、媒体对象、列表组、画板
gengfu_php的博客
10-06 980
1 缩略图缩略图（一）缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。<div class="container"> <div class="row"> <div
媒体对象
yszbrzdd的博客
09-16 224
代码段： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content=
Bootstrap媒体对象
歪脖先生的博客
05-23 643
媒体 媒体是一类具有特殊版式的组件，用来设计图文混排的效果，通常由一个向左或向右浮动的媒体对象（如，图像、视频、音频等）和一个媒体内容块构成。 1、创建媒体 在HTML结构中，一个媒体组件由 .media 的容器创建，其中的媒体对象由 .media-left或.media-right 的容器创建，媒体内容块由 .media-body 的容器创建（其中，由 .media-heading定义它...
Bootstrap系列之媒体对象（Media object）
老__L的博客
06-15 1250
媒体对象（Media object）
Bootstrap 媒体对象 列表组
dxm809的博客
05-30 235
@{    Layout = null;}&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta name="viewport" content="width=device-width" /&gt;    &lt;title&gt;Index&lt;/title&gt;    &lt;link href=&
Bootstrap v3 学习笔记 —— 全局 CSS 样式
最新发布
cccloveforever的博客
04-05 1556
Bootstrap v3 设置全局的 CSS 样式。
HTML期末学生大作业——基于html+css+javascript+jquery+bootstrap响应式音乐酒吧网站
HTML网页设计
08-06 695
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结......
Bootstrap项目实战——架构视角介绍使用
心暖未晴
07-03 8246
微金所项目实战1. 搭建Bootstrap页面骨架及项目目录结构├─ /xxxxxxx/ ··················· 项目所在目录 └─┬─ /css/ ······················· 我们自己的CSS文件 ├─ /font/ ······················ 使用到的字体文件 ├─ /img/ ······················· 使用到的
【Bootstrap框架】——组件（Component）
袅袅青烟散的博客
09-22 7531
1.图标字体图标字体本身也是字体，与普通字体不同，内容是图标。 Bootstrap提供了一套专用于Web/移动开发图标字体，Glyphicons Halflings字体图标。@font-face { /*声明一种服务器端字体*/ font-family: 'Glyphicons Halflings'; src: url(../fonts/glyphicons-halflings-r
bootstrap媒体对象
杨哥的博客
05-16 519
媒体对象 XXX 内容标题 企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽， 它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有18
BootStrap 媒体对象
刚哥的博客
07-21 1158
媒体对象可以包含图片、视频或者音频等媒体，以达到对象和文本组合显示的样式效果 基本示例                                 红杏                      杏（学名：Armeniaca vulgaris Lam.）落叶乔木。地生，植株无毛。叶互生，阔卵形或圆卵形叶子，边缘有钝锯齿；近叶柄顶端有二腺体；淡红色花单生或2-3个同生
Bootstrap组件之媒体对象
bboyjoe的博客
08-01 3729
.media——指定该元素包裹媒体对象组件； .media-left——设置媒体对象的多媒体内容居左； .media-right——设置媒体对象的多媒体内容居右； .media-middle——设置媒体对象的多媒体内容上下居中； .media-bottom——设置媒体对象的多媒体内容居底； .media-body——设置媒体对象的文本内容部分； .meida-heading——设置h4
Bootstrap 多媒体对象
书香水墨
07-24 517
一、Bootstrap 多媒体对象 1.1 基础多媒体对象 要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果: <div class="container mt-3"> <div class="media border p-3"> ...
Bootstrap的媒体对象&表格&模态框&图标
weixin_63719049的博客
05-03 453
Bootstrap的媒体对象&表格&模态框&图标
23、媒体对象
QilanAllen的博客
06-04 638
在Web页面或者说移动页面制作中，常常看到这样的效果，左边居左（或居右），内容居右（或居左）排列，如下图所示： 我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式，可以用来构建不同类型的组件。 一、默认媒体对象 媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分： 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片 媒体对象的主体：常使用“...
Bootstrap(媒体对象&表格&模态框&图标)
weixin_56996467的博客
04-03 600
一、媒体对象 HTML代码： <div class="media"> <img src="img/1.png" class="mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0"><b>冷间谍</b></h5> <p>书籍价格:9.9</p> <p>作者:大黄</p> <p>
Bootstrap媒体对象详解与实战应用
Bootstrap的媒体对象样式在LESS或Sass源文件中分别定义为`media.less`和`_media.scss`，编译后的CSS会在`bootstrap.css`文件的第4792行至第4819行找到。在实际应用中，开发者可以通过以下结构来创建媒体对象： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值