Bootstarp十二栅格系统

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

以上称之为栅格系统，通俗来讲就是把一个页面平分为十二等份所以又叫十二栅格系统。

1.十二栅格系统的布局

它的布局容器分为两种：

container为固定宽度布局两边会留有固定的间距
container-fluid为自适应布局会铺满整个屏幕随着屏幕的宽度来改变

例如：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./4.14z/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        div{background: cyan;height: 100px;margin-bottom: 10px;}
    </style>
</head>
<body>
    <div class="container"></div>
    <div class="container-fluid"></div>
    <script src="./4.14z/bootstrap-3.3.7-dist/js/jquery-1.11.3.min.js"></script>
    <script src="./4.14z/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>

结果：
在这里插入图片描述

2.列组合

栅格系统把屏幕平分为了12等份
宽屏：lg 1200px以上
pc端：md 970px-1200px
pad端：sm 768px-970px
移动端：xs 768px以下
.row行元素，.col列元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./4.14z/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .container {
            height: 100px;
            margin-bottom: 10px;
        }
        .border{
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-1 border">1</div>
            <div class="col-sm-1 border">2</div>
            <div class="col-sm-1 border">3</div>
            <div class="col-sm-1 border">4</div>
            <div class="col-sm-1 border">5</div>
            <div class="col-sm-1 border">6</div>
            <div class="col-sm-1 border">7</div>
            <div class="col-sm-1 border">8</div>
            <div class="col-sm-1 border">9</div>
            <div class="col-sm-1 border">10</div>
            <div class="col-sm-1 border">11</div>
            <div class="col-sm-1 border">12</div>
        </div>

    </div>
    <script src="./4.14z/bootstrap-3.3.7-dist/js/jquery-1.11.3.min.js"></script>
    <script src="./4.14z/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>

</html>

结果：
在这里插入图片描述

3.列偏移

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间，例如，col-屏幕宽度-offset-数字来表示偏移的列数。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./4.14z/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .container {
            margin-bottom: 10px;
        }
        .border {
            line-height: 200px;
            height: 200px;
            border: 1px solid black;
            text-align: center;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-3 border">1</div>
            <div class="col-sm-4  col-sm-offset-2 border">2</div>
        </div>

    </div>
    <script src="./4.14z/bootstrap-3.3.7-dist/js/jquery-1.11.3.min.js"></script>
    <script src="./4.14z/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>

结果：
在这里插入图片描述

4.列嵌套

列嵌套可以在已有的列的基础上再嵌套，把它重新划分为12等份。
例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./4.14z/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .container {
            margin-bottom: 10px;
        }

        .border {
            line-height: 200px;
            height: 200px;
            border: 1px solid black;
            text-align: center;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 border">
                <div class="row">
                    <div class="col-sm-6 border" style="background: chartreuse;">1-1</div>
                    <div class="col-sm-6 border" style="background: cyan;">1-2</div>
                </div>
            </div>
            <div class="col-sm-6 border">2</div>
        </div>

    </div>
    <script src="./4.14z/bootstrap-3.3.7-dist/js/jquery-1.11.3.min.js"></script>
    <script src="./4.14z/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>

</html>

结果：

在这里插入图片描述

原文链接：https://blog.csdn.net/Hfeidz/article/details/115891678