Bootstrap和Foundation是我最喜歡的兩個(gè)前端框架，尤其是在快速開(kāi)發(fā)網(wǎng)站的原型上。它們都提供了隨時(shí)可用的組件，加快了我的工作流程。除了一些細(xì)小差別，在我看來(lái)它們大部分的基本特征都是類似。

在這篇文章里，我將介紹它們網(wǎng)格的基本構(gòu)造。首先，我將會(huì)向你展示它們是如何構(gòu)建的，描述它們的主要部件，以及它們對(duì)不同屏幕的大小表現(xiàn)出的差異。然后，我將通過(guò)一個(gè)真實(shí)例子的實(shí)踐來(lái)幫助你增添知識(shí)。

讓我們一起開(kāi)始吧！

比較一：媒體查詢的比較

在分析Bootstrap和Foundation的柵格結(jié)構(gòu)之前，讓我們先來(lái)看看它們?yōu)轫憫?yīng)布局所提供的斷點(diǎn)。這是每個(gè)框架所提供的可以用來(lái)設(shè)置可用柵格的數(shù)量。

Bootstrap指定了4個(gè)基于px的媒體查詢斷點(diǎn)。展示如下：

Foundation包含了5個(gè)基于em的媒體查詢。它們?nèi)缦卤盹@示：

為了讓你有辦法去理解媒體查詢是如何工作的，我建議你去看看Bootstrap的demo以及相關(guān)的Foundation的demo。但如果你還是有一些困惑的話，接下來(lái)的部分將會(huì)闡述一切。

注意：Foundation超大屏和超級(jí)大屏的網(wǎng)格在默認(rèn)情況下是禁用的。如果你想要使用它們，你必須“取消”并設(shè)置$include-xl-html-grid-classes和$include-xl-html-block-grid-classes這兩個(gè)變量的值為true。你可以在_settings.scss這部分里找到這些變量。

比較二：網(wǎng)格結(jié)構(gòu)

Bootstrap和Foundation都提供了由行和列組成的移動(dòng)第一的12列網(wǎng)格。列被嵌套在行里。每行的列數(shù)之和為12列。行同樣也可以被嵌套在列里。

這兩個(gè)框架包含了許多你可以用來(lái)設(shè)置列的大小的預(yù)定義類。如上面提到的，Bootstrap包含4個(gè)媒體查詢斷點(diǎn)而Foundation則包含了5個(gè)。對(duì)每個(gè)網(wǎng)格來(lái)說(shuō)，它們都有著不同的類前綴可以用來(lái)設(shè)置列的大?。ㄕ?qǐng)看前面的兩個(gè)表格）。

Bootstrap網(wǎng)格的行同樣也需要封裝的元素。這就應(yīng)該要有一個(gè)container或者container-fluid類。一個(gè)元素中的container類有一個(gè)固定值，它的數(shù)值取決于視窗（見(jiàn)上面第一個(gè)表），而元素中的container-fluid類則是擴(kuò)展到瀏覽器窗口的整個(gè)寬度。

比較三：列!=12?

一個(gè)網(wǎng)格系統(tǒng)中的列數(shù)不等于12是可能的。在這種情況下，Bootstrap將會(huì)把最后一列浮動(dòng)到左側(cè)，而Foundation則將會(huì)把它浮動(dòng)到右側(cè)。如果你想要重寫(xiě)Foundation的默認(rèn)行為，就在最后一列添加.end類。

比較四：功能類

這兩個(gè)框架都提供了額外的類讓你能夠非常靈活的定義它們的網(wǎng)格。

可見(jiàn)的類可以讓你在特定大小的屏幕上選擇顯示或者隱藏內(nèi)容。偏移類允許你讓不完整的列居中或者調(diào)整它們之間的間距。當(dāng)然還有其他的類可以根據(jù)不同設(shè)備來(lái)指定列的順序。

比較五：網(wǎng)格塊

除了默認(rèn)網(wǎng)格，F(xiàn)oundation還支持另一個(gè)柵格特征，即網(wǎng)格塊。它允許你使用最小的標(biāo)記來(lái)創(chuàng)建同等大小的列。為了使用它，把行定義成ul元素，行里面的列定義成li元素。然后通過(guò)對(duì)ul元素應(yīng)用相關(guān)的類（詳見(jiàn)上面的第二張表）來(lái)指定列的大小。

這個(gè)時(shí)候你可能會(huì)想，規(guī)則網(wǎng)格和網(wǎng)格塊之間的區(qū)別是什么？讓我們簡(jiǎn)要的看一看它們的兩點(diǎn)不同之處：

與默認(rèn)的網(wǎng)格不同，（網(wǎng)格塊）每行都應(yīng)用了最大寬度，所以總是鋪滿整個(gè)瀏覽器窗口。

網(wǎng)格塊只能用在大小相等的項(xiàng)目中。

使用網(wǎng)格

