要查看這種行動差異，您可以查看一個引導(dǎo)程序示例和一個基礎(chǔ)示例。

實用程序類

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

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

> 在這一點(diǎn)上，您可能會想，常規(guī)網(wǎng)格和塊網(wǎng)格之間有什麼區(qū)別？讓我們簡要看一下其中的兩個：

1. >與默認(rèn)網(wǎng)格（將最大寬度應(yīng)用於每一行）不同，塊網(wǎng)格總是填充完整的窗口寬度。
2. 塊網(wǎng)格只能用於等尺寸的項目。
>

更好地演示網(wǎng)格如何區(qū)分，這是一個演示。

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

>從Bootstrap開始，我們用一類容器定義了一個元素。如前所述，此類將固定的寬度設(shè)置為元素，取決於屏幕大?。ㄕ垍㈤咮ootstrap表）。然後，我們在其中添加了一個帶有一類行的元素。

現(xiàn)在，我們準(zhǔn)備好設(shè)置我們的列。對於大屏幕，我們需要四個等尺寸的列。因此，我們定義了四個div元素，每個元素都用一類Col-LG-3定義。但是，對於中小型設(shè)備，我們希望每行有兩個列。因此，我們使用Col-SM-6類。最後，對於超小型設(shè)備，我們希望將列堆疊。這是移動優(yōu)先框架的默認(rèn)行為，因此，無需定義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>

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

這是基於基礎(chǔ)網(wǎng)格的html：

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

<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的網(wǎng)格），我們要顯示三列。但是，請注意，最後一列中有一個嵌套行。這由兩列組成。我們將其寬度設(shè)置為所有設(shè)備的連續(xù)寬度的50％。最後，我們將調(diào)整嵌套列中出現(xiàn)的圖標(biāo)的可見性。

這是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的默認(rèn)網(wǎng)格來創(chuàng)建嵌套行。 結(jié)論

如果您想要有關(guān)Bootstrap的網(wǎng)格系統(tǒng)的更多信息，您可能還需要閱讀Syed Fazle Rahman的文章，了解Bootstrap的網(wǎng)格系統(tǒng)。

得出結(jié)論，在本文中，我介紹了引導(dǎo)和基礎(chǔ)的網(wǎng)格結(jié)構(gòu)。然後，我們研究瞭如何在一個真正的項目中利用他們的網(wǎng)格。如您所見，兩個網(wǎng)格看起來都相似，並且可以進(jìn)一步定制。

>希望您喜歡閱讀本文，也許您可??以將您在這裡學(xué)到的知識應(yīng)用於自己的項目。與往常一樣，請隨時在下面的評論中分享您對這些框架的想法。