Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Flex Grid Responsive Adjustments usa use .small-* class. La clase de expansión mediana o grande se usa para volver al comportamiento de expansión desde un porcentaje o un comportamiento de reducción.
Clases de ajustes receptivos de Foundation CSS Flex Grid:
- fila: la clase de fila se utiliza para crear la fila.
- small-*: Se utiliza para crear una columna que se divide en cuadrículas de tamaño pequeño por el número utilizado en la clase. La clase small-12 se puede utilizar para permitir el apilamiento incluso en pantallas más grandes.
Sintaxis:
<div class="row">
<div class="small-* columns">
First column
</div>
....
// Other columns
</div>
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Flex Grid Responsive Adjustments</title> <link rel="stylesheet" href="foundation-flex.css" /> <script src="jquery.min.js"> </script> <script src="foundation.min.js"> </script> </head> <body> <h1 style="color:green">geeksforgeeks</h1> <h2>Example of Flex Grid</h2> <div class="row"> <div class="small-6 large-expand columns" style="background-color:#8BD6EE;"> First column </div> <div class="small-6 large-expand columns" style="background-color:#C0B0F0;"> Second column </div> <div class="small-6 large-expand columns" style="background-color:#8BD6EE;"> Third column </div> <div class="small-6 large-expand columns" style="background-color:#C0B0F0;"> Forth column </div> <div class="small-6 large-expand columns" style="background-color:#8BD6EE;"> Fifth column </div> <div class="small-6 large-expand columns" style="background-color:#C0B0F0;"> Sixth column </div> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Flex Grid Responsive Adjustments</title> <link rel="stylesheet" href="foundation-flex.css" /> <script src="jquery.min.js"> </script> <script src="foundation.min.js"> </script> </head> <body> <h1 style="color: green">geeksforGeeks</h1> <h3>Flex Grid Example</h3> <div class="row"> <div class="small-4 columns" style="background-color: #8bd6ee"> Small 4 </div> <div class="small-4 columns" style="background-color: #ff6347"> Small 4 </div> <div class="small-4 columns" style="background-color: #8bd6ee"> Small 4 </div> </div> <div class="row"> <div class="medium-6 large-9 columns" style="background-color: #c0b0f0"> Medium 6/ Large 9 </div> <div class="medium-6 large-3 columns" style="background-color: #7b68ee"> Medium 6/ Large 3 </div> </div> </body> </html>
Producción:
Ajustes receptivos de Foundation CSS Flex Grid
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#flex-grid
Publicación traducida automáticamente
Artículo escrito por attardeurjita77 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA