已经好几天没更了，原因是因为最近进入了一家做数据的公司，在大数据产品部学习“前端可视化入门+BI入门”。
看了一上午的数据库，收获不少但是有点枯燥，所以找Bootstrap稍微放松一下。
刚刚找到之前在fcc上进行到一半的Bootstrap教程，做完了剩余任务，总结出来一些很基础但是很重要的东西，分享给大家。
其实之前也看过bootstrap的文档也跟着敲了一遍，但是现在都忘完了，看来时间还真是记忆的橡皮擦啊，不过有个好处就是通过对比知道那些东西是重重之重。
一、布局
首先创建一个大的容器：<div class="container-fluid"></div>（类似于新建一个数据库）
再创建一个行:<div class="row"></div>（类似于新建了一个表）
再创建需要布局的元素：<div class="col-xs-6"></div><div class="col-xs-6"></div>（类似于添加了列）
所以最后的结构是这样的：
这样就实现了一个响应式的左右布局！
可以继续在含有col-xs-6的div中添加自己想添加的结构！
Bootstrap的栅栏布局，把当前浏览器宽度设置为12列，所以我们可以根据需求来调整，这个例子中因为是左右各占一半，所以是12÷2=6，因此设置为col-xs-6。如果我想以1:2的比例进行布局呢？设置成“col-xs-4”和“col-xs-8”就可以了！
二、按钮常用
button按钮在html里可谓是常客，因此Bootstrap也定义了相应的class。
常用的有：
btn btn-primary（深蓝色） btn-info（浅蓝色，小清新色） btn-block（转换为块级元素）
三、响应式图片
你一定为img标签中图片的大小苦恼过吧，屏幕一变，整个页面就爆炸，但是Bootstrap可以为img标签添加一个img-responsive来实现响应式。
这是一个综合运用以上三种方法的小demo，大家可以自己试着去练习一下。
努力成为优秀的前端工程师！
>期待和大家交流，共同进步，欢迎大家加入我创建的与前端开发密切相关的技术讨论小组：
> - SegmentFault技术圈:[ES新规范语法糖](https://segmentfault.com/g/1570000010695363)
> - SegmentFault专栏：[趁你还年轻，做个优秀的前端工程师](https://segmentfault.com/blog/chennihainianqing)
>- 知乎专栏：[趁你还年轻，做个优秀的前端工程师](https://zhuanlan.zhihu.com/wyasy)
>- Github博客: [趁你还年轻233的个人博客](https://github.com/FrankKai/FrankKai.github.io)
>- 前端开发QQ群：660634678
>- 微信公众号： 人兽鬼 / excellent_developers
>努力成为优秀前端工程师！
