Jump to content
Fórum Script Brasil
  • 0

Menus Nav-bar ficam ocultos


Question

Uso o wampserver, meus sistemas funcionam corretamente e este exemplo não mostra os menus: Inicial, Manutenção, Sobre e Á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/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">
		<i class="fas fa-home"></i> <strong>&nbsp;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 é &copy; 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"></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>				
			

Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Você colocou a lista de links no lugar errado, tenta assim:
 


    <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>
                            <li><a class="nav-link" href="#"><i class="fas fa-home"></i> Inicial |</a></li>
                            <li><a class="nav-link" href="#"><i class="fas fa-database"></i> Manutenção |</a></li>
                            <li><a class="nav-link" href="#"><i class="fas fa-list"></i> Sobre |</a></li>
                            <li><a class="nav-link" href="#"><i class="fas fa-lock"></i> Área restrita</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">
                    <i class="fas fa-home"></i> <strong>&nbsp;Navbar</strong>
                </a>
                <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>

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Cloud Computing


  • Forum Statistics

    • Total Topics
      148721
    • Total Posts
      644511
×
×
  • Create New...