Ниже приведены три основных класса CSS, используемых в навигационной крошке Bootstrap.
Ниже приведен полный код для создания простой навигационной цепочки в Bootstrap 5:
В идеале вам не нужно включать файлы сценариев для хлебных крошек, но эти сценарии потребуются, когда вы используете их в своей теме или шаблоне вместе с другими компонентами Bootstrap. Вы можете проверить образец начального шаблона, который будет использоваться в стандартных шаблонах Bootstrap 5.
Как видите, панировочные сухари по умолчанию имеют следующие функции:
- Правая косая черта (/) будет добавлена между каждым элементом с использованием стандартного псевдоэлемента CSS :: перед использованием атрибута «content».
- Цвет предмета со ссылкой по умолчанию будет синим # 0275d8.
- Активный элемент по умолчанию будет иметь серый цвет # 636c72 без привязки.
Если вам не нравится внешний вид по умолчанию, вы можете переопределить свойства CSS в своей теме. Ниже приведен пример переопределения класса хлебных крошек по умолчанию и добавления некоторых фоновых материалов.
<style>
.breadcrumb {
box-shadow: 1px 1px #d5d4d4;
background: #eeeded;
border: 1px solid #eeeded;
border-radius: 5px;
padding: 0 5px 0 10px !important;
font-size: 16px;
line-height:2em;
}
</style>
Вы должны добавить приведенный выше код в раздел заголовка своей страницы, и окончательная навигационная цепочка будет выглядеть, как показано ниже:
Замена разделителя панировочных сухарей
Вы можете изменить разделитель по умолчанию (также называемый разделителем) в хлебной крошке с помощью настраиваемого символа, изменив –Bs-breadcrumb-divider: имущество. Например, вы можете использовать маленькую стрелку, такую как символ «больше», используя приведенный ниже CSS, встроенный в ваш HTML.
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="https://www.webnots.com/bootstrap-breadcrumb-tutorial/#">Home</a></li>
<li class="breadcrumb-item" aria-current="page">Web Designing</li>
<li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
</ol>
</nav>
Результат в вашем браузере будет таким, как показано ниже:
Важные моменты, на которые следует обратить внимание
- Панировочные сухари начальной загрузки будут предлагать только возможность вручную добавить структуру хлебных крошек на ваши страницы. Если на вашем сайте сотни страниц, вы должны использовать соответствующий скрипт для добавления навигационной цепочки на каждую страницу вручную. Например, хлебная крошка, показанная на этой странице, создана с помощью плагина Yoast SEO для WordPress. Этот плагин автоматически добавит хлебную крошку на все страницы без ручной работы.
- Помните, что хлебные крошки будут отображаться в результатах поиска Google и Bing вместо URL. Вы можете узнать больше о панировочных сухарях здесь.
Изучите Bootstrap 5 (Индекс)
