기초 그리드 인스턴스
아래에는 일반적으로 사용되는 그리드의 예가 나와 있습니다.
3개의 동일한 열
이 예에서는 3개의 동일한 열을 만드는 방법을 보여줍니다. (33.3%/33.3%/33.3%), 중형 및 대형 장치에 3개의 열 표시, 소형 장치에 자동으로 스택됨:
Instances
<!DOCTYPE html> <html> <head> <title>Foundation 实例</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>该实例演示了如何创建三个均等列 (33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠。</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>
Run Instance»
"Run Instance" 버튼 클릭 확인 온라인 예
세 개의 고르지 않은 열
이 예에서는 세 개의 서로 다른 열(25%/50%/25%)을 생성하여 중형 및 대형 장치와 소형 장치에 세 개의 열을 표시하는 방법을 보여줍니다. 자동 스태킹:
Instance
<!DOCTYPE html> <html> <head> <title>Foundation 实例</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>该实例演示了如何创建三个不均等列 (25%/50%/25%)，在中型和大型设备上显示三个列，在小型设备上自动堆叠。</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>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
두 개의 동일한 열
이 예에서는 두 개의 동일한 열(50%/50%)을 만드는 방법을 보여줍니다. ), 소형, 중형 및 대형 장치에 항상 50%/50% 표시:
Instances
<!DOCTYPE html> <html> <head> <title>Foundation 实例</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>该实例演示了如何创建两个均等列 (50%/50%)，在小型、中型和大型设备上列的比例始终为 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>
Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
두 개의 동일하지 않음 columns
이 예에서는 소형, 중형 및 대형 장치에서 열 비율이 항상 33.3%/66.6%인 두 개의 서로 다른 열(33.3%/66.6%)을 만드는 방법을 보여줍니다.
Instance
<!DOCTYPE html> <html> <head> <title>Foundation 实例</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>该实例演示了如何创建两个不均等列 (33.3%/66.6%)，在小型、中型和大型设备上列的比例始终为 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>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
.small|medium|large-push-* 및 <를 사용하여 열 순서
를 수정하세요. code>.small|medium|large-pull-* 열 순서를 수정하는 클래스: .small|medium|large-push-* 和 .small|medium|large-pull-* 类来修改列的顺序:
实例
<!DOCTYPE html> <html> <head> <title>Foundation 实例</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>网格 - 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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
嵌套列
你可以使用嵌套网格(列中插入列):
实例
<!DOCTYPE html> <html> <head> <title>Foundation 实例</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>列中插入列:</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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
混合：手机、桌面设备
Foundation 网格系统有三个列: .small-* (手机), .medium-* (平板), 和 .large-* (桌面设备)。这些类可以动态组合使用，让布局更加灵活：
提示： 每个类都能放大，如果你希望小型和大型屏幕设备的宽度一样可以设置指定 .small-*
Instance
인스턴스 실행»
<!DOCTYPE html> <html> <head> <title>Foundation 实例</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>重置浏览器窗口大小查看效果。</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>🎜Run Instance»🎜🎜온라인을 보려면 "인스턴스 실행" 버튼을 클릭하세요. 인스턴스 🎜🎜🎜🎜중첩 열🎜🎜중첩 그리드를 사용할 수 있습니다(열 내에 열 삽입).🎜🎜🎜Instances🎜🎜
<!DOCTYPE html> <html> <head> <title>Foundation 实例</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>重置浏览器窗口大小查看效果。</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>🎜🎜🎜인스턴스 실행»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜 🎜 🎜하이브리드: 모바일, 데스크톱 🎜🎜Foundation 그리드 시스템에는 세 개의 열이 있습니다:
.small-*(모바일), .medium-*(태블릿) 및 .large-* (데스크톱). 이러한 클래스를 동적으로 결합하여 레이아웃을 더욱 유연하게 만들 수 있습니다. 🎜🎜팁: 작은 화면 기기와 큰 화면 기기의 너비를 동일하게 하려면 각 클래스를 확대할 수 있습니다. .small- *를 지정했습니다. 🎜🎜🎜인스턴스🎜🎜<!DOCTYPE html> <html> <head> <title>Foundation 实例</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>列居中可以使用 <code>.small-centered</code> 类。中型和大型设备可以继承小型设备的居中，但你需要在大型设备上设置居中类<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>🎜
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
혼합: 모바일, 태블릿 및 데스크톱 장치
Instances
<!DOCTYPE html> <html> <head> <title>Foundation 实例</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>可以使用 <code>.large-offset-*</code> (或 <code>.small-offset-*</code>) 类设置列向右移。 左侧外边距的列数量使用 * 号控制:</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>
인스턴스 실행»
"실행"을 클릭하세요. 온라인 예제를 보려면 인스턴스' 버튼을 클릭하세요.
중앙 열
열 중앙 정렬은 .small-centered 클래스를 사용할 수 있습니다. 중형 및 대형 기기는 소형 기기의 센터링을 상속받을 수 있지만, 대형 기기에서는 센터링 클래스 .large-centered를 설정해야 합니다. .small-centered 类。中型和大型设备可以继承小型设备的居中，但你需要在大型设备上设置居中类.large-centered 。
实例
<!DOCTYPE html> <html> <head> <title>Foundation 实例</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>如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动，并使用空白来填充剩下的列。</p> <p>可选项 <code>.end</code> 类用于设置最后一列的元素向左边浮动:</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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
列偏移量
可以使用 .large-offset-* (或 .small-offset-*) 类设置列向右移。 左侧外边距的列数量使用 * 号控制:
实例
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</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 网格</h2>
<p>默认情况下，网格最大(<code>.row</code>) 宽度为 62.5rem。在宽屏上，当宽度大于 62.5rem, 列不会跨越页面的宽度， 即使宽度设定为 100%。但你可以通过 CSS 重新设置 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>运行实例 »
点击 "运行实例" 按钮查看在线实例
不完整列
如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动，并使用空白来填充剩下的列。
可选项 .end 类用于设置最后一列的元素向左边浮动:
实例
<!DOCTYPE html> <html> <head> <title>Foundation 实例</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 网格</h2> <p>外层容器使用类 .row，并指定背景颜色跨越整个页面：</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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
宽屏
网格 (.row) 最大尺寸（ max-width）为 62.5rem。在宽屏设备上尺寸可能大于 62.5rem, 这样列就无法完整填充页面，即便宽度设置为 100%。但是我们可以通过 CSS 来设置新的 max-width:
如果你想使用默认的 max-width, 但是背景颜色需要跨域整个页面，这时你在容器元素上使用 .row
열 오프셋
.large-offset-* (또는 .small-offset-*) 클래스 설정 열이 오른쪽으로 이동합니다. 왼쪽 여백의 열 수는 * 기호를 사용하여 제어됩니다. 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜예제 실행»🎜🎜온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜🎜🎜불완전한 열🎜🎜 행의 열이 수량의 합이 12가 아닌 경우 Foundation은 자동으로 마지막 열을 오른쪽으로 띄우고 나머지 열은 공백으로 채웁니다. 🎜🎜선택적 .end 클래스는 마지막 열의 요소가 왼쪽으로 부동하도록 설정하는 데 사용됩니다. 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜인스턴스 실행»🎜🎜"인스턴스 실행"을 클릭합니다. 온라인 인스턴스 보기 버튼🎜 🎜🎜🎜Widescreen🎜🎜Grid (.row) 최대 크기(max-width)는 62.5rem입니다. 와이드스크린 장치에서는 크기가 62.5rem보다 클 수 있으므로 너비가 100%로 설정된 경우에도 열이 페이지를 완전히 채우지 못할 수 있습니다. 하지만 CSS를 통해 새로운 최대 너비를 설정할 수 있습니다.🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜🎜기본 최대 너비를 사용하려는 경우 -width, 하지만 배경색은 전체 페이지에 걸쳐야 합니다. 이 경우 컨테이너 요소에서 .row 클래스를 사용하고 필요한 배경색을 지정합니다. 🎜🎜🎜Instance🎜🎜rrreee 🎜🎜🎜인스턴스 실행»🎜 🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜🎜🎜🎜
