Conceptos básicos de las pestañas CSS de Foundation

Posted on by Rudeus Greyrat

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. El marco se basa en bootstrap, que es similar a SaaS. 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.

Las pestañas Foundation CSS son las pestañas de navegación que se utilizan para mostrar el contenido en el panel sin salir de la página actual. Podemos ahorrar espacio en nuestra página web creando pestañas y almacenando contenido en ellas. En este artículo, discutiremos los conceptos básicos de las pestañas en Foundation CSS.

Clases básicas de pestañas CSS de Foundation:

  • pestañas: esta clase se utiliza para crear las pestañas.
  • tabs-title: esta clase se utiliza para dar el título de la pestaña.
  • tabs-content: esta clase se utiliza para dar contenido a la pestaña.
  • tabs-panel: Esta clase se utiliza para crear el panel.

Sintaxis:

<ul class="tabs" data-tabs id="tabs-basic">
    <li class="tabs-title is-active">
        <a href="#tabBasic1"> GFG Tab 1 </a>
    </li>
    <li class="tabs-title">
        <a href="#tabBasic2"> GFG Tab 2 </a>
    </li>

</ul>

Ejemplo 1: el siguiente código demuestra los conceptos básicos de las pestañas CSS de Foundation con algo de contenido .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Foundation CSS Tabs Basics</title>
    <!-- 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 Tabs Basics </h3>
  </center>
  
  <ul class="tabs" 
      data-tabs id="tabs-basic">
    <li class="tabs-title is-active">
      <a href="#tabBasic1"
         aria-selected="true">
        GFG Tab 1 
      </a>
    </li>
    <li class="tabs-title">
      <a href="#tabBasic2"> GFG Tab 2 </a>
    </li>
    <li class="tabs-title">
      <a href="#tabBasic3"> GFG Tab 3 </a>
    </li>
    <li class="tabs-title">
      <a href="#tabBasic4"> GFG Tab 4 </a>
    </li>
  </ul>
  
  <div class="tabs-content" 
      data-tabs-content="tabs-basic">
    <div class="tabs-panel is-active"
         id="tabBasic1">
      <p>
        A Computer Science portal for geeks. 
      </p>
    </div>
  
    <div class="tabs-panel"
         id="tabBasic2">
      <p>
        With the idea of imparting programming 
        knowledge, Mr. Sandeep Jain, an IIT Roorkee 
        alumnus started a dream, GeeksforGeeks.
      </p>
  
    </div>
  
    <div class="tabs-panel" 
         id="tabBasic3">
      <p> 
        It contains well written, well thought 
        and well explained computer science 
        and programming articles.
      </p>
    </div>
  
    <div class="tabs-panel" 
         id="tabBasic4">
      <p> 
        GeeksforGeeks
      </p>
    </div>
  </div>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Producción:

Conceptos básicos de las pestañas CSS de Foundation

Conceptos básicos de las pestañas CSS de Foundation

Ejemplo 2: el siguiente código demuestra los conceptos básicos de las pestañas CSS de Foundation con un enlace, un campo de entrada, contenido e imágenes.

HTML

<!DOCTYPE html>
<html>
  
<head>
  <title> Foundation CSS Tabs Basics</title>
  <!-- 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 Tabs Basics </h3>
  </center>
  
  <ul class="tabs" 
      data-tabs id="tabs-basic">
    <li class="tabs-title is-active">
      <a href="#tabBasic1" 
         aria-selected="true"> GFG Tab 1 </a>
    </li>
    <li class="tabs-title">
      <a href="#tabBasic2"> GFG Tab 2 </a>
    </li>
    <li class="tabs-title">
      <a href="#tabBasic3"> GFG Tab 3 </a>
    </li>
    <li class="tabs-title">
      <a href="#tabBasic4"> GFG Tab 4 </a>
    </li>
    <li class="tabs-title">
      <a href="#tabBasic5"> GFG Tab 5 </a>
    </li>
  </ul>
  
  <div class="tabs-content" 
      data-tabs-content="tabs-basic">
    <div class="tabs-panel is-active" id="tabBasic1">
      <strong> GeeksforGeeks </strong> <br>
      <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
    </div>
  
    <div class="tabs-panel" id="tabBasic2">
      <a href="#"> This is link </a>
      <p>
        With the idea of imparting programming 
        knowledge, Mr. Sandeep Jain, an IIT Roorkee 
        alumnus started a dream, GeeksforGeeks.
      </p>
  
    </div>
  
    <div class="tabs-panel"
         id="tabBasic3">
      <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png">
    </div>
  
    <div class="tabs-panel"
         id="tabBasic4">
      <p>
        A Computer Science portal for geeks. 
      </p>
  
      <input type="text"
             placeholder="GeeksforGeeks">
    </div>
  
    <div class="tabs-panel"
         id="tabBasic5">
      <strong> Computer Science portal </strong> <br>
      <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png"
           alt="">
    </div>
  </div>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Producción:

Conceptos básicos de las pestañas CSS de Foundation

Conceptos básicos de las pestañas CSS de Foundation

Referencia: https://get.foundation/sites/docs/tabs.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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *