Bootstrap 5 | Migaja de pan

Bootstrap 5 es el último lanzamiento importante de Bootstrap en el que renovaron la interfaz de usuario y realizaron varios cambios. Las migas de pan se utilizan para indicar la ubicación de la página actual dentro de una jerarquía de navegación.

Sintaxis:

<ol class="breadcrumb">
  <li class="breadcrumb-item"> Content .. </li>
</ol>

Ejemplo 1: Este ejemplo muestra el funcionamiento de Breadcrumbs en Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Breadcrumbs
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
</head>
<body>
    <div style="text-align: center;width: 600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div style="width: 600px;height: 200px;
        margin:20px;">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active">
                    GeeksforGeeks
                </li>
            </ol>
        </nav>
    </div>
</body>
</html>

Producción:

Example 2: This example uses show the working of Breadcrumbs in Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Breadcrumbs
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
</head>
<body>
    <div style="text-align: center;width: 600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div style="width: 600px;height: 200px;margin:20px;">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#">
                      GeeksforGeeks
                    </a>
                </li>
                <li class="breadcrumb-item">
                    Articles
                </li>
            </ol>
        </nav>
    </div>
</body>
</html>

Producción:

 
Example 3: This example uses show the working of Breadcrumbs in Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Breadcrumbs
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
</head>
<body>
    <div style="text-align: center;width: 600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div style="width: 600px;height: 200px;margin:20px;">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#">GeeksforGeeks</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">Articles</a>
                </li>
                <li class="breadcrumb-item active">
                    Bootstrap 5
                </li>
            </ol>
        </nav>
    </div>
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por gurrrung 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 *