网格系统比较：Bootstrap 3与基础5

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

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

>让我们开始！

钥匙要点

Bootstrap和Foundation都是流行的前端框架，具有相似的基本功能，但它们的网格结构和自定义选项有所不同。 Bootstrap为响应式布局指定了四个基于像素的媒体查询断点，而基础包括五个基于EM的媒体查询。这两个框架都提供了由行和列组成的移动优先12列网格。 Bootstrap的网格需要行的包装元素，该元素应具有一类容器或容器 - 流体。另一方面，Foundation的网格更简单，不需要包装元素。

基础支持一个称为Block Grid的附加网格功能，该功能允许创建具有最小标记的相等大小的列。 Bootstrap不提供类似的功能。

比较媒体查询
在分析Bootstrap和Foundation的网格结构之前，让我们首先看一下两者都为响应布局提供的断点。这些用于设置每个框架提供的可用网格的数量。
• > Bootstrap指定了四个基于像素的媒体查询断点。下表显示了它们：
屏幕

视口大小

>容器宽度

>类前缀

额外的小屏幕 基础包括五个基于EM的媒体查询。这些显示在下表中： 屏幕 视口大小 类前缀（默认网格）

类前缀（块网格）

小屏幕 ≤40EM（640px） .small-* .column（s） 。 中屏 ≥40.063EM（641px） .medium-* .column（s） .Medium-block-Grid-* 大屏幕 ≥64.063EM（1025px） .large-*。 。 Xlarge屏幕 ≥90.063EM（1441px） 未激活 未激活 xxlarge屏幕 ≥120.063EM（1921px） 未激活 未激活 要让您了解这些媒体查询如何工作，建议您看看Bootstrap演示和相关的基础演示。但是，如果您仍然有些困惑，那么即将到来的部分将澄清一切。>

注意：默认情况下，Xlarge和XXLARGE屏幕的基础网格被停用。如果您想使用它们，则必须“取消点击”并将$ include-xl-xl-html-Grid-classes和$ include-xl-xl-html-block-block-glid-classes变量变量设置为true。您可以在_settings.scs部分中找到这些变量。 网格结构

引导程序和基础每个都提供由行和列组成的移动优先12列网格。列嵌套在一排。每行它们最大比例为12。行也可以嵌套在列中。

>两个框架都带有许多预定义的类，可以用来设置列的大小。如上所述，Bootstrap包括四个媒体查询断点，而基金会有五个。对于每个网格，都有一个不同的类前缀，可用于设置列的大小（请参阅两个表）。 Bootstrap的网格还需要行的包装元素。这应该具有一类容器或容器 - 流体。具有容器类别的元素具有固定宽度，该元素取决于视口（请参见上面的第一个表），而具有一类容器 - 富流体的元素会展开以填充浏览器窗口的整个宽度。

列！= 12？

>可能不完全12列的列数。在这种情况下，Bootstrap将浮动的最后一列向左漂浮，而Foundation则将其漂浮在右侧。如果您想覆盖基础的默认行为，请将最终类添加到最后一列。>

要查看这种行动差异，您可以查看一个引导程序示例和一个基础示例。

>

实用程序类

>两个框架都提供额外的课程，可为您提供极大的灵活性来自定义网格。

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

> 所有这些不同类别的示例可以在此Bootstrap演示和该基础演示中显示

块网格

>超出默认网格，基础支持另一个网格功能，称为块网格。这使您可以创建具有最小标记的等级列。为了使用它，将行定义为UL元素，将其定义为LI元素。然后通过将相关类（请参阅上面的第二个表）应用于UL元素来指定列大小。

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

1. >与默认网格（将最大宽度应用于每一行）不同，块网格总是填充完整的窗口宽度。
2. 块网格只能用于等尺寸的项目。
>

更好地演示网格如何区分，这是一个演示。

使用网格

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

下面的屏幕截图显示了我们将构建的第一个布局：

>

>从Bootstrap开始，我们用一类容器定义了一个元素。如前所述，此类将固定的宽度设置为元素，取决于屏幕大小（请参阅Bootstrap表）。然后，我们在其中添加了一个带有一类行的元素。

>

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

>

以下是HTML的外观：

让我们继续以基础为基础。

<span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><div</span> class<span>="row"</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

