Grid
Grid system #
Grid 系统提供了一种可行的方式让你网站表现出响应式。
Props #
Grid #
| 名称 |
类型 |
缺省值 |
描述 |
| componentClass |
elementType |
'div' |
你可以为用一个自定义的元素替换该元素所属的标签。 |
| fluid |
boolean |
false |
添加这个属性会让一个固定宽度的网格布局变成一个全宽度的布局。它会在最终的 html 中添加 container-fluid 类。 |
Row #
| 名称 |
类型 |
缺省值 |
描述 |
| componentClass |
elementType |
'div' |
你可以为用一个自定义的元素替换该元素所属的标签。 |
Col #
| 名称 |
类型 |
缺省值 |
描述 |
| componentClass |
elementType |
lass: |
你可以为用一个自定义的元素替换该元素所属的标签。 |
| lg |
number |
|
你期望在大屏幕设备(≥1200px)上元素所占的列数。等同于 Bootstrap 的 col-lg- |
| lgOffset |
number |
|
在大屏上向右移动 number 数的列数。等同于 Bootstrap 的 col-lg-offset- |
| lgPull |
number |
|
在大屏上向左移动 number 个数量的网格列。等同于 Bootstrap 的 col-lg-pull- |
| lgPush |
number |
|
在大屏上向右移动 number 个数量的网格列。等同于 Bootstrap 的 col-lg-push- |
| md |
number |
|
你期望在中等尺寸屏幕设备(≥992px)上元素所占的列数。等同于 Bootstrap 的 col-md- |
| mdOffset |
number |
|
在中等尺寸屏幕上向右移动 number 数的列数。等同于 Bootstrap 的 col-md-offset- |
| mdPull |
number |
|
在中等尺寸屏幕上向左移动 number 个数量的网格列。等同于 Bootstrap 的 col-md-pull- |
| mdPush |
number |
|
在中等尺寸屏幕上向右移动 number 个数量的网格列。等同于 Bootstrap 的 col-md-push- |
| sm |
number |
|
你期望在小尺寸屏幕设备(≥768px)上元素所占的列数。等同于 Bootstrap 的 col-sm- |
| smOffset |
number |
|
在小尺寸屏幕上向右移动 number 数的列数。等同于 Bootstrap 的 col-sm-offset- |
| smPull |
number |
|
在小尺寸屏幕上向左移动 number 个数量的网格列。等同于 Bootstrap 的 col-sm-pull- |
| smPush |
number |
|
在小尺寸屏幕上向右移动 number 个数量的网格列。等同于 Bootstrap 的 col-sm-push- |
| xs |
number |
|
你期望在特小尺寸屏幕设备(<768px)上元素所占的列数。等同于 Bootstrap 的 col-xs- |
| xsOffset |
number |
|
在特小尺寸屏幕上向右移动 number 数的列数。等同于 Bootstrap 的 col-xs-offset- |
| xsPull |
number |
|
在特小尺寸屏幕上向左移动 number 个数量的网格列。等同于 Bootstrap 的 col-xs-pull- |
| xsPush |
number |
|
在特小尺寸屏幕上向右移动 number 个数量的网格列。等同于 Bootstrap 的 col-xs-push- |
组件参考 #
React-Bootstrap官方文档: http://react-bootstrap.github.io/components.html#grid
CUZ