浅谈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—

订阅号：牵引力量

▼