基础的网格与Bootstrap非常相似，但要简单一些。首先，我们必须定义一个包含我们列的行的元素。此类将元素的最大宽度设置为62.5REMS（1000px）。接下来，我们添加列。为了实现这一目标，我们指定各个列或列的div元素，并使用相应的网格类设置其宽度（请参见上面的基础表）。同样，对于小型设备，我们不必定义小型12级。

这是基于基础网格的html：

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

> 在下一个情况下，我们将构建页脚。以下图形表示显示了我们要如何样式的形式：

<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

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

> >对于中屏尺寸和向上（或小且为Bootstrap的网格），我们要显示三列。但是，请注意，最后一列中有一个嵌套行。这由两列组成。我们将其宽度设置为所有设备的连续宽度的50％。最后，我们将调整嵌套列中出现的图标的可见性。

这是Bootstrap的代码：

和基础：

<span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><div</span> class<span>="row"</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

>注意：我们可以使用Foundation的默认网格来创建嵌套行。 结论

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

>

得出结论，在本文中，我介绍了引导和基础的网格结构。然后，我们研究了如何在一个真正的项目中利用他们的网格。如您所见，两个网格看起来都相似，并且可以进一步定制。

>

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

> Bootstrap vs Foundation的常见问题（常见问题解答）

bootstrap和Foundation都是流行的前端框架用于Web开发。但是，它们有一些关键差异。 Bootstrap以其广泛的功能和预制组件而闻名，这对于想要快速原型设计的初学者或开发人员来说，这是一个不错的选择。另一方面，基础更加灵活和可定制，对于想要对其设计进行更多控制的开发人员来说，它是首选的选择。与Bootstrap相比，它还具有更复杂的网格系统。

> bootstrap或基础是响应式设计的更好的基础吗？

>

> bootstrap和Foundation均设计旨在创建适合不同屏幕尺寸的响应网站。但是，Foundation采用移动优先的方法，这意味着它是考虑到移动设备的设计，然后扩展到更大的屏幕。另一方面，Bootstrap最初是为桌面优先设计的，但此后从Bootstrap 3开始采用了移动优先方法。这两个框架都提供了响应式设计，但是两者之间的选择通常取决于个人的喜好和项目要求。

> bootstrap中的电网系统与基础相比如何？

> bootstrap和基础基础使用网格系统结构和对齐内容，但它们以略有不同的方式进行。 Bootstrap使用12列网格系统，易于理解和使用。另一方面，基金会使用一个灵活的网格系统，可以自定义以使用多达12列的列。这使Foundation的网格系统更加灵活，但也更复杂。

>

> bootstrap和Foundation如何处理JavaScript组件？ Bootstrap和Foundation都配备了一组JavaScript组件，可为您的网站添加功能。 Bootstrap的JavaScript组件基于jQuery，而Foundation提供了两个版本：一种使用jQuery的版本，一种使用Zepto.js，是JQuery的较轻替代品。这两个框架的JavaScript组件都是模块化的，这意味着您只能包括所需的javaScript组件。

> bootstrap和Foundation的性能如何比较？

>

您使用它们。可以对两个框架进行自定义，以仅包括您需要的组件，从而有助于提高性能。但是，由于基金会更加灵活和可定制，因此如果正确使用，它可能会导致更轻，更快的网站。拥有更大的社区和更多可用资源，包括广泛的主题，模板和第三方插件。基金会虽然拥有一个较小的社区，但得到了一家提供专业支持和资源的设计公司的支持。

>

>从bootstrap迁移到基础，反之亦然？从一个框架迁移到另一个框架可能是一项复杂的任务，因为它涉及重写HTML，CSS和潜在的JavaScript。但是，Bootstrap和Foundation都有类似的概念和组件，因此，如果您熟悉一个，那么学习另一个应该相对简单。

>

>如何与Bootstrap和Foundation的可访问性功能进行比较？ 🎜> Bootstrap和Foundation都努力访问，但它们以不同的方式对其进行处理。 Bootstrap在其组件中包含许多可访问性功能，并提供详细的可访问性文档。另一方面，基金会在框架中内置了一组可访问性工具，还提供了全面的可访问性文档。

我应该选择哪个框架：bootstrap或Foundation？

> bootstrap和基础之间的选择在很大程度上取决于您的需求和偏好。如果您想要一个具有广泛功能，预制组件和大型社区的框架，则引导程序可能是更好的选择。如果您更喜欢一个更灵活，可自定义且采用移动优先方法的框架，则基础可能更合适。

以上是网格系统比较：Bootstrap 3与基础5的详细内容。更多信息请关注PHP中文网其他相关文章！