bootstrap栅格系统

来源：互联网发布：cf检测数据异常编辑：程序博客网时间：2024/05/20 14:41
栅格系统

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">    <title>栅格系统</title>    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">    <link rel="stylesheet" href="css/main.css">    <!--[if lt IE 9]>    <script src="lib/html5shiv/html5shiv.min.js"></script>    <script src="lib/respond/respond.min.js"></script>  <![endif]-->    <style>        .a{            background-color: #ccc;            height: 50px;            border: 1px solid #333;        }    </style></head><body><!--1170px--><div class="container">    <div class="row">        <div class="col-md-1 a">1</div>        <div class="col-md-1 a">2</div>        <div class="col-md-1 a">3</div>        <div class="col-md-1 a">4</div>        <div class="col-md-1 a">5</div>        <div class="col-md-1 a">6</div>        <div class="col-md-1 a">7</div>        <div class="col-md-1 a">8</div>        <div class="col-md-1 a">9</div>        <div class="col-md-1 a">10</div>        <div class="col-md-1 a">11</div>        <div class="col-md-1 a">12</div>    </div>    <div class="row">        <div class="col-md-9 a">9</div>        <div class="col-md-3 a">3</div>    </div></div><div class="container">    <div class="row">        <div class="col-lg-3 col-md-4 a">a</div>        <div class="col-lg-3 col-md-4 a">a</div>        <div class="col-lg-3 col-md-4 a">a</div>        <div class="col-lg-3 col-md-4 a">a</div>        <div class="col-lg-3 col-md-4 a">a</div>        <div class="col-lg-3 col-md-4 a">a</div>        <div class="col-lg-3 col-md-4 a">a</div>        <div class="col-lg-3 col-md-4 a">a</div>        <div class="col-lg-3 col-md-4 a">a</div>        <div class="col-lg-3 col-md-4 a">a</div>        <div class="col-lg-3 col-md-4 a">a</div>        <div class="col-lg-3 col-md-4 a">a</div>    </div></div><!--嵌套style="padding: 0",因为栅格系统默认有15px 的padding--><div class="container">    <div class="row">        <div class="col-lg-9 a" style="padding: 0">            <div class="col-lg-4 a">a</div>            <div class="col-lg-4 a">a</div>            <div class="col-lg-4 a">a</div>        </div>        <div class="col-lg-3 a">a</div>    </div></div><script src="lib/jquery/jquery.js"></script><script src="lib/bootstrap/js/bootstrap.js"></script><script src="js/main.js"></script></body></html>
阅读全文
0 0