BootStrap-栅格系统
2024-04-22 07:52:13
1.1 栅格系统组成
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12格。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。
1.2 两种容器
| 容器的类样式名 | 特点 |
|---|---|
| container | 固定宽度的容器，在不同的设备上宽度不同 |
| container-fluid | 始终占屏幕宽度的100% |
代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--网页编码的类型--><meta charset="utf-8"><!--使用最新的支持H5浏览器内核来解析--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--视口：在浏览器中一个虚拟的网页容器。参数：网页的宽度设置为设备的宽度 初始缩放比: 1:1--><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><style type="text/css">div{border: 2px solid red;height: 100px;}</style><title>容器创建</title><!-- 导入文件：bootstrap.css --><link href="../static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container">container：不同的设备上有不同的固定宽度</div><div class="container-fluid">container-fluid：100%宽度显示</div><!-- 导入jQuery文件Bootstrap的所有JavaScript插件都依赖 jQuery，所以必须放在前边 --><script src="../static/js/jquery-3.1.1.js"></script><!-- 加载 Bootstrap的所有 JavaScript插件--><script src="../static/js/bootstrap.min.js"></script>
</body>
</html>
执行结果
1.3 设备查询@media
通过不同的设备类型和条件定义样式表规则。设备查询让CSS可以更精确作用于不同的设备类型和同一设备的不同条件。设备查询的大部分特性都接受min和max用于表达“大于或等于”和“小于或等于”。打开文件：bootstrap.css，可以看到以下代码：
.container {padding-right: 15px; 内右边距padding-left: 15px; 内左边距margin-right: auto; 块级元素居中margin-left: auto;
}
@media (min-width: 768px) { 屏幕宽度大于或等于768.container {width: 750px; 固定750}
}
@media (min-width: 992px) {.container {width: 970px;}
}
@media (min-width: 1200px) {.container {width: 1170px;}
}.container-fluid {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;
}.row {margin-right: -15px;margin-left: -15px;
}
1.4 类样式名
| 栅格系统 | 描述 | 类似于表格 |
|---|---|---|
| .container | 固定宽度的容器 | table |
| .container-fluid | 100%的宽度 | table |
| .row | 表示一行，一行最多12列 | tr |
| .col-xx-n |
1个格子占多少列 .col-xs-3 微型设备上占3列 .col-lg-4 在大型设备上占4列 |
td |
1.5 栅格的参数
2.1 基本结构
代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--网页编码的类型--><meta charset="utf-8"><!--使用最新的支持H5浏览器内核来解析--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--视口：在浏览器中一个虚拟的网页容器。参数：网页的宽度设置为设备的宽度 初始缩放比: 1:1--><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><style type="text/css">.row div{border: 1px solid green;height: 100px;}</style><title>基本结构</title><!-- 导入文件：bootstrap.css --><link href="../static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container"><!--一行--><div class="row"><!--一个格子占4列--><div class="col-md-4">内容</div><div class="col-md-4">内容</div><div class="col-md-4">内容</div></div><!--一行--><div class="row"><!--一个格子占4列--><div class="col-md-4">内容</div><div class="col-md-4">内容</div><div class="col-md-4">内容</div></div>
</div>
<!-- 导入jQuery文件Bootstrap的所有JavaScript插件都依赖 jQuery，所以必须放在前边 -->
<script src="../static/js/jquery-3.1.1.js"></script>
<!-- 加载 Bootstrap的所有 JavaScript插件-->
<script src="../static/js/bootstrap.min.js"></script>
</body>
</html>
执行结果
2.2 不同屏幕的适配
代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--网页编码的类型--><meta charset="utf-8"><!--使用最新的支持H5浏览器内核来解析--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--视口：在浏览器中一个虚拟的网页容器。参数：网页的宽度设置为设备的宽度 初始缩放比: 1:1--><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>不同屏幕的适配</title><style type="text/css">.row div{border: 1px solid green;height: 100px;}</style><!-- 导入文件：bootstrap.css --><link href="../static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container"><!--行--><div class="row"><!--格子：在微型设备上占6列，在小型设备上占4列，在中型设备上占3列 --><div class="col-xs-6 col-sm-4 col-md-3">java</div><div class="col-xs-6 col-sm-4 col-md-3">java</div><div class="col-xs-6 col-sm-4 col-md-3">java</div><div class="col-xs-6 col-sm-4 col-md-3">java</div><div class="col-xs-6 col-sm-4 col-md-3">java</div><div class="col-xs-6 col-sm-4 col-md-3">java</div></div>
</div>
<!-- 导入jQuery文件Bootstrap的所有JavaScript插件都依赖 jQuery，所以必须放在前边 -->
<script src="../static/js/jquery-3.1.1.js"></script>
<!-- 加载 Bootstrap的所有 JavaScript插件-->
<script src="../static/js/bootstrap.min.js"></script>
</body>
</html>
执行结果
2.3 显示和隐藏块
代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--网页编码的类型--><meta charset="utf-8"><!--使用最新的支持H5浏览器内核来解析--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--视口：在浏览器中一个虚拟的网页容器。参数：网页的宽度设置为设备的宽度 初始缩放比: 1:1--><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><style type="text/css">.row div{border: 2px solid red;height: 100px;}</style><title>显示和隐藏块</title><!-- 导入文件：bootstrap.css --><link href="../static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container"><!--一行--><div class="row"><!--格子：在微型设备上占6列，在小型设备上占4列，在中型设备上占3列 --><div class="hidden-xs col-xs-6 col-sm-4 col-md-3">微型设备隐藏</div><div class="visible-sm coll-xs-6 col-sm-4 col-md-3">小型设备显示</div><div class="col-xs-6 col-sm-4 col-md-3">内容</div><div class="col-xs-6 col-sm-4 col-md-3">内容</div></div></div><!-- 导入jQuery文件Bootstrap的所有JavaScript插件都依赖 jQuery，所以必须放在前边 --><script src="../static/js/jquery-3.1.1.js"></script><!-- 加载 Bootstrap的所有 JavaScript插件--><script src="../static/js/bootstrap.min.js"></script>
</body>
</html>
执行结果
2.4 总结
| 类样式名 | 作用 |
|---|---|
| .container | 固定大小容器 |
| .container-fluid | 100%宽度容器 |
| .row | 代表1行 |
| .col-xs-n | 微型设备上一个格子占多少列 |
| .col-sm-n | 小型设备上一个格子占多少列 |
| .col-md-n | 中型设备上一个格子占多少列 |
| .col-lg-n | 大型设备上一个格子占多少列 |
| .hidden-lg/md/sm/xs | 在指定设备上隐藏 |
| .visible-lg/md/sm/xs | 只在指定的设备上显示 |
BootStrap-栅格系统相关推荐
- Bootstrap 栅格系统 理解与总结
Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...
- Bootstrap栅格系统（布局）
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
- 如何使用BOOTSTRAP 栅格系统？
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何使用BOO ...
- bootstrap 栅格系统实现类似table跨行
2019独角兽企业重金招聘Python工程师标准>>> 通过bootstrap 栅格系统实现类似table跨行 的效果,如下: 具体代码如下: <div class=" ...
- Bootstrap栅格系统扩展 五格
Bootstrap栅格系统布局的魅力是毋容置疑的,但是再好的东西也会有不完美的地方,比如当布局上需要水平排列5列平分宽度时,bootstrap就显得比较尴尬了,这时候就需要老司机按照它的命名风格自定义 ...
- bootstrap栅格系统布局原理
简介 栅格系统用于通过一系列的行(row)与列(col)组合来创建页面布局,你的内容就可以放入这些创建好的布局中.下面介绍一下栅格bootstrap栅格系统的工作原理: 行(row)必须放在.cont ...
- bootstrap栅格系统
bootstrap栅格系统 原理: 1.栅格系统的"行(row)"包含在布局容器内 .container类或.container-fluid类中,以便于为其赋予合适的排列(al ...
- Bootstrap 栅格系统
Bootstrap 栅格系统 目录 1.简介 2.栅格选项 3.列偏移 4.嵌套列 5.列排序 1.简介 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewp ...
- bootstrap栅格系统自定义列
bootstrap栅格系统默认是12列,有时候需自定义列数,比如显示5列 简单做法:原理就是找到控制列的样式覆盖它,这里以中等屏幕示例: <span style="font-size: ...
- 如何去除BootStrap栅格系统默认的15px的padding
BootStrap的栅格系统对于响应式的网页开发非常方便,在使用栅格系统的时候可以非常方便的时候row和col-*-*来控制布局.但是col-*-*默认会带15像素的左右padding,这个会比较困扰 ...
最新文章
- python中的元类_python中的元类
- struts2中struts.xml和web.xml文件解析及工作原理
- 【 58沈剑 架构师之路】各种SQL到底加了什么锁？
- 计算机c语言试题文档,c语言计算机考试试题
- c语言中的字符变量用什么保留字来说明,第1、2章C语言基础练习题
- 把 JavaScript 放置到何处
- JDK安装及java环境配置_JDK安装及Java环境变量配置
- Codeforces Codeforces Round #383 (Div. 2) E (DFS染色)
- python lambda表达式及用法_python lambda表达式简单用法
- 用matlab画出TFT,基于Matlab的TFT-LCD解码电路的仿真设计(含程序)
- Lock锁的简单使用
- 孪生再世代表数字几_工信部发布数字孪生应用白皮书：特斯联入选智慧城市建设标杆案例...
- 蚂蚁金服CTO程立：金融级分布式交易的技术路径
- bzoj 1556 墓地秘密 —— 状压DP
- Ad hoc queries(即席查询)
- 怎样回答面试题更好？以及注意事项
- 1.搭建普罗米休斯监控，实现可视化展示
- java Optional操作
- 如何记账并生成收入、支出的图表
- 密码学的中文入门书籍及课程推荐