Bootstrap入门（十四）组件8：媒体对象

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。

1.基本样式

2.嵌套使用

3.图片位置

4.使用<ul><li>标签嵌套使用

先引入本地的CSS文件

<link href="bootstrap.min.css" rel="stylesheet">

1.基本样式

我们先在容器div中创建一个class为media的div（媒体对象）

　　　　 <div class="container">

            <div class="media">

　　　　　　　　　...

            </div>

        </div>

先来一个图片（我们这里就不放了），放在左边

　　　　　　　　　<a class="media-left" href="#">

                    <img src="" alt="64*64图片">

                </a>

<a>标签之外就需要承载内容区域，是主体部分，又一个为了div，class为media-body，他的标题需要media-heading类

效果明显和方便，随便输入了大量大写字母

EXAMPLE

        <div class="container">

            <div class="media">

                <a class="media-left" href="#">

                    <img src="" alt="64*64图片">

                </a>

                <div class="media-body">

                    <h4 class="media-heading">ASD</h4>

                    <p>

                        ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                    </p>

                </div>

            </div>

        </div>

效果

再复制几个，就有回复贴之类的效果

2.嵌套使用

可是，有时候不是所有的需求都是在同一排，而是有的是缩进的

我们这里就只需要为其中一个嵌套使用，也就是在一个class为media的div中在嵌入一个class为media的div

　　　　　　　 <div class="media">

                <a class="media-left" href="#">

                    <img src="" alt="64*64图片">

                </a>

                <div class="media-body">

                    <h4 class="media-heading">ASD</h4>

                    <p>

                        ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                    </p>

                    <div class="media">

                        <a class="media-left" href="#">

                            <img src="" alt="64*64图片">

                        </a>

                        <div class="media-body">

                            <h4 class="media-heading">ASD</h4>

                            <p>

                                ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                                ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                                ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                                ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                                ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                            </p>

                        </div>

                    </div>

                </div>

            </div>

效果：

3.图片位置

①居右，有人说就是直接把<a>标签的media-left改为media-right就可以了，的确，但是还要把<a>标签放在div中主题内容的下面，即：

　　　　　　　 <div class="media">

                <div class="media-body">

                    <h4 class="media-heading">ASD</h4>

                    <p>

                        ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                    </p>

                </div>

                <a class="media-right" href="#">

                    <img src="" alt="64*64图片">

                </a>

            </div>

效果：

②图片下移

有时候希望图片正在中间显示或者在下面显示，需要在<a>标签中添加新属性（中间media-middle，下面media-bottom）

　　　　　　　 <div class="media">

                <a class="media-left media-middle" href="#">

                    <img src="" alt="64*64图片">

                </a>

                <div class="media-body">

                    <h4 class="media-heading">ASD</h4>

                    <p>

                        ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                    </p>

                </div>

            </div>

            <div class="media">

                <a class="media-left media-bottom" href="#">

                    <img src="" alt="64*64图片">

                </a>

                <div class="media-body">

                    <h4 class="media-heading">ASD</h4>

                    <p>

                        ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                    </p>

                </div>

            </div>

效果：

4.如果量多，可以不用div的形式，而是使用<ul><li>标签嵌套使用

（嵌套，图片移动的效果同上）

DIV UL LI

        <div class="container">

            <ul class="media-list">

                <li class="media">

                    <a class="media-left" href="#">

                        <img src="" alt="64*64图片">

                    </a>

                    <div class="media-body">

                        <h4 class="media-heading">ASD</h4>

                        <p>

                            ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                            ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                            ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                            ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                            ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        </p>

                    </div>

                </li>

                <li class="media">

                    <a class="media-left" href="#">

                        <img src="" alt="64*64图片">

                    </a>

                    <div class="media-body">

                        <h4 class="media-heading">ASD</h4>

                        <p>

                            ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                            ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                            ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                            ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                            ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        </p>

                    </div>

                </li>

                <li class="media">

                    <a class="media-left" href="#">

                        <img src="" alt="64*64图片">

                    </a>

                    <div class="media-body">

                        <h4 class="media-heading">ASD</h4>

                        <p>

                            ASDFGHHJKASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                            ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                            ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                            ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                            ASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjklASDFGHHJKlasdfghjklasdfghjkl

                        </p>

                    </div>

                </li>

            </ul>

        </div>

