Bootstrap源码解读之栅格化篇

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

版心(container)

  1. 版心:class名为.container的容器,其版心的宽度在各个屏幕设备下是不一样的值,版心两边就是留白。 
    各尺寸下版心宽度如下表:

    屏幕设备版心宽度
    max-width:768pxxs 继承父元素宽度(即width:100%)
    min-width:768pxsm 750px
    min-width:992pxmd 970px
    min-width:1200pxlg 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: 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)

  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;
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369144.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

EasyCriteria 2.0 – JPA标准应该很容易

在今天的帖子中,我们将看到名为EasyCriteria的框架的新版本。 在这篇文章的结尾,我们将在博客中看到这里的内容。 不幸的是,JPA标准存在一个巨大的问题,即冗长。 为什么不变得更简单? 像这样认为EasyCriteria框架已经诞…

[BZOJ2095][Poi2010]Bridges 最大流(混合图欧拉回路)

2095: [Poi2010]Bridges Time Limit: 10 Sec Memory Limit: 259 MBDescription YYD为了减肥,他来到了瘦海,这是一个巨大的海,海中有n个小岛,小岛之间有m座桥连接,两个小岛之间不会有两座桥,并且从一个小岛…

excel和python建模_利用Excel学习Python:准备篇

写在前面这个系列我们要利用Excel的知识,学会用python进行数据分析,如果你精通Excel想要用python提高数据分析效率,那么这个系列你来对了,如果你已经是python大神,想要建模/算法等高级技巧的,这个系列可能不…

故障公告:IIS应用程序池停止工作造成博客站点无法访问

非常抱歉,今天凌晨博客站点负载均衡中所有3台服务器的IIS应用程序池突然停止工作,造成 1:20-7:45 左右博客站点无法正常访问,由此给您带来很大的麻烦,请您谅解。 服务器操作系统是 Windows Server 2016,对应的 IIS 错误…

前端HTML以及HTML5(基本标签)

前面一章介绍了一下前端的发展,这章简单介绍一下html的发展以及基本的标签。 一、HTML的发展史 1、概念 超文本标记语言(HyperText Markup Language,简称HTML)是为 [ 网页创建和其他可在浏览器中看到的信息 ] 设计的一种标记语言…

方法内联在JVM中有多积极?

IntelliJ IDEA中使用Ctrl Alt M 提取方法 。 Ctrl Alt M。 这就像选择一段代码并按此组合一样简单。 Eclipse也有它 。 我讨厌冗长的方法。 对于我来说,闻起来太久了: public void processOnEndOfDay(Contract c) {if (DateUtils.addDays(c.getCrea…

Python正则表达式基础

1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分。正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法,但功能十分强大。得益于这一点,在提供了正则表…

hexdump mysql_linux下mysql数据库定时备份

备份操作命令:mysqldump -uroot --default-character-setutf8 --hex-blob -p123456 test_oa > /usr/software/data_backup/mysql_backup/test.sql以下是完整脚本,加--default-character-setutf8 --hex-blob 防乱码发生。#!/bin/bashdatabasestestus…

新建一个页面

今天我刚好要做一个单页面来展示某些东西。 就一起来看看吧&#xff0c;初学者写的不好请自闭双眼。 先上代码吧&#xff0c;大家看看有什么需要修改的地方。 1 <!DOCTYPE html>2 <html lang"en">3 4 <head>5 <meta charset"UTF-8&q…

Java并发:隐藏线程死锁

大多数Java程序员熟悉Java线程死锁概念。 它本质上涉及2个线程&#xff0c;它们彼此永远等待。 这种情况通常是平面&#xff08;同步&#xff09;或ReentrantLock&#xff08;读或写&#xff09;锁排序问题的结果。 Found one Java-level deadlock:"pool-1-thread-2"…

vue中使用axios发送请求

我们知道&#xff0c;vue2.0以后&#xff0c;vue就不再对vue-resource进行更新&#xff0c;而是推荐axios&#xff0c;而大型项目都会使用 Vuex 来管理数据&#xff0c;所以这篇博客将结合两者来发送请求 1.安装axios cnpm i axios -S 2.方案一&#xff1a;修改原型链 首先&…

django缓存

由于Django是动态网站&#xff0c;所有每次请求均会去数据进行相应的操作&#xff0c;当程序访问量大时&#xff0c;耗时必然会更加明显&#xff0c;最简单解决方式是使用&#xff1a;缓存&#xff0c;缓存将一个某个views的返回值保存至内存或者memcache中&#xff0c;5分钟内…

linux 输入法成繁体字_寻找Ubuntu中繁体字输入法

当客户来自港台地区时&#xff0c;英文和繁体字就成了交流的主要工具。windows下我们有搜狗输入法可以切换简体与繁体&#xff0c;那么Ubuntu下怎么办&#xff1f;這是我第一次考慮這個問題&#xff0c;在我的印象裏Linux下的中文輸入法還不是那麼完善&#xff0c;所以我進行了…

vue跨域解决方法

vue跨域解决方法 vue项目中&#xff0c;前端与后台进行数据请求或者提交的时候&#xff0c;如果后台没有设置跨域&#xff0c;前端本地调试代码的时候就会报“No Access-Control-Allow-Origin header is present on the requested resource.” 这种跨域错误。 要想本地正常的调…

Spring 3.2的REST异常处理

1.概述 本文将重点介绍如何使用REST API的Spring实现异常处理 。 我们将介绍在Spring 3.2之前可用的较旧的解决方案&#xff0c;然后是对Spring 3.2的新支持。 本文的主要目的是展示如何最好地将应用程序中的异常映射到HTTP状态代码。 哪种状态代码不适合本文中的哪种情况&…

kali中常用的ctf工具

exiftool:查看图片的exif信息。 pngcheck:修复被破坏的png图片 pngtools:深入研究png文件的数据 steganographic&#xff1a;用来提取图片中的隐藏信息 stegsolve.jar:kali中没有该工具&#xff0c;但是可以自己下 gimp:提供了转换各类图像文件可视化数据的功能&#xff0c;还可…

linux将所有文件生成lst_Linux自定义repo文件

repo文件简介repo文件是CentOS中yum源(软件仓库)的配置文件&#xff0c;通常一个repo文件定义了一个或者多个软件仓库的细节内容&#xff0c;例如我们将从哪里下载需要安装或者升级的软件包&#xff0c;repo文件中的设置内容将被yum读取和应用yum原理YUM的工作原理并不复杂&…

使用JUnit规则测试预期的异常

这篇文章展示了如何使用JUnit测试预期的异常。 让我们从我们要测试的以下类开始&#xff1a; public class Person {private final String name;private final int age;/*** Creates a person with the specified name and age.** param name the name* param age the age* th…

CSS盒子模型之详解

前言&#xff1a; 盒子模型是css中最核心的基础知识&#xff0c;理解了这个重要的概念才能更好的排版&#xff0c;进行页面布局。一、css盒子模型概念 CSS盒子模型 又称框模型 (Box Model) &#xff0c;包含了元素内容&#xff08;content&#xff09;、内边距&#…

LeetCode的二分查找的练习部分总结

这两天由于工作的原因&#xff0c;一直没有写博客&#xff0c;但是却把LeetCode上面的题目做了不少——二分查找。上面这些题都是这两天写的。现在简单做一个总结。 首先二分查找的思想就是对一个有规律的元素&#xff08;事情&#xff09;进行不断的排除&#xff0c;最后找到符…