多语言展示
当前在线:1132今日阅读:179今日分享:36

Bootstrap 学习教程:[3]栅格系统示例

栅格系统对手机、平板电脑、PC电脑的屏幕尺寸设置了不同样式,可以有更多的选择,有下列几种情况:1. 屏幕设备尺寸大于1200px 选择col-lg2. 屏幕设备尺寸在970px到1200px 选择col-md3. 屏幕设备尺寸在768px到970px 选择col-sm4. 屏幕设备尺寸小于768px 选择col-xs
工具/原料
1

WIN7

2

Bootstrap

方法/步骤
1

从堆叠到水平排列:栅格系统在container和row基础上编写

  
......

2

在页面屏幕大于970px

3

在页面屏幕小于970px

4

在移动设备和桌面:使用col-xs 和col-mdcol-xs 主要是水平排列col-md 堆叠状态

5

在页面屏幕大时

6

在页面屏幕小时

7

列偏移使用col-md-offset-*可以将列偏移到右侧如:col-md-offset-4将col-md-4向右移动了4个列的宽度

8

显示效果

9

嵌套列:添加一个新的row和一系列col-md-*列到已经存在的col-md-*列。嵌套row所包含的列加起来应该为12。

10

列嵌套效果

推荐信息