Bootstrap3出来大概有几天时间了,据说他们宣称这个版本是移动优先,而且还把控件给排扁了。
前几天稍微看了一下他们的新文档,感觉确实变化挺多,但是对于熟悉第二版的开发这者来说,稍微看一下基本就了解了。这个框架使用的人真的是奇多,正式版刚发布的那天就有人提醒我,我github上头一个基于Bootstrap的自动提醒控件应该升级成v3的了,而且还给我发来了代码,这效率……
这个博客当初是决定了以后常用的,所以代码和文件布置的还算合理,从v2升级到v3基本不费什么功夫。就是换一下css和js,改改class的事情。总共时间1个小时吧,加上写这个总结,接下来说说主要关心修改什么内容。
1.bootstrap文件更新
看一下新的bootstrap文件
.
├── css
│ ├── bootstrap.css
│ └── bootstrap.min.css
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ └── glyphicons-halflings-regular.woff
└── js
├── bootstrap.js
└── bootstrap.min.js
css和js还是老样子,只要覆盖原来的就行了,这里关键说一下fonts里头的东西。
以前版本里面,图标都是真的图片做成的,他们都被集合在之前的glyphicon-halflings.png里头,用哪个根据图片位置相对显示哪个。这种方式导致的问题就是在分辨率变法的时候,图片要么失真要么显示有问题,尤其是retina屏下头。
这个问题在v2阶段就有解决办法,只不过不是官方发布的,而是由Font Awesome提供了基于字体的图标,这样形成的图标是矢量图,可以面对各种各样的分辨率。我找到一个对它进行分析的文章,链接在此。
现在v3版本里面也有了类似的解决方案,对我来说用原来的就行,没有影响。
2.网格布局修改
网格布局由原来的span
变成了现在超级难看的col-xx-xx
,而且看起来不那么简约时尚国际范了。不过稍微细读一下文档会发现,这种略微复杂的控制方式,反而对响应式布局的控制变得非常精细,妈妈再也不用担心分辨率改了以后还得修改css文件了!
通过<div class="col-xs-12 col-md-8">
类似这样的并列方式,就可以控制不同分辨率下控件的现实形式。对我来说没啥作用,因为默认的布局方式就够用了,直接把span
都换成col-md
,搞定!
这里我用md是因为我这个博客页面不是很丰富,太宽不好看,而且我还把bootstrap.css下1200那个最大值给调成了2000。也就是说,你想看到col-lg的布局,得屏幕分辨率达到2000xXXX以上了……
3.控件修改
这里大概用了一些简单的控件,比如右边的affix,以及顶上的navbar,还有下面的pagination,还有分类页面的collapse。变化仅仅是改了一下class的名字,逐个击破就好了
4.一些想法
Bootstrap的出现,一定程度上统一了前端杂乱的氛围,简化了开发流程,降低了开发难度,简直就是老少皆宜。对于不是做前端,却要偶尔写前端的孩纸,指明了一条道路。对于做前端的开发者来说,又有了一个较为标准化的学习对象,可以加快学习速度,少走一些弯路。
现在阅读字体和风格都不怎么舒服,待优化,下次再弄吧。