Foundation - Utilisation d'échange avec HTML

La description

Interchange peut également être utilisé pour les fichiers html. Il peut échanger le bloc entier de HTML, il se charge dans tous les types de taille d'écran.

Exemple

L'exemple suivant montre l'utilisation de l'échange avec HTML dans Foundation -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
   </head>

   <body>
      <h2>Example of use with HTML</h2>
      <div data-interchange = "[https://www.tutorialspoint.com, (small)], 
         [https://www.tutorialspoint.com, (medium)], 
         [https://www.tutorialspoint.com, (large)]"></div>
      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code html ci-dessus use_html.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.