Bootstrap响应式栅格系统设计
为了方便起见,我们通过1200px宽的屏幕来讲解bootstrap中container、row、col的css属性值为何这样设置的原理
在1200px屏幕中为何container的宽度设置为1170px?
为了在1200px宽的设备两边留出一定的边距,因此将container的宽度设置为1170px,同时margin-left:auto和margin-right:auto将container居中,从而确保屏幕两边各留出15px的边距;
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container {
padding-right: 15px;/*下文解释为何padding设置为15px*/
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
为何col要留出15px的padding-left与padding-right?
为了创建栅格列与列之间的间隔(gutter),因此将col的padding-left与padding-right均设置为15px;
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;/*下文解释为何要设置position为relative*/
min-height: 1px;/*下文解释为何min-height设置为1px*/
padding-right: 15px;
padding-left: 15px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
既然container左右两边都有15px的外边距了,为何还要设计15px的内边距呢?
原来,bootstrap通过将col看做一个容器,往里面再嵌入12个col(一个栅格系统),以此实现嵌套列的功能,从而达到无限嵌套的目的;
因此从某种程度上,bootstrap把container当做一个最大的col(想象一下container中放一个col-12的情景,此时两者的padding与width均一致),所以container和col一样,其padding-left和padding-right也均被设置成15px,从而达到container与col相统一的目的。
那为何bootstrap还设计了row,并且要求row必须包含在.container(固定宽度)中呢?
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before,
.row:after {
clear: both;/*用于清除浮动;*/
}
还记得,刚刚为了统一处理container与col而将container的左右内边距设置为15px的操作吗?由于bootstrap将所有元素的盒模型都设置为了boeder-box
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
上述15px的操作导致了container的content width从1170px,变成1140px,这下导致所有col栅格的百分比乘的都是1140而不是1170了;因此bootstrap在container中新增了row这个夹层,通过设置负值 margin从而抵消掉为 container 元素设置的 padding,使得row的宽度增加至1170px,从而使得col栅格的百分比乘的都是正确的1170;(也就间接为row所包含的col抵消掉了padding);
这里用到了盒模型尺寸的计算原理:块元素左右外边距、左右border、左右内边距和content width这七个值之和必须等于包含块的content width。row的包含块container的content width为1140px,因此对于row而言,就存在如下等量关系:
-15px+0+0+width+0+0+(-15px)= 1140
因此,row的width就自动扩展到1170px了。
为何col要设置position为relative呢?
为了实现列定位或列排序
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: auto;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: auto;
}
结合col
的position
为relative
的属性,通过使用 .col-md-push-*
和 .col-md-pull-*
类就可以很容易的改变列(column)的顺序。
那为什么col要设置一个min-height为1px呢?
这是因为每个col为了保持占有自己的格子(就算没有内容,也占该有的栅格);如果不设置min-height为1px,在col没有任何内容的情况下,后面有内容的col会float到前面没有内容的col的栅格位置,这是我们不希望看到的。
好了,到这里我们就解释了bootstrap的栅格系统中最重要的三个部分container、row和col它们样式设置的原理。
另外,关于列偏移
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0;
}
列偏移与列排序(定位)的不同之处在于使用margin,而被margin挤占的区域没办法安放其它的列。
另外,关于流式布局容器
将最外面的布局元素 .container
修改为 .container-fluid
,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
Bootstrap响应式栅格系统设计的更多相关文章
- Bootstrap响应式栅格系统的设计原理
1.历史背景 Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架,于2011年开源.2012年发布的第二版中新增了12列栅格系统和 ...
- 模拟Bootstrap响应式网格系统
Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...
- Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...
- 关于禁用bootstrap响应式解决方法
前几天接到一个任务,用bootstrap框架写几个静态页面,由于长时间专注于后台开发,所以,花费了3天时间,才终于写完了页面,其中,来回的修改,把遇到的问题说一下. 用bootstarp做完页面后,组 ...
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
- bootstrap响应式网页设计的9条基本原则!
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...
- bootstrap响应式前端页面
技术:HTML+CSS+JS+bootstrap 概述 这套代码响应式前端页面基本写完了,适合初学前端的同学,里面主要运用了HTML+CSS布局和动画,js逻辑较少,页面都是静态,未接入接口.响应 ...
- Bootstrap 响应式表格
响应式表格 通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px).当在大于 768px 宽的大型设备上查看时,您 ...
- Bootstrap & 响应式
要了解一个东西 就是要知道 它是什么? 干什么 ? 怎么用 ? 1.Bootstrap 简介 Bootstrap 是由Twitter(著名的社交网站)推出的前端开源工具包,它基于Html.CSS. ...
随机推荐
- hdu 1533 Going Home (KM)
Going HomeTime Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- hdu 1068 Girls and Boys (最大独立集)
Girls and BoysTime Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- nyoj 524-A-B Problem (java stripTrailingZeros, toPlainString)
524-A-B Problem 内存限制:64MB 时间限制:1000ms 特判: No 通过数:2 提交数:4 难度:3 题目描述: A+B问题早已经被大家所熟知了,是不是很无聊呢?现在大家来做一下 ...
- 【Java】面向对象之封装
面向对象编程是对客观世界的模拟,客观世界里成员变量都是隐藏在对象内部的,外界无法直接操作和修改.封装可以被认为是一个保护屏障,防止该类的代码和数据被其他类随意访问.要访问该类的数据,必须通过指定的方式 ...
- postgresql , etcd , patroni 做failover
os: centos 7.4etcd:3.2 主从IP信息192.168.56.101 node1 master192.168.56.102 node2 slave192.168.56.103 nod ...
- mysql数据库E-R图
学会绘制E-R图 绘制E-R图首先要了解什么是实体,什么是属性,什么是联系. 1.首先实体是指现实世界中具有区分其他事物的特征或属性与其他实体有联系的实体,针对于数据库中的表而言实体是指表中一行一行特 ...
- Kafka幂等性原理及实现剖析
1.概述 最近和一些同学交流的时候反馈说,在面试Kafka时,被问到Kafka组件组成部分.API使用.Consumer和Producer原理及作用等问题都能详细作答.但是,问到一个平时不注意的问题, ...
- linux awk进阶篇
上一篇主要是awk的进本应用.本节是awk的进阶篇 ACTION:除去常用的print和printf还有以下几个 expression:表达式 如$1>3 control statements: ...
- nginx实现前后台分离部署
2.1 前后台分离部署 (一) 组网图 (二) 简要说明: 如标题所示,至于为什么要前后台分离部署,个人理解的原因有三 (一) 便于部署 前台代码由ngin ...
- 【Java基础】字面量相加的类型转换
Java字面量的相加类型转换 1.Java 编译期间(javac),凡是字面量和常量的运算,都会先运算出结果 2.运行期当字符串池中有 String"字面量"时,Java 会直接用 ...