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 increíbles y pueden ser accesibles para cualquier dispositivo. En este artículo, discutiremos las clases de dimensionamiento de utilidades de creación de prototipos en Foundation CSS.
En Foundation CSS, Prototyping Utilities Sizing se usa para dar ancho y alto a un elemento.
Clases de dimensionamiento de Foundation CSS Prototyping Utilities:
- ancho: esta clase se usa para dar ancho a un elemento en relación con su elemento principal.
- max-width: esta clase se usa para dar el ancho máximo a un elemento en relación con su elemento principal.
- altura: esta clase se utiliza para dar altura a un elemento en relación con su elemento principal.
- max-height: esta clase se utiliza para dar la altura máxima a un elemento en relación con su elemento principal.
Sintaxis:
<div class="Utilities-sizing-class">
...
</div>
Nota: Podemos usar el número después de la clase para especificar la altura y el ancho.
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de las utilidades de creación de prototipos para dimensionar utilizando clases de ancho .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Prototyping Utilities Sizing</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 crossorigin="anonymous"
src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
</head>
<body style="margin-inline: 30rem;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Prototyping Utilities Sizing</h3>
<div class="callout">
<div class="width-25 callout">GfG-W-25</div>
<div class="width-50 callout">GfG-W-50</div>
<div class="width-75 callout">GfG-W-75</div>
<div class="width-100 callout">GfG-W-100</div>
<div class="max-width-100 callout">
GeeksforGeeks-max
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de las Utilidades de creación de prototipos para el dimensionamiento mediante clases de altura .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Prototyping Utilities Sizing</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 crossorigin="anonymous"
src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
</head>
<body style="margin-inline: 30rem;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Prototyping Utilities Sizing</h3>
<div class="callout">
<div class="height-25 callout">GfG-H-25</div>
<div class="height-50 callout">GfG-H-50</div>
<div class="height-75 callout">GfG-H-75</div>
<div class="height-100 callout">GfG-H-100</div>
<div class="max-height-100 callout">
GeeksforGeeks-max
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Foundation CSS Prototyping Utilidades Dimensionamiento
Referencia: https://get.foundation/sites/docs/prototyping-utilities.html#sizing