Foundation CSS es el marco frontend de CSS que se utiliza para crear sitios web, aplicaciones y correos electrónicos receptivos que funcionan perfectamente en cualquier dispositivo. Está escrito usando HTML , CSS y JavaScript y es utilizado por muchas compañías famosas como Amazon, Facebook, eBay, etc. Utiliza paquetes como Grunt y Libsass para una codificación y control rápidos y un compilador Saas para acelerar el desarrollo.
Kitchen Sink Reveal se usa para mostrar el contenido en una ventana emergente cuando se hace clic en el enlace. Cuando queremos ocultar el contenido y volver a mostrarlo, podemos usar esta clase de revelación en Foundation CSS.
Clase Foundation CSS Kitchen Sink Reveal:
- revelar: Se utiliza para crear la ventana emergente.
Sintaxis:
<p><a data-open="revealText">....</a></p> <div class="reveal" id="revealText" data-reveal> .... </div>
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Reveal</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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"
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Reveal</h3>
<p><a data-open="revealExample">Click Here</a></p>
<div class="reveal"
id="revealExample"
data-reveal>
<h1>GeeksforGeeks</h1>
<p class="lead">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained
computer science and programming articles</p>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles</p>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Revelado de fregadero de cocina Foundation CSS
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Reveal</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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"
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Reveal</h3>
<p><a data-open="revealExample">Click me</a></p>
<div class="reveal" id="revealExample" data-reveal>
<h1>GeeksforGeeks</h1> <br>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GFG image">
<strong>GeeksforGeeks Image</strong> <br> <br>
<input type="text" name="" id="" placeholder="Enter your name">
<button class="primary button">Submit</button>
<button class="close-button" data-close aria-label="Close reveal"
type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Revelado de fregadero de cocina Foundation CSS
Enlace de referencia: https://get.foundation/sites/docs/kitchen-sink.html#reveal
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA