Uso o Wampserver, meus sistemas funcionam corretamente e este exemplo não mostra os menus: Inicial | Manutenção | Sobre | Área restrita
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Navbar Bootstrap</title>
<!-- Principal CSS do Bootstrap -->
<link href="https://getbootstrap.com.br/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome-all.js"></script>
<!-- Estilos customizados para este template -->
<link href="https://getbootstrap.com.br/docs/4.1/examples/album/album.css" rel="stylesheet">
</head>
<body>
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">Sobre</h4>
<p class="text-muted">Adicione algumas informações aqui abaixo.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contato</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Me siga no Twitter</a></li>
<li><a href="#" class="text-white">Curta no Facebook</a></li>
<li><a href="#" class="text-white">Me envie um e-mail</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong> Navbar</strong>
</a>
<!-- div navbar-collapse -->
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-home"></i> Inicial |</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-database"></i> Manutenção |</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-list"></i> Sobre |</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-lock"></i> Área restrita</a>
</li>
</ul>
</div><!-- fecha div navbar-collapse -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Exemplo Navbar Menus Bootstrap</h1>
<p class="lead text-muted">Algo curto e direto, sobre a coleção abaixo (conteúdo, criador e etc). Faça com que seja curto e legal, mas não tão curto ao ponto de as pessoas pularem ele.</p>
<p>
<a href="#" class="btn btn-primary my-2">Call-to-action principal</a>
<a href="#" class="btn btn-secondary my-2">Call-to-action secundário</a>
</p>
</div>
</section>
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">Este é um card maior e que suporta texto abaixo, como uma introdução mais natural ao conteúdo adicional. No entanto, esse conteúdo é um pouco maior.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">Ver</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Editar</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">Este é um card maior e que suporta texto abaixo, como uma introdução mais natural ao conteúdo adicional. No entanto, esse conteúdo é um pouco maior.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">Ver</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Editar</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">Este é um card maior e que suporta texto abaixo, como uma introdução mais natural ao conteúdo adicional. No entanto, esse conteúdo é um pouco maior.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">Ver</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Editar</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Voltar ao topo</a>
</p>
<p>Este exemplo de álbum é © Bootstrap, mas, por favor, baixe e customize por conta própria.</p>
<p>Novo no Bootstrap? <a href="../../">Visite a página principal</a> ou leia nosso guia <a href="../../getting-started/">getting started</a>.</p>
</div>
</footer>
<!-- Principal JavaScript do Bootstrap
================================================== -->
<!-- Foi colocado no final para a página carregar mais rápido -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="https://getbootstrap.com.br/docs/4.1/assets/js/vendor/popper.min.js"></script>
<script src="https://getbootstrap.com.br/docs/4.1/dist/js/bootstrap.min.js"></script>
<script src="https://getbootstrap.com.br/docs/4.1/assets/js/vendor/holder.min.js"></script>
</body>
</html>
