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

学习文档

官网:布局/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