Основной курс Bootstrap4

Формы Bootstrap4 Навигационная панель Bootstrap4

Bootstrap4 breadcrumb навигация (Breadcrumb)

Breadcrumb - это навигационный план, который указывает пользователю текущее положение страницы на веб-сайте или в приложении. Навигация по breadcrumb значительно улучшает доступность веб-сайтов с большим количеством страниц или сложной иерархией навигации.

Навигация по breadcrumb - это способ отображения информации о иерархии веб-сайта. Например, в блоге breadcrumb может отображать дату публикации, категорию или тег. Они показывают текущее положение страницы в иерархии навигации, что является видом навигационной помощи в пользовательском интерфейсе.

Навигация по breadcrumb в Bootstrap - это простая навигация с .breadcrumb Несписок классов. Разделители добавляются через CSS (bootstrap.min.css) с помощью ::before и content, автоматически добавляемые следующие классы:

.breadcrumb-item + .breadcrumb-item::before {
　　display: inline-block;
　　padding-right: 0.5rem;
　　color: #6c757d;
　　content: "/";
}

Достаточно использовать класс .breadcrumb в упорядоченном списке, чтобы создать статическую разрезную навигацию с помощью Bootstrap, как в следующем примере навигации по разрезам Bootstrap4

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<ol class="breadcrumb">
　　<li class="breadcrumb-item active">Дом</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">Дом</a></li>
　　<li class="breadcrumb-item active">Библиотека</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">Дом</a></li>
　　<li class="breadcrumb-item"><a href="#">Библиотека</a></li>
　　<li class="breadcrumb-item active">Данные</li>
</ol>
</body>
</html>

Проверьте, посмотрите ›/›

Мы можем также не использовать список:

Пример навигации по разрезам Bootstrap4

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="breadcrumb">
　　<a class="breadcrumb-item" href="#">Дом</a>
　　<a class="breadcrumb-item" href="#">Библиотека</a>
　　<a class="breadcrumb-item" href="#">Данные</a>
　　<span class="breadcrumb-item active">Bootstrap</span>
</nav>
</body>
</html>

Проверьте, посмотрите ›/›

Эффект выполнения таков:

Формы Bootstrap4 Навигационная панель Bootstrap4