技术

IT这个行当之需求与时间管理 golang结构体和包中的类型或基础类型定义方法 golang中结构体的初始化方法(new方法) 项目管理总结 python函数式编程之-装饰器(Decorators) python文件批量处理 Go,互联网时代的C Python推导式演变(Comprehensions) 项目管理感悟 golang学习简单例子 了解GitHub工作流【译】 PHP Socket的使用 Apache 日志文件格式及简单处理 Python脚本--下载合并SAE日志 PHP命名空间及自动加载 基于CSS3实现尖角面包屑 部署Ceilometer到已有环境中 OpenStack Ceilometer Collector代码解读 OpenStack Ceilometer数据存储与API源码解析 OpenStack Ceilometer中的Pipeline机制 OpenStack Ceilometer Compute Agent源码解读 学习Python动态扩展包stevedore 学习Python的ABC模块 Python包管理工具setuptools详解 OpenStack Horizon 中文本地化 WSGI学习 在虚拟机单机部署OpenStack Grizzly 学习使用python打包工具distutils python包工具之间的关系 给OpenStack创建Ubuntu镜像 OpenStack Grizzly Multihost部署文档 为什么使用pip而不是easy_install HTML中meta标签viewpoint的作用 交互式编程-IPython 页面提速之——数据缓存 给OpenStack创建Win7镜像 Ceilometer的命令行使用 部署一个ceilometer-horizon项目 给OpenStack创建Windows XP镜像 几种企业的存储系统 概念模型、逻辑模型、物理模型的区别 五中常见的开源协议整理(BSD,Apache,GPL,LGPL,MIT) OpenStack监控项目Ceilometer的一些术语 VNC和远程桌面的区别 OpenStack Ceilometer项目简介 虚拟化与云计算中KVM,Xen,Qemu的区别和联系 调试和修改OpenStack中的Horizon部分 JavaScript变量作用域 kanyun worker原理 kanyun server服务 在OpenStack中部署kanyun kanyun的api-client命令 sae下的python开发部署和一个简单例子 OpenStack Nova内部机制 PHP可变变量 JS中防止浏览器屏蔽window.open PHP操作Session的原理及提升安全性时的一个问题

标签


更新前端框架到Bootstrap3

2013年08月28日

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

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