Bootstrap-网格系统 - 芒果文档

📌 相关文章

📜 Bootstrap-网格系统

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

在本章中，我们将讨论Bootstrap网格系统。

什么是网格？

正如维克佩迪亚所说-

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

简而言之，网页设计中的网格可以组织和组织内容，使网站易于扫描并减轻用户的认知负担。

什么是Bootstrap网格系统？

正如Bootstrap的官方文档所指出的那样-

Bootstrap包括一个响应式，可移动的第一流体网格系统，该系统可随着设备或视口尺寸的增加而适当扩展至12列。它包括用于轻松布局选项的预定义类，以及用于生成更多语义布局的强大混合器。

让我们理解以上陈述。 Bootstrap 3首先是移动设备，因为Bootstrap的代码现在首先针对较小的屏幕(例如移动设备，平板电脑)，然后针对大型屏幕(如笔记本电脑，台式机)“扩展”组件和网格。

行动优先策略

内容
- 确定什么是最重要的。
布局
- 首先设计较小的宽度。
- 首先基于CSS地址的移动设备；平板电脑，台式机的媒体查询地址。
渐进增强
- 随着屏幕尺寸的增加添加元素。

Bootstrap网格系统的工作

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

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

媒体查询

媒体查询是“条件CSS规则”的真正花哨的术语。它仅根据某些条件应用一些CSS。如果满足这些条件，则将应用样式。

Bootstrap中的媒体查询允许您根据视口大小移动，显示和隐藏内容。在LESS文件中使用以下媒体查询在Bootstrap网格系统中创建关键断点。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

有时这些扩展为包括最大宽度，以将CSS限制为一组较窄的设备。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

媒体查询有两个部分，一个是设备规格，另一个是大小规则。在上述情况下，设置以下规则-

让我们考虑这条线-

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

对于所有设备，无论哪种设备都具有min-width：@ screen-sm-min如果屏幕的宽度小于@ screen-sm-max ，请执行某些操作。

网格选项

下表总结了Bootstrap网格系统如何在多个设备上工作的各个方面-

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints
Max container width	None (auto)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
# of columns	12	12	12	12
Max column width	Auto	60px	78px	95px
Gutter width	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)
Nestable	Yes	Yes	Yes	Yes
Offsets	Yes	Yes	Yes	Yes
Column ordering	Yes	Yes	Yes	Yes

基本网格结构

以下是Bootstrap网格的基本结构-

响应式列重置

使用四层网格时，您必然会遇到在某些断点处无法正确清除列的问题，因为其中一列要比另一列高。要解决此问题，请结合使用.clearfix类和响应实用程序类，如以下示例所示-

现场演示


   
   
      
         
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      
      
      
         
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
         
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut.
      

      
      
      
         
         Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat.
      
      
      
         
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim

这将产生以下结果-

调整视口大小或在手机上检出视口大小，以达到本示例的预期效果。

偏移列

偏移是更专业的布局的有用功能。例如，它们可用于将列推入更大的距离。 .col-xs = *类不支持偏移量，但是可以通过使用空单元格轻松地复制它们。

要在大型显示器上使用偏移量，请使用.col-md-offset- *类。这些类通过*列(其中*范围从1到11)增加一列的左边距。

在下面的示例中，我们有

。，我们将使用class .col-md-offset-3将其居中。

现场演示



   Hello, world!

   
      
         
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.

这将产生以下结果-

嵌套列

嵌套使用默认格内容，现有的.COL-MD-*列中添加.COL-MD-*列的新.row和集。嵌套行应包括一组总计为12的列。

在以下示例中，布局有两列，第二列分为两行，分成四个框。

现场演示


   Hello, world!

   

      
         
         First Column
         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      

      
         
         Second Column- Split into 4 boxes
         
            
            
               
               Consectetur art party Tonx culpa semiotics. 
                  Pinterest assumenda minim organic quis.
            
            
            
               
               sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
            
                
         

         
            
            
               
               quis nostrud exercitation ullamco laboris nisi ut aliquip 
                  ex ea commodo consequat.
               
            
            
               
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.

这将产生以下结果-

列顺序

Bootstrap网格系统的另一个不错的功能是您可以轻松地按顺序编写各列，并在另一列中显示它们。您可以使用.col-md-push- *和.col-md-pull- *修饰符类(其中*范围从1到11)轻松更改内置网格列的顺序。

在下面的示例中，我们有两列布局，其中左列是最窄的，并用作边栏。我们将使用.col-md-push- *和.col-md-pull- *类交换这些列的顺序。

现场演示


   Hello, world!
   
   
      Before Ordering
      
      
         
         I am on left
      
      
      
         
         I am on right
      
      
   
    
   

   
   
      After Ordering
      
      
         
         I was on left
      
      
      
         
         I was on right

这将产生以下结果-