top
Loading...
Foundation 網格實例

Foundation 網格實例

以下我們收集了一些網格常用的實例。


三個均等列

該實例演示了如何創建三個均等列 (33.3%/33.3%/33.3%) ,在中型和大型設備上顯示三個列,在小型設備上自動堆叠:

實例

<div class="row">
  <div class="medium-4 columns" style="background-color:yellow;">
    <p>.medium-4</p>
  </div>
  <div class="medium-4 columns" style="background-color:pink;">
    <p>.medium-4</p>
  </div>
  <div class="medium-4 columns" style="background-color:yellow;">
    <p>.medium-4</p>
  </div>
</div>

嘗試一下 »

三個不均等列

該實例演示了如何創建三個不均等列 (25%/50%/25%),在中型和大型設備上顯示三個列,在小型設備上自動堆叠:

實例

<div class="row">
  <div class="medium-3 columns" style="background-color:yellow;">
    <p>.medium-3</p>
  </div>
  <div class="medium-6 columns" style="background-color:pink;">
    <p>.medium-6</p>
  </div>
  <div class="medium-3 columns" style="background-color:yellow;">
    <p>.medium-3</p>
  </div>
</div>

嘗試一下 »

兩個均等列

該實例演示了如何創建兩個均等列 (50%/50%),在小型、中型和大型設備上列的比例始終為 50%/50%:

實例

<div class="row">
  <div class="small-6 columns" style="background-color:yellow;">
    <p>.small-6</p>
  </div>
  <div class="small-6 columns" style="background-color:pink;">
    <p>.small-6</p>
  </div>
</div>

嘗試一下 »

兩個不均等列

該實例演示了如何創建兩個不均等列 (33.3%/66.6%),在小型、中型和大型設備上列的比例始終為 33.3%/66.6%:

實例

<div class="row">
  <div class="small-8 columns" style="background-color:yellow;">
    <p>.small-8</p>
  </div>
  <div class="small-4 columns" style="background-color:pink;">
    <p>.small-4</p>
  </div>
</div>

嘗試一下 »

修改列的順序

通過使用 .small|medium|large-push-*.small|medium|large-pull-* 類來修改列的順序:

實例

<div class="row">
  <div class="small-4 small-8-push columns" style="background-color:yellow;">
    <p>.small-4 .small-8-push</p>
  </div>
  <div class="small-8 small-4-pull columns" style="background-color:pink;">
    <p>.small-8 .small-4-pull</p>
  </div>
</div>

嘗試一下 »

嵌套列

你可以使用嵌套網格(列中插入列):

實例

<div class="row">
  <div class="small-8 columns">.small-8
    <div class="row">
      <div class="small-8 columns">.small-8 Nested
        <div class="row">
          <div class="small-8 columns">.small-8 Nested Again</div>
          <div class="small-4 columns">.small-4</div>
        </div>
      </div>
      <div class="small-4 columns">.small-4</div>
    </div>
  </div>
  <div class="small-4 columns">.small-4</div>
</div>

嘗試一下 »

混合:手機、桌面設備

Foundation 網格系統有三個列: .small-* (手機), .medium-* (平板), 和 .large-* (桌面設備)。這些類可以動態組合使用,讓布局更加靈活:

提示: 每個類都能放大,如果你希望小型和大型屏幕設備的寬度一樣可以設置指定 .small-*

實例

<div class="row">
  <div class="small-6 large-8 columns">.small-6 .large-8</div>
  <div class="small-6 large-4 columns">.small-6 .large-4</div>
</div>
<div class="row">
  <div class="small-2 large-4 columns">.small-2 .large-2</div>
  <div class="small-4 large-4 columns">.small-4 .large-2</div>
  <div class="small-6 large-4 columns">.small-6 .large-2</div>
</div>
<div class="row">
  <div class="small-3 large-5 columns">.small-3 .large-5</div>
  <div class="small-9 large-7 columns">.small-9 .large-7</div>
</div>

嘗試一下 »

混合:手機、平板和桌面設備

實例

<div class="row">
  <div class="medium-6 large-8 columns">.medium-6 .large-8</div>
  <div class="medium-6 large-4 columns">.medium-6 .large-4</div>
</div>
<div class="row">
  <div class="small-4 medium-3 large-7 columns">.small-4 .medium-3 .large-7</div>
  <div class="small-4 medium-6 large-3 columns">.small-4 .medium-6 .large-3</div>
  <div class="small-4 medium-3 large-2 columns">.small-4 .medium-3 .large-2</div>
</div>

嘗試一下 »

居中列

列居中可以使用 .small-centered 類。中型和大型設備可以繼承小型設備的居中,但你需要在大型設備上設置居中類.large-centered

實例

<div class="row">
  <div class="small-4 small-centered columns">small-4 small-centered</div>
</div>
<div class="row">
  <div class="small-6 small-centered columns">small-6 small-centered</div>
</div>
<div class="row">
  <div class="small-6 large-centered columns">small-6 large-centered</div>
</div>
<div class="row">
  <div class="small-8 small-centered large-uncentered columns">small-8 small-centered large-uncentered</div>
</div>
<div class="row">
  <div class="small-10 small-centered columns">small-10 small-centered</div>
</div>

嘗試一下 »

列偏移量

可以使用 .large-offset-* (或 .small-offset-*) 類設置列向右移。 左側外邊距的列數量使用 * 號控製:

實例

<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-11 columns">11</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-9 large-offset-2 columns">9, offset 2</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>

嘗試一下 »

不完整列

如果一行中的列數量之和不是 12 , Foundation 將自動將最後一列向右浮動,併使用空白來填充剩下的列。

可選項 .end 類用於設置最後一列的元素向左邊浮動:

實例

<div class="row">
  <div class="medium-3 columns">.medium-3</div>
  <div class="medium-3 columns">.medium-3</div>
  <div class="medium-3 columns">.medium-3</div>
</div>
<div class="row">
  <div class="medium-3 columns">.medium-3</div>
  <div class="medium-3 columns">.medium-3</div>
  <div class="medium-3 columns end">.medium-3 .end</div>
</div>
嘗試一下 »

寬屏

網格 (.row) 最大尺寸( max-width)為 62.5rem。在寬屏設備上尺寸可能大於 62.5rem, 這樣列就無法完整填充頁面,即便寬度設置為 100%。但是我們可以通過 CSS 來設置新的 max-width:

實例

<style>
.row {
    max-width: 100%;
}
</style>

嘗試一下 »

如果你想使用默認的 max-width, 但是背景顏色需要跨域整個頁面,這時你在容器元素上使用 .row 類,併指定你需要的背景顏色:

實例

<div style="background-color:coral;padding:25px;">
  <div class="row">
    <div class="small-6 columns" style="background-color:yellow;">.small-6</div>
    <div class="small-6 columns" style="background-color:pink;">.small-6</div>
  </div>
</div>

嘗試一下 »
北斗有巢氏 有巢氏北斗