亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Manuel de base en chinois / Foundation 網(wǎng)格實(shí)例

Foundation 網(wǎng)格實(shí)例

以下我們收集了一些網(wǎng)格常用的實(shí)例。

三個(gè)均等列

該實(shí)例演示了如何創(chuàng)建三個(gè)均等列 (33.3%/33.3%/33.3%) ，在中型和大型設(shè)備上顯示三個(gè)列，在小型設(shè)備上自動堆疊：

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>網(wǎng)格 - 三個(gè)均等列</h2>
  <p>該實(shí)例演示了如何創(chuàng)建三個(gè)均等列 (33.3%/33.3%/33.3%) ，在中型和大型設(shè)備上顯示三個(gè)列，在小型設(shè)備上自動堆疊。</p>
  <p>重置瀏覽器窗口大小查看效果。</p>
  <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>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

三個(gè)不均等列

該實(shí)例演示了如何創(chuàng)建三個(gè)不均等列 (25%/50%/25%)，在中型和大型設(shè)備上顯示三個(gè)列，在小型設(shè)備上自動堆疊：

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>網(wǎng)格 - 三個(gè)不均等列</h2>
  <p>該實(shí)例演示了如何創(chuàng)建三個(gè)不均等列 (25%/50%/25%)，在中型和大型設(shè)備上顯示三個(gè)列，在小型設(shè)備上自動堆疊。</p>
  <p>重置瀏覽器窗口大小查看效果。</p>
  <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>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

兩個(gè)均等列

該實(shí)例演示了如何創(chuàng)建兩個(gè)均等列 (50%/50%)，在小型、中型和大型設(shè)備上列的比例始終為 50%/50%：

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>網(wǎng)格 - 兩個(gè)均等列</h2>
  <p>該實(shí)例演示了如何創(chuàng)建兩個(gè)均等列 (50%/50%)，在小型、中型和大型設(shè)備上列的比例始終為 50%/50%。</p>
  <p>重置瀏覽器窗口大小查看效果。</p>
  <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>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

兩個(gè)不均等列

該實(shí)例演示了如何創(chuàng)建兩個(gè)不均等列 (33.3%/66.6%)，在小型、中型和大型設(shè)備上列的比例始終為 33.3%/66.6%：

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>網(wǎng)格 - 兩個(gè)不均等列</h2>
  <p>該實(shí)例演示了如何創(chuàng)建兩個(gè)不均等列 (33.3%/66.6%)，在小型、中型和大型設(shè)備上列的比例始終為 33.3%/66.6%。</p>
  <p>重置瀏覽器窗口大小查看效果。</p>
  <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>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

修改列的順序

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

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>網(wǎng)格 - Push 和 Pull</h2>
  <p>通過使用 <code>.small|medium|large-push-*</code> 和 <code>.small|medium|large-pull-*</code> 類來修改列的順序:</p>
  <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>
  
  <p>Switched:</p>
  <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>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

嵌套列

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

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>網(wǎng)格 - 嵌套列</h2>
  <p>列中插入列:</p>
  <div class="small-8 columns" style="background-color:yellow;">.small-8
    <div class="row">
      <div class="small-8 columns" style="background-color:lightcyan;">.small-8 Nested
        <div class="row">
          <div class="small-8 columns" style="background-color:lightblue;">.small-8 Nested Again</div>
          <div class="small-4 columns" style="background-color:lightgreen;">.small-4</div>
        </div>
      </div>
      <div class="small-4 columns" style="background-color:lightgray;">.small-4</div>
    </div>
  </div>
  <div class="small-4 columns" style="background-color:pink;">.small-4</div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

混合：手機(jī)、桌面設(shè)備

Foundation 網(wǎng)格系統(tǒng)有三個(gè)列: .small-* (手機(jī)), .medium-* (平板), 和 .large-* (桌面設(shè)備)。這些類可以動態(tài)組合使用，讓布局更加靈活：

提示： 每個(gè)類都能放大，如果你希望小型和大型屏幕設(shè)備的寬度一樣可以設(shè)置指定 .small-*。

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>混合：手機(jī)、桌面設(shè)備</h2>
  <p>重置瀏覽器窗口大小查看效果。</p>
  <div class="small-6 large-8 columns" style="background-color:yellow;">.small-6 .large-8</div>
  <div class="small-6 large-4 columns" style="background-color:pink;">.small-6 .large-4</div>
</div>
<div class="row">
  <div class="small-2 large-4 columns" style="background-color:lightblue;">.small-2 .large-2</div>
  <div class="small-4 large-4 columns" style="background-color:yellow;">.small-4 .large-2</div>
  <div class="small-6 large-4 columns" style="background-color:lightgreen;">.small-6 .large-2</div>
</div>
<div class="row">
  <div class="small-3 large-5 columns" style="background-color:lightcyan;">.small-3 .large-5</div>
  <div class="small-9 large-7 columns" style="background-color:lightgray;">.small-9 .large-7</div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

