English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
A barra de navegação é uma excelente funcionalidade, uma característica saliente do site Bootstrap. A barra de navegação atua como um componente básico de cabeçalho responsivo para navegação em suas aplicações ou sites. Na visão de dispositivos móveis, a barra de navegação está dobrada e, à medida que a largura da visão disponível aumenta, a barra de navegação se expande horizontalmente. No núcleo da barra de navegação do Bootstrap, inclui o nome do site e estilos básicos de navegação.
Os passos para criar uma barra de navegação padrão são os seguintes:
Adicione uma classe ao marcador <nav> .navbar、.navbar-default.
Adicione ao elemento acima role="navigation"o que ajuda a melhorar a acessibilidade.
Adicione uma classe de título ao elemento <div> .navbar-headerque contém uma classe navbar-brand do elemento <a>. Isso fará com que o texto pareça maior.
Para adicionar links à barra de navegação, basta adicionar uma classe .nav、.navbar-navegação lista não ordenada.
O exemplo a seguir ilustra isso:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Barra de navegação padrão</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Base Tutorial Website</a> </div> <div <ul class="nav navbar-nav <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Link separado</a></li> <li class="divider"></li> <li><a href="#">Outro link separado</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Teste e veja ‹/›
Os resultados são exibidos conforme abaixo:
Para adicionar funcionalidades responsivas à barra de navegação, o conteúdo que você deseja colapsar deve estar envolto em uma classe com .colapsar、.navbar-colapsar dentro do <div>. A barra de navegação colapsada é na verdade uma com a classe .navbar-alternar e dois dados- do elemento botão. O primeiro é dados-alternarsão usadas para informar ao JavaScript o que fazer com o botão, o segundo é dados-alvopara indicar qual elemento deve ser alternado. Três classes com .icon-barra do <span> para criar o que se chama de botão hamburger. Esses alternam para .nav-colapsar os elementos dentro de <div>. Para implementar essas funcionalidades, você deve incluir Plugin de Colapso (Collapse) do Bootstrap.
O exemplo a seguir ilustra isso:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - barra de navegação responsiva</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid <div class="navbar-header <button type="button" class="navbar-toggle" data-alternar="colapsar" dados-alvo="#example-navbar-colapsar"> <span class="sr-apenas">alternar navegação</span> <span class="icon-barra"></span> <span class="icon-barra"></span> <span class="icon-barra"></span> </button> <a class="navbar-marca" href="#">Tutorial básico</a> </div> <div class="colapsar navbar-colapsar" id="example-navbar-colapsar"> <ul class="nav navbar-nav <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Link separado</a></li> <li class="divider"></li> <li><a href="#">Outro link separado</a></li> </ul> </li> </ul> </div> </></nav> </body> </html>Teste e veja ‹/›
Os resultados são exibidos conforme abaixo:
Você pode usar a classe .navbar-btn Adicione botões ao elemento <button> que não estão dentro de <form>, e que ficam verticalmente centralizados na barra de navegação..navbar-btn usáveis em elementos <a> e <input>.
não usar em .navbar-navegação usada em elementos <a> dentro de .navbar-btnporque não é padrão classe do botão.
O exemplo a seguir ilustra isso:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - botão na barra de navegação/title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Base Tutorial Website</a> </div> <div <form class="navbar-form navbar-left" role="search"> <div class="form-grupo"> <input type="text" class="form-controle" placeholder="Pesquisa"> </div> <button type="submit" class="btn btn-padrão">botão de envio</button> </form> <button type="button" class="btn btn-default navbar-btn"> botão da barra de navegação </button> </div> </div> </nav> </body> </html>Teste e veja ‹/›
Os resultados são exibidos conforme abaixo:
Se precisar incluir uma string de texto na navegação, use a classe .navbar-textoIsso geralmente é usado juntamente com a tag <p> para garantir uma cor e liderança apropriadas. O exemplo a seguir ilustra isso:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - texto na barra de navegação</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Base Tutorial Website</a> </div> <div <p class="navbar-text">w3codebox usuário login</p> </div> </div> </nav> </body> </html>Teste e veja ‹/›
Os resultados são exibidos conforme abaixo:
Se você quiser usar ícones dentro de componentes de navegação de barra de navegação convencionais, use a classe glyphicon glyphicon-* para definir ícones, mais informações podem ser encontradas em Ícones do Bootstrap como o exemplo a seguir mostra:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Links não navegacionais</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Base Tutorial Website</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Registro</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </nav> </body> </html>Teste e veja ‹/›
Os resultados são exibidos conforme abaixo:
Você pode usar classes úteis .navbar-left ou .navbar-right Alinhar à esquerda ou à direita na barra de navegação Links de navegação, formulários, botões ou texto esses componentes. Essas duas classes adicionam flutuagens CSS nas direções especificadas. Abaixo está um exemplo que ilustra isso:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Alinhamento dos componentes</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Base Tutorial Website</a> </div> <div !--Alinhamento à esquerda--> <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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Link separado</a></li> <li class="divider"></li> <li><a href="#">Outro link separado</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <button type="submit" class="btn btn-default"> Alinhamento à esquerda-Botão de envio </button> </form> <p class="navbar-text navbar-left">Alinhamento à esquerda-Texto</p> !--Alinhamento à direita--> <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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Link separado</a></li> <li class="divider"></li> <li><a href="#">Outro link separado</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <button type="submit" class="btn btn-default"> Alinhamento à direita-Botão de envio </button> </form> <p class="navbar-text navbar-right">Alinhamento à direita-Texto</p> </div> </div> </nav> </body> </html>Teste e veja ‹/›
Os resultados são exibidos conforme abaixo:
A barra de navegação do Bootstrap pode ser posicionada dinamicamente. Por padrão, ela é um elemento de bloco, e é posicionada com base no local onde é colocada no HTML. Com algumas classes auxiliares, você pode colocá-la na parte superior ou inferior da página, ou torná-la uma barra de navegação estática que rola com a página.
Se você quiser fixar a barra de navegação no topo da página, adicione .navbar class Adicionar classe .navbar-fixed-topAbaixo está um exemplo que ilustra isso:
To prevent the navigation bar from overlapping with other content at the top of the page body, add at least 50 pixels of padding (padding), the padding value can be set according to your needs.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Fixar no topo</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Base Tutorial Website</a> </div> <div <ul class="nav navbar-nav <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Link separado</a></li> <li class="divider"></li> <li><a href="#">Outro link separado</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Teste e veja ‹/›
Os resultados são exibidos conforme abaixo:
Se você quiser fixar a barra de navegação no fundo da página, adicione .navbar class Adicionar classe .navbar-fixed-bottomAbaixo está um exemplo que ilustra isso:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Fixar no fundo</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Base Tutorial Website</a> </div> <div <ul class="nav navbar-nav <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Link separado</a></li> <li class="divider"></li> <li><a href="#">Outro link separado</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Teste e veja ‹/›
Os resultados são exibidos conforme abaixo:
Para criar uma barra de navegação que rola com a página, adicione .navbar-static-top class. Esta classe não requer a adição de margem interna (padding) no <body>.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Static Top</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Base Tutorial Website</a> </div> <div <ul class="nav navbar-nav <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Link separado</a></li> <li class="divider"></li> <li><a href="#">Outro link separado</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Teste e veja ‹/›
Os resultados são exibidos conforme abaixo:
To create a navigation bar with a black background and white text, simply add .navbar class to add .navbar-inverse class as shown in the following example:
To prevent the navigation bar from overlapping with other content at the top of the page body, add at least 50 pixels of padding (padding), the padding value can be set according to your needs.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example - Inverted Navigation Bar</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body <nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid <div class="navbar-header <a class="navbar-brand" href="#">Base Tutorial Website</a> </div> <div <ul class="nav navbar-nav <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Link separado</a></li> <li class="divider"></li> <li><a href="#">Outro link separado</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Teste e veja ‹/›
Os resultados são exibidos conforme abaixo: