当前位置:我爱自学网 > HTML/CSS > Foundation5 教程 > 访问量:

Foundation5 教程

 Foundation是什么?

Foundation类层次的根是NSObject类,它(和NSObject及NSCopying协议一起)定义了基本的对象属性和行为。Foundation框架的剩余部分由几组相互关联的类和一些独立的类组成。有一些代表基本数据类型的类,如字符串、字节数组、用于存储其它对象的集合类;一些代表系统信息的类,如日期类;还有一些代表系统实体的类,比如端口、线程、和进程。图1、图2、和图3所示的类层次描述了这些类的逻辑分组及其继承关系。

 Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。

Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。

Foundation 是一个以移动优先的流行框架。

Foundation实例

我爱自学网Foundation教程中包含了上百个 Foundation 实例。

你可以直接使用我们的在线编辑器,并点击"提交运行"按钮查看结果:

实例代码如下:
<!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="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/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">我是按钮!</button>
    </div>
  </div>
</div>
 
<div class="row">
  <div class="medium-4 columns">
    <h3>我爱自学网</h3>
    <p>计算机编程入门教程!自学编程网站!</p>
  </div>
  <div class="medium-4 columns">
    <h3>我爱自学网</h3>
    <p>计算机编程入门教程!自学编程网站!!</p>
  </div>
  <div class="medium-4 columns">
    <h3>我爱自学网</h3>
    <p>计算机编程入门教程!自学编程网站!!</p>
  </div>
</div>
</body>
</html>

Foundation 特性

以下效果为在 iframe 标签中的演示,可以把代码复制到本地测试:

按钮:

按钮
<!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="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/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 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/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="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding-top:10px;">
 
<ul class="clearing-thumbs" data-clearing>
  <li><a href="/uploads/2015/11/rock600x400.jpg" class="th"><img src="/uploads/2015/11/rock200x100.jpg"></a></li>
  <li><a href="/uploads/2015/11/skies600x400.jpg" class="th"><img src="/uploads/2015/11/skies200x100.jpg"></a></li>
  <li><a href="/uploads/2015/11/lights600x400.jpg" class="th"><img src="/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="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/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;">&times;</a>
</div>
<div data-alert class="alert-box alert">
  红色警告框
  <a href="#" class="close" style="text-decoration:none;">&times;</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="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/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">&nbsp;span 4</td>
  <td colspan="4">&nbsp;span 4</td>   
  <td colspan="4">&nbsp;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="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/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="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/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="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/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="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/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="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/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="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/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">&times;</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="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/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="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/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>
本章内容:
1.Foundation 起步
2.Foundation 文本
3.Foundation 表格
4.Foundation 按钮
5.Foundation 按钮组
6.Foundation 图标
7.Foundation 标签
8.Foundation 提醒框
9.Foundation 进度条
10.Foundation 面板
11.Foundation 图片
12.Foundation 下拉菜单
13.Foundation 折叠列表
14.Foundation 列表
15.Foundation 选项卡
16.Foundation 分页
17.Foundation 价格表
18.Foundation 顶部导航栏
19.Foundation 侧边栏
20.Foundation 滑动导航(Off-Canvas)
21.Foundation 麦哲伦(Magellan)导航
22.Foundation 表单
23.Foundation 输入框尺寸
24.Foundation 开关
25.Foundation 滑块
26.Foundation 提示框
27.Foundation 模态框
28.Foundation Joyride
29.Foundation 均衡器(Equalizer)
30.Foundation 网格系统
31.Foundation 网格 - 水平堆叠
32.Foundation 网格 - 小型设备
33.Foundation 网格 - 中型设备
34.Foundation 网格 - 大型设备
35.Foundation 块状网格
36.Foundation 网格实例
37.Foundation CSS 参考手册
38.Foundation CSS 可见性