引导网格

📌 相关文章

📜 引导网格

📅 最后修改于: 2020-12-19 02:48:57 🧑 作者: Mango

维基百科说：

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

引导网格系统

Bootstrap网格系统在整个页面上最多允许12列。您可以单独使用全部12列，也可以将这些列组合在一起以创建更宽的列。

Bootstrap Grid System响应迅速，并且根据屏幕大小自动重新排列列。

网格类别：

Bootstrap网格系统有四个类：

xs(用于手机)
sm(用于平板电脑)
md(适用于台式机)
lg(适用于大型台式机)

您可以组合以上类来创建更多动态和灵活的布局。

引导网格的基本结构：

...

创建Bootstrap网格时，请遵循以下说明：

创建一行(
)。
在网格中添加所需的列数(带有适当的.col-*-*类的标签)。
请注意，.col-*-*中的数字应始终为每行总计12。

引导网格示例

对于相等的列：

 

  
     Job
     
  
  


  Grid Example


  Rahul
  Vijay
  Kartik
  Ajeet

对于不相等的列：

 

  
     Job
     
  
  


  Grid Example


  Rahul
  Vijay
  Kartik
  Ajeet

Bootstrap 4网格类

Bootstrap 4网格系统中有5个类。

.col- (超小型设备-屏幕宽度小于576px)
.col-sm- (小型设备-屏幕宽度等于或大于576px)
.col-md- (中等设备-屏幕宽度等于或大于768px)
.col-lg- (大型设备-屏幕宽度等于或大于992px)
.col-xl- (xlarge设备-屏幕宽度等于或大于1200px)

您还可以结合上述类来创建更多动态和灵活的布局。

Bootstrap 4网格的结构

请参阅Bootstrap 4网格的基本结构：

首先创建一行(

)，然后添加所需的列数(带有相应的.col-*-*类的标签)。

此处：.col-*-*中，第一个星号(*)表示响应度：sm，md，lg或xl，而第二个星号表示一个数字，每行应加起来为12。

相等列示例

让我们以示例为例，看看如何在所有设备和屏幕宽度上创建等宽的列：

例




  Bootstrap Example
  
  
  
  
  
  




  Three equal-width columns
  
    .col
    .col
    .col

不等列示例

让我们以一个示例为例，看看如何创建一个不等宽的列，该列支持平板电脑并扩展到额外的大型桌面：

例：




  Bootstrap Example
  
  
  
  
  
  




  Unequal Columns
  Resize the browser window to see the effect.
  The columns will automatically stack on top of each other when the screen is less than 576px wide.
  
    .col-sm-4
    .col-sm-8