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.
Foundation CSS Kitchen Sink Una cuadrícula Flex es un sistema de cuadrícula que se basa en la propiedad flexible que ayuda a agregar la estructura receptiva mediante la creación de filas y columnas. La clase .row se usa para la fila y .column se usa para la columna.
Foundation CSS Fregadero de cocina Flex Grid Clase :
- fila : la clase de fila se utiliza para crear la fila.
- small-* large-expand-columns : Se utiliza para crear una columna de conteo específico con grillas expandidas de gran tamaño. La estrella (*) representa el número específico.
- columnas pequeñas * : esta clase se utiliza para crear la columna del número especificado de cuadrículas de tamaño pequeño. La estrella (*) representa el número específico.
Sintaxis:
<div class="row">
<div class="small-4 columns"
style="background-color:#8BD6EE;">Small 4</div>
</div>
Ejemplo : este ejemplo describe la rejilla flexible para fregadero de cocina Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Foundation CSS Kitchen Sink Flex Grid </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"> </script> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <h3>Kitchen Sink 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:
Ejemplo : este ejemplo ilustra la rejilla flexible para fregadero de cocina Foundation CSS especificando 6 pequeños con rejillas de expansión grande.
HTML
<!DOCTYPE html> <html> <head> <title> Foundation CSS Kitchen Sink Flex Grid </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"> </script> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Kitchen Sink Flex Grid Example</h3> <div class="row"> <div class="small-6 large-expand columns" style="background-color:#8BD6EE;"> First column </div> <br> <div class="small-6 large-expand columns" style="background-color:#C0B0F0;"> Second column </div> <br> <div class="small-6 large-expand columns" style="background-color:#8BD6EE;"> Third column </div> <br> <div class="small-6 large-expand columns" style="background-color:#C0B0F0;"> Forth column </div> <br> <div class="small-6 large-expand columns" style="background-color:#8BD6EE;"> Fifth column </div> <br> <div class="small-6 large-expand columns" style="background-color:#C0B0F0;"> Sixth column </div> <br> </div> </body> </html>
Producción:
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