bootstrap grid的用法:1、使用container來包裹div;2、在div裡面設定行;3、設定列能夠快速地建立這個框架;4、透過拖曳瀏覽器來改變寬窄即可。
本文操作環境:Windows7系統、bootstrap3、Dell G3電腦。
bootstrap的grid怎麼使用?
div使用container來包裹,然後在裡面設定行,設定行後再設定列能夠快速對這個框架進行搭建
Hello, world!
第一列占1个md
这个是第二列 占 2 个md
最后一个md占9个列
保障總數為12個,透過拖曳瀏覽器改變寬窄可以看出變化。
此外螢幕大小也會影響,這個時候列的class也要使用大型的那個col,透過拖曳瀏覽器可以看出變化。
中型占6,大型占4中型占6,大型占8
整個格柵大小分配
.col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-lg- 大屏幕 大桌面显示器 (≥1200px)
推薦:《bootstrap教程》
以上是bootstrap grid用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!