BootStrap栅格系统

大家好,我是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.参考文献


参考文献:Bootstrap每天必学之栅格系统(布局)

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有哪些常用组件?

下拉菜单,摁钮组,导航,标签,列表,巨幕......

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容