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 para que se vean increíbles y puedan 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, aprenderemos Foundation CSS Javascript usando complementos. Los complementos se adjuntan a elementos HTML mediante atributos de datos. El atributo de datos coincidirá con el nombre del complemento.
Los siguientes enlaces se incluyen en la sección principal del archivo HTML para que funcionen los complementos. A continuación, solo se proporcionan algunos ejemplos de código, el desarrollador puede usar otros atributos de datos según la necesidad.
Enlace CDN:
<enlace rel=”hoja de estilo” href=”https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css”>
<!– JavaScript comprimido –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js”> </script>
<script src=”https://cdn.jsdelivr.net/npm /foundation-sites@6.7.4/dist/js/foundation.min.js”> </script>
Ejemplo 1: para crear o agregar un enlace de información sobre herramientas, tenemos que usar data-tooltip para un elemento HTML .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<style>
body {
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Foundation CSS JavaScript using Plugins</h3>
<div id="divID">
<p>
<span data-tooltip aria-haspopup="true" class="has-tip"
tabindex="1" title="foundation CSS tooltip">
This is example of data-tooltip creating a link
</span>
</p>
</div>
</body>
</html>
Producción:
Ejemplo 2: Para crear un acordeón, tenemos que usar data-accordion para un elemento HTML .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</script>
<style>
body {
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Foundation CSS JavaScript using Plugins</h3>
<div id="divID">
<ul class="accordion" data-accordion>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 1</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 2</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 3</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 3</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 4</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 4</p>
</div>
</li>
</ul>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
Producción:
Enlace de referencia: https://get.foundation/sites/docs/javascript.html
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA