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 sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen sorprendentes 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. En este artículo, discutiremos Kitchen Sink Grid en Foundation CSS. Fregadero de cocina Foundation CSStiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. Kitchen Sink Grid se usa para hacer diseños de diseño receptivos tanto para la aplicación web como para la aplicación móvil.
Clases de cuadrícula de fregadero de cocina Foundation CSS :
- [tamaño]-n: esta clase se usa para especificar la alineación de varias columnas en una fila en diferentes tamaños de pantalla. Aquí el tamaño puede ser pequeño, mediano o grande y n puede ser 1,2,3,4,5,6,7,8.
- columna: Esta clase se utiliza para definir el elemento actual como una columna.
Sintaxis:
<div class ="row callout">
<div class="callout small-n medium-n large-n column">
...........
</div>
</div>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de Kitchen Sink Grid utilizando varias clases de tamaños de pantalla.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Grid</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css"
crossorigin="anonymous">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"
crossorigin="anonymous">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css"
crossorigin="anonymous">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script crossorigin="anonymous" src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h5>Foundation CSS Kitchen Sink Grid</h5>
<div class="row callout">
<div class="callout small-2
medium-3 large-4 columns">
small-2 medium-3 large-4 columns
</div>
<div class="callout small-4
medium-3 large-4 columns">
small-4 medium-3 large-4 columns
</div>
<div class="callout small-6
large-4 columns">
small-6 medium-3 large-4 columns
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Ejemplo 2: a continuación se muestra otro ejemplo que ilustra el uso de Kitchen Sink Grid utilizando varios tamaños de pantalla.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Grid</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css"
crossorigin="anonymous">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"
crossorigin="anonymous">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css"
crossorigin="anonymous">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script crossorigin="anonymous" src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h5>Foundation CSS Kitchen Sink Grid</h5>
<div class="row callout">
<div class="callout large-3 columns">
small-12 medium-12 large-3 columns
</div>
<div class="callout large-6 columns">
small-12 medium-12 large-6 columns
</div>
<div class="callout large-3 columns">
small-12 medium-12 large-3 columns
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#grid
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA