本篇说明:
上一个系列我已经尝试用着原生的div+css进行布局。虽然最后的效果也还行，但是仔细想一想过程，只能用酸爽二字来形容了。在QQ邮箱登录PC布局实战笔记这几篇文章里面，我虽然很好地用一些网页切图工具测量官网程序并能够精确到1px，但是开发效率很低下，这也就是我为什么会花费4篇来写一个比较完善点的Demo了。而且，当大家仔细地去阅读我前一个代码的时候，会发现，尤其在CSS部分，我用了大量的定位，很多代码重复的，我自己写起来很烦。所以，今天开始学习一下Bootstrap。
Bootstrap优点:
- 是一种用户体验极好UI框架。
- 具有很好的响应式体验。（跨终端的体现，主要体现在移动端）
- 极大地提升了web开发者的开发效率。
- 具有高度的可定制化。
- 能够向下兼容低版本的浏览器。
- 社区成熟、框架本身可以经得起考验。
- (如果还有，欢迎指点。)
搭建bootstrap的开发环境
- 下载bootstrap
书中是去英文官网getbootstrap.com下载，我建议直接到bootstrap中文网下载3.x版本就OK。下载一定下载源码的压缩包。（主要我们要体验一自己亲自编译less的过程，）。PS:到中文网下载的截图我就不贴了，我觉得如果大家学习bootstrap，至少对于下载啥的应该ok了。
- 下载h5bp模板
1.官网地址：https://html5boilerplate.com/
2.下载之后，删除一些目录，css目录、doc目录、还有一些图片啥的，自己看自己情况删除就好。如图：
3.完了之后将，刚才下载的bootstrap里面的fonts,拷贝一份。到这个h5bp项目里面。并且新建一个.htaccess文件，这个文件Windows下不能自己新建，需要把项目里面自带的拷贝进去。
那个.htaccess文件代码如下:
<FilesMatch "\.(ttf|otf\eot\woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
4.导入js文件,找到你们解压的地方，这里我为了演示方便，将bootstrap的源文件放到项目同级目录下了，到里面的js文件夹全部复制，之后到你的项目文件的js目录下，新建一个bootstrap文件夹，把资源文件放进去就好。如图:
5，导入less文件夹，和第四步一致。
- 修改index.html
我的代码如下，具体看注释:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>bootstrap'叙话代码</title>
<meta name="description" content="">
<meta name=
最低0.47元/天 解锁文章
3164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
