BootStrap笔记-栅格系统

BootStrap中把视口分为12列。

BootStrap4中栅格有5类：

.col	所有设备
.col-sm	平板-屏幕宽度>=576px
.col-md	桌面显示器-屏幕宽度>=768px
.col-lg	大桌面显示器-屏幕宽度>=992px
.col-xl	超大桌面显示器-屏幕宽度>=1200px

如：.col-sm-4就是后面的数值加起来要小于等于12就可以了。

如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CN_TEST1</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--    bootstrap css核心文件--><link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!--    bootstrap使用到了jquery，需要提前引用--><script src="js/jquery-3.5.1.min.js"></script>
<!--    弹窗、提示、下拉菜单--><script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!--    bootstrap核心文件--><script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script></head>
<body><div class="container-fluid" style="background: orangered"><div class="row"><div class="col-*-*" style="background: blue"><h1>Hello World</h1></div></div><div class="row"><div class="col-*-*" style="background: yellow"><h1>Hello World</h1></div><div class="col-*-*" style="background: green"><h1>Hello World</h1></div><div class="col-*-*" style="background: pink"><h1>Hello World</h1></div></div></div><br/><br/><div class="container-fluid" style="background: orangered"><div class="row"><div class="col" style="background: purple"><h1>Hello World</h1></div><div class="col" style="background: darkblue"><h1>Hello World</h1></div><div class="col" style="background: brown"><h1>Hello World</h1></div></div></div></body>
</html>

运行截图如下：

缩小点后：

其中的.col_*_*，第一个*代表响应的设备，sm、md、lg、xl。第二个*代表数字。

其中.col不带数字代表，让BootStrap自动处理布局，如果只有2个，那么每个占50%，如果有3个那么每个占33.33%

BootStrap笔记-栅格系统相关推荐

bootstrap解析-栅格系统
.container(布局容器) 屏幕宽1200px以上(col-lg) 1. 默认width为1170px 2. padding,lefet和right各为15px,所以内容width为1140px ...
一文带你马上清楚bootstrap的栅格系统
bootstrap的栅格系统我们都知道bootstrap的栅格系统是为了实现网站的响应式布局,但bootstrap提供了一套响应式.移动设备优先的流式栅格系统,它会将网页分为12等价(宽度),举个例 ...
Bootstrap 默认栅格系统
Bootstrap的默认栅格系统为固定宽度布局,宽度为940px,共包含12列,每列的宽度为 60px,列间隙为 20px.如图 2‑1所示: 图2-1 Bootstrap默认栅格系统 HTML代码 ...
html栅格系统格式,Bootstrap的栅格系统是什么？栅格系统详解
本篇文章就给大家带来Bootstrap的栅格系统是什么?栅格系统详解,让大家了解Bootstrap栅格系统.栅格参数是什么,列偏移.列嵌套怎么设置.有一定的参考价值,有需要的朋友可以参考一下,希望对你 ...
Bootstrap之栅格系统偏移
Bootstrap之栅格系统偏移 Bootstrap之栅格系统偏移: 在Bootstrap中可能会使用到offset(偏移),具体语法格式如下: <div class="col-md- ...
深入理解BootStrap Item7 -- 栅格系统（布局）
1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...
Bootstrap：栅格系统
[](()栅格系统的工作原理: 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局行(row)"必须包含在 .container(固定宽度)或 .containe ...
【前端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笔记-栅格系统相关推荐

最新文章

热门文章