Tutoriel Fondation 5


Foundation est utilisé pour développer des frameworks HTML, CSS et JavaScript réactifs.

Foundation est un framework facile à utiliser, puissant et flexible pour créer des applications Web sur n'importe quel appareil.

Foundation est un framework mobile first populaire.

Exemples en ligne

Le site Web chinois php contient des centaines d'instances Foundation.

Vous pouvez utiliser directement notre éditeur en ligne et cliquer sur le bouton "Soumettre pour exécuter" pour visualiser les résultats :

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Cliquez sur le bouton « Essayer » pour afficher l'instance en ligne.

Fonctionnalités de base

Les effets suivants sont démontrés dans la balise iframe. Vous pouvez cliquer sur « Essayer » pour voir l'exemple en ligne :

Bouton

.

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Table :

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher le instance en ligne

Fenêtre pop-up d'image :

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Avertissement :

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>

Instance en cours d'exécution»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Grille :

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>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Barre de progression :

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Panneau :

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>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

menu déroulant :

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Effet accordéon :

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Navigation supérieure :

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Boîte modale :

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

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>

Exécuter Instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher des exemples en ligne