Bootstrap使用心得

     最近忙于工作好久没写博客了，今天更新一波，顺便记录一下工作中遇到的疑惑。

     关于bootatrap， 其实我并没有系统的学习过，也就是说我只是在原生 html+css 的基础之上，用了一些bootstrap 的样式类及插件，例如 多选下拉列表、时间控件 等。但是因此我也遇到了一些问题，比如说浏览器兼容性问题、比如说设备自适应问题。

     （1）浏览器兼容性问题：由于bootstrap 本身就用到了一些较新的技术，因此对于浏览器的版本有要求，一般在 IE9 以上，IE8也可以支持但是需要单独处理，另外它在Google 浏览器中显示良好，但是在火狐浏览器和IE浏览器中，会有轻微形变，比如说select控件的样式，因此后期需要调整的地方很多，当然经验老道的员工一开始就会有针对不同浏览器的样式内容；

     （2）由于bootstrap 设备优先，它本身的样式也决定了  bootstrap 更适合应用于简洁明了，优雅大方的网站设计，这样在适应设备的时候才能灵活布局，因此功能复杂的界面我是不推荐用bootstrap的，而且对UI 也有一定的要求。否则后期进行设备测试的时候会很头疼，就像我现在这样/doge

     （3）我在写这个管理系统的前端的时候，左边栏和Tab栏套用了 H+ 系统的源码，后期做了一丢丢调整。这个方法里面最坑爹的是用到了  iframe  并且我还在 iframe 里面用了弹出框。结果由于iframe产生了子页面 ，弹出框的遮罩层变得很麻烦，如果再牵扯到 resize 布局变动，简直就是一个大坑。所以重要的事情说三遍： 除非需要引入跨域的网页资源，尽量少的使用iframe！尽量少的使用iframe！尽量少的使用iframe！

     （5）自问自答：
              a、在网页布局的时候，虽然自己也能七零八碎的实现界面需求，可还是感觉没有使用table 来的方便，代码也更统一完整。但是table布局其实是不提倡的，说到底还是css 的功底不到家。不论如何，熟能生巧，先学会熟练实现页面效果，后期再自己尝试建立系统性的编码风格。

···

Table布局是一种老式的布局方式，在css标准还未统一的时候，table因为气机构的稳定可靠和较好的兼容性成为主流的布局方式，所以早些年很流行table方式布局，但是随着时间技术的发展和进步，特别是新web标准的确立，table布局方式不在适合我们现在是前端开发，它有很大的局限性。首先是代码的臃肿，可读性不高，维护性较差，table布局采用宫格式规划，将整个页面划分成若干行和列，靠这些行和列定位区块，页面元素越多区域划分就要越细致，打开页面代码，满屏幕tr td，很难定位到要找到代码，编码修改起来也不直观。

采用table布局相对于css代码布局，css布局页面代码简洁没有多余结构，代码要比table代码布局少很多，而且看起来一目了然。

除开代码简洁性以外，table布局还存在性能问题，table原本是设计来展示数据的，一行或者一列的数据过长，同一行或者同一列的单元格就会全部要拉伸，以便清晰的显示数据对应关系，基于这种特性，浏览器对table进行渲染的时候需要等待所有格子的内容的完全加载，解析相比使用css布局的页面耗时要长（css布局使用的元素相互之间没有严格的关联关系，加载一个显示一个。加载相应时间快），特别是采用多层table结构嵌套布局的时候，页面显示会更慢。

最后一个使用table布局的缺陷是页面元素的灵活性不高。所谓成也萧何，败也萧何。结构稳定的table宫格式布局的页面要改变元素的位置成本很大，需要编辑html结构，修改宫格划分，如果风格修改过大，相当于重做页面，而是用css布局的页面，其他什么都不要动，仅编辑css即可。

···

             b、做网站，最好一开始就有整体思想，相似的界面能有统一的实现方法；尽量考虑到不同的设备和尺寸问题；对于所使用的框架能够做到熟知其优缺点，学会如何避免和解决问题；

             c、前端的路还长着呢......