Bootstrap - Navbar
A barra de navegação é uma das características proeminentes dos sites Bootstrap. As barras de navegação são 'meta' componentes responsivos que servem como cabeçalhos de navegação para seu aplicativo ou site. As barras de navegação diminuem em visualizações móveis e se tornam horizontais conforme a largura da janela de visualização disponível aumenta. Em seu núcleo, a barra de navegação inclui estilo para nomes de sites e navegação básica.
Navbar padrão
Para criar uma barra de navegação padrão -
Adicione as classes .navbar, .navbar-default para a tag <nav>.
Adicionar role = "navigation" ao elemento acima, para ajudar na acessibilidade.
Adicionar uma classe de cabeçalho .navbar-headerpara o elemento <div>. Inclui um elemento <a> com a classenavbar-brand. Isso dará ao texto um tamanho um pouco maior.
Para adicionar links à barra de navegação, basta adicionar uma lista não ordenada com as classes de .nav, .navbar-nav.
O exemplo a seguir demonstra isso -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Navbar responsivo
Para adicionar recursos responsivos à barra de navegação, o conteúdo que você deseja recolher precisa ser empacotado em um <div> com classes .collapse, .navbar-collapse. A natureza em colapso é acionada por um botão que tem a classe de.navbar-togglee então apresenta dois elementos de dados. O primeiro,data-toggle, é usado para dizer ao JavaScript o que fazer com o botão, e o segundo, data-target, indica qual elemento alternar. Então
O exemplo a seguir demonstra isso -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#example-navbar-collapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div class = "collapse navbar-collapse" id = "example-navbar-collapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Formulários na Navbar
Em vez de usar os formulários baseados em classe padrão do Capítulo Bootstrap Forms , formulários que estão na barra de navegação, use o.navbar-formclasse. Isso garante o alinhamento vertical adequado do formulário e o comportamento de recolhimento em janelas de exibição estreitas. Use as opções de alinhamento (explicadas na seção Alinhamento do componente) para decidir onde ele reside no conteúdo da barra de navegação.
O exemplo a seguir demonstra isso -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>
</div>
</nav>Botões na Navbar
Você pode adicionar botões usando a classe .navbar-btn para <button> elementos que não residem em um <form> para centralizá-los verticalmente na barra de navegação. .navbar-btn pode ser usado em elementos <a> e <input>.
Não use .navbar-btnnem as classes de botão padrão em <a> elementos dentro .navbar-nav.
O exemplo a seguir demonstra isso -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Submit Button</button>
</form>
<button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
</div>
</nav>Texto na Navbar
Para quebrar strings de texto em um elemento, use a classe .navbar-text. Geralmente é usado com a tag <p> para entrelinhas e cores adequadas O exemplo a seguir demonstra isso -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<p class = "navbar-text">Signed in as Thomas</p>
</div>
</nav>Links não nav
Se você quiser usar os links padrão que não estão no componente de navegação regular da barra de navegação, use a classe navbar-link para adicionar cores adequadas para as opções da barra de navegação padrão e inversa, conforme mostrado no exemplo a seguir -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<p class = "navbar-text navbar-right">
Signed in as
<a href = "#" class = "navbar-link">Thomas</a>
</p>
</div>
</nav>Alinhamento de Componente
Você pode alinhar os componentes como links de navegação, formulários, botões ou texto à esquerda ou direita em uma barra de navegação usando as classes de utilitários.navbar-left ou .navbar-right. Ambas as classes adicionarão um float CSS na direção especificada. O exemplo a seguir demonstra isso -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<!--Left Align-->
<ul class = "nav navbar-nav navbar-left">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-left" role = "search">
<button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
</form>
<p class = "navbar-text navbar-left">Left align-Text</p>
<!--Right Align-->
<ul class = "nav navbar-nav navbar-right">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-right" role = "search">
<button type = "submit" class = "btn btn-default">
Right align-Submit Button
</button>
</form>
<p class = "navbar-text navbar-right">Right align-Text</p>
</div>
</nav>Fixo no topo
A barra de navegação Bootstrap pode ser dinâmica em seu posicionamento. Por padrão, é um elemento de nível de bloco que obtém seu posicionamento com base em seu posicionamento no HTML. Com algumas classes auxiliares, você pode colocá-lo na parte superior ou inferior da página ou pode fazê-lo rolar estaticamente com a página.
Se você quiser que a barra de navegação seja fixada no topo, adicione uma classe .navbar-fixed-top ao .navbar class. O exemplo a seguir demonstra isso -
Para evitar que a barra de navegação fique em cima de outro conteúdo no corpo da página, adicione pelo menos 50 pixels de preenchimento à tag <body> ou tente seus próprios valores.
<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Fixo na parte inferior
Se você quiser que a barra de navegação seja fixada na parte inferior da página, adicione a classe .navbar-fixed-bottom ao .navbar class. O exemplo a seguir demonstra isso -
<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class ="caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Top estático
Para criar uma barra de navegação que rola com a página, adicione o .navbar-static-topclasse. Esta classe não requer a adição de preenchimento ao <body>.
<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Navbar invertido
Para criar uma barra de navegação invertida com um fundo preto e com texto branco, basta adicionar o .navbar-inverse classe para o .navbar classe conforme demonstrado no exemplo a seguir -
Para evitar que a barra de navegação fique em cima de outro conteúdo no corpo da página, adicione pelo menos 50 pixels de preenchimento à tag <body> ou tente seus próprios valores.
<nav class = "navbar navbar-inverse" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>