既然我們對(duì)這兩個(gè)框架的網(wǎng)格已經(jīng)有了很好的理解，讓我們來(lái)看看我們?cè)鯓硬拍軌蚴褂盟鼈儊?lái)建立一個(gè)Bootstrap頁(yè)面和相應(yīng)的Foundation頁(yè)面。

下面的截屏顯示了我們將要建立的第一個(gè)布局：

先從Bootstrap開(kāi)始，我們定義了一個(gè)帶有container類的元素。就像前面討論的，這個(gè)類會(huì)根據(jù)屏幕的大小給這個(gè)元素設(shè)置了一個(gè)固定的寬度（詳見(jiàn)Bootstrap的那個(gè)表）。然后，我們給它添加一個(gè)帶有row這個(gè)類的元素。

現(xiàn)在，我們已經(jīng)準(zhǔn)備好設(shè)置我們的列了。對(duì)于大屏來(lái)說(shuō)，我們想要4個(gè)大小一樣的列。所以我們定義了4個(gè)每個(gè)都帶有col-lg-3類的div元素。然而，對(duì)于中小型設(shè)備我們更傾向于每行里面有兩個(gè)列。出于這個(gè)原因，我們使用col-sm-6這個(gè)類。最后，對(duì)于超小屏來(lái)說(shuō)我們希望列可以堆疊起來(lái)。這是移動(dòng)第一框架的默認(rèn)行為，因此，這就沒(méi)必要去定義col-xs-12這個(gè)類。

它的HTML是這樣子的：

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

讓我們繼續(xù)來(lái)看看Foundation。

Foundation的網(wǎng)格和Bootstrap的網(wǎng)格很像，但是它得更簡(jiǎn)單一點(diǎn)。首先，我們得先定義一個(gè)帶有row類的元素，這個(gè)元素將包含著我們的列。這個(gè)類把元素的max-width設(shè)為62.5rem（1000px）。下一步，我們添加列。為了達(dá)到這個(gè)目的，我們指定每個(gè)div元素都帶有一個(gè)column或者columns的類，然后使用相應(yīng)的柵格類（詳見(jiàn)上面Foundation的表）來(lái)設(shè)置它們的寬度。同樣的，對(duì)于小型設(shè)備來(lái)說(shuō)我們不用定義small-12這個(gè)類。

這是基于Foundation柵格的HTML：

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

此時(shí)此刻我想你已經(jīng)開(kāi)始對(duì)這兩個(gè)框架的網(wǎng)格系統(tǒng)更熟悉了。但或許另外一個(gè)例子可以幫你了解的更清晰。

在下一個(gè)例子中，我們將構(gòu)建footer。下面這個(gè)圖示顯示了我們想要的樣式：

在這里，我們將選擇一個(gè)不一樣的布局來(lái)和之前的例子做比較。對(duì)于中屏及中屏以上的屏幕（或者在Bootstrap網(wǎng)格里小屏及小屏以上的屏幕），我們想要顯示三個(gè)列。然而我們注意到，在最后一列里有一個(gè)嵌套行。這由兩個(gè)列組成。我們將會(huì)在所有的設(shè)備中把它們的寬度設(shè)為行寬度的一半。最后，我們會(huì)調(diào)整在嵌套行里出現(xiàn)的圖片的可視度。

這是Bootstrap中的代碼：

<div class="container">
 <div class="row">
 <div class="col-sm-4">
 <!-- content -->
 </div>
 <div class="col-sm-4">
 <!-- content -->
 </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><!-- .col-xs-6 -->
 <div class="col-xs-6">
  <!-- content -->
 </div>
 </div><!-- .row -->
 </div><!-- .col-sm-4 -->
 </div><!-- .row -->
</div><!-- .container -->

這是Foundation的代碼：

<div class="row">
 <div class="medium-4 columns">
 <!-- content -->
 </div>
 <div class="medium-4 columns">
 <!-- content -->
 </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>
  <!-- content -->
  </li>
 </ul>
 </div><!-- .medium-4 .columns -->
</div><!-- .row -->

注意：如果想要代替網(wǎng)格塊，我們可以使用Foundation默認(rèn)的網(wǎng)格來(lái)創(chuàng)建嵌套行。

結(jié)論

如果你想要更多Bootstrap柵格系統(tǒng)的相關(guān)信息，你可以去看看這篇文章： 《Bootstrap每天必學(xué)之柵格系統(tǒng)（布局）》

最后，在這篇文章里，我介紹了Bootstrap和Foundation的網(wǎng)格結(jié)構(gòu)。然后我們?cè)谝粋€(gè)真實(shí)的項(xiàng)目中看到了要如何去利用它們的網(wǎng)格。正如你所看到的，所有的網(wǎng)格都是相類似的，都可以進(jìn)一步的去定義它。

我希望你能喜歡這篇文章，也許你可以把你在這所學(xué)到的應(yīng)用到你的項(xiàng)目中去，更多Bootstrap內(nèi)容關(guān)注：《Bootstrap學(xué)習(xí)教程》，謝謝大家的閱讀。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論