Bootstrap源码解读之栅格化篇
本文纯属自己研究所写笔记,如果有错误还请多多指教提出
版心(container)
版心:class名为.container的容器,其版心的宽度在各个屏幕设备下是不一样的值,版心两边就是留白。
各尺寸下版心宽度如下表:屏幕设备 版心宽度 max-width:768px xs 继承父元素宽度(即width:100%) min-width:768px sm 750px min-width:992px md 970px min-width:1200px lg 1170px
.container {padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {.container {
width: 750px;
}
}
@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;
}
不管什么宽度的屏幕,版心容器.container总会有左右15px的padding,是为了让内容不直接紧贴浏览器边缘的。在一个container中永远不要再嵌套一个container.
.container-fluid的版心容器跟小于768px屏幕的版心一样,自己没有设置固定宽度值,继承其父元素的宽度。
.container容器是用来在响应式宽度上提供宽度约束。响应尺寸的改变其实改变的是container,行(row)和列(column)都是基于百分比的所以它们不需要做任何改变。
行(row)
- 行:class名为.row的容器;它为列(col)一共了空间,总共分为12列。
- row两端会有两个负的15px的margin值,为了抵消掉container两侧的padding值。.row在container外使用时无效的。
.row {margin-right: -15px;
margin-left: -15px;
}
列(column)
- 每一列都有两侧15px的padding值。永远不要在.row容器外使用col,否则col是无效的。
- 每列col的padding值给其内容提供了空白,使内容不会紧贴在浏览器边缘,列之间也不会紧贴在一起。
- ==列都是按照百分比分配的(相对于版心宽度的百分比,所以版心越宽的,每列宽度就越大)==。
//五列的宽度
.col-xs-5 {width: 41.66666667%;
}
// 四列的宽度
.col-xs-4 {width: 33.33333333%;
}
// 三列的宽度
.col-xs-3 {width: 25%;
}
// 占两列的宽度
.col-xs-2 {width: 16.66666667%;
}
// 每列的宽度是版心宽度的8.33333333%
.col-xs-1 {width: 8.33333333%;
}
...
// 如果是中等屏幕 类名为.col-md-1
// 小屏幕 类名为:.col-sm-1
// 大屏幕 类名为:.col-lg-1
@media (min-width:768px) {.col-sm-1 {
width: 8.33333333%;
}
.col-sm-2 {width: 16.66666667%;
}
...
}
@media (min-width: 992px) {.col-md-1 {
width: 8.33333333%;
}
.col-md-2 {width: 16.66666667%;
}
...
}
@media (min-width:1200px) {.col-lg-1 {
width: 8.33333333%;
}
.col-lg-2 {width: 16.66666667%;
}
...
}
栅格嵌套
- 当设置了 container/row/column之后,可以在column内再创建新的栅格系统,在column里面直接再添加row就可以了,不需要再套container了,因为列的两侧padding值 正好可以抵消row的两侧负的margin值,列相当于container了。
偏移(offsets)
- 偏移offset主要是靠列的margin-left值决定。偏移一列的话就是margin-left:8.3333333%(1/12),偏移两列就是margin-left:16.66666667%(即2/12);
.col-xs-offset-0 {margin-left: 0;
}
.col-xs-offset-1 {margin-left: 8.33333333%;
}
...
@median (min-width:768px) {.col-sm-offset-0 {
margin-left: 0;
}
.col-sm-offset-1 {margin-left: 8.33333333%;
}
...
}
...
列的排序(Push 和 Pull)
- 在实际应用中更多表现的是呼唤位置和进行排序,允许你打破html中div从上到下 从左到右的固定布局。
- pull 和 push 是通过position的 right 和 left值实现的,pull是通过right值,pull-1值 right:8.33333333% (1/12); push-1值=> left:8.33333333%(1/12);
// push 距离左边的距离(向右推的列数)以最小屏为例
.col-xs-push-2 {left: 16.66666667%;
}
.col-xs-push-1 {left: 8.33333333%;
}
.col-xs-push-0 {left: auto;
}
...
// pull 距离右边的距离(向左拉的列数)以最小屏为例
.col-xs-pull-2 {right: 16.66666667%;
}
.col-xs-pull-1 {right: 8.33333333%;
}
.col-xs-pull-0 {right: auto;
}
Bootstrap源码解读之栅格化篇相关推荐
- open3D源码解读第四篇
2021SC@SDUSC 文章目录 open3D体素化 VoxelGrid.h VoxelGridIO 小结 open3D体素化 本篇解读voxel(体元/体素)的基本类Voxel,以及VoxelGr ...
- spring beans源码解读之--总结篇
spring beans下面有如下源文件包: org.springframework.beans, 包含了操作java bean的接口和类. org.springframework.beans.ann ...
- Bootstrap源码解读(第八弹:标签、徽章、缩略图和警示框)
标签 标签组件通常用来做一些高亮显示用以提醒.使用".label"样式来实现,可以使用span这样的行内标签,例如:<span class="label" ...
- 若依框架源码解读之数据源篇
读源码过程中读到yml中有设置主次数据源,次数据源没有启用,在看到DruidConfig中的配置时,没有搞明白,怎么让mybatis找到主数据源的,请教大神在哪里实现的. 附上数据源配置 @Bean( ...
- JStorm/Storm源码解读(二)--启动篇
为了在解读分析时有个统一的思路,本文将从启动一个集群开始分析. (说明:为了测试方便,采用的是本地模式). 1.参数设置 Config conf = new Config(); //设置Topolog ...
- 目标检测之DarkNet-DarkNet源码解读<一>测试篇
目标检测-DarkNet源码解读 DarkNet源码解读 1.一些思考 1.1 DarkNet的本质 1.2 深度学习分为两条线 1.3 检测任务的步骤 2.代码走读 2.1 程序入口 2. ...
- 约2万字-Vue源码解读汇总篇(续更)
约2万字-Vue源码解读汇总篇(续更) 一.前言 1.系列汇总 未完待续... Vue源码解读:06Vue3探索篇 Vue源码解读:05生命周期篇 Vue源码解读:04模板编译篇 Vue源码解读:03 ...
- BaseRecyclerViewAdapterHelper源码解读(四) 上拉加载更多
上拉加载 上拉加载无需监听滑动事件,可自定义加载布局,显示异常提示,自定义异常提示. 此篇文章为BaseRecyclerViewAdapterHelper源码解读第四篇,开源库地址,如果没有看过之前3 ...
- PyTorch 源码解读之即时编译篇
点击上方"AI遇见机器学习",选择"星标"公众号 重磅干货,第一时间送达 作者丨OpenMMLab 来源丨https://zhuanlan.zhihu.com/ ...
最新文章
- 鲁亿通欲收购昇辉控股 跨界布局照明、智慧城市领域
- Lua和C++交互总结(很详细)
- 如何来玩MNIST数据集?
- AbstractListView源码分析6
- js数组的定义方法与基本使用
- chrome 69 免安装_ElasticSearch安装elasticsearch-head插件
- websocket文档_WebSocket推送 原理扫盲到上手实践
- 数据库面试中常用的10个问题
- 关系数据库——并发控制
- ssh 脚本 空格字符转换
- steam用移动网不显示头像
- 基于51单片机的数字频率计
- win10键盘全变成快捷键_电脑键盘灵敏度设置方法
- Windows 获取和修改Owner
- python求派_python求π
- iOS开发之strip处理framework的调试符号
- 盘点那些改变过世界的代码
- keep sb updated_keep you update 和keep you updated哪个正确
- SpringBoot事务详解
- STM32F030C8T6单片机与GY-61 ADXL335模块——角度传感器
热门文章
- java default修饰符_Java基础语法二
- 得到指定进程所有窗口。显示 影藏 置顶。
- linux命令之seq
- CocoaPods 安装和使用
- zoj 3640 概率dp
- [原创]ActionScript3游戏中的图像编程(连载五)
- 【ASP.NET Web API教程】5.4 ASP.NET Web API批处理器
- 【ARDUINO】HC-05蓝牙不配对问题
- 今日心得:给自己写信
- 客服顾问的工具箱--走出软件作坊:三五个人十来条枪 如何成为开发正规军(六)[转]...