本篇文章給大家分享一個(gè)Bootstrap實(shí)戰(zhàn)，手把手帶你使用Bootstrap實(shí)現(xiàn)瀑布流布局，希望對(duì)大家有所幫助！

講 Bootstrap 基礎(chǔ)的教程網(wǎng)上已經(jīng)很多了，實(shí)際上 Bootstrap 中文網(wǎng)（bootcss.com）里的文檔已經(jīng)寫的很詳細(xì)了，但實(shí)戰(zhàn)的案例卻不多。這里用一些當(dāng)前流行的網(wǎng)頁(yè)布局為導(dǎo)向，使用 Bootstrap 中的樣式來(lái)完成它。每次只講與案例相關(guān)的知識(shí)點(diǎn)，邊學(xué)邊練，加強(qiáng)理解。練習(xí)本案例需有 HTML/CSS 基礎(chǔ)。

一、案例介紹

瀑布流是近幾年流行起來(lái)的一種網(wǎng)頁(yè)布局，視覺(jué)表現(xiàn)為參差不齊的多欄布局，本案例便是使用 Bootstrap 實(shí)現(xiàn)一個(gè)瀑布流布局。【