BootStrap媒体对象

最新推荐文章于 2022-06-15 22:45:34 发布

花果山总钻风

最新推荐文章于 2022-06-15 22:45:34 发布

阅读量731

点赞数

分类专栏： BootStrap

本文链接：https://blog.csdn.net/dszgf5717/article/details/47268479

版权

BootStrap 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

摘自《极客学院》

1、效果图：

2、html代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="bootstrap.min.css" rel="stylesheet">
    <title>BootStrap媒体对象</title>
    <style>
        body{
            margin: 10px 0px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="media-list">
            <li class="media">
                <!--class=media-middle内容居中-->
                <a class="media-left media-middle" href="#">
                    <img src="psb%20(5).gif" alt="">
                </a>
                <div class="media-body">
                    <h3>fdafdsafdgf</h3>
                    <p>hellohellohellohellohellohellohellovvvhellohello</p>
                    <p>hellohellohellohellohellohellohellovvvhellohello</p>
                    <p>hellohellohellohellohellohellohellovvvhellohello</p>
                    <p>hellohellohellohellohellohellohellovvvhellohello</p>
                    <p>hellohellohellohellohellohellohellovvvhellohello</p>
                    <p>hellohellohellohellohellohellohellovvvhellohellod</p>
                </div>
            </li>
            <li class="media">
                <!--class=media-middle内容居中-->
                <a class="media-left media-middle" href="#">
                    <img src="psb%20(5).gif" alt="">
                </a>
                <div class="media-body">
                    <h3>fdafdsafdgf</h3>
                    <p>hellohellohellohellohellohellohellovvvhellohello</p>
                    <p>hellohellohellohellohellohellohellovvvhellohello</p>
                    <p>hellohellohellohellohellohellohellovvvhellohello</p>
                    <p>hellohellohellohellohellohellohellovvvhellohello</p>
                    <p>hellohellohellohellohellohellohellovvvhellohello</p>
                    <p>hellohellohellohellohellohellohellovvvhellohellod</p>
                </div>
            </li>
            <li class="media">
                <!--class=media-middle内容居中-->
                <a class="media-left media-middle" href="#">
                    <img src="psb%20(5).gif" alt="">
                </a>
                <div class="media-body">
                    <h3>fdafdsafdgf</h3>
                    <p>hellohellohellohellohellohellohellovvvhellohello</p>
                    <p>hellohellohellohellohellohellohellovvvhellohello</p>
                    <p>hellohellohellohellohellohellohellovvvhellohello</p>
                    <p>hellohellohellohellohellohellohellovvvhellohellod</p>
                    <p>hellohellohellohellohellohellohellovvvhellohellod</p>
                    <p>hellohellohellohellohellohellohellovvvhellohellod</p>
                    <p>hellohellohellohellohellohellohellovvvhellohellod</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>