大家好,我是IT修真院北京分院web第31期学员金立剑
【js-2】BootStrap栅格系统
分享人:金立剑
目录
1.背景介绍
2.知识剖析
3.解决方案
4.编码实战
5.扩展思考
6.参考文献
7.更多讨论
1.背景介绍
Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
2.知识剖析
2.1 原理
网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
在使用的时候大家可以根据实际情况重新编译LESS(或Sass)源码来修改12这个数值(也就是换成24或32,当然你也可以分成更多,但不建议这样使用)。
2.2 使用规则
1 行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。
2 在行(.row)中可以添加列(.column),最多分配12。
3 具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素
4 类似 .row 和 .col-sm-4 这种预定义的类,可以用来快速创建栅格布局。
5 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔
2.3栅格选项
当屏宽小于768px(即小屏)时,列的划分以.col-xs-后面的数字为准。如果没定义.col-xs-,就会变成单列且宽度和row相等。
当屏宽在768px和992px之间(即平板屏)时,列的划分以.col-sm-后面的数字为准。如果没有定义col-sm-,以.col-xs-为准。
当屏宽在992px和1200px之间(即中屏)时,列的划分以.col-md-后面的数字为准。如果没有定义.col-md-,以col-sm-或col-xs-为准。
当屏宽大于1200px(即大屏)时,列的划分以.col-lg-后面的数字为准。如果没有定义.col-md-,以.col-md-或col-sm-或col-xs-为准。
3.解决方案
1) 列组合
列组合简单理解就是更改数字来合并列(原则:列总和数不能超12),有点类似于表格的colspan属性
2) 列偏移
通过 col-md-offset-*来实现
3) 列排序
列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数) 实现列的向左或向右排序
4) 列嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列
4.编码实战
5.扩展思考
Bootstrap 有哪些缺点?
个人认为,所谓优点和缺点,多数根据业务需求而定。比如 bootstrap 2以后的版本不支持IE6。当你的网站需要支持ie6的时候,这时是缺点。当网站不需要支持ie6.减少了兼容代码的处理,马上又变成了优点。总体而已,Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面。同时还可以用less重新设计组件。对于前端技术一般的后台工程师,省去了很多编写前端处理时的痛苦。个人使用搭个博客什么的比较方便。相对于公司,直接使用 Bootstrap 感觉不多,大公司都有自己的前端开发设计人员,也会设计自己的css库。当然,Bootstrap开源,对于学习如何组织css还是很有必要
6.参考文献
7.更多讨论
1.bootstrap栅格系统所定义的breakpoint 为什么是480 768 992 1200?
xs: < 575.98px,适应竖屏下的手机
iPhone 6p 的对应分辨率宽度为 414px,鲜有比这个还宽的手机;
题中说的 480px,应该是 Bootstrap 2.x 年代的时候的事了,当时 iPhone 的尺寸是是 320*480px,正常情况下来说是够用的
还是有人希望横竖屏展示不一致的效果,所以还是使用了 500 以上的宽度进行区分
实际上我觉得这个尺寸以 576 来判断有些过宽,我这边实践上用的更多是以 375 作为标准设计然后以 414 以下作判断横竖屏依据
sm: 576px ~ 767.98px,适应较小的横屏下的手机。
比如 iPhone 6 的分辨率高度 667px, 6 plus 为 736px,一般不会突破 768 的天际。然而 iPhone X 是 812px…… 但安全区域还是只有 734px,所以也还算勉强在范围内;
数值上可以看到 320*16/9 = 568.88,这意味着有些等效宽度 320px 的小一点的 Android 手机上是横屏也拿不到这个尺寸范围的;
这个值向上对齐到 12 columns 网格就是 576,而且是很漂亮的 48 * 12 网格;
比较惨的大概是 iPhone 5 的尺寸,高度为 568,差了一点点
好像 V3 版本本来用的就是 540 左右的数值,应该就是为了适应 iPhone 5 / 小屏 Android 的横屏,只是后来改掉了,大概也是觉得现在这种手机比较少了
576 还很好记,因为视频 SDTV 格式刚好也是用 576i 的分辨率,而且挺多字幕组也喜欢输出 576p 格式的视频,因为刚好在 1024 宽的 iPad 上可以 16:9 展示,完美 :D
md: 768px~991.98px,适应 iPad mini 以上的尺寸的竖屏展示;768 刚好就是 iPad 的竖屏高度
正常情况下来说 640px 就够了(360*640 是挺常见的大屏手机用的分辨率),但因为 6 plus 虽然用的还是 1920p 宽的屏幕但却等效分辨率用的 736 px,所以…… 1280 * 720p 的平板哭晕在厕所,不过还好 1280 * 800 的不受影响
lg: > 992px,适应横屏下的 iPad 及以上平板设备的尺寸;
比较让我困惑的是为什么不用 996px,起码能被 12 整除;估计是为了避免个别 PC / 平板应用边框过粗以及滚动条的原因使得内容缩紧,所以留出 28px 的宽度避免被挤压;
此外,有些老一点的 VGA 电视或者投影仪只能展示 1024 * 768,这种场景下就还是得适配这个宽度了;
其实在这个场景下个人用 960px 宽度更多一点,计算起来比较整齐,24 / 16 / 12 栏网格都能用,这可是个经典的网格设计宽度;
xl: > 1200px:适应 1280 以上的场景,通常为PC / Mac使用;现在 iPad Pro 也已经超过这个尺寸了
2.bootstrap的栅格系统为什么是12列,有没有18列,24列等等啊,采用12列有什么好处?
因为12是1,2,3,4,6的最小公倍数,所以12列栅格系统相对较灵活,支持将一行分成1列,2列,3列,4列,6列。若是想要支持5列,那1,2,3,4,5的最小公倍数是60,而60这个数对于栅格系统来说显然太大了。18能均分4列不?24能做的12都能做,所以12是最好的选择。
3.bootstrap有哪些常用组件?
下拉菜单,摁钮组,导航,标签,列表,巨幕......