混合：手機(jī)、平板和桌面設(shè)備

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>混合：手機(jī)、平板和桌面設(shè)備</h2>
  <p>重置瀏覽器窗口大小查看效果。</p>
  <div class="medium-6 large-8 columns" style="background-color:red;">.medium-6 .large-8</div>
  <div class="medium-6 large-4 columns" style="background-color:yellow;">.medium-6 .large-4</div>
</div>
<div class="row">
  <div class="small-4 medium-3 large-7 columns" style="background-color:pink;">.small-4 .medium-3 .large-7</div>
  <div class="small-4 medium-6 large-3 columns" style="background-color:lightgreen;">.small-4 .medium-6 .large-3</div>
  <div class="small-4 medium-3 large-2 columns" style="background-color:orange;">.small-4 .medium-3 .large-2</div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

居中列

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

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>網(wǎng)格 - 居中列</h2>
  <p>列居中可以使用 <code>.small-centered</code> 類。中型和大型設(shè)備可以繼承小型設(shè)備的居中，但你需要在大型設(shè)備上設(shè)置居中類<code>.large-centered</code> 。</p>
  <p>重置瀏覽器窗口大小查看效果。</p>
  <div class="small-4 small-centered columns" style="background-color:yellow;">small-4 small-centered</div>
</div>
<div class="row">
  <div class="small-6 small-centered columns" style="background-color:pink;">small-6 small-centered</div>
</div>
<div class="row">
  <div class="small-6 large-centered columns" style="background-color:lightgreen;">small-6 large-centered</div>
</div>
<div class="row">
  <div class="small-8 small-centered large-uncentered columns" style="background-color:yellow;">small-8 small-centered large-uncentered</div>
</div>
<div class="row">
  <div class="small-10 small-centered columns" style="background-color:pink;">small-10 small-centered</div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

列偏移量

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

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>網(wǎng)格 - 偏移量</h2>
  <p>可以使用 <code>.large-offset-*</code> (或 <code>.small-offset-*</code>) 類設(shè)置列向右移。 左側(cè)外邊距的列數(shù)量使用 * 號控制:</p>
  <div class="large-1 columns" style="background-color:yellow;">1</div>
  <div class="large-11 columns" style="background-color:pink;">11</div>
</div>
<div class="row">
  <div class="large-1 columns" style="background-color:yellow;">1</div>
  <div class="large-10 large-offset-1 columns" style="background-color:pink;">10, offset 1</div>
</div>
<div class="row">
  <div class="large-1 columns" style="background-color:yellow;">1</div>
  <div class="large-9 large-offset-2 columns" style="background-color:pink;">9, offset 2</div>
</div>
<div class="row">
  <div class="large-1 columns" style="background-color:yellow;">1</div>
  <div class="large-8 large-offset-3 columns" style="background-color:pink;">8, offset 3</div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

不完整列

如果一行中的列數(shù)量之和不是 12 , Foundation 將自動將最后一列向右浮動，并使用空白來填充剩下的列。

可選項(xiàng)  .end 類用于設(shè)置最后一列的元素向左邊浮動:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>不完整列</h2>
  <p>如果一行中的列數(shù)量之和不是 12 , Foundation 將自動將最后一列向右浮動，并使用空白來填充剩下的列。</p>
  <p>可選項(xiàng) <code>.end</code> 類用于設(shè)置最后一列的元素向左邊浮動:</p>
  <div class="medium-3 columns" style="background-color:yellow;">.medium-3</div>
  <div class="medium-3 columns" style="background-color:yellow;">.medium-3</div>
  <div class="medium-3 columns" style="background-color:yellow;">.medium-3</div>
</div>
<div class="row">
  <div class="medium-3 columns" style="background-color:pink;">.medium-3</div>
  <div class="medium-3 columns" style="background-color:pink;">.medium-3</div>
  <div class="medium-3 columns end" style="background-color:pink;">.medium-3 .end</div>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

寬屏

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

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
<style>
  .example {
    max-width: 100%;
  }
  </style>
</head>
<body>

<h2>Foundation 網(wǎng)格</h2>
<p>默認(rèn)情況下，網(wǎng)格最大(<code>.row</code>) 寬度為 62.5rem。在寬屏上，當(dāng)寬度大于 62.5rem, 列不會跨越頁面的寬度， 即使寬度設(shè)定為 100%。但你可以通過 CSS 重新設(shè)置 max-width:</p>
<hr>

<div class="row">
  <p>基本行 (max-width:62.5rem):</p>
  <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>
<br>

<div class="row example">
  <p>行的max-width為 100% :</p>
  <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>
<br>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

如果你想使用默認(rèn)的 max-width, 但是背景顏色需要跨域整個(gè)頁面，這時(shí)你在容器元素上使用 .row 類，并指定你需要的背景顏色:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<h2>Foundation 網(wǎng)格</h2>
<p>外層容器使用類 .row，并指定背景顏色跨越整個(gè)頁面：</p>

<div class="row" style="background-color:tomato;padding:25px;">
  <p>Default Row with a tomato color and padding:</p>
  <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>
<br>

<div class="container" style="background-color:coral;padding:25px;">
  <div class="row">
    <p>Row with container:</p>
    <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>
<br>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例