1.栅格系统的实现原理
栅格系统是通过定义容器大小,平分12份,再调整内外边距,最后再结合媒体查询
就制作出了强大的响应式的栅格系统。
Bootstrap默认的栅格系统平分为12份,在使用的时候也可以通过重新编译LESS源码
来修改这12个数值。
2.栅格系统的主要工作原理如下:
(1).一行数据(row)必须包含在.container中,以便为其赋予合适的对齐方式和内边距(padding)。
(2).使用行(row)在水平方向创建一组列(column)。
(3).具体内容应当放置于列(column)内,而且只有列(column)可以作为行(row)的直接子元素。
(4).内置一大堆样式,可以使用像.row和.col-xs-4(占4列宽度)这样的样式来快速创建栅格布局。
Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
(5).通过设置padding从而创建列(column)之间的间隔,然后通过为第一列和最后一列设置负值的
margin从而抵消padding的影响。
(6).栅格系统中的列是通过指定1到12的值来表示其跨越的范围的。例如:要让屏幕分为3个等宽的
部分,可以使用3个.col-xs-4来创建。
3.栅格系统的基本用法
栅格系统的基本用法,其实就是列的组合。有以下4种基本用法:
(1).列组合
列组合就是通过更改数字来合并列,类似于表格中的colspan。具体用法请看如下代码1:
代码1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 栅格系统</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
</body>
</html>
其效果如图1所示:
图1
列组合的实现方式非常简单,只涉及两个CSS特性:左浮动和宽度百分比。不同的类名
所具有的宽度是不一样的,根据表格中它们所占的百分比就能很直观的体现出来。
(2).列偏移
当我们不想让两个相邻的列挨在一起时,就可以通过栅格系统的列偏移(offset)功能来实现,而
不必再定义margin值。使用.col-md-offset-*形式的样式就可以将列偏移到右侧,例如,
.col-md-offset-4将.col-md-4向右移动了4个列的宽度。
例如,可以选取代码1的一部分进行测试:
代码2:
<div class="row">
<div class="col-md-6 col-md-offset-1">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
有代码2可知,此时将图1的最后一行代码向右平移了1个列的宽度,得到图2:
图2
(3).列嵌套
栅格系统支持列嵌套,即在一个列里再声明一个或者多个行(row)。但有一点
要注意:内部所嵌套的row的宽度为100%时,就是当前外部列的宽度。
row中列的宽度是按照百分比来分配的,即在任何一个嵌套列里,不管宽度是多少,
都可以再进行12等分,并可以进一步组合。
(4).列排序
列排序其实就是改变列的方向,也就是改变左右浮动并且设置浮动的距离。
在栅格系统里,可以通过.col-md-push-*和.col-md-pull-*来改变列的方向。
4.响应式栅格
Bootstrap为不同的屏幕尺寸(4种类型)提供了不同的栅格样式,这4种分别是:
超小(xs)、小型(sm)、中型(md)、大型(lg)。