欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

什么是 Bootstrap 网格系统(Grid System)?

来源: 开发者 投稿于  被查看 14159 次 评论:82

什么是 Bootstrap 网格系统(Grid System)?


Bootstrap 官方文档中有关网格系统的描述

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。

让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备、平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑、台式电脑)上的组件和网格。

Bootstrap 网格系统(Grid System)的工作原理

·网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:
·行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
·使用行来创建列的水平组。
·内容应该放置在列内,且唯有列可以是行的直接子元素。
·预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
·列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
·网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。

媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件,则应用相应
的样式。
Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用,用来创建
Bootstrap 网格系统中的关键的分界点阈值。
css 代码

/* 超小设备(手机,小于 768px) */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备(平板电脑,768px 起) */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备(台式电脑,992px 起) */
@media (min-width: @screen-md-min) { ... }
/* 大型设备(大台式电脑,1200px 起) */
@media (min-width: @screen-lg-min) { ... }

我们有时候也会在媒体查询代码中包含 max-width,从而将 CSS 的影响限制在更小范围的屏幕大小之内。
css 代码

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

媒体查询有两个部分,先是一个设备规范,然后是一个大小规则。在上面的案例中,设置了下列的规则:
让我们来看下面这行代码:
css 代码

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

对于所有带有 min-width: @screen-sm-min 的设备,如果屏幕的宽度小于 @screen-sm-max,则会进行一些处理。

网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作:
[table=100%,#ffffff,#f2f2f2,1,6,left]
[tr]
[td=1,1,20.00%][/td]
[td=1,1,20.00%]####超小设备收集(<768px)[/td]
[td=1,1,20.00%]####小型设备平板电脑(≥768px)[/td]
[td=1,1,20.00%]####中型设备台式电脑(≥992px)[/td]
[td=1,1,20.00%]####大型设备台式电脑(≥1200px)[/td]
[/tr]
[tr]
[td=1,1,20.00%]网格行为[/td]
[td=1,1,20.00%]一直是水平的[/td]
[td=1,1,20.00%]以折叠开始,断点以上是水平的[/td]
[td=1,1,20.00%]以折叠开始,断点以上是水平的[/td]
[td=1,1,20.00%]以折叠开始,断点以上是水平的[/td]
[/tr]
[tr]
[td=1,1,20.00%]最大容器宽度[/td]
[td=1,1,20.00%]None (auto)[/td]
[td=1,1,20.00%]750px[/td]
[td=1,1,20.00%]970px[/td]
[td=1,1,20.00%]1170px[/td]
[/tr]
[tr]
[td=1,1,20.00%]Class前缀[/td]
[td=1,1,20.00%].col-xs-[/td]
[td=1,1,20.00%].col-sm-
[/td]
[td=1,1,20.00%].col-md-[/td]
[td=1,1,20.00%].col-lg-
[/td]
[/tr]
[tr]
[td=1,1,20.00%]列 *[/td]
[td=1,1,20.00%]12[/td]
[td=1,1,20.00%]12[/td]
[td=1,1,20.00%]12[/td]
[td=1,1,20.00%]12[/td]
[/tr]
[tr]
[td=1,1,20.00%]最大列宽[/td]
[td=1,1,20.00%]Auto[/td]
[td=1,1,20.00%]60px[/td]
[td=1,1,20.00%]78px[/td]
[td=1,1,20.00%]95px[/td]
[/tr]
[tr]
[td=1,1,20.00%]间隙宽度[/td]
[td=1,1,20.00%]30px
(一个列的每边
分别 15px)[/td]
[td=1,1,20.00%]30px
(一个列的每边分
别 15px)[/td]
[td=1,1,20.00%]30px
(一个列的每边分
别 15px)[/td]
[td=1,1,20.00%]30px
(一个列的每边分别
15px)[/td]
[/tr]
[tr]
[td=1,1,20.00%]可嵌套[/td]
[td=1,1,20.00%]Yes[/td]
[td=1,1,20.00%]Yes[/td]
[td=1,1,20.00%]Yes[/td]
[td=1,1,20.00%]Yes[/td]
[/tr]
[tr]
[td=1,1,20.00%]偏移量[/td]
[td=1,1,20.00%]Yes[/td]
[td=1,1,20.00%]Yes[/td]
[td=1,1,20.00%]Yes[/td]
[td=1,1,20.00%]Yes[/td]
[/tr]
[tr]
[td=1,1,20.00%]列排序[/td]
[td=1,1,20.00%]Yes[/td]
[td=1,1,20.00%]Yes[/td]
[td=1,1,20.00%]Yes[/td]
[td=1,1,20.00%]Yes[/td]
[/tr]
[/table]

基本的网格结构

下面是 Bootstrap 网格的基本结构:
html 代码

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">...</div>
</div>
<div class="container">....

用户评论