本文纯属自己研究所写笔记,如果有错误还请多多指教提出

版心(container)

  1. 版心: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;
}
  1. 不管什么宽度的屏幕,版心容器.container总会有左右15px的padding,是为了让内容不直接紧贴浏览器边缘的。在一个container中永远不要再嵌套一个container.

  2. .container-fluid的版心容器跟小于768px屏幕的版心一样,自己没有设置固定宽度值,继承其父元素的宽度。

  3. .container容器是用来在响应式宽度上提供宽度约束。响应尺寸的改变其实改变的是container,行(row)和列(column)都是基于百分比的所以它们不需要做任何改变。

行(row)

  1. 行:class名为.row的容器;它为列(col)一共了空间,总共分为12列。
  2. row两端会有两个负的15px的margin值,为了抵消掉container两侧的padding值。.row在container外使用时无效的。
.row {
margin-right: -15px;
margin-left: -15px;
}

列(column)

  1. 每一列都有两侧15px的padding值。永远不要在.row容器外使用col,否则col是无效的。
  2. 每列col的padding值给其内容提供了空白,使内容不会紧贴在浏览器边缘,列之间也不会紧贴在一起。
  3. ==列都是按照百分比分配的(相对于版心宽度的百分比,所以版心越宽的,每列宽度就越大)==。
//五列的宽度
.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%;
}
...
}
栅格嵌套
  1. 当设置了 container/row/column之后,可以在column内再创建新的栅格系统,在column里面直接再添加row就可以了,不需要再套container了,因为列的两侧padding值 正好可以抵消row的两侧负的margin值,列相当于container了。

偏移(offsets)

  1. 偏移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)

  1. 在实际应用中更多表现的是呼唤位置和进行排序,允许你打破html中div从上到下 从左到右的固定布局。
  2. 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源码解读之栅格化篇的更多相关文章

  1. 虎说:bootstrap源码解读(重置模块)

    ------<!--action-->------ 开场show:前不生“不犹豫”,后半生“不后悔”.今天又逃课,我不后悔 素材:推特公司的前端框架bootstrap(下称bt),解读源码 ...

  2. spring beans源码解读之--总结篇

    spring beans下面有如下源文件包: org.springframework.beans, 包含了操作java bean的接口和类.org.springframework.beans.anno ...

  3. AQS 源码解读之加锁篇

    以 ReentrantLock 创建的非公平锁为基础,进行 AQS 全流程的分析. 分析 demo 一共有 A.B.C 三个线程. public class AQSDemo { // 带入一个银行办理 ...

  4. SDWebImage源码解读 之 NSData+ImageContentType

    第一篇 前言 从今天开始,我将开启一段源码解读的旅途了.在这里先暂时不透露具体解读的源码到底是哪些?因为也可能随着解读的进行会更改计划.但能够肯定的是,这一系列之中肯定会有Swift版本的代码. 说说 ...

  5. [Hadoop源码解读](六)MapReduce篇之MapTask类

    MapTask类继承于Task类,它最主要的方法就是run(),用来执行这个Map任务. run()首先设置一个TaskReporter并启动,然后调用JobConf的getUseNewAPI()判断 ...

  6. Laravel 源码解读系列第四篇-Auth 机制

    前言 Laravel有一个神器: php artisan make:auth 能够快速的帮我们完成一套注册和登录的认证机制,但是这套机制具体的是怎么跑起来的呢?我们不妨来一起看看他的源码.不过在这篇文 ...

  7. Normalize.css 介绍与源码解读

    开始 Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准;是在现代浏览器环境下对于CSS reset的替代. 它正是针对只需要统一的元素样式.该项目 ...

  8. Lumen开发:lumen源码解读之初始化(4)——服务提供(ServiceProviders)与路由(Routes)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 前面讲了singleton和Middleware,现在来继续讲ServiceProviders和Routes,还是看起始文件bootstrap/a ...

  9. 鸿蒙内核源码分析(GN应用篇) | GN语法及在鸿蒙的使用 | 百篇博客分析OpenHarmony源码 | v60.01

    百篇博客系列篇.本篇为: v60.xx 鸿蒙内核源码分析(gn应用篇) | gn语法及在鸿蒙的使用 | 51.c.h.o 编译构建相关篇为: v50.xx 鸿蒙内核源码分析(编译环境篇) | 编译鸿蒙 ...

随机推荐

  1. hive 历史拉链表的处理

    1. CREATE TABLE lalian_test(id int,col1 string,col2 string,dt string)--测试表COMMENT 'this is a test2'  ...

  2. Azure 中部署Gitlab的方法

    一.Azure 中创建Gitlab虚拟机(1).登陆Azure:打开Azure 官网,点击右侧上方的登陆Azure门户,输入Azure帐号与密码,点击 登陆 . (2).创建Gitlab虚拟机:登陆A ...

  3. 自动化测试基础篇--Selenium unittest生成测试报告(HTMLTestRunner)

    如何生成HTMLTestRunner测试报告.接上篇文章,对于unittest框架,运行后,测试结果不便于查看,同时多个case存在的时候,可能会导致case result记录不正确的情况. 为此,引 ...

  4. C# Array类的Sort()方法

    Array类实现了数组中元素的冒泡排序.Sort()方法要求数组中的元素实现IComparable接口.如System.Int32 和System.String实现了IComparable接口,所以下 ...

  5. HBuilder设置APP状态栏

    一. 前言 状态栏就是手机屏幕最顶部的区域,包括了:信号.运营商.电量等信息.通常APP都有属于自己的色调风格,为了达到整体视觉美观,通常会设置状态栏和标题栏的色调设置成一致. 图例: 二.状态栏状态 ...

  6. SQL Server Mobile/Compact Edition 简单介绍

    除了SQL Server Express,SQL Server还有个更轻量级的版本:SQL Server Compact Edition,容易让人想起Windows Compact Edition ( ...

  7. 安装SCOM Reporting Server

    在SQL群集计算机上可以安装SCOM Reporting Server. 1.运行SQL Server安装程序,选择 全新安装SQL Server,不能向已有的群集实例中添加Reporting Ser ...

  8. haproxy开启日志功能

    haproxy在默认情况不会记录日志,除了在haproxy.conf中的global段指定日志的输出外,还需要配置系统日志的配置文件.下面以centos6.4为例,haproxy使用系统自带的rpm报 ...

  9. 使用Visual Studio Code编写和激活ABAP代码 (上)

    猪年春节后的第一篇,Jerry祝各位猪年大吉! 2019年的六分之一马上就快过完了,不知道大家在新的一年是否给自己定了新的小目标呢?这里Jerry先预祝大家到2019年年底的时候,在年初制定的小目标都 ...

  10. memcached源码剖析5:并发模型

    网络连接建立与分发 前面分析了worker线程的初始化,以及主线程创建socket并监听的过程.本节会分析连接如何建立与分发. 初始状态 A,可以摸清楚master线程的大致逻辑: 1)初始化各个wo ...