<Bootstrap> 学习笔记六. 栅格系统使用案例

最新推荐文章于 2022-11-20 16:57:03 发布

weixin_30564785

最新推荐文章于 2022-11-20 16:57:03 发布

阅读量142

点赞数

原文链接：http://www.cnblogs.com/ZeroHour/p/8288789.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">
    <script src="bootstrap/js/jquery-3.2.1.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container-fluid">
    <!--加入栅格系统-->
    <!--行-->
    <div class="row">
        <!--列-->
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <!--// 圆角边框-->
            <div class="thumbnail">

                <!--图片-->
                <img src="1.png">
                <div class="caption">
                    <!--标题-->
                    <h3 class="text-success">RayLee</h3>

                    <!--内容-->
                    <p class="text-muted">RayLee</p>
                </div>
                <!--按钮-->
                <button class="btn btn-success">去看看</button>
            </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <div class="thumbnail">
                <img src="1.png">
                <div class="caption">
                    <h3>RayLee</h3>
                    <p>RayLee</p>
                </div>
                <button class="btn btn-success">去看看</button>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <div class="thumbnail">
                <img src="1.png">
                <div class="caption">
                    <h3>RayLee</h3>
                    <p>RayLee</p>
                </div>
                <button class="btn btn-success">去看看</button>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <div class="thumbnail">
                <img src="1.png">
                <div class="caption">
                    <h3>RayLee</h3>
                    <p>RayLee</p>
                </div>
                <button class="btn btn-success">去看看</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>