解释 Bootstrap 中 md-grid 类的函数

Bootstrap 的网格系统： Bootstrap 网格系统在设计响应式应用程序或网站时很有用，其中列将根据屏幕大小重新排列。它允许整个页面最多 12 列。您可以单独使用它们中的每一个，也可以将它们合并在一起以获得更宽的列。可以使用总和为 12 的所有值组合。它为所有设备提供最佳体验。借助bootstrap网格系统，我们可以设计和定制小尺寸屏宽、中屏宽、大屏宽的屏宽。 Bootstrap 网格系统提供的一些类是用于超小型的 xs 网格类、用于小型的 sm 网格类、用于中型的 md 网格类和用于大型的 lg 网格类。

网格类： Bootstrap 网格系统包含 5 个类，如下所示：

• .col：用于超小屏幕设备（屏幕宽度小于576px）。
• .col-sm：用于小屏幕设备（屏幕宽度大于等于576px）。
• .col-md：用于中等屏幕尺寸的设备（屏幕宽度大于等于768px）。
• .col-lg：用于大屏幕尺寸设备（屏幕宽度大于等于992px）。
• .col-xl：用于xlarge屏幕尺寸设备（屏幕宽度等于或大于1200px）。

网格系统的组成部分：

• 容器： Bootstrap 需要一个包含元素来将站点内容包装在网格系统中。单词容器用于包含行元素和包含列元素的行元素。
• 行：行必须放置在容器或容器流体中，以便正确对齐和填充。行用于创建水平的列组。
• 列：通过指定您希望跨越的十二个可用列的数量来创建网格列。例如，三个相等的列将使用三个 col-lg-4。

.md-grid类：它是Bootstrap的网格系统提供的一个类，用于帮助为屏幕宽度等于992px或接近992px的小尺寸设备屏幕设计网站或应用程序的界面。

句法：

Content

• col ：用于将行划分为列。
• md ：此类仅适用于中等屏幕宽度的设备。
• x ：总共有 12 个网格列，类 'col-md-x' 的容器将有 x 个网格列。

特性：

• 为了使用这个类，我们需要在类中添加“ .col-md- ”作为前缀。
• 此类用于为宽度等于 992px 或大于 992px 的小型设备屏幕开发响应式前端。
• 页面上最多有 12 个网格列，但我们可以通过合并这些列来自定义屏幕。
• 此类容器的宽度约为 970 像素。

示例 1：在此示例中，“col-mid-6”表示中型屏幕设备的整个页面宽度的 50%，因为它将获取 12 个网格列中的 6 个网格列。

HTML

 

 
    
    
 
    
    

 

    
    

 
        
        

            
Welcome To ,
        
 
        
        

            
GeeksforGeeks
        
    

 

输出：

输出页面显示在“col-md-6”的帮助下获得的 50% 宽度。

示例 2：在此示例中，“col-mid-3”表示整个页面宽度的 25%，因为它将获取 12 个网格列中的 3 个网格列。而“col-mid-9”表示整个页面宽度的 75%，因为对于中型屏幕设备，它将获取 12 个网格列中的 9 个网格列。

HTML

 

 
    
    
 
    
    

 

 
    
    

 
        
        

            
Welcome To,
        
 
        
        

            
GeeksforGeeks
        
    

 

输出：

输出页面显示 25% 、 75% 宽度分别在 'col-md-3" 、 col-md-6 的帮助下获得。