zoukankan      html  css  js  c++  java
  • <Bootstrap> 学习笔记六. 栅格系统使用案例

    <!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>
  • 相关阅读:
    Nginx软件优化
    分布式文件系统---GlusterFS
    内建DNS服务器--BIND
    ESXI 6.5 从载到安装
    在Linux下写一个简单的驱动程序
    TQ2440开发板网络配置方式
    虚拟机Linux下找不到/dev/cdrom
    求最大公约数
    strcmp的源码实现
    转:嵌入式软件工程师经典笔试题
  • 原文地址:https://www.cnblogs.com/ZeroHour/p/8288789.html
Copyright © 2011-2022 走看看