網格系統比較：Bootstrap 3與基礎5-css教學-PHP中文網

首頁

web前端

css教學

網格系統比較：Bootstrap 3與基礎5

Joseph Gordon-Levitt

Feb 25, 2025 pm 02:06 PM

網格系統比較：Bootstrap 3與基礎5

Bootstrap和Foundation是我最喜歡的兩個前端框架，尤其是用於快速網站原型製作。兩者都帶有可用的組件，可以加快我的工作流程。除了小小的差異之外，他們的大多數基本特徵看起來與我相似。

> 在本文中，我將介紹他們網格的基礎知識。首先，我將向您展示它們的結構，描述其關鍵組件以及它們如何根據屏幕尺寸進行區分。然後，我將介紹一個真實的例子，可以幫助您將知識付諸實踐。

>讓我們開始！

鑰匙要點

Bootstrap和Foundation都是流行的前端框架，具有相似的基本功能，但它們的網格結構和自定義選項有所不同。 Bootstrap為響應式佈局指定了四個基於像素的媒體查詢斷點，而基礎包括五個基於EM的媒體查詢。這兩個框架都提供了由行和列組成的移動優先12列網格。 Bootstrap的網格需要行的包裝元素，該元素應具有一類容器或容器 - 流體。另一方面，Foundation的網格更簡單，不需要包裝元素。

基礎支持一個稱為Block Grid的附加網格功能，該功能允許創建具有最小標記的相等大小的列。 Bootstrap不提供類似的功能。

> 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 3與基礎5 >兩個框架都帶有許多預定義的類，可以用來設置列的大小。如上所述，Bootstrap包括四個媒體查詢斷點，而基金會有五個。對於每個網格，都有一個不同的類前綴，可用於設置列的大小（請參閱兩個表）。 Bootstrap的網格還需要行的包裝元素。這應該具有一類容器或容器 - 流體。具有容器類別的元素具有固定寬度，該元素取決於視口（請參見上面的第一個表），而具有一類容器 - 富流體的元素會展開以填充瀏覽器窗口的整個寬度。

列！ = 12？

>可能不完全12列的列數。在這種情況下，Bootstrap將浮動的最後一列向左漂浮，而Foundation則將其漂浮在右側。如果您想覆蓋基礎的默認行為，請將最終類添加到最後一列。 >

要查看這種行動差異，您可以查看一個引導程序示例和一個基礎示例。

實用程序類

>兩個框架都提供額外的課程，可為您提供極大的靈活性來自定義網格。

>可見性課程讓您根據特定的屏幕尺寸顯示或隱藏內容。偏移類使您可以將不完整的列中心或調整它們之間的間距量。也有一些類指定各個設備上的列的順序。

> 所有這些不同類別的示例可以在此Bootstrap演示和該基礎演示中顯示

塊網格

>超出默認網格，基礎支持另一個網格功能，稱為塊網格。這使您可以創建具有最小標記的等級列。為了使用它，將行定義為UL元素，將其定義為LI元素。然後通過將相關類（請參閱上面的第二個表）應用於UL元素來指定列大小。

> 在這一點上，您可能會想，常規網格和塊網格之間有什麼區別？讓我們簡要看一下其中的兩個：

>與默認網格（將最大寬度應用於每一行）不同，塊網格總是填充完整的窗口寬度。
塊網格只能用於等尺寸的項目。

更好地演示網格如何區分，這是一個演示。

使用網格

>現在我們對這兩個框架的網格有了很好的了解，讓我們看看如何使用它們來構建Bootstrap頁面和相應的基礎頁面。

下面的屏幕截圖顯示了我們將構建的第一個佈局：

網格系統比較：Bootstrap 3與基礎5 >從Bootstrap開始，我們用一類容器定義了一個元素。如前所述，此類將固定的寬度設置為元素，取決於屏幕大小（請參閱Bootstrap表）。然後，我們在其中添加了一個帶有一類行的元素。

現在，我們準備好設置我們的列。對於大屏幕，我們需要四個等尺寸的列。因此，我們定義了四個div元素，每個元素都用一類Col-LG-3定義。但是，對於中小型設備，我們希望每行有兩個列。因此，我們使用Col-SM-6類。最後，對於超小型設備，我們希望將列堆疊。這是移動優先框架的默認行為，因此，無需定義col-xs-12類。

以下是HTML的外觀：

讓我們繼續以基礎為基礎。

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

基礎的網格與Bootstrap非常相似，但要簡單一些。首先，我們必須定義一個包含我們列的行的元素。此類將元素的最大寬度設置為62.5REMS（1000px）。接下來，我們添加列。為了實現這一目標，我們指定各個列或列的div元素，並使用相應的網格類設置其寬度（請參見上面的基礎表）。同樣，對於小型設備，我們不必定義小型12級。

這是基於基礎網格的html：

在這一點上，我希望您已經開始對兩個框架的網格系統變得更加熟悉。但是也許另一個例子將有助於使它更清楚。

> 在下一個情況下，我們將構建頁腳。以下圖形表示顯示了我們要如何樣式的形式：

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

在這裡，我們將選擇與上一個示例相比的不同佈局模式。

> 網格系統比較：Bootstrap 3與基礎5 >對於中屏尺寸和向上（或小且為Bootstrap的網格），我們要顯示三列。但是，請注意，最後一列中有一個嵌套行。這由兩列組成。我們將其寬度設置為所有設備的連續寬度的50％。最後，我們將調整嵌套列中出現的圖標的可見性。

這是Bootstrap的代碼：

和基礎：

<span><span><span><div> class<span>="container"</span>>
    <span><span><span><div> class<span>="row"</span>>
        <span><span><span><div> class<span>="col-sm-6 col-lg-3"</span>>
            <span><!-- content -->
</span>        <span><span><span></span></span></span>
</div></span>></span>
</span>        <span><span><span><div> class<span>="col-sm-6 col-lg-3"</span>>
            <span><!-- content -->
</span>        <span><span><span></span></span></span>
</div></span>></span>
</span>        <span><span><span><div> class<span>="col-sm-6 col-lg-3"</span>>
            <span><!-- content -->
</span>        <span><span><span></span></span></span>
</div></span>></span>
</span>        <span><span><span><div> class<span>="col-sm-6 col-lg-3"</span>>
            <span><!-- content -->
</span>        <span><span><span></span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span><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開始採用了移動優先方法。這兩個框架都提供了響應式設計，但是兩者之間的選擇通常取決於個人的喜好和項目要求。