通过表格,可以很方便的查看Bootstrap网格系统各种配置选项的效果
超小型设备 苹果 (<768px) | 小型设备 掌上设备 (<768px) | 中等大小设备 台式机 (<992px) | 大型设备 台式机 (<1200px) | |
---|---|---|---|---|
网格效果 | 总是水平显示 | 开始折叠,在某个点事水平化 | ||
最大容纳宽度 | 自动 | 750px | 970px | 1170px |
前缀class样式 |
.col-xs-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
# 列数 | 12 | |||
最大列宽度 | 自动 | 60px | 78px | 95px |
间距宽度 | 30px (列两边各15px) | |||
是否可嵌套 | 是 | |||
偏移量 | N/A | 是 | ||
列是否排序 | N/A | 是 |
使用一系列网格样式 .col-md-*
,你可以创建一个基本的网格体系,并将它们放置在移动设备上,或者桌面设备上(从超小网格到小型网格)
不想让你的列在小型设备上出现简单的重叠?可以在你的列元素中,添加超小或者中等设备网格样式.col-xs-*
.col-md-*
,看下面示例,边知道这些样式是怎么狠好的起作用。
在前面示例基础之上,你可以通过样式,创造出更加灵活和功能强大的布局.col-sm-*
。
添加样式.col-md-offset-*
,可以讲列移动到右边,通过样式 *
,这些样式可以增大列左边的边距。例如,列.col-md-offset-4
可以使用列.col-md-4
移动4个列大小。
将你的内容内嵌到一个默认的网格中,请使用以下样式,一个.row
,一组.col-md-*
,内嵌行最多可以12列
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block and table toggling. Use with inline and table elements is currently not supported.
通过viewport breakpoints,您可以使用单个或多个class组合,来切换内容
超小型设备 苹果 (<768px) | 小型设备 掌上设备 (<768px) | 媒体设备 台式机 (<992px) | 大型设备 台式机 (<1200px) | |
---|---|---|---|---|
.visible-xs
|
Visible | 隐藏 | 隐藏 | 隐藏 |
.visible-sm
|
隐藏 | 可见 | 隐藏 | 隐藏 |
.visible-md
|
隐藏 | 隐藏 | Visible | 隐藏 |
.visible-lg
|
隐藏 | 隐藏 | 隐藏 | 可见 |
.hidden-xs
|
隐藏 | 可见 | 可见 | 可见 |
.hidden-sm
|
可见 | 隐藏 | 可见 | 可见 |
.hidden-md
|
可见 | 可见 | 隐藏 | 可见 |
.hidden-lg
|
可见 | 可见 | 可见 | 隐藏 |