详解Bootstrap媒体对象 - 洛水三千

在web页面中，图片居左，内容居右排列，是非常常见的效果，它也就是媒体对象，它是一种抽象的样式，可以用来构建不同类型的组件，在bootstrap框架中其对应的版本文件如下：

LESS: media.less

SASS: _media.scss

媒体对象一般是成组出现，一组媒体对象一般包括以下几部分：

1、媒体对象的容器：用来容纳媒体对象的所有内容，容器上需使用类名.media

2、媒体对象的对象：一般是图片，需使用类.media-object

3、媒体对象的主体：就是媒体对象的主体内容，可以是任何元素，需使用类.media-body

4、媒体对象的标题：用来描述媒体对象的一个标题，需使用类.media-heading

此外，bootstrap框架中常使用类.pull-left和.pull-right来控制媒体对象中的对象浮动方式

下面是它们的css源码：

<span style="color: #800000">.media,
.media-body </span>{<span style="color: #ff0000">
  overflow</span>:<span style="color: #0000ff"> hidden</span>;<span style="color: #ff0000">
  zoom</span>:<span style="color: #0000ff"> 1</span>;
}<span style="color: #800000">
.media,
.media .media </span>{<span style="color: #ff0000">
  margin-top</span>:<span style="color: #0000ff"> 15px</span>;
}<span style="color: #800000">
.media:first-child </span>{<span style="color: #ff0000">
  margin-top</span>:<span style="color: #0000ff"> 0</span>;
}<span style="color: #800000">
.media-object </span>{<span style="color: #ff0000">
  display</span>:<span style="color: #0000ff"> block</span>;
}<span style="color: #800000">
.media-heading </span>{<span style="color: #ff0000">
  margin</span>:<span style="color: #0000ff"> 0 0 5px</span>;
}<span style="color: #800000">
.media > .pull-left </span>{<span style="color: #ff0000">
  margin-right</span>:<span style="color: #0000ff"> 10px</span>;
}<span style="color: #800000">
.media > .pull-right </span>{<span style="color: #ff0000">
  margin-left</span>:<span style="color: #0000ff"> 10px</span>;
}

媒体样式相对来说比较简单，只是设置它们之间的间距；

下面来看看媒体对象的运用：

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>默认媒体对象<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-right"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/1.jpg"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>荷塘月色<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的夜里，总该另有一 番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑……<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span>

 

媒体对象的嵌套

bootstrap媒体对象嵌套，只需将另一个媒体对象结构放在媒体对象的主体（.media-body）中。下面来看看媒体对象嵌套的运用

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>默认媒体对象的嵌套<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-left"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/3.jpg"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>荷塘月色<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>月光如流水一般，静静地泻在这一片片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-left"</span><span style="color: #0000ff">></span>
                    <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/4.jpg"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
                    <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>这里是嵌套内容1111<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
                    <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>荷塘的四面，远远近近，高高低低都是树，而杨柳最多。这些树将一片荷塘重重围住；只在小路一旁，漏着几段空隙，像是特为月光留下的。<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
                    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
                        <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-left"</span><span style="color: #0000ff">></span>
                            <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/5.jpg"</span><span style="color: #0000ff">></span>
                        <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
                        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
                            <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>这里是嵌套内容2222<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
                            <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>树梢上隐隐约约的是一带远山，只有些大意罢了。树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。这时候最热闹的，要数树上的蝉声与水里的蛙声；但热闹是它们的，我什么也没有<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
                        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
                    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

效果如下：

媒体对象列表

bootstrap框架提供了一个媒体对象列表展示的效果，在写结构的时候可以使用标签ul，并在标签ul上添加类名.media-list,在标签li上使用类.media

例如：

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>媒体对象列表<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">ul </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-list"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">li </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-left"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/1.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>媒体对象列表111<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四周，长着许多树，蓊蓊（wěng）郁郁（2）的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">li </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-left"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/2.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>媒体对象列表222<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>路上只我一个人，背着手踱（duó）着。这一片天地好像是我的；我也像超出了平常的自己，到了另一个世界里。我爱热闹，也爱宁静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">li </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-left"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/3.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>媒体对象列表333<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。曲曲折折的荷塘上面，弥望（3）的是田田（4）的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">li </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-left"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/4.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>媒体对象列表444<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>忽然想起采莲的事情来了。采莲是江南的旧俗，似乎很早就有，而六朝时为盛；从诗歌里可以约略知道。采莲的是少年的女子，她们是荡着小船，唱着艳歌（14）去的。采莲人不用说很多，还有看采莲的人。那是一个热闹的季节，也是一个风流（15）的季节。梁元帝（16）《采莲赋》里说得好：。<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">ul</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

效果如下：