Bootstrap中xs网格类的函数是什么？

Bootstrap是用于开发移动优先网站的流行框架。该框架具有多种类，可用于使用移动优先方法构建响应式网站。这个框架有一个网格系统，可以让我们在建网站的同时连续生成网格。我们可以连续创建 12 列并将它们组合起来以生成更宽的列。

要了解 Bootstrap 的网格系统，可以点击这里。本文重点介绍 Bootstrap-3 col-xs 网格类。

网格类： bootstrap-3 网格系统有四个类，如下所述：

1. col-xs该类用于超小屏幕尺寸的设备，例如手机，其宽度小于 768px（<768px）。
2. col-sm此类用于屏幕尺寸较小的设备，例如表格，宽度大于 768px 小于 992px（≥768px 和 <992px）。
3. col-md ：该类用于中等屏幕尺寸屏幕的设备，例如桌面，其宽度大于 992px 且小于 1200px（≥992px 和 <1200px）。
4. col-lg ：该类用于大屏幕尺寸屏幕的设备，例如大屏桌面，宽度大于 1200px（≥1200px）。

网格系统的组件：网格系统的一些组件是：

1. 容器：这是一个 Bootstrap 类，用于构造一个容器，以网格格式包含网站的内容。
2. row：这是一个 Bootstrap 类，它允许我们在容器中构建一行以将列包装成一行。
3. column：这个 Bootstrap 类允许我们在一行中构造一个列，我们可以使用它来创建最多 12 个列，或者将它们组合成更宽的列。

.xs-grid 类： bootstrap-3 网格系统提供了这个类，它允许我们为屏幕尺寸小于 768px 的设备设计用户界面。

句法：

Example for xs-grid class. 

• col用于在行中创建列
• xs指定该类仅适用于超小屏幕
• k表示从该行的 12 列中使用的列。

特性：

• 该类适用于宽度小于 768px ( <768px ) 的屏幕。
• 要使用这个类，我们必须在类中包含前缀“col-xs-”。
• 容器的宽度可以是无（自动）。
• 此类的网格行为始终是水平的。

示例 1：使用 col-xs-4

下面的代码演示了col-xs-4的使用，当屏幕宽度小于768px时，占屏幕的1/3。

HTML

  

    

  

    

        

            

                
                Geek
            
            

                for
            
            

                Geeks
            
        
    

  

输出：

输出表示使用 col-xs-4 将行分为 3 部分，屏幕宽度为 702px < 768px

示例 2：使用 col-xs-6

下面的代码演示了col-xs-6的使用，当屏幕宽度小于768px时，占屏幕的50%。

HTML

  

    

  

    

        

            

                
                Geek
            
            

                forGeeks
            
        
    

  

输出：

输出表示使用 col-xs-6 将行分为 2 部分，屏幕宽度为 702px < 768px

在 bootstrap-4 和 bootstrap-5 中，col-xs 类已被移除并替换为 col。例如：

• Bootstrap-3 中的 col-xs-5。
• Bootstrap-4 中的 col-5 或 -5。

使用的网络浏览器：

• 铬合金

参考：单击此处了解有关 Bootstrap 的更多信息。