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

2022-10-29 08:15:28

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 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>

效果：

码农公寓

相关文章