bootstrap grid的用法：首先使用container來包裹div；然后在div里面設(shè)置行；接著設(shè)置列能夠快速對(duì)這個(gè)框架進(jìn)行搭建；最后通過拖拽瀏覽器來改變寬窄即可。

本文操作環(huán)境：Windows7系統(tǒng)、bootstrap3、Dell G3電腦。

bootstrap的grid怎么使用？

div使用container來包裹，然后在里面設(shè)置行，設(shè)置行后再設(shè)置列能夠快速對(duì)這個(gè)框架進(jìn)行搭建

Hello, world!

第一列占1個(gè)md

這個(gè)是第二列 占 2 個(gè)md

最后一個(gè)md占9個(gè)列

保障總數(shù)為12個(gè)，通過拖拽瀏覽器改變寬窄可以看出變化。

此外屏幕大小也會(huì)影響，這個(gè)時(shí)候列的class也要使用大型的那個(gè)col，通過拖拽瀏覽器可以看出變化。

中型占6，大型占4

中型占6，大型占8

整個(gè)格柵大小分配.col-xs- 超小屏幕 手機(jī) (<768px)

.col-sm- 小屏幕 平板 (≥768px)

.col-md- 中等屏幕 桌面顯示器 (≥992px)

.col-lg- 大屏幕 大桌面顯示器 (≥1200px)

總結(jié)

以上是生活随笔為你收集整理的bootstrap grid php,bootstrap grid用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。