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

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>

效果：