bootstrap网格系统_网格系统比较：Bootstrap 3与Foundation 5

Bertha 。 2022-12-03 01:56 331阅读 0赞

bootstrap网格系统

[Bootstrap][] and [Foundation][] are two of my favorite front-end frameworks, especially for rapid website prototyping. Both come with ready-to-use components that speed up my workflow. Beyond their small differences, most of their fundamental features look similar to me.

[Bootstrap][]和[Foundation][]是我最喜欢的两个前端框架，尤其是用于快速网站原型制作的框架。 两者都带有可立即使用的组件，可加快我的工作流程。 除了它们之间的微小差异外，它们的大多数基本特征与我相似。

In this article, I’ll cover the basics of their grids. First, I’ll show you how they’re structured, describing their key components, and how they differentiate depending on the screen size. Then, I’ll go over a real example that will help you put the knowledge gained into practice.

在本文中，我将介绍其网格的基础知识。 首先，我将向您展示它们的结构，描述其关键组件以及它们如何根据屏幕尺寸进行区分。 然后，我将介绍一个真实的示例，该示例将帮助您将获得的知识付诸实践。

Let’s get started!

让我们开始吧！

## 比较媒体查询 **(**Comparing Media Queries**)** ##

Before analyzing Bootstrap’s and Foundation’s grid structure, let’s first look at the breakpoints that both offer for responsive layouts. These are used to set the number of the available grids that each framework offers.

在分析Bootstrap和Foundation的网格结构之前，我们首先来看一下两者都为响应式布局提供的断点。 这些用于设置每个框架提供的可用网格的数量。

Bootstrap specifies four pixel-based media query breakpoints. The table below shows them:

Bootstrap指定四个基于像素的媒体查询断点。 下表显示了它们：

<table> 
 <thead> 
  <tr> 
   <th>Screens</th> 
   <th>Viewport Size</th> 
   <th>Container Width</th> 
   <th>Class Prefix</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Extra small screens</td> 
   <td>&lt; 768px</td> 
   <td>auto</td> 
   <td><code>.col-xs-*</code></td> 
  </tr> 
  <tr> 
   <td>Small screens</td> 
   <td>≥ 768px</td> 
   <td>750px</td> 
   <td><code>.col-sm-*</code></td> 
  </tr> 
  <tr> 
   <td>Medium screens</td> 
   <td>≥ 992px</td> 
   <td>970px</td> 
   <td><code>.col-md-*</code></td> 
  </tr> 
  <tr> 
   <td>Large screens</td> 
   <td>≥ 1200px</td> 
   <td>1170px</td> 
   <td><code>.col-lg-*</code></td> 
  </tr> 
 </tbody> 
</table>

Foundation includes five em-based media queries. These are shown in the following table:

Foundation包含五个基于em的媒体查询。 下表中显示了这些：

<table> 
 <thead> 
  <tr> 
   <th>Screens</th> 
   <th>Viewport Size</th> 
   <th>Class Prefix (Default Grid)</th> 
   <th>Class Prefix (Block Grid)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Small screens</td> 
   <td>≤ 40em (640px)</td> 
   <td><code>.small-*</code> <code>.column(s)</code></td> 
   <td><code>.small-block-grid-*</code></td> 
  </tr> 
  <tr> 
   <td>Medium screens</td> 
   <td>≥ 40.063em (641px)</td> 
   <td><code>.medium-*</code> <code>.column(s)</code></td> 
   <td><code>.medium-block-grid-*</code></td> 
  </tr> 
  <tr> 
   <td>Large screens</td> 
   <td>≥ 64.063em (1025px)</td> 
   <td><code>.large-*</code> <code>.column(s)</code></td> 
   <td><code>.large-block-grid-*</code></td> 
  </tr> 
  <tr> 
   <td>XLarge screens</td> 
   <td>≥ 90.063em (1441px)</td> 
   <td>Not Activated</td> 
   <td>Not Activated</td> 
  </tr> 
  <tr> 
   <td>XXLarge screens</td> 
   <td>≥ 120.063em (1921px)</td> 
   <td>Not Activated</td> 
   <td>Not Activated</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th> 屏风 </th> 
   <th> 视口大小 </th> 
   <th> 类前缀(默认网格) </th> 
   <th> 类前缀(块网格) </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> 小屏幕 </td> 
   <td> ≤40em(640px) </td> 
   <td> <code>.small-*</code> <code>.column(s)</code> </td> 
   <td> <code>.small-block-grid-*</code> </td> 
  </tr> 
  <tr> 
   <td> 中型屏幕 </td> 
   <td> ≥40.063em(641px) </td> 
   <td> <code>.medium-*</code> <code>.column(s)</code> </td> 
   <td> <code>.medium-block-grid-*</code> </td> 
  </tr> 
  <tr> 
   <td> 大屏幕 </td> 
   <td> ≥64.063em(1025px) </td> 
   <td> <code>.large-*</code> <code>.column(s)</code> </td> 
   <td> <code>.large-block-grid-*</code> </td> 
  </tr> 
  <tr> 
   <td> XLarge屏幕 </td> 
   <td> ≥90.063em(1441px) </td> 
   <td> 未激活 </td> 
   <td> 未激活 </td> 
  </tr> 
  <tr> 
   <td> XXL大型屏幕 </td> 
   <td> ≥120.063em(1921px) </td> 
   <td> 未激活 </td> 
   <td> 未激活 </td> 
  </tr> 
 </tbody> 
