Bootstrap4 Breadcrumb Navigation (Breadcrumb)

Breadcrumb is a navigation scheme that indicates the position of the current page in the website or application to the user. Breadcrumb navigation can greatly enhance the accessibility of websites with a large number of pages or complex navigation hierarchies.

Breadcrumb navigation is a display method based on the hierarchical information of the website. Taking a blog as an example, breadcrumb navigation can display the publication date, category, or tag. They represent the position of the current page in the navigation hierarchy and are a navigation aid in the user interface.

The breadcrumb navigation in Bootstrap is a simple navigation with .breadcrumb Unordered list of class. The separator is added through CSS (bootstrap.min.css) with ::before and content, and the following class is automatically added:

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

Utilizzando solo la classe .breadcrumb dell'elenco ordinato, è possibile creare una layout statica di creme Bootstrap come nell'esempio di navigazione di creme di Bootstrap4 di seguito

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</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">Home</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">Home</a></li>
　　<li class="breadcrumb-item active">Biblioteca</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">Home</a></li>
　　<li class="breadcrumb-item"><a href="#">Biblioteca</a></li>
　　<li class="breadcrumb-item active">Data</li>
</ol>
</body>
</html>

测试看看 ‹/›

Possiamo anche non utilizzare la forma elencata:

Esempio di navigazione di creme di Bootstrap4

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</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="#">Home</a>
　　<a class="breadcrumb-item" href="#">Library</a>
　　<a class="breadcrumb-item" href="#">Data</a>
　　<span class="breadcrumb-item active">Bootstrap</span>
</nav>
</body>
</html>

测试看看 ‹/›

运行后效果如下：

Bootstrap4 表单 Bootstrap4 导航栏

Bootstrap4 Basic Tutorial

Bootstrap4 Breadcrumb Navigation (Breadcrumb)