Базовые хлебные крошки CSS

10 лучших проектов для начинающих по отработке навыков HTML и CSS Программирование и разработка

Primer CSS предлагает нам так много компонентов, и Breadcrumbs — один из них. В этой статье мы узнаем о панировочных сухарях. Хлебные крошки используются для указания местоположения текущей страницы в навигационной иерархии. Для представления контента, демонстрирующего разделенные пути, используются хлебные крошки.

Основные CSS-хлебные крошки Используемые классы:

  • элемент хлебной крошки: этот класс используется для соответствующего элемента для реализации этой утилиты.

Синтаксис:

Пример: этот пример демонстрирует использование хлебных крошек Primer CSS с использованием класса элемента хлебных крошек.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Primer CSS Breadcrumbs</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
 
<body style="margin:100px">
    <div class="text-center">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3><u>Primer CSS Breadcrumbs</u></h3><br />
    </div>
 
    <div class="d-flex flex-justify-center">
        <div aria-label="Breadcrumb">
            <ol>
                <li class="breadcrumb-item">
                    <a href="#">Home Section</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">Previous Section</a>
                </li>
                <li class="breadcrumb-item breadcrumb-item-selected">
                    <a href="#" aria-current="page">Section selected</a>
                </li>
            </ol>
        </div>
    </div>    
    <br />
    <div class="d-flex flex-justify-center">
        <div aria-label="Breadcrumb">
            <ol>
                <li class="breadcrumb-item">
                    <a href="#">Home</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">Geeks for Geeks</a>
                </li>
                <li class="breadcrumb-item breadcrumb-item-selected">
                    <a href="#" aria-current="page">Articles</a>
                </li>
            </ol>
        </div>
    </div>
</body>
   
</html>

Выход:

Читайте также:  Floor C++

имер демонстрирует использование хлебных крошек Primer CS

Оцените статью
bestprogrammer.ru
Добавить комментарий