Foundation 5 Tutorial
Foundation is used to develop responsive HTML, CSS and JavaScript frameworks.
Foundation is an easy-to-use, powerful and flexible framework for building web applications on any device.
Foundation is a popular mobile-first framework.
Online examples
php Chinese website contains hundreds of Foundation instances.
You can use our online editor directly and click the "Submit Run" button to view the results:
Example
<!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>
Run Instance»
Click the "Run Instance" button to view the online instance
Click the "Try It" button to view the online instance.
Foundation Features
The following effects are demonstrations in iframe tags. You can click "Try it" to view online examples:
Button
Example
<!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>
Run instance»
Click the "Run instance" button to view the online instance
Form:
Instance
<!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>
Run Instance»
Click the "Run Instance" button to view the online instance
Picture pop-up window:
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://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>Run instance»
Click the "Run instance" button to view the online instance
Warning:
Instance
<!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>
Running Instance»
Click the "Run Instance" button to view the online instance
Grid:
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://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>
Run Instance»
Click the "Run Instance" button to view the online instance
Progress bar:
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://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>
Run Instance»
Click the "Run Instance" button to view the online instance
Panel:
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://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>
Run Instance»
Click the "Run Instance" button to view the online instance
Drop-down menu:
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://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>Run Example»
Click the "Run Example" button to view the online example
Accordion effect:
Example
<!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>Run Instance»
Click the "Run Instance" button to view the online instance
Top navigation:
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://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>
Run instance»
Click the "Run instance" button to view the online instance
Modal box:
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://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>Run Instance»
Click the "Run Instance" button to view the online instance
Switch:
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://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>
Run instance»
Click the "Run instance" button to view the online instance
Slider:
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://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>Run Instance»
Click "Run Instance" Button to view online examples
