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.
Revelar es la ventana modal o emergente que se utiliza para mostrar información cuando hacemos clic en el botón. Podemos mostrar el contenido en la ventana emergente sin navegar a otra página. Foundation CSS tiene múltiples variaciones del elemento Revelar, como tamaño, anidado y pantalla completa.
En este artículo, aprenderemos sobre los distintos tamaños de Foundation CSS Reveal. Las variaciones de tamaño del elemento revelador nos ayudan a establecer el ancho del modal. Para crear una variación de tamaño de Foundation CSS Reveal, usamos las clases de tamaño junto con la clase .reveal. Las siguientes son las clases de tamaño en la revelación de Foundation CSS
Foundation CSS Reveal Sizing Classes:
- tiny: Esta clase hace que el modal tenga un 30% de ancho.
- pequeño: esta clase hace modal 50% de ancho.
- grande: Esta clase hace modal 90% de ancho.
- full: Esto hace que el modal sea de pantalla completa, es decir, para tomar el 100% del ancho y la altura disponibles.
Sintaxis:
<div class="reveal Reveal-Sizing-Classes" data-reveal> .... </div>
Ejemplo 1: este ejemplo demuestra la variación de tamaño diminuto y pequeño de la revelación en Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Reveal Basics</h3>
<div class="reveal tiny"
id="revealContent1"
data-reveal>
<strong>GeeksforGeeks</strong>
<p>A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles</p>
</div>
<div class="reveal small"
id="revealContent2"
data-reveal>
<strong>GeeksforGeeks</strong>
<p>A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles</p>
</div>
<button class="button"
data-open="revealContent1">
Reveal this in tiny
</button>
<button class="button"
data-open="revealContent2">
Reveal this in small
</button>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Tamaño de revelación de CSS básico
Ejemplo 2: Este ejemplo demuestra la variación grande y de tamaño completo de la revelación en Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Reveal </h3>
<div class="reveal large"
id="revealContent1"
data-reveal>
<strong>GeeksforGeeks</strong>
<p>A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles</p>
</div>
<div class="reveal full"
id="revealContent2"
data-reveal>
<strong>GeeksforGeeks</strong>
<p>A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles</p>
</div>
<button class="button"
data-open="revealContent1">
Reveal this in large
</button>
<button class="button"
data-open="revealContent2">
Reveal this in full
</button>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Tamaño de revelación de CSS básico
Referencia: https://get.foundation/sites/docs/reveal.html#sizing
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA