Exemplos de Navbar
Por definição as barras de navegação estendem a largura da janela de visualização.
Contudo podem ser contidas dentro de um .container .
Não confunda NavBar com Menu.
O menu é do ASP NET. Se quizer ver um menu simples asp net
Clique aqui.
Uma NavBar é uma barra de navegação ou um menu, ou seja, é um conjunto de links que apontam para destinos dentro e fora do documento atual.
Uma das características da NavBar é que ela ocupa toda a largura da linha que esta sendo exibida a menos que tenha uma tag pai para conte-la.
Na definição de cores e estilos do navbar temos 3 classes :
1-A classe que define que é um navbar. Ex : class="navbar"
2-A cor que define como os elementos dentro do navbar devem ser renderizados.
Ex : class="navbar-dark".
Cuidado que se a cor escolhida for diferente de dark ou light os objetos dentro do navbar não estarão visíveis.
3-A cor dos caracteres e fundo do NavBar. Ex : class="bg-success".
O problema é que quando a gente combina as classes e a exibição fica horrível e, às vezes, o elemento nem é exibido.
As cores de caractere e fundos (class="bg-xxxxx") possíveis são :
| Classe | Cor dos caracteres | Cor de fundo |
|---|---|---|
| success | verde escuro | azul claro |
| info | azul escuro | azul claro |
| warning | marron claro | rosa claro |
| danger | vermelho | rosa claro |
| primary | azul | azul claro |
| secondary | preto | azul claro |
| dark | preto | azul claro |
| light | cinza | claro branco |
Se você definir as cores do navbar (class="navbar navbar-xxxxx") de success, info, warning, danger, primary, secondary os objetos dentro do navbar como botões NÃO estarão visíveis.
Se você definir as cores do navbar (class="navbar navbar-xxxxx") de dark ou light os objetos dentro do
navbar como botões estarão visíveis.
Se for dark os itens serão renderizados na cor branca.
Se for light os itens serão renderizados na cor preta.
Para evitar esse problema abaixo deixo exemplos de cores de NavBars. Coloquei apenas um botão, o sanduiche menu, para ser renderizado dentro do controle navbar.
Por definição as barras de navegação estendem a largura da janela de visualização.
Contudo podem ser contidas dentro de um .container .
O primeiro item do navbar é o item com o texto Navbar e ele é uma chave para expandir o menu quando a página for exibida por um dispositivo com tela pequena e, por esse motivo, o menu é exibido como 'hamburger menu', ou seja, contraído, escondido. Ao pressionar 'NavBar' o menu é exibido.
O código da navbar acima é o seguinte :
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample09">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(corrente)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Desabilitado</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown09">
<a class="dropdown-item" href="#">Item1</a>
<a class="dropdown-item" href="#">Item2</a>
<a class="dropdown-item" href="#">Item3</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">nav apenas centrada<span class="sr-only">(corrente)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Desabilitado</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown10">
<a class="dropdown-item" href="#">Item1</a>
<a class="dropdown-item" href="#">Item2</a>
<a class="dropdown-item" href="#">Item3</a>
</div>
</li>
</ul>
</div>
</nav>
<main role="main">
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<h1>Exemplos de Navbar</h1>
<p>
Por definição as barras de navegação estendem a largura da janela de visualização. <br />
Contudo podem ser contidas dentro de um <code> .container </code>. <br />
</p>
</div>
</div>
</main>
</div>