</table>

To give you an idea of how these media queries work, I suggest you take a look at a [Bootstrap demo][] and the related [Foundation demo][]. But if you’re still a little confused, the upcoming sections will clarify things.

为了使您了解这些媒体查询的工作方式，建议您看一下[Bootstrap演示][Bootstrap demo]和相关的[Foundation演示][Foundation demo] 。 但是，如果您仍然有些困惑，那么接下来的部分将对您进行澄清。

*Note: Foundation’s grids for XLarge and XXLarge screens are by default deactivated. If you want to use them, you have to “uncomment” and set the values of the `$include-xl-html-grid-classes` and `$include-xl-html-block-grid-classes` variables to `true`. You can find those variables in the `_settings.scss` partial.*

*注意：XLarge和XXLarge屏幕的Foundation网格默认情况下处于禁用状态。* *如果要使用它们，则必须“取消注释”并将`$include-xl-html-grid-classes`和`$include-xl-html-block-grid-classes`变量的值设置为`true` 。* *您可以在`_settings.scss`部分中找到这些变量。*

## 网格结构 **(**Grid Structure**)** ##

Bootstrap and Foundation each offer a mobile-first 12-column grid consisting of rows and columns. Columns are nested inside a row. They scale up to 12 for each row. Rows can be nested within the columns as well.

Bootstrap和Foundation各自提供了一个移动优先的12列网格，该网格由行和列组成。 列嵌套在一行内。 每行最多可扩展到12个。 行也可以嵌套在列中。

![Grid System example][]

Both frameworks come with many predefined classes you can use to set the size of your columns. As mentioned above, Bootstrap includes four media query breakpoints and Foundation has five. For each grid, there’s a different class prefix that can be used to set the size of the columns (see the two tables).

这两个框架都带有许多预定义的类，您可以使用它们来设置列的大小。 如上所述，Bootstrap包含四个媒体查询断点，而Foundation有五个。 对于每个网格，都有一个不同的类前缀可用于设置列的大小(请参见两个表)。

Bootstrap’s grid also requires a wrapper element for rows. This should have a class of either `container` or `container-fluid`. An element with the `container` class has a fixed width, which varies depending on the viewport (see the first table above), while an element with a class of `container-fluid` expands to fill the entire width of the browser window.

Bootstrap的网格还需要一个包装元素用于行。 这应该具有类`container`或`container-fluid` 。 具有`container`类的元素具有固定的宽度，该宽度随视口的不同而变化(请参见上面的第一个表)，而具有`container-fluid`类的元素将扩展为填充浏览器窗口的整个宽度。

## 列！= 12？ **(**Columns != 12?**)** ##

It’s possible the number of columns in a grid is not exactly 12. In such a case, Bootstrap will float the last column to the left, while Foundation will float it to the right. If you want to override Foundation’s default behavior, add the `end` class to the last column.

网格中的列数可能不完全是12。在这种情况下，Bootstrap将最后一列浮动到左侧，而Foundation将其浮动到右侧。 如果要覆盖Foundation的默认行为，请将`end`类添加到最后一列。

To see this difference in action, you can take a look at a [Bootstrap example][] and a [Foundation example][].

要了解实际的区别，可以看一下[Bootstrap示例][Bootstrap example]和[Foundation示例][Foundation example] 。

## 实用程序类 **(**Utility Classes**)** ##

Both frameworks offer extra classes that give you great flexibility to customize their grids.

这两个框架都提供了额外的类，这些类为您自定义其网格提供了极大的灵活性。

Visibility classes let you show or hide content based on specific screen sizes. Offset classes allow you to center incomplete columns or adjust the amount of spacing between them. There are also classes that specify the order of columns across different devices.

可见性类使您可以根据特定的屏幕尺寸显示或隐藏内容。 偏移类使您可以将不完整的列居中或调整它们之间的间距。 也有一些类指定不同设备上的列顺序。

Examples of all these different classes can be shown in [this Bootstrap demo][] and [this Foundation demo][].

所有这些不同类的示例可以在[Bootstrap演示][this Bootstrap demo]和[Foundation演示中显示][this Foundation demo] 。

