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. MC34063+MOSFET扩流 12V-5V 折腾出了高效率电路(转)

    源:http://www.amobbs.com/thread-5484710-1-1.html 从网上找到一些MC34063扩流降压电路图,一个个的试,根本达不到我的基本要求,全都延续了34063的降 ...

  2. IWorkSpace接口介绍

    IWorkspace接口提供访问工作空间的通用属性和方法,如它的连接属性,以及包含的数据集的方法. 如何打开一个数据库  要打开一个数据库,也就意味着我们要得到那个工作空间,而工作空间是一个普通类,也 ...

  3. 不小心删掉root目录......

    1.先保存还剩下的的东西,比如说桌面的文件,保存在/下面其他目录 2.执行命令 cp -R /etc/skel/.[!.]* ./ 3.reboot

  4. ARM-LINUX学习笔记-1

    安装完linux之后记得系统更新,更新使用apt命令,如下(记得使用之前使用sudo -i 指令切换到root用户模式) apt-get update  更新系统软件源,相当于查找更新 apt-get ...

  5. HTML学习二（基础）

    HTML标题标题(Heading)是通过<h1>-<h6>等标签进行定义的<h1>定义最大标题<h6>定义最小标题注释:浏览器会自动地在标题的前后添加空 ...

  6. axis2开发实例（一）

    主要参考<axis2之webservice新手超详细教程http://wenku.baidu.com/view/6eae036d011ca300a6c390a4.html> <axi ...

  7. C#基础之操作字符串的方法

    C#基础之操作字符串的方法 C#中封装的对字符串操作的方法很多,下面将常见的几种方法进行总结: 首先定义一个字符串str 1.str.ToCharArray(),将字符串转换成字符数组 2.str.S ...

  8. 巧用HTML5给按钮背景设计不同的动画

      如何巧用HTML5设计按钮背景不同动画特效,在该特效中,当鼠标滑过按钮时,使用CSS3   animation 来动画   background-size  和  background-posit ...

  9. SGU 194 Reactor Cooling ——网络流

    [题目分析] 无源汇上下界可行流. 上下界网络流的问题可以参考这里.↓ http://www.cnblogs.com/kane0526/archive/2013/04/05/3001108.html ...

  10. MUI开发注意事项

    mui开发注意事项,有需要的朋友可以参考下. mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验:这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文:想了解mui更详细的 ...