📜  Bootstrap-网格演示

📅  最后修改于: 2020-10-27 06:26:10             🧑  作者: Mango


 

什么是网格?

在图形设计中,网格是由一系列相交的直线(垂直,水平)线组成的结构(通常为二维),用于构造内容。它广泛用于印刷设计中的布局和内容结构设计。在网页设计中,使用HTML和CSS快速有效地创建一致的布局是一种非常有效的方法。

Bootstrap网格系统的工作

网格系统用于通过一系列容纳您的内容的行和列来创建页面布局。这是Bootstrap网格系统的工作方式-

  • 必须将行放置在.container类内,以便正确对齐和填充。
  • 使用行创建水平的列组。
  • 内容应放在列中,并且只有列可以是行的直接子代。
  • 预定义的网格类(例如.row和.col-xs-4)可用于快速制作网格布局。 LESS mixin也可以用于更多的语义布局。
  • 列通过填充创建装订线(列内容之间的间隙)。该填充通过.rows上的负边距在第一列和最后一列的行中偏移。
  • 通过指定要跨越的十二个可用列的数量来创建网格列。例如,三个相等的列将使用三个.col-xs-4
Example Description Download link
Grids This example indicates about grid structure in Bootstrap. Download