Foundation CSS es un marco de front-end utilizado para sitios web, aplicaciones y correos electrónicos receptivos para cualquier dispositivo. También tiene muchas plantillas de front-end como Bootstrap , Semantic UI y otros marcos de front-end. Es flexible, legible y completamente personalizable. Los principales gigantes tecnológicos como Adobe, Amazon, Cisco, Hp, Mozilla, Samsung, etc. están utilizando Foundation CSS. En este artículo, vamos a crear una página web simple con pestañas de acordeón receptivas en Foundation CSS.
Pestañas de acordeón receptivas: estas son uno de los contenedores CSS básicos que se utilizan para cambiar entre dos componentes en diferentes puntos de interrupción de manera receptiva. El contenido de un encabezado o un tema se ocultará hasta que se haga clic en el tema en particular. El contenido se mostrará como un cuadro desplegable y el contenido de otros temas se ocultará automáticamente. Cambiará de pestañas a lista y viceversa de dispositivo a dispositivo de manera receptiva.
Foundation CSS Responsive Accordion Tabs Clases:
- acordeón: Esta clase se usa para convertir la Lista desordenada en un acordeón.
- acordeón-elemento: Esta clase se utiliza para convertir los elementos de la lista en elementos de acordeón.
- acordeón-título: esta clase se utiliza para establecer el título de los elementos de acordeón respectivos.
- contenido de acordeón: esta clase se utiliza para mostrar el contenido en su elemento de acordeón respectivo.
Atributos de las pestañas de acordeón receptivas CSS de Foundation :
- data-responsive-accordion-tabs: este atributo se usa para hacer que el acordeón cambie de pestañas a lista de manera receptiva cuando se cambia el tamaño de la página web.
- data-responsive-accordion-tabs: este atributo se usa para hacer que el acordeón cambie de pestañas a lista y de lista a pestañas de manera receptiva cuando cambia el ancho de la página web, respectivamente.
- elemento de acordeón de datos: este atributo se utiliza para mostrar el contenido cuando se hace clic en el elemento de acordeón.
- data-tab-content: este atributo se utiliza para mostrar el contenido cuando se hace clic en el elemento de acordeón.
Sintaxis:
<ul class="accordion"
data-responsive-accordion-tabs="accordion large-tabs">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
// Accordion title
</a>
<div class="accordion-content" data-tab-content>
// Accordion content
</div>
</li>
</ul>
Ejemplo 1: En este ejemplo, el acordeón aparecerá como una pestaña cuando el ancho de la página web sea ancho y como listas cuando el ancho sea estrecho. Usaremos data-responsive-accordion-tabs=”pestañas grandes de acordeón”.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Responsive Accordion Tabs</title> <!-- Foundation CSS Stylesheet --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- jQuery CDN --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <!-- Foundation CSS JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Foundation CSS Responsive Accordion Tabs</h3> <div style="width: 1100px;"> <!-- Creating an unordered list as an accordion --> <ul class="accordion" data-responsive-accordion-tabs="accordion large-tabs"> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>HTML</h6> </a> <div class="accordion-content" data-tab-content> <p> HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>CSS</h6> </a> <div class="accordion-content" data-tab-content> <p>CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles to web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.</p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>JavaScript</h6> </a> <div class="accordion-content" data-tab-content> <p>JavaScript is the world most popular lightweight, interpreted compiled programming language. It is also known as scripting language for web pages. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments.</p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>Bootstrap</h6> </a> <div class="accordion-content" data-tab-content> <p>Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, the websites are perfect for all the browsers (IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and Phones). </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>Reactjs</h6> </a> <div class="accordion-content" data-tab-content> <p>React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.</p> </div> </li> </ul> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Pestañas de acordeón receptivas de Foundation CSS
Ejemplo 2: En este ejemplo, el acordeón aparecerá como una lista cuando el ancho de la página web sea ancho y como pestañas cuando el ancho sea medio y, por último, volverá a aparecer como una lista cuando el ancho sea estrecho. Usamos data-responsive-accordion-tabs=”accordion medium-tabs large-accordion” .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Responsive Accordion Tabs</title> <!-- Foundation CSS Stylesheet --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- jQuery CDN --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <!-- Foundation CSS JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Foundation CSS Responsive Accordion Tabs</h3> <div style="width: 1100px;"> <!-- Creating an unordered list as an accordion --> <ul class="accordion" data-responsive-accordion-tabs="accordion medium-tabs large-accordion"> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>HTML</h6> </a> <div class="accordion-content" data-tab-content> <p> HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>CSS</h6> </a> <div class="accordion-content" data-tab-content> <p>CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles to web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.</p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>JavaScript</h6> </a> <div class="accordion-content" data-tab-content> <p>JavaScript is the world most popular lightweight, interpreted compiled programming language. It is also known as scripting language for web pages. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments.</p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>Bootstrap</h6> </a> <div class="accordion-content" data-tab-content> <p>Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, the websites are perfect for all the browsers (IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and Phones). </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>Reactjs</h6> </a> <div class="accordion-content" data-tab-content> <p>React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.</p> </div> </li> </ul> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Pestañas de acordeón receptivas de Foundation CSS
Referencia: https://get.foundation/sites/docs/accordion.html
Publicación traducida automáticamente
Artículo escrito por ashwin13602 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA