📌  相关文章
📜  引导程序(第2部分)|网格系统

📅  最后修改于: 2021-05-25 11:19:36             🧑  作者: Mango

  1. 简介与安装
  2. 按钮，字形图标，表格
  3. 垂直形式，水平形式，内联形式
  4. 下拉菜单和响应式标签
  5. 进度栏和超大屏幕

先决条件： Web开发基础和BootStrap(第1部分)

网格系统：在上一篇文章中，我们学习了Bootstrap及其安装方法，但是从本文开始，我们将开始学习Bootstrap。我们将在本文中讨论Bootstrap网格系统。

网格系统： Bootstrap网格系统最多可在页面上显示12列。您可以单独使用它们，也可以将它们合并在一起以获得更大的列。您可以使用总计为12的值的所有组合。可以使用宽度1的每个12列，或者宽度3的每个使用4列或任何其他组合。 开机

网格类： Bootstrap网格系统有四个类，可以将它们组合在一起以形成更灵活的布局：

  • xs(<576px)：适用于人像手机。
  • sm(> = 576px)：适用于景观手机
  • md(> = 768px)：适用于平板电脑/平板电脑
  • lg(> = 992px)：适用于小型台式机/笔记本电脑
  • xl(> = 1200px)：适用于大型台式机/笔记本电脑

注意：如图所示，输出可能会有所不同，这取决于您的屏幕尺寸。

网格系统的组件：我们将逐一学习网格系统的组件：

  1. 容器：Bootstrap需要包含元素来包装站点内容并容纳我们的网格系统。单词“容器”是行元素的容器，行元素是列元素的“容器”。您将在本文的后半部分更深入地了解这一点。

    将“容器”用于响应性固定宽度的容器，将“容器流体”用于全宽度的容器，跨越视口的整个宽度。

    例子： 

    

  
    
    
    
    
    
    
  
  
  
    
    
      
    
        
    GeeksforGeeks
    
        A computer Science portal for Geeks
      
    
    
    
  
    
  

    输出：

注意：

标记定义HTML文档中的一个分区或一个部分。
标记用于对块元素进行分组，以使用CSS格式化它们。

  1. 行：必须将行放置在“容器”或“容器流体”中，以正确对齐和填充。我们使用行来创建水平的列组。
    例子： 
    

  
    Bootstrap Example
    
    
    
    
    
    
  
  
    
    
      
    
        
    GeeksforGeeks
    
        
            A computer Science portal for Geeks
        
      
    
    
    
  
    
    
      
    
        
    
            First row
        
    
      
    
      
    
        
    
            Second row
        
    
      
    
      
    
        
    
            Third row
        
    
      
    
      
    
        
    
            Fourth row
        
    
      
    
      
    
        
    
            Fifth row
        
    
      
    
    
    
  
    
  

    输出：

  1. 列：通过指定要跨越的十二个可用列的数量来创建网格列。例如，三个相等的列将使用三个“ col-sm-4”。
    例子： 
    

  
    Bootstrap Example
    
    
    
    
    
    
  
  
    
    
      
    
        
    GeeksforGeeks
    
        
            A computer Science portal for Geeks
        
      
    
    
    
    
    
      
    
        
    First row
    
      
    
      
    
        
    Second row
    
      
    
    
    
    
    
    
    
      
    
        
    
          
    
              1st Column
          
    
        
    
        
    
          
    
              2nd Column
          
    
        
    
        
    
          
    
              3rd Column
          
    
        
    
      
    
    
    
  
    
  

    请记住，我们可以将所有网格类别(xs，sm，md，lg和xl)用于不同的屏幕尺寸。

    输出：

    但是，在这种情况下，我们将面临一个重大问题。请注意，对于移动设备纵向(xs)和横向(sm)等设备，这些列会相互堆叠。如果我们希望各列保持在同一行中，那么无论设备的大小如何，都必须使用xs。但是，有时看起来很难看。

    因此，我们可以通过对列使用多个选择来构建更加动态和强大的布局。假设我们为4列定义属性，如下所示。

    这意味着：

    例子： 

    

  
    
    
    
    
    
    
  
  
    
    
      
    
        
    GeeksforGeeks
    
        
            A computer Science portal for Geeks
        
      
    
    
    
    
    
      
    
        
    
            First Row
        
    
      
    
      
    
        
    
            Second row
        
    
      
    
    
    
    
    
    
    
      
    
        
    
          
    
              First Column
          
    
        
    
        
    
          
    
              Second Column
          
    
        
    
        
    
          
    
              Third Column
          
    
        
    
        
    
          
    
              Fourth Column
          
    
        
    
      
    
    
    
    
  
      输出：在不同尺寸的屏幕上
    • 特小
    • 小的
    • 中等的
    • 大
    • 特大号

  2. 列重置：在拥有四层网格的情况下，我们势必会遇到这样的问题，即在某些断点处，由于一列比另一列高(具有更多的文本)，因此列并不太清楚。那里有一个名为clearfix的命令，该命令可以修复有关该视口的所有问题。我们只需要在该列未清除正确的块之后编写一个带有clearfix类的div命令。

    假设我们的md和sm视口有问题。但是如果我们使用

    但这会给其他视口(可能是lg和xs)造成问题。因此，我们可以做的是使clearfix仅对md和sm块可见，或隐藏所有其他块(lg和xs)。

    或者

  3. 列偏移：使用类中的col-md-offset-x，我们可以将列向右移x列。

    col-lg-1 col-lg-offset-2 “>

    此更改导致在第四列之前偏移2个网格列。

  4. 嵌套列：要在列中嵌套列，我们需要添加新行和一组列。嵌套行应包括一组总计不超过12列的列。

    例子： 

    

  
    Bootstrap Example
    
    
    
    
    
    
  
  
    
    
      
    
        
    GeeksforGeeks
    
        
            A computer Science portal for Geeks
        
      
    
    
    
    
    
      
    
        
    
            First Row
        
    
      
    
      
    
        
    
            Second Row
        
    
      
    
    
    
    
    
    
    
      
    
        
    
          
    
              First Column
             
    
        
    
        
    
          
    
            second Column
            
    
              
    
                
    
                    First Nested Column
                
    
              
    
              
    
                
    
                    Second Nested Column
                
    
              
    
            
    
          
    
        
    
      
    
    
    
    
  
 

    输出：

    Harshit Gupta的文章： 苛刻的
    总部位于加尔各答的Harshit Gupta是一位活跃的博客作者，对撰写有关时事，技术博客，故事和个人生活经历的浓厚兴趣。除了对写作充满热情，他还喜欢编码和跳舞。他目前在IIEST学习，是geeksforgeeks的活跃博客撰稿人。您可以通过https://in.linkedin.com/pub/harshit-gupta/102/b71/605与他联系

    如果您还希望在此处展示您的博客，请参阅GBlog，以在GeeksforGeeks上撰写来宾博客。