Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Este marco se basa en bootstrap , que es similar a SaaS . Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.
Los acordeones son los elementos que nos ayudan a organizar y navegar a diferentes secciones en un solo contenedor. Estos se utilizan para cambiar entre las secciones del contenedor. Podemos almacenar una gran cantidad de datos de forma estructurada y pueden ser fácilmente accesibles. En este artículo, discutiremos los conceptos básicos del acordeón.
Clases básicas de acordeón Foundation CSS:
- acordeón : Se utiliza para crear el contenedor.
- accordion-item : Se utiliza para crear los elementos de acordeón.
- acordeon-titulo : Se utiliza para dar el titulo al acordeon.
- contenido de acordeón : se utiliza para poner contenido dentro del elemento de acordeón.
Sintaxis:
<ul class="accordion" data-accordion>....</ul>
Ejemplo 1: El siguiente código demuestra los conceptos básicos del acordeón con algo de contenido.
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"
crossorigin="anonymous"
/>
<!-- 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"
crossorigin="anonymous"
></script>
</head>
<body>
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Foundation CSS Accordion Basics</h3>
</center>
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">GeeksforGeeks 1</a>
<div class="accordion-content" data-tab-content>
<p>A Computer Science portal for geeks.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">GeeksforGeeks 2</a>
<div class="accordion-content" data-tab-content>
<p>
It contains well written, well thought and
well explained computer science and
programming articles,
</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">GeeksforGeeks 3</a>
<div class="accordion-content" data-tab-content>
<p>
Gfg is the only reason to fall in love
with data structure and programming
</p>
</div>
</li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra los conceptos básicos del acordeón con enlaces e imágenes .
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"
crossorigin="anonymous"
/>
<!-- 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"
crossorigin="anonymous"
></script>
</head>
<body>
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Foundation CSS Accordion Basics</h3>
</center>
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">GeeksforGeeks 1</a>
<div class="accordion-content" data-tab-content>
<p>A Computer Science portal for geeks.</p>
<a href="#">GeeksforGeeks website link</a>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">GeeksforGeeks 2</a>
<div class="accordion-content" data-tab-content>
<strong>GeeksforGeeks image</strong>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt=""
/>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">GeeksforGeeks 3</a>
<div class="accordion-content" data-tab-content>
<p>
Gfg is the only reason to fall in love with data structure and
programming
</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png"
alt=""
/>
<a href="">Link</a>
</div>
</li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Enlace de referencia: https://get.foundation/sites/docs/accordion.html#basics
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA