已經(jīng)好幾天沒更了，原因是因為最近進入了一家做數(shù)據(jù)的公司，在大數(shù)據(jù)產(chǎn)品部學(xué)習(xí)“前端可視化入門+BI入門”。

看了一上午的數(shù)據(jù)庫，收獲不少但是有點枯燥，所以找Bootstrap稍微放松一下。

剛剛找到之前在fcc上進行到一半的Bootstrap教程，做完了剩余任務(wù)，總結(jié)出來一些很基礎(chǔ)但是很重要的東西，分享給大家。

其實之前也看過bootstrap的文檔也跟著敲了一遍，但是現(xiàn)在都忘完了，看來時間還真是記憶的橡皮擦啊，不過有個好處就是通過對比知道那些東西是重重之重。

一、布局

首先創(chuàng)建一個大的容器：<div class="container-fluid"></div>（類似于新建一個數(shù)據(jù)庫）

再創(chuàng)建一個行:<div class="row"></div>（類似于新建了一個表）

再創(chuàng)建需要布局的元素：<div class="col-xs-6"></div><div class="col-xs-6"></div>（類似于添加了列）

所以最后的結(jié)構(gòu)是這樣的：

這樣就實現(xiàn)了一個響應(yīng)式的左右布局！

可以繼續(xù)在含有col-xs-6的div中添加自己想添加的結(jié)構(gòu)！

Bootstrap的柵欄布局，把當(dāng)前瀏覽器寬度設(shè)置為12列，所以我們可以根據(jù)需求來調(diào)整，這個例子中因為是左右各占一半，所以是12÷2=6，因此設(shè)置為col-xs-6。如果我想以1:2的比例進行布局呢？設(shè)置成“col-xs-4”和“col-xs-8”就可以了！

二、按鈕常用

button按鈕在html里可謂是常客，因此Bootstrap也定義了相應(yīng)的class。

常用的有：

btn btn-primary（深藍色） btn-info（淺藍色，小清新色） btn-block（轉(zhuǎn)換為塊級元素）

三、響應(yīng)式圖片

你一定為img標(biāo)簽中圖片的大小苦惱過吧，屏幕一變，整個頁面就爆炸，但是Bootstrap可以為img標(biāo)簽添加一個img-responsive來實現(xiàn)響應(yīng)式。

這是一個綜合運用以上三種方法的小demo，大家可以自己試著去練習(xí)一下。

努力成為優(yōu)秀的前端工程師！

>期待和大家交流，共同進步，歡迎大家加入我創(chuàng)建的與前端開發(fā)密切相關(guān)的技術(shù)討論小組：

> - SegmentFault技術(shù)圈:[ES新規(guī)范語法糖](https://segmentfault.com/g/1570000010695363)

> - SegmentFault專欄：[趁你還年輕，做個優(yōu)秀的前端工程師](https://segmentfault.com/blog/chennihainianqing)

>- 知乎專欄：[趁你還年輕，做個優(yōu)秀的前端工程師](https://zhuanlan.zhihu.com/wyasy)

>- Github博客: [趁你還年輕233的個人博客](https://github.com/FrankKai/FrankKai.github.io)

>- 前端開發(fā)QQ群：660634678

>- 微信公眾號： 人獸鬼 / excellent_developers


>努力成為優(yōu)秀前端工程師！