bootstrap柵格佈局-v客學院知識分享

 今天主要跟你們講解下bootstrap的柵格佈局，以及使用過程當中應該注意的問題

首先咱們要使用bootstrp的柵格佈局就必須使用HTML正確的基本結構

以下圖：

 

 

必須給要使用柵格佈局的盒子定義class爲container。目的一是爲了在響應式的佈局上給寬度約束，二是提供padding以致於不讓內容貼住瀏覽器的邊緣。

 

Class爲row的盒子是指行的容器，bootstrap把一行分紅了12等分，下面講解下col-xx-是怎麼使用的吧。

 

Bootstrap柵格佈局中css中有四個類，分別是col-xs-, col-sm-, col-md-, col-lg-;

col-xs-是指超小屏幕 手機 <768px

col-sm-是指小屏幕 平板 >=768px

col-md-是指中等屏幕  桌面顯示器  >=992px

Col-lg- 是指大屏幕  大桌面顯示器 >=1200px

 

無論在哪一種屏幕上，柵格系統都會自動的將每行分爲12列，每一個類後面接的值表示當前的屏幕中給個盒子所佔的個數，

如：

 

該div在屏幕中佔的位置是：col-xs-6是在超小屏幕中佔6列，也就是整屏幕的一半（由於一共是12列）。col-md-3是在桌面顯示器中佔1/4的大小。

更多參考：https://v3.bootcss.com/css/

（php開發,web前端，ui設計，vr開發專業培訓機構，v客學院版權全部，轉載請註明出路，謝謝！！！）