浅谈Bootstrap

子曰:"温故而知新,可以为师矣"。

最近翻看web前端bootstrap,又想起中国著名文学家周树人先生说过的一句话 ——学IT到《牵引力》........

众所周知,我们用户端有:台式电脑、笔记本电脑、平板电脑、手机端等。而且手机端根据不同版本、不同品牌,它们的尺寸、分辨率等也是不一样。做设计的被要求做出所有常用尺寸是很痛苦的,但是........

做web前端的更痛苦....

假如一家公司,为了增强用户体验,那么最少就要做PC端和移动端,换而言之,其需要两种网页,那么就需要花两倍是时间或者费用来做这个项目。

做两个项目肯定是不划算的,而且PC端和移动端不是同个项目,需要占用的网络资源也会加倍,那有没有办法用一个网页,达到PC端于移动端的效果呢?

答案是 —— 没有!

—END—

订阅号:牵引力量

开个玩笑,开个玩笑而已,大家不要介意...

比较好的办法就是用bootstrap做自适应页面,bootstrap的原理就是用css媒体查询,根据当前用户界面宽度,对应媒体查询范围的css样式生效,让页面显示我们想要的状态。

示例:

这是在页面宽度大于等于1200px下,网页的显示方式:

页面宽度992px~1200px:

小于768px(移动端):

根据用户界面的宽度不同,显示不同的页面效果,那么网页就能完美适应PC端、手机端。

使用bootstrap,需要对应bootstrap的css文件,引入需要用的页面,用官方规定的类名引用对应的css样式以达到我们要的效果。

bootstrap控制页面宽度用的是"栅格系统",即把每一个页面或者标签分成等量的12份。引用对应的类名,并且在类名后面加数字 1 ~ 12 ,来代表当前标签在父级标签里所占比例。

col-lg-3lg , large (>=1200px 占父级 3/12 的宽度,下面类推)

col-md-3md , middle (992px-1200px)

col-sm-3sm ,small (768px-992px)

col-xs-3(小于768px)

此图每一个小单元都占据了父级 25% 即 3/12,其代码结构应该是:

最后讲一下bootstrap的优缺点

优点:

1.栅格系统,BT('bootstrap'的意思不是'变态'!)可以根据用户屏幕尺寸调整页面,使其在各个尺寸上都表现良好。实现这个功能依赖两个东西,一个是view,另一个是max-width,min-width。

2.CSS模块化(表现),BT预先定义了很多CSS类,使用的时候直接给class赋予对应的类名即可,如text-left,text-align,.table等。最有代表性的就是btn类。

3.JavaScript插件(交互),BT的JavaScript插件非常丰富,既可以用现成的也可以自己扩充。

缺点:

对IE兼容也存在不小的问题,BT将所有的元素盒模型都设置成了border-box,这是IE混杂模式下的盒模型,光这点就导致了不能兼容IE。

此外还用到了大量的H5标签以及CSS3语法,这些语法标签兼容性方面同样存在不小的问题,当然网上存在很多兼容IE的办法,但需要引入其他文件,有些还不小,势必导致加载速度变慢,影响用户体验。

BT对IE6,7的兼容性肯定不好,对IE8的支持也需要一些额外的文件。

IE8的媒体查询需要response.js的配合才能实现

总的来说,肯定"利大于弊",做web前端的自适应页面用bootstrap框架肯定比自己写媒体查询更加节约时间。

学IT到牵引力

求订阅求关注

—END—

订阅号:牵引力量

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180425G17DFA00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券