效果：

Bootstrap入门（十四）组件8：媒体对象的更多相关文章

  1. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  2. Bootstrap历练实例：默认的媒体对象

    Bootstrap 多媒体对象(Media Object) 本章我们将讲解 Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论), ...

  3. Bootstrap入门（四）表格

    Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...

  4. Bootstrap历练实例：嵌套的媒体对象

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. （十）进度条媒体对象和 Well 组件

    一．Well 组件 有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二．进度条组件 ...

  6. Spring入门(十四)：Spring MVC控制器的2种测试方法

    作为一名研发人员,不管你愿不愿意对自己的代码进行测试,都得承认测试对于研发质量保证的重要性,这也就是为什么每个公司的技术部都需要质量控制部的原因,因为越早的发现代码的bug,成本越低,比如说,Dev环 ...

  7. Bootstrap 学习笔记5 进度条媒体对象和well组件

    代码: <ul class="media-list"> <li class="media"> <div class="m ...

  8. [WebGL入门]十四，绘制多边形

    注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...

  9. Android入门(十四)内容提供器-实现跨程序共享实例

    原文链接:http://www.orlion.ga/661/ 打开SQLite博文中创建的 DatabaseDemo项目,首先将 MyDatabaseHelper中使用 Toast弹出创建数据库成功的 ...

  10. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

随机推荐

  1. Ubuntu安装pycharm

    在安装pycharm之前,想看一下需要安装那些软件. 在安装前先下载软件 JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk ...

  2. PAT 天梯赛 L2-002 链表去重

    模拟单链表的增删操作 题目链接:https://www.patest.cn/contests/gplt/L2-002 题解 最开始我脑抽用map模拟单链表进行操作,因为这样可以节约空间,并且用了cin ...

  3. jvm内存设置及总结

    http://dmouse.iteye.com/blog/1264118 jvm内存设置及总结 博客分类: java相关 Application情况: 大量使用了内存缓存,应用负载量较大,900w/d ...

  4. CodeForces 660B Seating On Bus

    模拟. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #inc ...

  5. Python正则表达式学习笔记

    [] 字符类,只要匹配里面的任意字符,都算匹配 . 元字符,可以匹配除换行符之外的所有字符 大小写敏感,但是可以关闭 \d  可以匹配0-9中的任意数字 {3}大括号里面的数字,边上前面一个字符匹配的 ...

  6. Delphi 中Format的字符串格式化使用说明(转)

    源:Delphi 中Format的字符串格式化使用说明(转) 一.Format函数的用法 Format是一个很常用,却又似乎很烦的方法,本人试图对这个方法的帮助进行一些翻译,让它有一个完整的概貌,以供 ...

  7. iOS开发之隐藏tabbar--解决隐藏后依然不能响应对应位置事件的问题

    状态条StatusBar 1 [UIApplication sharedApplication].statusBarHidden = YES; 导航条NavigationBar 1 [self.nav ...

  8. MYSQL一次性能优化实战经历[转]

    每次经历数据库性能调优,都是对性能优化的再次认识.对自己知识不足的有力验证,只有不断总结.学习才能少走弯路. 一.性能问题描述 应用端反应系统查询缓慢,长时间出不来结果.SQLServer数据库服务器 ...

  9. print打印网页相关

    作者:zccst 1,CSS <link href="/style/print.css" rel="stylesheet" type="text ...

  10. Qt下libusb-win32的使用（转）

    源:Qt下libusb-win32的使用(一)打印设备描述符 主要是在前一篇的基础上,学习libusb-win32的API使用.程序很简单,就是打印指定USB设备的设备描述符(当然其他描述符也是可以的 ...