已經(jīng)好幾天沒(méi)更了，原因是因?yàn)樽罱M(jìn)入了一家做數(shù)據(jù)的公司，在大數(shù)據(jù)產(chǎn)品部學(xué)習(xí)“前端可視化入門+BI入門”刺桃。
看了一上午的數(shù)據(jù)庫(kù)，收獲不少但是有點(diǎn)枯燥吸祟，所以找Bootstrap稍微放松一下瑟慈。
剛剛找到之前在fcc上進(jìn)行到一半的Bootstrap教程，做完了剩余任務(wù)屋匕，總結(jié)出來(lái)一些很基礎(chǔ)但是很重要的東西葛碧，分享給大家。
其實(shí)之前也看過(guò)bootstrap的文檔也跟著敲了一遍过吻，但是現(xiàn)在都忘完了进泼，看來(lái)時(shí)間還真是記憶的橡皮擦啊，不過(guò)有個(gè)好處就是通過(guò)對(duì)比知道那些東西是重重之重纤虽。
一乳绕、布局
首先創(chuàng)建一個(gè)大的容器：<div class="container-fluid"></div>（類似于新建一個(gè)數(shù)據(jù)庫(kù)）
再創(chuàng)建一個(gè)行:<div class="row"></div>（類似于新建了一個(gè)表）
再創(chuàng)建需要布局的元素：<div class="col-xs-6"></div><div class="col-xs-6"></div>（類似于添加了列）
所以最后的結(jié)構(gòu)是這樣的：
這樣就實(shí)現(xiàn)了一個(gè)響應(yīng)式的左右布局！
可以繼續(xù)在含有col-xs-6的div中添加自己想添加的結(jié)構(gòu)逼纸！
Bootstrap的柵欄布局洋措，把當(dāng)前瀏覽器寬度設(shè)置為12列，所以我們可以根據(jù)需求來(lái)調(diào)整杰刽，這個(gè)例子中因?yàn)槭亲笥腋髡家话肷胛疲允?2÷2=6，因此設(shè)置為col-xs-6专缠。如果我想以1:2的比例進(jìn)行布局呢？設(shè)置成“col-xs-4”和“col-xs-8”就可以了淑仆！
二涝婉、按鈕常用
button按鈕在html里可謂是常客蔗怠，因此Bootstrap也定義了相應(yīng)的class墩弯。
常用的有：
btn btn-primary（深藍(lán)色） btn-info（淺藍(lán)色吩跋，小清新色） btn-block（轉(zhuǎn)換為塊級(jí)元素）
三、響應(yīng)式圖片
你一定為img標(biāo)簽中圖片的大小苦惱過(guò)吧渔工，屏幕一變锌钮，整個(gè)頁(yè)面就爆炸，但是Bootstrap可以為img標(biāo)簽添加一個(gè)img-responsive來(lái)實(shí)現(xiàn)響應(yīng)式引矩。
這是一個(gè)綜合運(yùn)用以上三種方法的小demo梁丘，大家可以自己試著去練習(xí)一下。
努力成為優(yōu)秀的前端工程師旺韭！
>期待和大家交流氛谜，共同進(jìn)步，歡迎大家加入我創(chuàng)建的與前端開(kāi)發(fā)密切相關(guān)的技術(shù)討論小組：
> - SegmentFault技術(shù)圈:[ES新規(guī)范語(yǔ)法糖](https://segmentfault.com/g/1570000010695363)
> - SegmentFault專欄：[趁你還年輕区端，做個(gè)優(yōu)秀的前端工程師](https://segmentfault.com/blog/chennihainianqing)
>- 知乎專欄：[趁你還年輕值漫，做個(gè)優(yōu)秀的前端工程師](https://zhuanlan.zhihu.com/wyasy)
>- Github博客: [趁你還年輕233的個(gè)人博客](https://github.com/FrankKai/FrankKai.github.io)
>- 前端開(kāi)發(fā)QQ群：660634678
>- 微信公眾號(hào)： 人獸鬼 / excellent_developers
>努力成為優(yōu)秀前端工程師！
