bootstrap柵格布局-v客學院知識分享
阿新 • • 發佈:2018-09-27
內容 當前 img 轉載 大小 ont bootstrap 過程 rda <768px
客學院版權所有,轉載請註明出路,謝謝!!!)
今天主要跟大家講解下bootstrap的柵格布局,以及使用過程中應該註意的問題
首先我們要使用bootstrp的柵格布局就必須使用HTML正確的基本結構
如下圖:
必須給要使用柵格布局的盒子定義class為container。目的一是為了在響應式的布局上給寬度約束,二是提供padding以至於不讓內容貼住瀏覽器的邊緣。
Class為row的盒子是指行的容器,bootstrap把一行分成了12等分,下面講解下col-xx-是怎麽使用的吧。
Bootstrap柵格布局中css中有四個類,分別是col-xs-, col-sm-, col-md-, col-lg-;
col-xs-是指超小屏幕 手機
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
bootstrap柵格布局-v客學院知識分享