## 块状网格 **(**Block Grid**)** ##

Beyond the default grid, Foundation supports another grid feature, called [block grid][]. This allows you to create equal-sized columns with minimal markup. In order to use it, define the row as a `ul` element and the columns within it as `li` elements. Then specify the column sizes by applying the related classes (see the 2nd table above) to the `ul` element.

除默认网格外，Foundation支持另一种网格功能，称为[块网格][block grid] 。 这使您可以用最少的标记创建大小相等的列。 为了使用它，请将行定义为`ul`元素，并将其中的列定义为`li`元素。 然后通过将相关类(请参见上面的第二个表)应用于`ul`元素来指定列大小。

At this point you might be thinking, what are the differences between the regular grid and the block grid? Let’s briefly look at two of them:

在这一点上，您可能会想，常规网格和块网格之间有什么区别？ 让我们简要地看一下其中两个：

1.  Unlike the default grid, which applies a `max-width` to each row, the block grid always fills the full window width.
    
    与默认网格不同，默认网格将`max-width`应用于每一行，而块网格始终填充整个窗口宽度。
2.  The block grid can be used only for equal-sized items.
    
    块网格只能用于大小相等的项目。

To better demonstrate how the grids differentiate, [here’s a demo][here_s a demo].

为了更好地演示网格的区别， [这是一个演示][here_s a demo] 。

## 使用网格 **(**Using the Grids**)** ##

Now that we have a good understanding of the grids of these two frameworks, let’s see how we can use them to build a [Bootstrap page][] and the corresponding [Foundation page][].

现在，我们对这两个框架的网格有了很好的了解，让我们看看如何使用它们来构建[Bootstrap页面][Bootstrap page]和相应的[Foundation页面][Foundation page] 。

The screenshot below shows the first layout that we’ll build:

下面的屏幕快照显示了我们将要构建的第一个布局：

![Layout Example][]

Starting with Bootstrap, we define an element with a class of `container`. As discussed earlier, this class sets a fixed width to the element with the value depending on the screen size (see the Bootstrap table). Then, we add an element with a class of `row` to it.

从Bootstrap开始，我们定义一个带有`container`类的元素。 如前所述，此类根据元素的大小将固定宽度设置为元素，具体取决于屏幕大小(请参见Bootstrap表)。 然后，我们向其中添加具有一类`row`的元素。

Now, we’re ready to set up our columns. For large screens, we want four equal-sized columns. So we define four `div` elements each with a class of `col-lg-3`. However, for small and medium devices we prefer having two columns per row. For this reason, we use the `col-sm-6` class. Finally, for extra-small devices we want the columns to be stacked. This is the default behavior of mobile-first frameworks, and thus, there’s no need to define the `col-xs-12` class.

现在，我们准备设置列。 对于大屏幕，我们需要四个相等大小的列。 因此，我们定义了四个`div`元素，每个元素都带有一类`col-lg-3` 。 但是，对于中小型设备，我们更喜欢每行两列。 因此，我们使用`col-sm-6`类。 最后，对于超小型设备，我们希望将列堆叠。 这是移动优先框架的默认行为，因此，无需定义`col-xs-12`类。

Here’s how the HTML looks:

HTML的外观如下：

Let’s continue with Foundation.

让我们继续Foundation。

Foundation’s grid is very similar to Bootstrap’s, but it’s a bit simpler. First, we have to define an element with a class of `row` that will contain our columns. This class sets the element’s `max-width` to 62.5rems (1000px). Next, we add the columns. To achieve this, we specify `div` elements each with a class of `column` or `columns`, and set their width using the corresponding grid classes (see the Foundation table above). Again, for small devices we don’t have to define the `small-12` class.

Foundation的网格与Bootstrap的网格非常相似，但是更加简单。 首先，我们必须定义一个具有一类`row`的元素，其中将包含我们的列。 此类将元素的`max-width`为62.5rems(1000px)。 接下来，我们添加列。 为此，我们指定`div`元素，每个`div`元素都具有一`column`或多`columns`类，并使用相应的网格类设置其宽度(请参见上方的Foundation表)。 同样，对于小型设备，我们不必定义`small-12`类。

Here’s the HTML based on Foundation’s grid:

这是基于Foundation网格HTML：

At this point I hope you’ve started to become more familiar with the grid system of the two frameworks. But maybe another example will help make this clearer.

在这一点上，我希望您开始对这两个框架的网格系统更加熟悉。 但是也许另一个例子将有助于使这一点更加清楚。

In this next case, we’ll structure the `footer`. The following graphical representation shows how we want to style it:

在下一个案例中，我们将构建`footer` 。 以下图形表示显示了我们如何对其进行样式设置：

![Footer layout example][]

Here we’ll choose a different layout mode compared to the previous example.

