2022-04-12 前端开发框架Bootstrap笔记(二) 栅格系统(Grid system)的用法和网格选项以及示例
文章目录学习文档介绍原理用法1.导入bootstrap.min.css文件2.创建container容器3.设置名为col-md-的div，当尾数为1时，表示每个div的宽度占1/12，所以每行最多可以放置12个子div。知识点1.网格选项:.col-xs(sm,md,lg)-数字2.col-md-offset-3.col-md-push-*和col-md-pull-*4.列嵌套完整代码html结
·
文章目录
学习文档
介绍
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>
结果
技术共进，成长同行——讯飞AI开发者社区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)