Bootstrap4 Manual Básico

Bootstrap4 Formulário Bootstrap4 Barra de Navegação

Bootstrap4 Navegação de Pão (Breadcrumb)

A navegação de pão é um plano de navegação que pode indicar a posição da página atual no site ou aplicativo. A navegação de pão pode melhorar significativamente a acessibilidade dos sites com muitos páginas ou hierarquias de navegação complexas.

A navegação de pão é um tipo de navegação que indica a posição da página atual no site ou aplicativo. Por exemplo, em um blog, a navegação de pão pode mostrar a data de publicação, a categoria ou o rótulo. Eles representam a posição da página na hierarquia de navegação e são uma ajuda de navegação no interface do usuário.

A navegação de pão no Bootstrap é uma simples .breadcrumb class da lista não ordenada. Os separadores são adicionados através do CSS (bootstrap.min.css) com ::before e content, e as classes automaticamente adicionadas são as seguintes:

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

Basta usar a classe .breadcrumb de lista ordenada para criar uma disposição estática de pão com Bootstrap, como o seguinte Bootstrap4 Exemplo de Navegação de Pão

Exemplo

!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">Início</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">Início</a></li>
　　<li class="breadcrumb-item active">Biblioteca</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">Início</a></li>
　　<li class="breadcrumb-item"><a href="#">Biblioteca</a></li>
　　<li class="breadcrumb-item active">Data</li>
</ol>
</body>
</html>

Teste e veja ‹/›

Também podemos omitir a forma de lista:

Bootstrap4 Exemplo de Navegação de Pão

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

Teste e veja ‹/›

O efeito após a execução é o seguinte:

Bootstrap4 Formulário Bootstrap4 Barra de Navegação