wonderfan的博客 | 更新前端框架到Bootstrap3

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的出现，一定程度上统一了前端杂乱的氛围，简化了开发流程，降低了开发难度，简直就是老少皆宜。对于不是做前端，却要偶尔写前端的孩纸，指明了一条道路。对于做前端的开发者来说，又有了一个较为标准化的学习对象，可以加快学习速度，少走一些弯路。

现在阅读字体和风格都不怎么舒服，待优化，下次再弄吧。

中文

英文

读书

中文/英文

标签

PHP 12

JavaScript 12

OpenStack 14

Python 18

MySQL 4

Git 3

Windows 1

Virtualization 1

Linux 5

Bootstrap 1

Concept 1

HTML 5

MongoDB 1

CSS 3

jQuery 1

Shell 1

SVN 1

UI 1

Laravel 4

Nginx 1

Apache 1

Magento 1

Django 1

Java 2

NodeJS 5

Sails 1

CloudStack 1

Anatomy 2

Go 5

Book 1

分享 1

更新前端框架到Bootstrap3

[目录]

1.bootstrap文件更新

2.网格布局修改

3.控件修改

4.一些想法