Foundation CSS es un marco front-end gratuito y de código abierto que nos ayuda a crear diseños web receptivos. Es uno de los marcos CSS más avanzados y funciona en todos los dispositivos, brindándonos una cuadrícula receptiva y componentes de interfaz de usuario HTML y CSS, plantillas, etc. También brinda algunas funciones opcionales proporcionadas por las extensiones de JavaScript. También proporciona renderizado rápido en dispositivos móviles debido a la presencia de la herramienta Fastclick.js.
Base CSS Flex Grid:
Flex Grid no es más que un sistema de cuadrícula que se forma en la propiedad flexible que habilita la estructura receptiva mediante la creación de filas y columnas. La clase .row se usa para hacer una fila y la clase .column se usa para hacer columnas. También viene con características que están disponibles en flexboxes como apilamiento automático, ordenación de fuentes, alineación vertical y alineación horizontal.
Foundation CSS Flex Grid Collapse/Uncollapse Rows utiliza el tamaño de consulta de medios para eliminar el relleno. Al usar esto, podemos contraer (eliminar)/descontraer (mostrar) el relleno de la columna.
Clases usadas:
- small-collapse: colapsa/elimina el relleno del elemento al que se agrega cuando el tamaño de la pantalla es pequeño (320px-480px) o en dispositivos móviles.
- small-uncollapse: descompone/muestra el relleno del elemento al que se agrega cuando el tamaño de la pantalla es pequeño (320px-480px) o en dispositivos móviles.
- medium-collapse: colapsa/elimina el relleno del elemento al que se agrega cuando el tamaño de la pantalla es mediano (769px-1024px) o en pantallas pequeñas/portátiles.
- medium-uncollapse: descompone/muestra el relleno del elemento al que se agrega cuando el tamaño de la pantalla es mediano (769px-1024px) o en pantallas pequeñas/portátiles.
- colapsar grande: colapsa/elimina el relleno del elemento al que se agrega cuando el tamaño de la pantalla es grande (1025px-1200px) o en escritorio/pantallas grandes.
- large-uncollapse: despliega/muestra el relleno del elemento al que se agrega cuando el tamaño de la pantalla es grande (1025px-1200px) o en escritorio/pantallas grandes.
Sintaxis:
<div class="row class_name">
<div class="columns">
. . . . . .
</div>
<div class="columns">
. . . . . .
</div>
</div>
Ejemplo 1: Los siguientes ejemplos de código demuestran el uso de small-collapse.
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous" /> <!-- Foundation CSS CDN Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous" /> <!--Foundation JS CDN--> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> <title>Foundation CSS Flex Grid Collapse/Uncollapse Rows</title> </head> <body> <h1 class="text-center" style="color: #009900">GeeksforGeeks</h1> <h3 class="text-center">small-collapse Class</h3> <div class="row small-collapse medium-uncollapse large-uncollapse margin-bottom-1" style="background: #ffffff"> <div class="small-4 columns" style="background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">GEEKS</span> </div> <div class="small-2 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">FOR</span> </div> <div class="small-6 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">GEEKS</span> </div> </div> <pre class="text-center"> Padding of the elements are removed when the screen size is small </pre> </body> </html>
Producción:
Ejemplo 2: Los siguientes ejemplos de código demuestran el uso de small-uncollapse.
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous" /> <!-- Foundation CSS CDN Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous" /> <!--Foundation JS CDN--> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> <title>Foundation CSS Flex Grid Collapse/Uncollapse Rows</title> </head> <body> <h1 class="text-center" style="color: #009900"> GeeksforGeeks </h1> <h3 class="text-center"> small-uncollapse Class </h3> <div class="row small-uncollapse medium-collapse large-collapse margin-bottom-1" style="background: #ffffff"> <div class="small-4 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">GEEKS</span> </div> <div class="small-2 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">FOR</span> </div> <div class="small-6 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">GEEKS</span> </div> </div> <pre class="text-center"> Padding of the elements are shown when the screen size is small </pre> </body> </html>
Producción:
Ejemplo 3: Los siguientes ejemplos de código demuestran el uso de colapsar medio.
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous" /> <!-- Foundation CSS CDN Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous" /> <!--Foundation JS CDN--> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> <title>Foundation CSS Flex Grid Collapse/Uncollapse Rows</title> </head> <body> <h1 class="text-center" style="color: #009900"> GeeksforGeeks </h1> <h3 class="text-center">medium-collapse Class</h3> <div class="row medium-collapse small-uncollapse large-uncollapse margin-bottom-1" style="background: #ffffff"> <div class="small-4 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">GEEKS</span> </div> <div class="small-2 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">FOR</span> </div> <div class="small-6 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">GEEKS</span> </div> </div> <pre class="text-center"> Padding of the elements are hidden when the screen size is medium </pre> </body> </html>
Producción:
Ejemplo 4: Los siguientes ejemplos de código demuestran el uso de medium-uncollapse.
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous" /> <!-- Foundation CSS CDN Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous" /> <!--Foundation JS CDN--> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> <title>Foundation CSS Flex Grid Collapse/Uncollapse Rows</title> </head> <body> <h1 class="text-center" style="color: #009900"> GeeksforGeeks </h1> <h3 class="text-center">medium-uncollapse Class</h3> <div class="row medium-uncollapse small-collapse large-collapse margin-bottom-1" style="background: #ffffff"> <div class="small-4 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">GEEKS</span> </div> <div class="small-2 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">FOR</span> </div> <div class="small-6 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">GEEKS</span> </div> </div> <pre class="text-center"> Padding of the elements are shown when the screen size is medium. </pre> </body> </html>
Producción:
Ejemplo 5: Los siguientes ejemplos de código demuestran el uso de colapsar grande.
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous" /> <!-- Foundation CSS CDN Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous" /> <!--Foundation JS CDN--> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> <title>Foundation CSS Flex Grid Collapse/Uncollapse Rows</title> </head> <body> <h1 class="text-center" style="color: #009900"> GeeksforGeeks </h1> <h3 class="text-center">large-collapse Class</h3> <div class="row large-collapse medium-uncollapse small-uncollapse margin-bottom-1" style="background: #ffffff"> <div class="small-4 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">GEEKS</span> </div> <div class="small-2 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">FOR</span> </div> <div class="small-6 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">GEEKS</span> </div> </div> <pre class="text-center"> Padding of the elements are hidden when the screen size is large. </pre> </body> </html>
Producción:
Ejemplo 6: Los siguientes ejemplos de código demuestran el uso de uncollapse grande.
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous" /> <!-- Foundation CSS CDN Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous" /> <!--Foundation JS CDN--> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> <title>Foundation CSS Flex Grid Collapse/Uncollapse Rows</title> </head> <body> <h1 class="text-center" style="color: #009900"> GeeksforGeeks </h1> <h3 class="text-center">large-collapse Class</h3> <div class="row large-uncollapse medium-collapse small-collapse margin-bottom-1" style="background: #ffffff"> <div class="small-4 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">GEEKS</span> </div> <div class="small-2 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">FOR</span> </div> <div class="small-6 columns" style= "background: #aae5aa; border: 5px solid black"> <span class="text-center display-block" style="background: #009933">GEEKS</span> </div> </div> <pre class="text-center"> Padding of the elements are shown when the screen size is large. </pre> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/flex-grid.html#collapse-uncollapse-rows
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA