Foundation - Uso de intercambio con HTML

Descripción

El intercambio también se puede utilizar para archivos html. Puede intercambiar todo el bloque de HTML, se carga en todo tipo de tamaño de pantalla.

Ejemplo

El siguiente ejemplo demuestra el uso del intercambio con HTML en 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente use_html.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page