Bootstrap入门中的入门

已经好几天没更了，原因是因为最近进入了一家做数据的公司，在大数据产品部学习“前端可视化入门+BI入门”。

看了一上午的数据库，收获不少但是有点枯燥，所以找Bootstrap稍微放松一下。

刚刚找到之前在fcc上进行到一半的Bootstrap教程，做完了剩余任务，总结出来一些很基础但是很重要的东西，分享给大家。

其实之前也看过bootstrap的文档也跟着敲了一遍，但是现在都忘完了，看来时间还真是记忆的橡皮擦啊，不过有个好处就是通过对比知道那些东西是重重之重。

一、布局

首先创建一个大的容器：

（类似于新建一个数据库）

再创建一个行:

（类似于新建了一个表）

再创建需要布局的元素：

（类似于添加了列）

所以最后的结构是这样的：

这样就实现了一个响应式的左右布局！

可以继续在含有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


>努力成为优秀前端工程师！