栅格化-上【12列布局与预定义类】
栅格化-上【12列布局与预定义类】
朋友说在学bootstrap过程中，栅格化看的不是很明白，这里开篇笔记记录栅格化的一些关键点，实际上原理是使用%，东西不多。
这里以列举用法 --> 代码效果举例 --> less源码分析 --> css样式，四种形式来进行说明。
bootstrap栅格化比较重要的点有这几个：响应式、移动设备优先、12列布局、预定义类、mixin。
一：响应式
这里指的响应式实际上就是使用媒体查询@media来做的，举例用媒体查询实现bootstrap中的.container类根据宽度变化的样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{margin:0; padding:0; }
ul,li{list-style:none;}
/*div{box-sizing:border-box;}*/
.container{
width: 100%;
margin:0 auto;
border:1px solid #000;
}
@media (max-width:767px){
}
@media (min-width:768px) and (max-width:991px){
.container{
max-width:750px;
}
}
@media (min-width:992px) and (max-width:1119px){
.container{
max-width:970px;
}
}
@media (min-width:1200px){
.container{
max-width:1170px;
}
}
.row{
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
</div>
</div>
<script>
window.onload = function(){
var oRow = document.querySelector('.row');
var oContainer = document.querySelector('.container');
oRow.innerHTML = oContainer.offsetWidth - 2;
window.onresize = function(){
//这里的2是2px的边框
oRow.innerHTML = oContainer.offsetWidth - 2;
};
};
</script>
</body>
</html>
可以通过点开查看效果右上角的全屏和拖动浏览器窗口来观察.row容器内值的变化，这就是通过@media条件设置为min-width或者max-width来设定当窗口宽度在指定范围内，.container的所具有的最大宽度，可以可上面的bootStrap官网文档中的参数图做对比，这里简单模拟，并没有添加gutter槽宽。
二：移动设备优先
其实就是为bootStrap3添加了viewport的重置，一般移动设备为了能够正常显示PC端的网页，默认的viewport往往被设定为980~1024的范围，这实际并不符合移动设备开发的需求，所以这里添加了meta标签来根据移动设备来改变viewport，如图：
三：12列布局与预定义类
bootstrap给整个网页的宽度最多分为了12列。
这里我们先来测试如果给一个元素添加了超过12列的宽度会怎么样？
超过12
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap栅格化测试</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
.row div{
border:1px solid #000;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-13">1</div>
<!--这里我给这个div添加了占用13列的宽度样式类名-->
</div>
</div>
</body>
</html>
在效果预览中，文本内容1会紧挨着左边框，相应的样式也并没有媒体查询和.col-xx-x的格式，说明如果单独指定超过12就已经不是栅格化的范围了。
这是.col-md-12的效果与样式：
接下来我们来对“.col-md-4”这样的语句拆解说明：
前提：使用bootstrap栅格化的前提条件是将代码内容用.container或者.container-fluid括起来，是以一个行列布局的形式存在的，所有的.col-xx-x的class都需要包含在.row的容器内。
.col 指列前缀，只有当class名的前边有col，才代表它在bootstrap中代表栅格化中的列，起识别作用。
md 指栅格类型，一共分为4种类型，xs、sm、md、lg。分别代表0~767px 、768px~991px、992px~1119px、1200px~ 四种浏览器宽度范围的情况。
4 指手动指定了这个容器占用父元素中12列的多少列，这里就是只占用父元素宽度的 4/12 也就是33.3333333%
这里简单列举嵌套列的例子，来说明12列是根据父元素决定的：
嵌套列
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap栅格化测试</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
.row div{
border:1px solid #000;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-6">2</div>
</div>
</div>
</div>
</div>
</body>
</html>
到这里，基本的栅格化12列布局与预定义类就说完了，那么它在css中是怎么体现的呢，我们就以上面嵌套列中第一列为例，它的css样式部分如图：
position:relative; //给.col-xx-push/pull-x的形式，作准备，可以通过特定值改变列的排序，这里一会儿会做代码演示，详细的原理会留在less源码部分说。
min-height:1px; //防止列容器是空的时候没有高度。
padding-right:15px;
padding-left:15px; //这两个是gutter（水槽）用来控制列与列之间内容的间距的，就像两块地中间隔了个水槽一样。
min-height演示：
最小高度
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap栅格化测试</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
.row div{
/*border:1px solid #000;*/
background-color:#000;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<!--这里我添加了背景色去掉了边框-->
</div>
</div>
</div>
</body>
</html>
水槽的演示：
水槽
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap栅格化测试</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
.row div{
border:1px solid #000;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="text-align:right;">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</body>
</html>
给第一个列添加了行内样式文本右对齐，便于看效果，这里内容1和2之间的距离就是水槽的宽，它包括的1的padding-right:15px;和2的padding-left:15px;
那么它的min-width：992px是怎么决定的呢？是通过判定你传入的栅格类型决定的，这里写的是md所以根据文章开头的参数列表图对应的的最小宽度是992px，它为所有md类型都添加了float:left;
width:50%是根据后面的参数6，计算出6/12列然后转化成百分比赋值到width上，这也就是我开篇为什么说原理实际上是%百分比了。
接下来简单演示一下几个特殊的样式名用法，相应的原理会放到 "栅格化less源码分析" 文中解释，如果你已经迫不及待了可以去翻阅bootstrap的css源码1585行~2251行。
.col-xx-push/pull-x:
列排序
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap栅格化测试</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
.row div{
border:1px solid #000;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-push-4">1</div>
<div class="col-md-4 col-md-pull-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</body>
</html>
1：
.col-xx-offset-x:
offset
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap栅格化测试</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
.row div{
border:1px solid #000;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4 col-md-offset-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</body>
</html>
总结：
（1）响应式布局： 媒体查询（@media）
（2）移动设备优先：视口宽度 （viewport）<meta name="viewport" content="width=device-width, initial-scale=1">
（3）12列布局：把父元素宽度分为12列 （@grid-columns: 12;）
（4）预定义类：.container、.container-fluid、 .row、 .col-栅格类型-占用列数
补充一下对.container、.container-fluid、.row的一些描述，也没什么复杂的:
.container和.container-fluid都是放内容的容器，.container是定宽的，而.container-fluid宽度是auto也就是100%。这两个容器都会有水槽（padding-left:15px; padding-right:15px;）
.row 是放置列的容器，.col- 必须放在.row中才起作用，.row为了将.container或.container-fluid的槽宽拉回来正常显示，具有（margin-left:-15px; margin-right:15px;）
.container.container-fluid.row
.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;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
总结结束，其它相关还会写两篇 中-【less源码分析】、下-【移动端实例】，希望通过这三篇笔记能够帮助朋友们对bootstrap的栅格化理解有帮助，大家加油。
用户评论