• 目录

BootStrap网格Grid

阅读量: 447 编辑

BootStrap网格Grid

一、网格Grid介绍

  • 网格是由相交的直线(垂直的、水平的)组成的结构 (比如excel)

  • 网格是一种布局形式,将一个网页分成一个个的小格子,然后按照布局填充内容即可

  • 网格的使用

    • 常用来做网页布局

    • 必须用在 .container 选择器 里面

    • 常用 class="col-md-*" 来均分,总共的格子数是12格

二、代码实战

代码的详细解读,可以参考视频教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="./res/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="./res/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./res/bootstrap.min.js"></script>

</head>
<body>

    <h2>网格的使用</h2>
    <div class="container" style="width: 100%;">
        <div class="row">
            <div class="col-md-3" style="background-color:red;">我占了3个格子</div>

            <!--我占了6个格子-->
            <div class="col-md-6" style="background-color:yellow;padding:0px;">
                <div class="col-md-4" style="background-color:blue;">我占了4个格子</div>
                <div class="col-md-4" style="background-color:orange;">我占了4个格子</div>
                <div class="col-md-4" style="background-color:black;">我占了4个格子</div>
            </div>

            <div class="col-md-3" style="background-color:blue;">我占了3个格子</div>
        </div>

    </div>
</body>
</html>


  • 目录