Tutorial Asas 5


Yayasan digunakan untuk membangunkan rangka kerja HTML, CSS dan JavaScript yang responsif.

Yayasan ialah rangka kerja yang mudah digunakan, berkuasa dan fleksibel untuk membina aplikasi web pada mana-mana peranti.

Yayasan ialah rangka kerja mudah alih yang popular.

Contoh dalam talian

tapak web Cina php mengandungi ratusan contoh Foundation.

Anda boleh menggunakan editor dalam talian kami secara terus dan klik butang "Serah untuk menjalankan" untuk melihat keputusan:

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://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>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Klik butang "Cuba Ia" untuk melihat contoh dalam talian.

Ciri Yayasan

Kesan berikut ditunjukkan dalam teg iframe Anda boleh mengklik "Cuba" untuk melihat contoh dalam talian:

Butang

.

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;">

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

Klik butang "Run Instance" untuk melihat contoh dalam talian

Jadual:

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»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Tetingkap timbul gambar:

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>

Jalankan Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Amaran:

Instance

rreee

Instance berjalan»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Grid:

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>

Jalankan Instance »

Klik butang "Run Instance" untuk melihat contoh dalam talian

Bar kemajuan:

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»

Klik butang "Run Instance" untuk melihat contoh dalam talian

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="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»

Klik butang "Run instance" untuk melihat contoh dalam talian

menu lungsur turun:

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>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Kesan Akordion:

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>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Navigasi teratas:

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="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»

Klik butang "Run instance" untuk melihat instance dalam talian

Kotak modal:

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»

Klik butang "Run Instance" untuk lihat contoh dalam talian

Tukar:

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>

Jalankan Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

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="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 Contoh »

Klik Butang "Jalankan Contoh" untuk melihat contoh dalam talian


<🎜>