Bootstrap提供了一套响应式、移动设备优先的流体网格系统(GridSystem),随着屏幕或视口(viewport)尺寸的增加,系统会自动分成多达12个列表。1、什么是网格?在平面设计中,网格是由一系列用于组织内容的交叉线(垂直和水平)组成的结构(通常是二维的)。广泛应用于印刷设计中的设计排版和内容结构。在网页设计中,它是一种快速创建一致布局并有效使用HTML和CSS的方法。一句话:网页设计中的网格用于组织内容,使网站易于浏览,并减轻用户端的负担。2.什么是Bootstrap网格系统(GridSystem)?Bootstrap包括一个响应式、移动优先、流体网格系统,随着设备或视口大小的增加,该系统可以适当地扩展到12列。它包含用于简单布局选项的预定义类以及用于生成更多语义布局的强大混合类。3.网格系统的工作原理网格系统通过一系列包含内容的行和列来创建页面布局。Bootstrap网格系统的工作原理如下:行必须放置在.container类中以进行适当的对齐和填充。使用row创建水平的列组。内容应放在列内,并且只有列可以是行的直接子项。预定义的网格类,例如.row和.col-xs-4,可用于快速创建网格布局。LESSmixin可用于更多语义布局。列使用填充在列内容之间创建间隙。填充由.rows上的边距取反,表示第一列和最后一列的行偏移量。网格系统是通过指定要跨越的十二个可用列来创建的。例如,要创建三个相等的列,请使用三个.col-xs-4。下面是Bootstrap的基本网格结构:
