一文带你马上清楚bootstrap的栅格系统

bootstrap的栅格系统

我们都知道bootstrap的栅格系统是为了实现网站的响应式布局，但bootstrap提供了一套响应式、移动设备优先的流式栅格系统，它会将网页分为12等价（宽度），举个例子，假设你设置最外层div的宽度为1200px，那么每一份就占100px。话不多说，直接上代码和效果图吧。
可见代码中的注释说明：
例1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstarp 栅格系统</title><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"><!--为了更好地适配移动设备，使用css的媒体查询功能--><meta name="viewport" content="width=device-width,initial-scale=1" /><style>.row div{border: 2px solid #ff0000;height: 100px;}</style>
</head>
<body><!--栅格系统，会将网页分为12等价（宽度） ，设置最外层div的宽度为1200px，每一份就是100px--><!--三层，第一层必须指定container属性，第二层必须指定row属性--><!--所有的div，如果不指定高度，默认是0px--><div class="container"><!--这里是内联样式来设置的宽度，将3个div分别分为3,4,3等份--><div class="row"><div style="width:30%">1</div><div style="width:40%">2</div><div style="width:30%">3</div></div><!--如果这里用col-4,则会被自动等分为3等份，因为12/3=4--><div class="row"><div class="col-4">1</div><div class="col-4">2</div><div class="col-4">3</div></div></div></body>
</html>

如图：

例2：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstarp 栅格系统</title><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"><!--为了更好地适配移动设备，使用css的媒体查询功能--><!--viewport：视口；device-width：当前设备的宽度（浏览器自己读）；initial-scale=1代表100%的视区窗口用来显示--><!--下面这行代码一定要加，不然在手机端响应不了--><meta name="viewport" content="width=device-width,initial-scale=1" /><style>.row div{border: 2px solid #ff0000;height: 100px;}</style>
</head>
<body><!--col-xl-3:屏幕宽度大于1200px 即在超大屏幕上显示3列宽度(即3/12列，也就是container总宽度的25%，下面同理)col-lg-3:屏幕宽度大于992px 即在大型屏幕显示3列宽度col-md-6:屏幕宽度大于768px 即在中型屏幕显示6列宽度col-sm-6:屏幕宽度大于576px 即在小型屏幕显示6列宽度col-12:屏幕宽度小于576px 即在超小屏幕显示12列宽度(100%) 与手机适配此设计--><div class="container"><div class="row"><div class="col-sm-9 col-12">第一行第一列</div><div class="col-sm-3 col-12">第一行第二列</div></div></div></body>
</html>

如图：

根据例2扩展例3：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstarp 栅格系统</title><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"><!--为了更好地适配移动设备，使用css的媒体查询功能--><meta name="viewport" content="width=device-width,initial-scale=1" /><style>.row div{border: 2px solid #ff0000;height: 100px;}.container{border: 5px solid yellow;}/*分辨率大于1200px的时候，因为bootstrap默认最大1140px*/@media (min-width: 1200px) {.container{max-width: 1300px;}}</style>
</head>
<body><div class="container"><div class="row"><!--d-none d-sm-block 在中型屏幕以下浏览器上隐藏该元素 --><!--d-none d-md-block 在大型屏幕以下浏览器上隐藏该元素（其他d-lg-block、d-xl-block同理） --><!--反之： --><!--d-sm-none 在中型屏幕以下浏览器上显示该元素，与d-none d-sm-block 是相反的效果（其他宽度的同理） --><!--这里，我们以第一个为例： --><div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 d-none d-sm-block">1</div><div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">2</div><div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">3</div><div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">4</div></div></div></body>
</html>

好了，到这里你应该已经比较清楚bootstrap的栅格系统是怎么工作的了吧，不妨自己把代码写一写看看各种效果，这样子会理解得更快。

一文带你马上清楚bootstrap的栅格系统相关推荐

html栅格系统格式,Bootstrap的栅格系统是什么？栅格系统详解
本篇文章就给大家带来Bootstrap的栅格系统是什么?栅格系统详解,让大家了解Bootstrap栅格系统.栅格参数是什么,列偏移.列嵌套怎么设置.有一定的参考价值,有需要的朋友可以参考一下,希望对你 ...
bootstrap解析-栅格系统
.container(布局容器) 屏幕宽1200px以上(col-lg) 1. 默认width为1170px 2. padding,lefet和right各为15px,所以内容width为1140px ...
Bootstrap 默认栅格系统
Bootstrap的默认栅格系统为固定宽度布局,宽度为940px,共包含12列,每列的宽度为 60px,列间隙为 20px.如图 2‑1所示: 图2-1 Bootstrap默认栅格系统 HTML代码 ...
Bootstrap之栅格系统偏移
Bootstrap之栅格系统偏移 Bootstrap之栅格系统偏移: 在Bootstrap中可能会使用到offset(偏移),具体语法格式如下: <div class="col-md- ...
深入理解BootStrap Item7 -- 栅格系统（布局）
1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...
Bootstrap、栅格系统布局
一.Bootstrap Bootstrap是一个基于HTML.CSS和JavaScript语言编写的框架,具有简单.灵活的特性,拥有样式库.组件和插件. · Bootstrap常用来开发响应式布局和移 ...
【前端4】bootstrap：栅格系统，隔行/触摸换色，分页/导航条，模态框/轮播图，旅游首页
文章目录 1.bootstrap基本模板:meta/title,link/script 2.两种布局容器/栅格系统:自动补 3.样式_表格/按钮/图片/表单:class属性,for属性联动 4.组件_ ...
Bootstrap之栅格系统
bootstrap 移动优先中文官网 http://www.bootcss.com/ 1.基本模板 <!DOCTYPE html> <html lang="en&quo ...
bootstrap的栅格系统和响应式工具
关于bootstrap的响应式布局,昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗,在这里记录一下一:meta标签的引用 < ...

一文带你马上清楚bootstrap的栅格系统

bootstrap的栅格系统

一文带你马上清楚bootstrap的栅格系统相关推荐

最新文章

热门文章