Intercambio de fregadero de cocina Foundation CSS

Fundación CSS

The Kitchen Sink es una página en Foundation CSS en la que se enumeran todos los componentes principales con sus códigos. Contiene todas las plantillas básicas de cada componente con su código. El componente de intercambio en Foundation CSS es útil para crear diseños de sitios web receptivos. Ayuda a cargar diferentes diseños web o diferentes imágenes en el mismo sitio web según el tamaño de la pantalla. Con este componente, podemos cargar una imagen de tamaño grande para una pantalla grande, una imagen de tamaño mediano para una pantalla mediana y una imagen de tamaño pequeño para una pantalla pequeña.

Atributo de intercambio de fregadero de cocina Foundation CSS :

intercambio de datos: este atributo toma todas las rutas de archivo de las imágenes/páginas HTML que se necesitan para representar junto con su consulta de medios en forma de array.

Sintaxis :

<img data-interchange = “[ img_path1 , media query ] , 
                         [ img_path2 , media query ] , 
                         [ img_path3 , media query]  , …”
      src="#" 
      alt="img">

Ejemplo : el siguiente ejemplo describe el intercambio de fregadero de cocina en Foundation CSS, donde hemos agregado imágenes de diferentes tamaños para diferentes tamaños de pantalla.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Kitchen Sink Interchange</title>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link rel="stylesheet" 
          href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
          crossorigin="anonymous">
    <title>
        Foundation CSS Kitchen Sink Interchange
    </title>
</head>
  
<body> 
    <img data-interchange=
"[https://media.geeksforgeeks.org/wp-content/uploads/20220308123701/image1.jpg, default], 
 [https://media.geeksforgeeks.org/wp-content/uploads/20220308123703/image3.jpg, small size], 
 [https://media.geeksforgeeks.org/wp-content/uploads/20220308123702/image2.jpg, medium],
 [https://media.geeksforgeeks.org/wp-content/uploads/20220308123701/image1.jpg, large]" 
         alt="this is my img alt tag..." />
    <script src="js/app.js"></script>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

Foundation CSS Kitchen Sink Interchange

Referencia: https://get.foundation/sites/docs/kitchen-sink.html#interchange

Publicación traducida automáticamente

Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta