原标题:IT兄弟连 HTML5教程 栅格布局 Bootstrap框架
在这里突然给大家介绍一个叫bootstrap框架,是因为Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,该系统不仅可以随着屏幕设备或视口(viewport)尺寸的增加,而且会自动分为最多12列。
1 Bootstrap现状
Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的,它简洁灵活,使得Web开发更加快捷,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言less写成。Bootstrap一经推出后颇受欢迎,国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航,分页、排版、缩略图、警告对话框、进度条、媒体对象等。
Bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。全球数以百万计的网站都是基于Bootstrap构建的,例如:招聘网、ghostchina网、laravel中文网等等。
2 栅格系统
Bootstrap的栅格系统就是通过一系列的行(row)与列(column)的组合创建页面布局,然后把相应的内容放入到早已创建好的布局当中。
下面就简单介绍一下Bootstrap栅格系统的工作原理:
网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
在使用的时候大家可以根据实际情况重新编译LESS(或Sass)源码,如图1的第323行来修改12这个数值(也就是换成24或32,当然你也可以分成更多,但不建议这样使用)。
图1 sass编译
1.栅格选项
接下来我会为读者们详细介绍Bootstrap里的栅格系统。之前也给大家介绍了Bootstrap是有一个很大的优点特色:支持响应式。所以,Bootstrap的栅格系统里也可以实现在多种不同的移动设备上面进行工作。下图2展示了Bootstrap在不同屏幕设备上工作。
图2 多种屏幕设备
可以看到在不同的设备上栅格系统行为是不一样的,所以也决定了在不同的设备上样式也会不一样,类名为”container”的容器在设备尺寸>=1200px时,会匹配类前缀为”col-lg-”的样式;在>=992px同时又<1200px时,会匹配类前缀为”col-md-”的样式;在>=768px同时<992px时匹配类前缀为”col-sm-”的样式;最后是在屏幕尺寸<768px时匹配类前缀为”col-xs-”的样式。
下面是Bootstrap网格系统中的关键的分界点的媒体查询:
2.基本用法
我们选择网格系统来布局,其实网格系统说白了就是行和列的不同组合。在Bootstrap框架的网格系统中提供了四种基本的用法,下面先从中等屏幕(970px)为读者们介绍。
● 1.列组合
列组合就是在container容器中,首先定义行,然后在每行里再定义不同的列,不同列的类名不一样决定不同的列所占的父级宽度也不一样。不过,每行的列总和数加起来不能超过12。例如:
图3 列组合
为了加深读者对行列布局的理解,笔者这里把行列模块用不同的颜色进行了区分。在第一行中,我们是划分了两列,不过两列的布局比例是4:8,第二行中,我们是划分了三列,每列布局比例是4:4:4,第三行中,也划分了三列,每列布局比例是3:6:3。不知道读者有没有发现,每行列数总和不超过12。第一行4+8=12,第二行4+4++4=12,第三行3+6+3=12。下面给出代码:
给出源代码后,就可以很明显的看出来了。在container类的div容器里,我们按照行列来划分,又在一个row类的div容器里定义不同宽度的列,例如”col-md-4”类的div宽度是占父级宽度的33.33333333%,”col-md-6”类的div宽度是占父级宽度的50%,而且将所有列皆实现左浮动的布局。
除了上面运用到的3、4、6、8类之外,还有其他几种列类名。代码如下:
有需求的时候,直接通过类名即可获取相应的css样式。
● 2 列偏移
有时候,当我们在开发过程中,有两个相邻的div模块展示内容,写好后给产品经理审核,然后产品经理说这两个相邻的div模块靠的太紧了,希望能增大一点宽度。常规思路就是使用margin或者其他的技术手段实现,但其实我们可以使用Bootstrap的列偏移(offset)功能来实现。如何使用?很简单,和上面的列组合一样只需要在列元素上添加类名”col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。比如,我们在列元素上添加”col-md-offset-2”,就表示该列向右移动2个列的宽度。下面是案例展示:
图4 列偏移
分析一下,在图4中,是在一个容器(container)里定义两行(row),每行的背景颜色定义的是”#eee”,中间显示的空白部分就是行背景色。在第一行里,实际是定义了三列,分别类名是:col-md-4、col-md-2、col-md-2。不过,第二个”col-md-2”的类元素上还添加了一个列类”col-md-offset-4”,使得该div模块向右偏移了4列的宽度,加上该div本身的2列宽度,总共一起占了6列宽度。所以,第一行的列总合数是4+6+2=12,依旧加起来的列组合数不超过12。第二行也是一样,实际是定义了两列,分别类名是:col-md-4、col-md-4。不过,第二个”col-md-4”的类元素上添加了一个类”col-md-offset-4”,使得该div模块向右偏移了4列的宽度,加上该div模块本身的4列宽度,所以该div模块总共占的宽度是8列。因此,第二行的列组合是:4+8=12,还是依旧是不超过12的列组合数。
下面就是源代码:
结合前面的分析和源代码,就看的很清晰了。在容器里,想要移动4列的距离,我们总共又有12列,计算一下这个距离:4/12=1/3=33.333333%,所以我们需要用margin-left去设置移动33.333333%的距离,同理可得,想要移动几列,就做一下计算,得出占12分之几的宽度,再设置相应的margin-left值。现在,我们可以把其他的偏移类也定义出来:
可以看到从第28行到41行是设置的不同类别的偏移宽度,从偏移0到偏移100%的宽度。这样以后大家在使用时就可以直接使用,明确自己想要的移动宽度,然后找到对应的”col-md-offset-?”(?代表列数)就可以达到想要设置的移动宽度距离。
读者需要注意一点,使用”col-md-offset-*”对列进行向右偏移时,要保证列与偏移列的总数不超过12,不然会致列断行显示。
● 3列排序
第三个要给大家讲的是列排序,也就是改变列的方向。简单点说就是通过设置浮动距离来改变左右浮动,在Bootstrap的网格系统中还是通过添加类名的方式进行功能实现。类名有两个:”col-md-push-*”和”col-md-pull-*”(其中星号代表移动的列组合数)。
下面来看一个简单的列子:
这个列子的演示效果如图5:
图5 列排序
现在可以看到图5.9上左边是类名为”col-md-4”的div内容,右边是类名为”col-md-8”的div内容。现在如果要互换位置,就得将左边的”col-md-4”模块向右移动8个列的距离,右边的”col-md-8”模块向左移动4个列的距离。怎么移动呢?通过在”
下面是案例展示,实现将图5的案例左右交换:
图6 列排序交换
源代码如下:
原本在左边的类名为”col-md-4”的模块,因为添加了类”col-md-push-8”来控制了模块的left值,想要移动几列,还是计算出占12分之几,然后设置left是12分之几的距离。在右边的类名为”col-md-8”的模块,在其基础上再添加类”col-md-pull-4”来控制模块的right值,依旧是想要移动几列,计算出占12分之几,然后设置right值是12分之几的距离。Bootstrap就是通过这样的添加类的方式设置left和right来实现定位效果,实现布局的左右移动。扩展开来,下面是其余移动距离的类名:
需要移动几列,相应的选择用”col-md-push-?”或着”col-md-pull_?”(?是具体的数字几)就可以了。
● 4 列嵌套
前面介绍的布局都是单一的在某一行里定义多个列,其实Bootstrap框架的网格系统还支持列的嵌套。我们可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列,具体的插入的列的使用和前面介绍到的列组合、列偏移、列排序一样。需要清楚的是,当我们在列容器中的行容器的宽度设置为100%时,这个宽度和当前的外部的列的宽度是一样的。下面是案例展示:
图7 列嵌套
在这个案例中,第一行里是定义的8:4的列宽,又在类名为”col-md-8”的列中定义了一个新的行(row)容器,在这个行容器中又重新定义了6:6的列宽。第二行中也是同样的嵌套思路,先在第二行里定义了4:8的列宽,在”col-md-8”中的列里定义了新的行(row)容器,在这个行容器里划分了4:4:4的列宽。
下面是源代码:
给出源码后,读者们可以就可以很清楚的看到这个body里的各个DOM节点,DIV标签是怎么的嵌套。
3.手机案例布局
在前面的基本语法讲解里,以中等屏幕(桌面显示器)为例进行了各种类的功能的介绍,现在会给读者们介绍手机端得布局案例,请看下图8:
图8 pc版
图9 手机版
图8和图9显示的是两个不同屏幕得设备,可以看到两者得布局也是不一样得,在图8中一行里显示3列,每列都是占4个宽度得大小;而在图9中,一行显示得是1列,每列都是占12个列得宽度。具体代码看下:
可以看到在源代码里,笔者只定义了一个行(row)容器,可为什么会出现在两种设备上布局不一样呢?这是因为笔者采用了@media媒体查询,当监测到当前得屏幕宽度在768px以下时,就会加载类”hidden-xs”,在屏幕大于992px时,就会加载”hidden-md”类,而这两个类都是控制div标签的”display”属性并决定div模块是否在页面上显示出来。
当在移动设备(屏幕width<768px)时,就会使得第55-57行的div模块被隐藏,显示出来类名为”col-md-12”的div模块即移动端的布局。而不在移动设备(屏幕width>992px)时,第58-60行会被隐藏,只显示出类名为”col-md-4”的div模块。
在以后的开发中,为了在不同的设备上达到显示不同的布局效果,就可以采用这中思路,先弄清楚想要在哪种设备上显示,哪种设备上不显示,将相应的”hidden-xs”、”hidden-md”、“hidden-sm”、”hidden-lg”添加到对应的div标签上即可。返回搜狐,查看更多
责任编辑: