2022-04-12 前端开发框架Bootstrap笔记(二) 栅格系统(Grid system)的用法和网格选项以及示例

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/124133544

本文档详细介绍了Bootstrap的栅格系统，包括导入bootstrap.min.css，使用container和row创建容器，理解col-md-的宽度设置，以及col-md-offset、col-md-push和col-md-pull改变列位置的方法，最后探讨了列嵌套的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

学习文档

官网:布局/Grid
菜鸟:栅格系统

介绍

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统
，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。
栅格系统也叫网格系统，本质就是布局

原理

通过行列组合创建页面布局，把网页内容放到设置的布局文件中，实现网页布局的目的。
栅格系统每行最多可容纳12列(大于12将会自动排版)

用法

1.导入bootstrap.min.css文件

 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

2.创建container容器

<div class="container">
        <div class="row">
            ......
        </div>
</div>

注:“container”和“row”共同组成栅格容器，“row”代表的就是一行。

3.设置名为col-md-的div，当尾数为1时，表示每个div的宽度占1/12，所以每行最多可以放置12个子div。

div class="container">
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-2</div>
            <div class="col-md-1">col-md-3</div>
            <div class="col-md-1">col-md-4</div>
            <div class="col-md-1">col-md-5</div>
            <div class="col-md-1">col-md-6</div>
            <div class="col-md-1">col-md-7</div>
            <div class="col-md-1">col-md-8</div>
            <div class="col-md-1">col-md-9</div>
            <div class="col-md-1">col-md-10</div>
            <div class="col-md-1">col-md-11</div>
            <div class="col-md-1">col-md-12</div>
            <!--超过12个，会在下一行显示-->
            <div class="col-md-1">col-md-13</div>
        </div>
</div>

同理,可以设置四个col-md-3

div class="container">
        <div class="row">
            <div class="col-md-3">col-md-1</div>
            <div class="col-md-3">col-md-2</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-4</div>
        </div>
</div>

知识点

1.网格选项:.col-xs(sm,md,lg)-数字

按照屏幕尺寸大小，Bootstrap栅格系统分别给出了相应的参数

上例中的col-md是对应的中等屏幕,其他尺寸的屏幕代码如下:

参数	含义
.col-xs-	超小屏幕，如手机（<768px）
.col-sm-	小屏幕，如平板（≥768px）
.col-md-	中等屏幕，如桌面显示器（≥992px)
.col-lg-	大屏幕，如大桌面显示器（≥1200px）

2.col-md-offset-

表示由原来的位置向右移动，数字表示移动几个单位。
举例:

        <!-- col-md-1右移两个单位==>col-md-3被自动排版到下一行 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-2">col-md-1</div>
            <div class="col-md-4">col-md-2</div>
            <div class="col-md-4">col-md-3</div>
        </div>

3.col-md-push-和col-md-pull-

col-md-push-和col-md-pull-可以改变列顺序
举例:
push-4表示向右推4列，
pull-8表示向左拉8列，
最终实现效果是左右两边调换位置。

        <!-- 改变列顺序(col-md-2显示在col-md-1左边) -->
        <h4>原来的顺序:左1右2</h4>
        <div class="row">
            <div class="col-md-8">col-md-1</div>
            <div class="col-md-4">col-md-2</div>
        </div>
        <h4>排序后的顺序:左2右1</h4>
        <div class="row">
            <div class="col-md-8 col-md-push-4">col-md-1</div>
            <div class="col-md-4 col-md-pull-8">col-md-2</div>
        </div>

4.列嵌套

添加一个新的.row和一系列的col-md-*列
到已经存在的col-md-*列中
新的子列也将分为12份显示

        <h4>列嵌套</h4>
        <!-- 结构:div.row>div.col-md-9>div.row+div.row -->
        <div class="row">
            <div class="col-md-9"> Level 1: col-md-1
                <div class="row">
                    <!-- Level2的row也分成12份,宽度是Level1的col-md-9(只占了9列) -->
                    <div class="col-md-6"> Level 2: col-md-1</div>
                    <div class="col-md-6"> Level 2: col-md-2</div>
                </div>
                <div class="row">
                    <!-- Level2的row也可以不占满12列,宽度是col-md-9的9/12 -->
                    <div class="col-md-3"> Level 3: col-md-1</div>
                    <div class="col-md-6"> Level 3: col-md-2</div>
                </div>
            </div>
            <!-- 也可以添加一个Level 1: col-md-2把剩下的三列占满 -->
            <div class="col-md-3"> Level 1: col-md-2</div>
        </div>

完整代码

html

<!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>
    <!-- 1.引入css文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .row {
            margin-bottom: 20px;
        }
        /* 加上边框和背景色 */
        
        [class*="col-"] {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #eee;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid #ddd;
            border: 1px solid rgba(86, 61, 124, .2);
        }
    </style>
</head>

<body>
    <!-- 2.创建container容器 -->
    <div class="container">
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-2</div>
            <div class="col-md-1">col-md-3</div>
            <div class="col-md-1">col-md-4</div>
            <div class="col-md-1">col-md-5</div>
            <div class="col-md-1">col-md-6</div>
            <div class="col-md-1">col-md-7</div>
            <div class="col-md-1">col-md-8</div>
            <div class="col-md-1">col-md-9</div>
            <div class="col-md-1">col-md-10</div>
            <div class="col-md-1">col-md-11</div>
            <div class="col-md-1">col-md-12</div>
            <!-- 第13列自动排版到第二行 -->
            <div class="col-md-1">col-md-13</div>
        </div>
        <!-- 也可以创建四个col-md-3占满12列 -->
        <div class="row">
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
        </div>
        <!-- col-md-1右移两个单位==>col-md-3被自动排版到下一行 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-2">col-md-1</div>
            <div class="col-md-4">col-md-2</div>
            <div class="col-md-4">col-md-3</div>
        </div>
        <!-- 改变列顺序(col-md-2显示在col-md-1左边) -->
        <h4>原来的顺序:左1右2</h4>
        <div class="row">
            <div class="col-md-8">col-md-1</div>
            <div class="col-md-4">col-md-2</div>
        </div>
        <h4>排序后的顺序:左2右1</h4>
        <div class="row">
            <div class="col-md-8 col-md-push-4">col-md-1</div>
            <div class="col-md-4 col-md-pull-8">col-md-2</div>
        </div>
        <h4>列嵌套</h4>
        <!-- 结构:div.row>div.col-md-9>div.row+div.row -->
        <div class="row">
            <div class="col-md-9"> Level 1: col-md-1
                <div class="row">
                    <!-- Level2的row也分成12份,宽度是Level1的col-md-9(只占了9列) -->
                    <div class="col-md-6"> Level 2: col-md-1</div>
                    <div class="col-md-6"> Level 2: col-md-2</div>
                </div>
                <div class="row">
                    <!-- Level2的row也可以不占满12列,宽度是col-md-9的9/12 -->
                    <div class="col-md-3"> Level 3: col-md-1</div>
                    <div class="col-md-6"> Level 3: col-md-2</div>
                </div>
            </div>
            <!-- 也可以添加一个Level 1: col-md-2把剩下的三列占满 -->
            <div class="col-md-3"> Level 1: col-md-2</div>
        </div>
    </div>
</body>

</html>