Neste tutorial aprenderá como criar cabeçalhos de navegação estáticos e fixos posicionados com a componente Bootstrap navbar.
Criar uma barra de navegação simples com Bootstrap
P>Pode usar o componente Bootstrap navbar para criar cabeçalhos de navegação com capacidade de resposta para o seu website ou aplicação. Estas barras de navegação reactivas caíram inicialmente em dispositivos com pequenos viewports como telemóveis, mas expandem-se quando o utilizador clica no botão de alternância. No entanto, será horizontal como normal nos dispositivos de médio e grande porte como portátil ou desktop.
P>Pode também criar diferentes variações da barra de navegação, tais como barras de navegação com menus dropdown e caixas de pesquisa, bem como barras de navegação fixas posicionadas com muito menos esforço. O exemplo seguinte mostrar-lhe-á como criar uma barra de navegação estática simples com ligações de navegação.
Exemplo
Experimente este código ”
<nav class="navbar navbar-expand-md navbar-light bg-light"> <a href="#" class="navbar-brand">Brand</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">Profile</a> <a href="#" class="nav-item nav-link">Messages</a> <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a> </div> <div class="navbar-nav ml-auto"> <a href="#" class="nav-item nav-link">Login</a> </div> </div></nav>– A saída do exemplo acima terá um aspecto semelhante a este:
Mais, em vez de texto simples, pode também colocar a sua imagem de logotipo dentro da barra de navegação. No entanto, é necessário definir manualmente a altura do logótipo para o colocar correctamente dentro da barra de navegação, como mostrado aqui:
Exemplo
Experimente este código ”
<nav class="navbar navbar-expand-md navbar-light bg-light"> <a href="#" class="navbar-brand"> <img src="images/logo.svg" height="28" alt="CoolBrand"> </a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">Profile</a> <a href="#" class="nav-item nav-link">Messages</a> <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a> </div> <div class="navbar-nav ml-auto"> <a href="#" class="nav-item nav-link">Login</a> </div> </div></nav>– A saída do exemplo acima parecerá algo parecido com isto:
Nota: Utilizar as classes de utilidade como .ml-auto.mr-auto.justify-content-between, etc. para alinhar os links de navegação, formulários, botões ou texto dentro da barra de navegação.
Adicionar dropdowns à barra de navegação
P>Pode também incluir dropdowns e caixa de pesquisa dentro das barras de navegação, como mostrado aqui:
Exemplo
Tente este código ”
<nav class="navbar navbar-expand-md navbar-light bg-light"> <a href="#" class="navbar-brand">Brand</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-between"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">Profile</a> <div class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Inbox</a> <a href="#" class="dropdown-item">Sent</a> <a href="#" class="dropdown-item">Drafts</a> </div> </div> </div> <form class="form-inline"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-append"> <button type="button" class="btn btn-secondary"><i class="fa fa-search"></i></button> </div> </div> </form> <div class="navbar-nav"> <a href="#" class="nav-item nav-link">Login</a> </div> </div></nav>– A saída do exemplo acima parecerá algo como isto:
.container, que define a largura do seu site e o seu conteúdo.Cheque a secção de snippets para exemplos de algumas barras de navegação Bootstrap lindamente desenhadas.
Colocar formulário de pesquisa dentro da barra de navegação
O formulário de pesquisa é um componente muito comum das barras de navegação e já o viu em vários sites da Internet com bastante frequência. Pode colocar vários controlos e componentes do formulário dentro de uma barra de navegação usando a classe .form-inline no elemento <form>, como se mostra no exemplo seguinte:
Exemplo
Experimente este código ”
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> <a href="#" class="navbar-brand">Brand</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">About</a> <a href="#" class="nav-item nav-link">Products</a> </div> <form class="form-inline ml-auto"> <input type="text" class="form-control mr-sm-2" placeholder="Search"> <button type="submit" class="btn btn-outline-light">Search</button> </form> </div></nav>– A saída do exemplo acima parecerá algo como isto:
Mudar o esquema de cores da barra de navegação
P>Pode também mudar o esquema de cores da barra de navegação usando o .navbar-light para as cores de fundo claras, ou .navbar-dark para as cores de fundo escuras. Depois, personalizá-lo com as classes de utilidade de cor de fundo, tais como .bg-dark.bg-primary, e assim por diante.
Alternativamente, pode também aplicar o CSS background-color propriedade no .navbar elemento você mesmo para personalizar o tema da barra de navegação, como mostra o exemplo seguinte:
Exemplo
Experimente este código ”
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> <!-- Navbar content --></nav><nav class="navbar navbar-dark bg-primary"> <!-- Navbar content --></nav><nav class="navbar navbar-light" style="background-color: #ddeeff;"> <!-- Navbar content --></nav>– A saída do exemplo acima terá um aspecto semelhante a este:
Bootstrap Fixed Navbar
Bootstrap também fornece mecanismo para criar a barra de navegação que é fixada na parte superior ou inferior da janela de visualização e irá percorrer com o conteúdo da página.
Criar a barra de navegação fixa no topo
Aplicar a classe de utilidade de posição .fixed-top ao elemento .navbar para fixar a barra de navegação no topo da janela de visualização, de modo a não rolar com a página. Aqui está um exemplo:
Exemplo
Experimente este código ”
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <!-- Navbar content --></nav>Criar a Barra de Navegação Fixa ao Fundo
Similiarmente, adicionar a classe .fixed-bottom no elemento .navbar para fixar a barra de navegação no fundo do viewport, como mostra o exemplo seguinte:
Exemplo
Experimente este código ”
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-bottom"> <!-- Navbar content --></nav>Criar a barra de navegação superior pegajosa
P>Pode também criar a barra de navegação superior pegajosa que se desloca com a página até chegar ao topo, depois fica lá, usando simplesmente o elemento .sticky-top class on the .navbar, como este:
Exemplo
Experimente este código ”
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top"> <!-- Navbar content --></nav>Tip: Colocar o fixo .navbar conteúdo dentro do .container ou .container-fluid para enchimento adequado e alinhamento com o resto do conteúdo.
Nota: Lembre-se de adicionar padding (pelo menos 70px) ao topo ou ao fundo da <body> elemento para evitar que o conteúdo passe por baixo da barra de navegação enquanto implementa a barra de navegação superior ou inferior fixa. Além disso, certifique-se também de adicionar a sua folha de estilo personalizada após o núcleo do ficheiro CSS Bootstrap, caso contrário as regras de estilo na sua folha de estilo podem ser anuladas pela folha de estilo do Bootstrap.