Bootstrap - Пример навигации поreadcrumbs

Здравствуйте,野心勃勃的网页开发者们！今天，我们将深入Bootstrap breadcrumbs的精彩世界。作为您亲切的邻居计算机老师，我很高兴能引导你们走上这段旅程。那么，拿起一杯咖啡（或者你最喜欢的饮料），我们开始吧！

Bootstrap - Breadcrumbs Demo

Что такое навигация поbreadcrumbs?

Прежде чем мы перейдем к коду, давайте поймем, что такое breadcrumbs. Помните историю о Г Hansel и Gretel? Они оставили след из breadcrumbs, чтобы найти дорогу домой. Ну, веб-разработчики позаимствовали эту идею!

В веб-дизайне breadcrumbs - это навигационное средство, которое показывает пользователям их текущее местоположение в иерархии веб-сайта. Это как цифровой след, который помогает пользователям понять, где они находятся и как вернуться на предыдущие страницы. Pretty neat, right?

Why use breadcrumbs?

Улучшение навигации
Лучший пользовательский опыт
Снижение показателей отскока
Польза для SEO

Теперь, когда мы знаем, что такое breadcrumbs, давайте посмотрим, как Bootstrap упрощает их использование!

Основы breadcrumbs в Bootstrap

Bootstrap, наш надежный фронтенд-фреймворк, предоставляет простой способ создания breadcrumbs. Давайте начнем с базового примера:

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Домой</li>
</ol>
</nav>

Этот код создает простой breadcrumb с одним элементом: "Домой". Давайте разберем это:

Мы используем элемент <nav> с aria-label="breadcrumb" для доступности.
Внутри мы имеем ordered list (<ol>) с классом breadcrumb.
Каждый элемент в breadcrumb - это элемент списка (<li>) с классом breadcrumb-item.
Класс active и атрибут aria-current="page" indicate текущую страницу.

Добавление нескольких уровней

Теперь давайте добавим глубину нашим breadcrumbs:

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Домой</a></li>
<li class="breadcrumb-item"><a href="#">Библиотека</a></li>
<li class="breadcrumb-item active" aria-current="page">Данные</li>
</ol>
</nav>

В этом примере у нас есть три уровня:

Домой (ссылка)
Библиотека (ссылка)
Данные (текущая страница, без ссылки)

Обратите внимание, что только последний элемент имеет класс active и атрибут aria-current="page". Другие элементы являются ссылками, позволяющими пользователям navigates обратно к предыдущим уровням.

Настройка разделителей breadcrumbs

По умолчанию Bootstrap используетforward slash (/) в качестве разделителя между элементами breadcrumbs. Но что, если вы хотите что-то другое? Давайте быть creatives!

Использование CSS для изменения разделителя

Добавьте этот CSS в ваш stylesheet:

.breadcrumb-item + .breadcrumb-item::before {
content: ">";
}

Этот код изменяет разделитель на знак больше (>). Feel free to experiment с разными знаками или даже emoji! ?➡️?

Использование встроенных разделителей Bootstrap

Bootstrap 5 introduces a new way to change dividers using HTML:

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Домой</a></li>
<li class="breadcrumb-item active" aria-current="page">Библиотека</li>
</ol>
</nav>

Здесь мы используем атрибут style для установки CSS переменной --bs-breadcrumb-divider. Легко!

Добавление иконок к breadcrumbs

Хотите сделать ваши breadcrumbs более визуально привлекательными? Давайте добавим иконки!

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i> Домой</a></li>
<li class="breadcrumb-item"><a href="#"><i class="fas fa-book"></i> Библиотека</a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-database"></i> Данные</li>
</ol>
</nav>

В этом примере мы используем иконки Font Awesome, но вы можете использовать любую библиотеку иконок по вашему выбору. Просто убедитесь, что вы включили необходимые CSS и JavaScript файлы для вашего 선택аicon set.

Адаптивные breadcrumbs

Как ваш доброжелательный соседский учитель, я должен подчеркнуть важность адаптивного дизайна. Давайте создадим breadcrumbs, которые хорошо смотрятся на всех устройствах:

<nav aria-label="breadcrumb">
<ol class="breadcrumb flex-wrap">
<li class="breadcrumb-item"><a href="#">Домой</a></li>
<li class="breadcrumb-item"><a href="#">Очень длинное имя категории</a></li>
<li class="breadcrumb-item"><a href="#">Другая длинная подкатегория</a></li>
<li class="breadcrumb-item active" aria-current="page">Текущая страница с длинным заголовком</li>
</ol>
</nav>

Класс flex-wrap позволяет элементам breadcrumb перехватываться на следующую строку на smaller экранах, предотвращая горизонтальный скроллинг.

Учет доступности

Будучи ответственными разработчиками, мы всегда должны иметь в виду доступность. Вот несколько советов:

Используйте правильные ARIA атрибуты (aria-label, aria-current)
Убедитесь в достаточном контрасте цветов
Убедитесь, что ссылки доступны с клавиатуры

Объединение всего в одно целое

Давайте создадим comprehensive пример, который incorporates все, что мы learned:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Breadcrumbs Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
.breadcrumb-item + .breadcrumb-item::before {
content: "➡️";
}
</style>
</head>
<body>
<div class="container mt-5">
<h1>Bootstrap Breadcrumbs Demo</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb flex-wrap">
<li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i> Домой</a></li>
<li class="breadcrumb-item"><a href="#"><i class="fas fa-book"></i> Библиотека</a></li>
<li class="breadcrumb-item"><a href="#"><i class="fas fa-laptop-code"></i> Веб-разработка</a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-bootstrap"></i> Bootstrap</li>
</ol>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Этот пример включает custom separators, иконки, адаптивный дизайн и правильные атрибуты доступности.

Заключение

Поздравляю! Вы только что овладели искусством создания breadcrumbs в Bootstrap. От базовой реализации до avanzadas настройки, у вас теперь есть инструменты для hướng users через ваш веб-сайт с стилем и эффективностью.

Помните, breadcrumbs - это как цифровой след, который вы оставляете для ваших пользователей. Они помогают предотвратить, чтобы ваши visitators заблудились в глубоком, темном лесу структуры вашего веб-сайта. Используйте их мудро, и ваши пользователи будут благодарны вам!

Счастливого кодирования, и пусть ваши breadcrumbs всегда вели к отличному пользовательскому опыту! ?✨

Method	Описание
Основная реализация	Используйте элементы `<nav>`, `<ol>`, и `<li>` с классами Bootstrap
Добавление нескольких уровней	Создайте иерархию с linked и активными элементами
Настройка разделителей	Используйте CSS или встроенную переменную разделителя Bootstrap
Добавление иконок	Включите библиотеку иконок для визуального привлечения
Адаптивный дизайн	Используйте `flex-wrap` для лучшего опыта на мобильных устройствах
Доступность	Реализуйте правильные ARIA атрибуты и обеспечьте навигацию с клавиатуры

Credits: Image by storyset

Предыдущий учебник:

Bootstrap - Демонстрация значков

Следующий учебник:

Bootstrap - Демо Jumbotrons