网格选项

通过表格,可以很方便的查看Bootstrap网格系统各种配置选项的效果


构建Bootstrap

Bootstrap不仅仅在桌面浏览器上边线出色,而且智能移动设备上,也同样有出色表现。 它有很多特性,比如可以优先适应12列的移动网格,很多的的组件和插件,等等。
超小型设备 苹果 (<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-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
示例: 移动和平板

不想让你的列在小型设备上出现简单的重叠?可以在你的列元素中,添加超小或者中等设备网格样式.col-xs-* .col-md-*,看下面示例,边知道这些样式是怎么狠好的起作用。

.col-xs-12 col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
示例: 移动, 平板, 桌面

在前面示例基础之上,你可以通过样式,创造出更加灵活和功能强大的布局.col-sm-*

col-xs-12 col-sm-6 col-md-8
.col-xs-6 .col-sm-6 .col-md-4
col-xs-6 col-sm-4 col-md-4
col-xs-6 col-sm-4 col-md-4
col-xs-6 col-sm-4 col-md-4
偏移量列

添加样式.col-md-offset-*,可以讲列移动到右边,通过样式 *,这些样式可以增大列左边的边距。例如,列.col-md-offset-4可以使用列.col-md-4移动4个列大小。

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
内嵌列

将你的内容内嵌到一个默认的网格中,请使用以下样式,一个.row,一组.col-md-*,内嵌行最多可以12列

Level 1: .col-md-12
Level 2: .col-md-6
Level 2: .col-md-6

Responsive utilities

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.

可使用的class样式

通过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 可见 可见 可见