【5】了解Bootstrap预置的栅格系统
在开篇之前我们来说2个class,因为以后要用到的
<div class="container"> ... </div>
用.container包裹页面上的内容即可实现居中对齐,主要用于固定宽度并支持响应式布局的容器。在不同的媒体查询阈值范围内都为container设置了width,用以匹配栅格系统。
<div class="container-fluid"> ... </div>
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
注意:由于 padding 等属性的原因,这两种容器类不能互相嵌套。
这里可能有的人不太清楚“不同的媒体查询阈值范围”是什么?这里我说下,就是定义了一套范围(这个范围有几个区间),如果你现在使用的浏览器宽度值(即可视区域)在这套范围的某个区间中,那么就使用这个区间浏览网页的的解决方案。(不知道这样说能不能让大家懂,汗  ̄□ ̄||)
=================================================================================================
【1】下面我们就来介绍下栅格系统吧(摘抄下官网吧)
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。
1、它包含了易于使用的预定义类,例如上面介绍的2个类。
2、还有强大的mixin用于生成更具语义的布局(这个不是我们要说的,它相当于自定义自己要的栅格布局,默认的预置类就够我们用了,如果你想在进一步,可以自己研究下)。
=================================================================================================
【2】栅格系统用于通过一系列的行(row)与列(column)的组合创建页面布局,你的内容就可以放入创建好的布局中。
下面就介绍以下Bootstrap栅格系统的工作原理:
1、“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
2、使用“行(row)”在水平方向创建一组“列(column)”。
3、你的内容应当放置于“列(column)”内,而且,只有“列(column)”可以作为行(row)”的直接子元素。
4、通过一些预定义的栅格class( .row and .col-xs-4 )可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
5、通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
6、栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。
7、如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
=================================================================================================
摘抄了这么多官网的,这些我们又要会到开篇时候说的“不同的媒体查询阈值范围”,也就是栅格选项,下面我们就来了解下吧!
【3】栅格选项也就是Bootstrap的栅格系统如何在多种屏幕设备上工作的。下面我们看下中文官网给出的一张表
从表中我们可以看出是有4个区间对应着自己的设备,我们假定可视区域为x。
lg | large(大) | x≥1200px | 桌面 |
md | middle(中) | 992px≤x<1200px | 桌面 |
sm | small(小) | 768px≤x<992px | 平板 |
xs | extra small(极小,网上找的,不知道有没有更合适的) | x<768px | 手机 |
栅格class在屏幕宽度大于或等于阈值的设备上起作用,并且将针对小屏幕设备所设置的class覆盖掉。因此,对任何一个元素应用任何.col-md- (开头)class 将不仅作用于中等尺寸的屏幕,还将作用于大屏幕设备(如果没有设置.col-lg- (开头)class的话)。