Migas de pan de CSS de base – Barcelona Geeks

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 sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen increíbles y pueden ser accesibles para cualquier dispositivo. En este artículo, discutiremos el componente Breadcrumb en Foundation CSS.

Breadcrumb es un elemento útil en los sitios web modernos. Ayuda al usuario a volver a una parte específica del sitio web muy fácilmente y realiza un seguimiento de la jerarquía de las páginas del sitio web. Como tener todos los enlaces posibles en la barra de navegación del sitio web es un inconveniente y, por lo tanto, las migas de pan se convierten en una alternativa efectiva.

Clases básicas de migas de pan CSS:

breadcrumbs: esta clase crea el componente Breadcrumb. Por lo general, se usa en elementos <ul> y los enlaces se pueden agregar dentro de las etiquetas <li> .
disabled: esta clase se puede usar para deshabilitar las migas de pan y evitar que el usuario haga clic en ellas.

Sintaxis:

<ul class="breadcrumbs">
    <li style="font-size: 1em;">..</li>
    <li style="font-size: 1em;">..</li>
    ...
</ul>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- 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://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <h5>Foundation CSS Breadcrumbs</h5>
    <b>Simple Breadcrumbs</b>
    <nav>
        <ul class="breadcrumbs">
            <li style="font-size: 1em;">
              <a href="#">Home</a>
            </li>
            <li style="font-size: 1em;">
              <a href="#">Courses</a>
            </li>
            <li style="font-size: 1em;">
              <a href="#"></a>Placements
            </li>
            <li style="font-size: 1em;">
              Discounts
            </li>
        </ul>
    </nav>
  
    <b>Disabled Breadcrumbs</b>
    <nav>
        <ul class="breadcrumbs">
            <li style="font-size: 1em;" 
                class="disabled">Cart
            </li>
            <li style="font-size: 1em;" 
                class="disabled">Checkout
            </li>
            <li style="font-size: 1em;" 
                class="disabled">Details
            </li>
            <li style="font-size: 1em;" 
                class="disabled">Payment
            </li>
        </ul>
    </nav>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta