当前位置: 首页 > Web前端 > CSS

Bootstrap网格系统布局

时间:2023-03-30 16:04:25 CSS

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的基本网格结构:

...
...注意:列必须放在行元素下,行元素只能包含列子元素,不能包含其他子标签元素,否则,布局样式会乱七八糟。四、布局实战代码:Bootstrap实例-布局偏移列表-@corwien区域一(col-md-8col-md-offset-1)区块二(col-md-3)块三(col-md-8col-md-offset-1)块四(col-md-4)块五(col-md-12)块六(col-md-3)块七(col-md-6)块八(col-md-3)说明:灰色区域为body,白色区域为body区域是容器容器注意:这里要特别注意block1和block2在同一行,block3和block4却在不同行,为什么?因为列元素是行内元素,如果一行中的12列不够,下面的块元素和上面的块列加起来就是12个以下,就会排在同一行。如果总和大于12,则将它们排在下一列,如果Block1和Block2两列的总和等于12,则可以排在同一行,两者的总和Block3和4的列数是13,超出一行的最大显示列数是12,自然是在另一行。Bootstrap相关优质项目推荐http://www.bootcss.com/