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:;
}
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
...
@median (min-width:768px) {
.col-sm-offset-0 {
margin-left:;
}
.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源码解读之栅格化篇的更多相关文章
- 虎说:bootstrap源码解读(重置模块)
------<!--action-->------ 开场show:前不生“不犹豫”,后半生“不后悔”.今天又逃课,我不后悔 素材:推特公司的前端框架bootstrap(下称bt),解读源码 ...
- spring beans源码解读之--总结篇
spring beans下面有如下源文件包: org.springframework.beans, 包含了操作java bean的接口和类.org.springframework.beans.anno ...
- AQS 源码解读之加锁篇
以 ReentrantLock 创建的非公平锁为基础,进行 AQS 全流程的分析. 分析 demo 一共有 A.B.C 三个线程. public class AQSDemo { // 带入一个银行办理 ...
- SDWebImage源码解读 之 NSData+ImageContentType
第一篇 前言 从今天开始,我将开启一段源码解读的旅途了.在这里先暂时不透露具体解读的源码到底是哪些?因为也可能随着解读的进行会更改计划.但能够肯定的是,这一系列之中肯定会有Swift版本的代码. 说说 ...
- [Hadoop源码解读](六)MapReduce篇之MapTask类
MapTask类继承于Task类,它最主要的方法就是run(),用来执行这个Map任务. run()首先设置一个TaskReporter并启动,然后调用JobConf的getUseNewAPI()判断 ...
- Laravel 源码解读系列第四篇-Auth 机制
前言 Laravel有一个神器: php artisan make:auth 能够快速的帮我们完成一套注册和登录的认证机制,但是这套机制具体的是怎么跑起来的呢?我们不妨来一起看看他的源码.不过在这篇文 ...
- Normalize.css 介绍与源码解读
开始 Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准;是在现代浏览器环境下对于CSS reset的替代. 它正是针对只需要统一的元素样式.该项目 ...
- Lumen开发:lumen源码解读之初始化(4)——服务提供(ServiceProviders)与路由(Routes)
版权声明:本文为博主原创文章,未经博主允许不得转载. 前面讲了singleton和Middleware,现在来继续讲ServiceProviders和Routes,还是看起始文件bootstrap/a ...
- 鸿蒙内核源码分析(GN应用篇) | GN语法及在鸿蒙的使用 | 百篇博客分析OpenHarmony源码 | v60.01
百篇博客系列篇.本篇为: v60.xx 鸿蒙内核源码分析(gn应用篇) | gn语法及在鸿蒙的使用 | 51.c.h.o 编译构建相关篇为: v50.xx 鸿蒙内核源码分析(编译环境篇) | 编译鸿蒙 ...
随机推荐
- react native学习资料
一:基础学习: react-native中文文档(react native中文网,人工翻译,官网完全同步)http://react-native.cn/docs/getting-started.htm ...
- MVC框架以及实例(补充)
此文是MVC框架以及实例(http://www.cnblogs.com/justmaomao/p/6739065.html)的补充部分 以下简单介绍简单登录的相关内容 1)在login.jsp中待提交 ...
- vue从安装到初始化项目
- 用windows公文包实现不同盘符两个文件文件夹文件同步
需求:磁盘D的文件夹A需同步到磁盘E 步骤: 1.在磁盘E中新建公文包B 2.将D盘的文件夹A复制到公文包B 3.修改文件夹A中的内容 4.选中公文包B,右键"全部更新"
- ASP.NET Core 上传多文件 超简单教程
示例源码下载地址 https://qcloud.coding.net/api/project/3915794/files/4463836/download 项目地址 https://dev.tence ...
- [BZOJ 4036][HAOI2015]按位或
4036: [HAOI2015]按位或 Time Limit: 10 Sec Memory Limit: 256 MBSec Special JudgeSubmit: 746 Solved: 4 ...
- 如果要遍历除了for循环,你还知道什么?——JavaScript的各种遍历方式
如果要遍历除了for循环,你还知道什么?——JavaScript的各种遍历方式 这是曾经面试中的一道题目,当时的我用现在很潮的话讲,整个人是懵比的,我呆呆的说了句,我好像只知道for循环啊.后来回过神 ...
- vue-cli + webpack自动生成项目
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack palanWebsit ...
- Python version 3.6 required, which was not found in the registry错误解决
问题: 安装pywin32出现Python version 3.6 required, which was not found in the registry错误解决 解决: 建立一个文件 regis ...
- 【bbs】index、post
列表 奇数行和偶数行设置不同的背景 http://blog.csdn.net/facecrazy/article/details/51252850 实现ul li中的内容上下左右居中,不用设置li宽度 ...