Chinesisches Grundlagenhandbuch
/ Foundation 5 教程
Foundation 5 教程
Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。
Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。
Foundation 是一个以移动优先的流行框架。
在线实例
php中文网包含了上百个 Foundation 实例。
你可以直接使用我们的在线编辑器，并点击"提交运行"按钮查看结果：
实例
<!DOCTYPE html> <html> <head> <title>Foundation Example</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"> <div class="medium-12 columns"> <div class="panel"> <h1>Foundation 页面</h1> <p>重置窗口大小，查看效果！</p> <button type="button" class="button small">I Like It!</button> </div> </div> </div> <div class="row"> <div class="medium-4 columns"> <h3>Column 1</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> <div class="medium-4 columns"> <h3>Column 2</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> <div class="medium-4 columns"> <h3>Column 3</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
点击"尝试一下"按钮查看在线实例。
Foundation 特性
以下效果为在 iframe 标签中的演示，可以点击"尝试一下"查看在线实例：
按钮
实例
<!DOCTYPE html> <html> <head> <title>Foundation Example</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://apps.bdimg.com/libs/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 style="padding-top:10px;"> <button type="button" class="button">Default</button> <button type="button" class="button secondary">Secondary</button> <button type="button" class="button success">Success</button> <button type="button" class="button info">Info</button> <button type="button" class="button warning">Warning</button> <button type="button" class="button alert">Alert</button> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
表格:
实例
<!DOCTYPE html> <html> <head> <title>Foundation Example</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://apps.bdimg.com/libs/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 style="padding-top:10px;"> <table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </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://apps.bdimg.com/libs/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 style="padding-top:10px;">
<ul class="clearing-thumbs" data-clearing>
<li><a href="http://www.php.cn/wp-content/uploads/2015/11/rock600x400.jpg" class="th"><img src="http://www.php.cn/wp-content/uploads/2015/11/rock200x100.jpg"></a></li>
<li><a href="http://www.php.cn/wp-content/uploads/2015/11/skies600x400.jpg" class="th"><img src="http://www.php.cn/wp-content/uploads/2015/11/skies200x100.jpg"></a></li>
<li><a href="http://www.php.cn/wp-content/uploads/2015/11/lights600x400.jpg" class="th"><img src="http://www.php.cn/wp-content/uploads/2015/11/lights200x100.jpg"></a></li>
</ul>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
警告:
实例
<!DOCTYPE html> <html> <head> <title>Foundation Example</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://apps.bdimg.com/libs/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 style="padding-top:10px;"> <div data-alert class="alert-box success"> 绿色警告框 <a href="#" class="close" style="text-decoration:none;">×</a> </div> <div data-alert class="alert-box alert"> 红色警告框 <a href="#" class="close" style="text-decoration:none;">×</a> </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://apps.bdimg.com/libs/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 style="padding-top:10px;"> <div class="table-responsive"> <table class="table grid"> <tr> <td>span 1</td> <td>span 1</td> <td>span 1</td> <td>span 1</td> <td>span 1</td> <td>span 1</td> <td>span 1</td> <td>span 1</td> <td>span 1</td> <td>span 1</td> <td>span 1</td> <td>span 1</td> </tr> <tr> <td colspan="4"> span 4</td> <td colspan="4"> span 4</td> <td colspan="4"> span 4</td> </tr> <tr> <td colspan="4">span 4</td> <td colspan="8">span 8</td> </tr> <tr> <td colspan="6">span 6</td> <td colspan="6">span 6</td> </tr> <tr> <td colspan="12">span 12</td> </tr> </table> </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://apps.bdimg.com/libs/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 style="padding-top:10px;"> <div class="progress alert"> <span class="meter" style="position:relative;width:75%"> <span class="percentage">75%</span> </span> </div> <div class="progress"> <span class="meter" style="position:relative;width:50%"> <span class="percentage">50%</span> </span> </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://apps.bdimg.com/libs/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 style="padding-top:10px;"> <div class="row"> <div class="medium-6 columns"> <div class="panel"> <h3>Gray Panel</h3> <p>Panel Text</p> </div> </div> <div class="medium-6 columns"> <div class="panel callout"> <h3>Blue Panel</h3> <p>Panel Text</p> </div> </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://apps.bdimg.com/libs/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 style="padding-top:10px;">
<a href="#" data-dropdown="id01" class="button dropdown warning" style="text-decoration:none;">Dropdown Button</a>
<ul id="id01" data-dropdown-content class="f-dropdown">
<li><a href="#" style="text-decoration:none;">Link 1</a></li>
<li><a href="#" style="text-decoration:none;">Link 2</a></li>
<li><a href="#" style="text-decoration:none;">Link 3</a></li>
</ul>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</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://apps.bdimg.com/libs/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 style="padding-top:10px;">
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a href="#demo" style="text-decoration:none;">Accordion 1</a>
<div id="demo" class="content active">
Demo 1 - Lorem ipsum dolor sit amet....
</div>
</li>
<li class="accordion-navigation">
<a href="#demo2" style="text-decoration:none;">Accordion 2</a>
<div id="demo2" class="content">
Demo 2 - Lorem ipsum dolor sit amet....
</div>
</li>
<li class="accordion-navigation">
<a href="#demo3" style="text-decoration:none;">Accordion 3</a>
<div id="demo3" class="content">
Demo 3 - Lorem ipsum dolor sit amet....
</div>
</li>
</ul>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</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://apps.bdimg.com/libs/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 style="padding-top:10px;"> <nav class="top-bar" data-topbar> <section class="top-bar-section"> <ul class="left"> <li class="active"><a href="#" style="text-decoration:none;font-size:14px;"><i class="fi-home"></i> Home</a></li> <li><a href="#" style="text-decoration:none;font-size:14px;"><i class="fi-torso"></i> Sign Up</a></li> <li><a href="#" style="text-decoration:none;font-size:14px;"><i class="fi-magnifying-glass"></i> Search</a></li> </ul> </section> </nav> </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://apps.bdimg.com/libs/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 style="padding-top:10px;">
<button type="button" class="button success" data-reveal-id="myModal">点击打开模态框</button>
<div id="myModal" class="reveal-modal" data-reveal>
<h2>模态框标题。</h2>
<p>模态框文本。</p>
<p>模态框文本。</p>
<a class="close-reveal-modal">×</a>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</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://apps.bdimg.com/libs/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 style="padding-top:10px;"> <div class="switch" style="float:left;"> <input id="mySwitch4" type="checkbox"> <label for="mySwitch4"></label> </div> <div class="switch" style="padding-left:25px;float:left;"> <input id="mySwitch5" type="checkbox" checked> <label for="mySwitch5"></label> </div> <div class="switch round" style="padding-left:25px;float:left;"> <input id="mySwitch6" type="checkbox" checked> <label for="mySwitch6"></label> </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://apps.bdimg.com/libs/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 style="padding-top:10px;">
<div class="row">
<div class="medium-12 columns">
<div class="row">
<div class="small-10 medium-11 columns">
<div class="range-slider" data-slider="50" data-options="display_selector:#slider2;">
<span class="range-slider-handle" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></span>
<span class="range-slider-active-segment" style="width: 50%;"></span>
</div>
</div>
<div class="small-2 medium-1 columns">
<span id="slider2" style="display: block;margin-top: 14px;">50</span>
</div>
</div>
</div>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例