網格系統比較：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中文網其他相關文章！