在这里，我们将选择与上一个示例不同的布局模式。

For medium screen sizes and up (or small and up for Bootstrap’s grid), we want to display three columns. Notice, however, that there is a nested row in the last column. This consists of two columns. We’ll set their width to be 50% of a row’s width for all devices. Finally, we’ll adjust the visibility of the icons that are appearing in the nested columns.

对于中等大小的屏幕(或大于Bootstrap网格的屏幕)，我们要显示三列。 但是请注意，最后一列中有一个嵌套行。 这由两列组成。 对于所有设备，我们将其宽度设置为一行宽度的50％。 最后，我们将调整嵌套列中显示的图标的可见性。

Here’s the code for Bootstrap:

这是Bootstrap的代码：

<div class="container">
      <div class="row">
        <div class="col-sm-4">
          
        </div>
        <div class="col-sm-4">
          
        </div>
        <div class="col-sm-4">
          <div class="row">
            <div class="col-xs-6">
              <a href="#">
                <p>Let's meet and discuss</p>
                <i class="fa fa-map-marker fa-2x visible-lg"></i>
              </a>
            </div>
            <div class="col-xs-6">
              
            </div>
          </div>
        </div>
      </div>
    </div>

And with Foundation:

与基金会：

<div class="row">
      <div class="medium-4 columns">
        
      </div>
      <div class="medium-4 columns">
        
      </div>
      <div class="medium-4 columns">
          <ul class="small-block-grid-2">
              <li>
                <a href="#">
                  <p>Let's meet and discuss</p>
                  <i class="fa fa-map-marker fa-2x show-for-large-up"></i>
                </a>
              </li>
              <li>
                
              </li>
          </ul>
      </div>
    </div>

*Note: Instead of the block grid, we could have used Foundation’s default grid for creating the nested row.*

*注意：我们可以使用Foundation的默认网格代替块网格来创建嵌套行。*

## 结论 **(**Conclusion**)** ##

If you want more info on Bootstrap’s grid system, you might want to also read Syed Fazle Rahman’s article [Understanding Bootstrap’s Grid System][Understanding Bootstrap_s Grid System].

如果您想了解有关Bootstrap网格系统的更多信息，您可能还需要阅读Syed Fazle Rahman的文章[了解Bootstrap网格系统][Understanding Bootstrap_s Grid System] 。

To conclude, in this article, I introduced the grid structure of both Bootstrap and Foundation. Then we looked at how to take advantage of their grids in a real project. As you can see, both grids look similar and can be further customized.

最后，在本文中，我介绍了Bootstrap和Foundation的网格结构。 然后，我们研究了如何在实际项目中利用它们的网格。 如您所见，两个网格看起来都很相似，可以进一步定制。

I hope you enjoyed reading this article and maybe you can apply what you learned here to your own projects. As always, feel free to share your thoughts about these frameworks in the comments below.

我希望您喜欢阅读本文，也许您可以将在这里学到的知识应用到自己的项目中。 与往常一样，请随时在下面的评论中分享您对这些框架的想法。

> 翻译自: [https://www.sitepoint.com/grid-system-comparison-bootstrap-vs-foundation/][https_www.sitepoint.com_grid-system-comparison-bootstrap-vs-foundation]

bootstrap网格系统

[Bootstrap]: http://getbootstrap.com/
[Foundation]: http://foundation.zurb.com/
[Bootstrap demo]: http://codepen.io/SitePoint/pen/EageYR
[Foundation demo]: http://codepen.io/SitePoint/pen/ByLOaj
[Grid System example]: /images/20221123/b14327b85f1d4da1a540ea4a43987197.png
[Bootstrap example]: http://codepen.io/SitePoint/pen/raMZNJ
[Foundation example]: http://codepen.io/SitePoint/pen/ogzPNm
[this Bootstrap demo]: http://codepen.io/SitePoint/pen/RNGYwX
[this Foundation demo]: http://codepen.io/SitePoint/pen/GgjXgR
[block grid]: http://foundation.zurb.com/docs/components/block_grid.html
[here_s a demo]: http://codepen.io/SitePoint/pen/WbGgbo
[Bootstrap page]: http://codepen.io/SitePoint/pen/Kwgxwm
[Foundation page]: http://codepen.io/SitePoint/pen/MYjqYE
[Layout Example]: /images/20221123/3f44b20951bc488ca36867e1f2cec663.png
[Footer layout example]: /images/20221123/803ba54a464d40018fca7214fbf241a6.png
[Understanding Bootstrap_s Grid System]: https://www.sitepoint.com/understanding-bootstrap-grid-system/
[https_www.sitepoint.com_grid-system-comparison-bootstrap-vs-foundation]: https://www.sitepoint.com/grid-system-comparison-bootstrap-vs-foundation/