亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Foundation 中文手冊(cè) / Foundation 5 教程

Foundation 5 教程

Foundation 用于開發(fā)響應(yīng)式的 HTML, CSS and JavaScript 框架。

Foundation 是一個(gè)易用、強(qiáng)大而且靈活的框架,用于構(gòu)建基于任何設(shè)備上的 Web 應(yīng)用。

Foundation 是一個(gè)以移動(dòng)優(yōu)先的流行框架。

在線實(shí)例

php中文網(wǎng)包含了上百個(gè) Foundation 實(shí)例。

你可以直接使用我們的在線編輯器，并點(diǎn)擊"提交運(yùn)行"按鈕查看結(jié)果：

實(shí)例

<!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 頁(yè)面</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

點(diǎn)擊"嘗試一下"按鈕查看在線實(shí)例。

Foundation 特性

以下效果為在 iframe 標(biāo)簽中的演示，可以點(diǎn)擊"嘗試一下"查看在線實(shí)例：

按鈕

實(shí)例

<!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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

表格:

實(shí)例

<!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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

圖片彈窗:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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://ipnx.cn/wp-content/uploads/2015/11/rock600x400.jpg" class="th"><img src="http://ipnx.cn/wp-content/uploads/2015/11/rock200x100.jpg"></a></li>
  <li><a href="http://ipnx.cn/wp-content/uploads/2015/11/skies600x400.jpg" class="th"><img src="http://ipnx.cn/wp-content/uploads/2015/11/skies200x100.jpg"></a></li>
  <li><a href="http://ipnx.cn/wp-content/uploads/2015/11/lights600x400.jpg" class="th"><img src="http://ipnx.cn/wp-content/uploads/2015/11/lights200x100.jpg"></a></li>
</ul>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

警告:

實(shí)例

<!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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

網(wǎng)格:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

進(jìn)度條:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

面板:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

下拉菜單:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

手風(fēng)琴效果:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

頂部導(dǎo)航:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

模態(tài)框:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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">點(diǎn)擊打開模態(tài)框</button>

<div id="myModal" class="reveal-modal" data-reveal>
  <h2>模態(tài)框標(biāo)題。</h2>
  <p>模態(tài)框文本。</p>
  <p>模態(tài)框文本。</p>
  <a class="close-reveal-modal">×</a>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

開關(guān):

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

滑塊:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例