Bootstrap - Panorama для начинающих
Здравствуйте,野心勃勃的网页开发者们！今天，我们将深入Bootstrap面包屑的世界。别担心，如果你之前从未听说过面包屑——在本教程结束时，你将能够像专业人士一样创建它们！让我们一起开始这段激动人心的旅程。
Что такое Panorama?
Прежде чем мы перейдем к коду, давайте поймем, что такое面包屑. Представьте, что вы исследуете обширный лес (интернет может быть иногда именно таким). Не было бы приятно иметь след из面包屑, чтобы помочь вам найти обратный путь? Именно так面包屑 работают в веб-дизайне!
Бreadcrumbs - это навигационное средство, которое показывает пользователям их текущее местоположение в иерархии веб-сайта. Они обычно отображаются в виде строки ссылок в верхней части страницы, позволяя пользователям легко вернуться к более высоким уровням страниц.
Why Use Bootstrap Panorama?
Bootstrap, наш добрый соседний CSS фреймворк, делает создание面包屑 breeze. Он предоставляет предварительно стилизованные компоненты, которые мы можем легко реализовать на наших веб-страницах. Так что, вместо того чтобы изобретать велосипед заново, мы можем использовать готовые面包屑 Bootstrap и customize их по своему усмотрению!
Теперь, давайте натянем рукава и перейдем к кодированию!
Основные Panorama
Шаг 1: Настройка Bootstrap
В первую очередь, нам нужно включить Bootstrap в наш HTML файл. Добавьте следующие строки в раздел <head> вашего HTML:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>Это свяжет файлы CSS и JavaScript Bootstrap с нашим документом.
Шаг 2: Создание базового Panorama
Теперь давайте создадим наш первый面包屑! Вот базовая структура:
<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>Давайте разберем это:
- Мы оборачиваем наш面包屑 в элемент
<nav>сaria-label="breadcrumb". Это улучшает доступность для экранных читателей. - Элемент
<ol>с классомbreadcrumbсоздает контейнер для面包屑. - Каждый элемент
<li>представляет уровень в иерархии面包屑. - Класс
breadcrumb-itemстилизует каждый элемент. - Последний элемент имеет класс
activeиaria-current="page", чтобы указать текущую страницу.
Когда вы посмотрите на это в вашем браузере, вы увидите красивую тропу面包屑: Домой > Библиотека > Данные
Шаг 3: Добавление ссылок
Чтобы сделать наши面包屑 функциональными, нам нужно добавить правильные ссылки. Давайте изменим наш код:
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Домой</a></li>
<li class="breadcrumb-item"><a href="library.html">Библиотека</a></li>
<li class="breadcrumb-item active" aria-current="page">Данные</li>
</ol>
</nav>Теперь, нажав на "Домой", вы перейдете на index.html, а "Библиотека" на library.html. Текущая страница ("Данные") не имеет ссылки, так как это то место, где мы находимся в настоящее время.
Разделители
По умолчанию Bootstrap используетforward slash (/) в качестве разделителя между элементами面包屑. Но что, если мы хотим быть креативными и использовать что-то другое? Давайте explore, как customize наши разделители!
Custom Разделители с CSS
Мы можем изменить разделитель, используя CSS. Вот как:
<nav style="--bs-breadcrumb-divider: '>';" 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>В этом примере мы изменили разделитель на символ ">", используя переменную CSS --bs-breadcrumb-divider.
Использование иконок в качестве разделителей
Хотите быть еще более изысканными? Давайте используем иконку в качестве разделителя! Мы будем использовать иконки Font Awesome для этого примера:
<!-- Включите Font Awesome в заголовок вашего HTML -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- Ваш HTML для面包屑 -->
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Домой</a></li>
<li class="breadcrumb-item">
<i class="fas fa-chevron-right"></i>
<a href="#">Библиотека</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
<i class="fas fa-chevron-right"></i>
Данные
</li>
</ol>
</nav>Здесь мы установили --bs-breadcrumb-divider в пустую строку и вручную добавили иконки Font Awesome между элементами面包屑.
Лучшие практики для面包屑
Теперь, когда вы знаете, как создать и customize面包屑, давайте поговорим о некоторых лучших практиках:
- Удерживайте его простым: Не включайте каждую страницу в ваш след面包屑. Ограничьтесь основными категориями.
- Используйте ясные метки: Убедитесь, что ваши метки面包屑 кратки и описательны.
- Не используйте面包屑 на одноуровневых веб-сайтах: Они наиболее полезны для сайтов с ясной иерархией.
- Поместите их в верхнюю часть: Бreadcrumbs обычно размещаются в верхней части страницы, ниже основного навигационного меню.
Заключение
Поздравляю! Вы только что узнали, как создать и customize Bootstrap面包屑. От базовой реализации до изысканных разделителей, вы теперь equipped, чтобы направлять ваших пользователей через ваш веб-сайт с стилем.
помните, что面包屑 - это, как указатели в вашем цифровом лесу. Они помогают пользователям понять, где они находятся и как вернуться туда, где они были. Используйте их мудро, и ваши пользователи поблагодарят вас за то, что вы сделали их путь через ваш сайт легким!
Продолжайте практиковаться, продолжайте исследовать и, что наиболее важно, продолжайте наслаждаться веб-разработкой. До следующего раза, счастливого кодирования!
Credits: Image by storyset