Foundation panel
The Foundation panel is a module with a gray border and content containing padding. You can use the .panel class to create:
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 style="padding:20px;"> <h2>面板</h2> <div class="panel"> <h3>标题</h3> <p>文本内容..</p> </div> </div> </body> </html>
Run Instance»
Click "Run instance" button to view the online instance
Panel color
Use the .callout class to change the panel color to light blue:
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 style="padding:20px;"> <h2>面板颜色修改</h2> <div class="panel callout"> <h3>标题</h3> <p>文本内容..</p> </div> </div> </body> </html>
Run Instance»
Click the "Run Instance" button to view the online instance
Rounded Corner Panel
Use the .radius class to set the panel to rounded corners:
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://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 style="padding:20px;"> <h2>圆角面板 Panel</h2> <div class="panel radius"> <h3>标题</h3> <p>文本内容..</p> </div> </div> </body> </html>
Run instance»
Click the "Run instance" button to view the online instance
Customize the panel
You can use CSS to customize the panel. In the following example we use the panel as a card:
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>
<style>
body {
padding: 20px;
}
.panel {
padding: 0;
border: none;
width: 50%;
}
div.container {
text-align: center;
padding: 15px;
margin-top: 20px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<h2>Customized Panels</h2>
<div class="panel">
<img src="http://www.php.cn/wp-content/uploads/2015/11/20121204024112919.jpg" alt="Cinque Terre" width="400" height="300">
<div class="container">
<h4>长城</h4>
<p>不到长城非好汉！！！</p>
</div>
</div>
</body>
</html>Run Instance»
Click "Run Instance" Button to view online examples
