Source

Barra de navegación

Documentación e exemplos para a cabeceira de navegación potente e sensible de Bootstrap, a barra de navegación. Inclúe compatibilidade para marca, navegación e moito máis, incluíndo soporte para o noso complemento de contraer.

Cómo funciona

Isto é o que debes saber antes de comezar coa barra de navegación:

As barras de navegación requiren un encaixe .navbarcon para as clases de esquemas de cores.navbar-expand{-sm|-md|-lg|-xl} e de colapso sensibles .
As barras de navegación e os seus contidos son fluídos por defecto. Use recipientes opcionais para limitar o seu ancho horizontal.
Use as nosas clases de utilidade de espazamento e flexión para controlar o espazamento e o aliñamento dentro das barras de navegación.
As barras de navegación responden por defecto, pero podes modificalas facilmente para cambialo. O comportamento receptivo depende do noso complemento Collapse JavaScript.
As barras de navegación están ocultas por defecto ao imprimir. Forzar que se impriman engadindo .d-printao ficheiro .navbar. Consulte a clase de utilidade de visualización .
Asegura a accesibilidade mediante un <nav>elemento ou, se utilizas un elemento máis xenérico, como un <div>, engade unha role="navigation"a cada barra de navegación para identificala de forma explícita como unha rexión de referencia para os usuarios de tecnoloxías de asistencia.

O efecto de animación deste compoñente depende da prefers-reduced-motionconsulta multimedia. Consulta a sección de movemento reducido da nosa documentación de accesibilidade .

Siga lendo un exemplo e unha lista de subcompoñentes admitidos.

Contido compatible

As barras de navegación inclúen soporte integrado para un puñado de subcompoñentes. Escolla entre os seguintes segundos sexa necesario:

.navbar-brandpara o nome da súa empresa, produto ou proxecto.
.navbar-navpara unha navegación a toda altura e lixeira (incluíndo soporte para menús despregables).
.navbar-togglerpara usar co noso complemento de contraer e outros comportamentos de conmutación de navegación .
.form-inlinepara calquera control e acción de formulario.
.navbar-textpara engadir cadeas de texto centradas verticalmente.
.collapse.navbar-collapsepara agrupar e ocultar o contido da barra de navegación por un punto de interrupción principal.

Aquí tes un exemplo de todos os subcompoñentes incluídos nunha barra de navegación con temática lixeira sensible que se contrae automaticamente no lgpunto de interrupción (grande).

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Este exemplo usa clases de utilidade cor ( bg-light) e espazamento ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Marca

Pódese .navbar-brandaplicar á maioría dos elementos, pero unha áncora funciona mellor xa que algúns elementos poden requirir clases de utilidade ou estilos personalizados.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

Engadir imaxes ao .navbar-brandficheiro probablemente sempre requira estilos personalizados ou utilidades para o tamaño adecuado. Aquí tes algúns exemplos para demostrar.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Nav

As ligazóns de navegación da barra de navegación baséanse nas nosas .navopcións coa súa propia clase modificadora e requiren o uso de clases de alternancia para un estilo adaptado. A navegación nas barras de navegación tamén crecerá ata ocupar o máximo de espazo horizontal posible para manter o contido da barra de navegación aliñado de forma segura.

Os estados activos—con— .activepara indicar a páxina actual pódense aplicar directamente a .nav-links ou aos seus pais inmediatos .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

E como usamos clases para os nosos navegadores, podes evitar por completo o enfoque baseado en listas se queres.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Tamén podes utilizar menús despregables na túa barra de navegación. Os menús despregables requiren un elemento de envoltura para o posicionamento, polo que asegúrese de usar elementos separados e aniñados para .nav-iteme .nav-linkcomo se mostra a continuación.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Formularios

Coloque varios controis de formulario e compoñentes dentro dunha barra de navegación con .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Elementos secundarios inmediatos en .navbaruso o deseño flexible e por defecto será justify-content: space-between. Use utilidades flexibles adicionais segundo sexa necesario para axustar este comportamento.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Os grupos de entrada tamén funcionan:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Tamén se admiten varios botóns como parte destes formularios da barra de navegación. Este tamén é un gran recordatorio de que as utilidades de aliñamento vertical pódense usar para aliñar elementos de diferentes tamaños.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Texto

As barras de navegación poden conter fragmentos de texto coa axuda de .navbar-text. Esta clase axusta o aliñamento vertical e o espazado horizontal das cadeas de texto.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Mestura e combina con outros compoñentes e utilidades segundo sexa necesario.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

Esquemas de cores

Tematizar a barra de navegación nunca foi tan fácil grazas á combinación de clases de tematización e background-colorutilidades. Escolle entre .navbar-lightpara usar con cores de fondo claros ou .navbar-darkpara cores de fondo escuros. Despois, personaliza con .bg-*utilidades.

<nav class="navbar 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: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Contenedores

Aínda que non é necesario, podes envolver unha barra de navegación para centrala .containernunha páxina ou engadir unha dentro para centrar só o contido dunha barra de navegación superior fixa ou estática .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

Cando o contedor está dentro da túa barra de navegación, o seu recheo horizontal elimínase nos puntos de interrupción inferiores á .navbar-expand{-sm|-md|-lg|-xl}clase especificada. Isto garante que non duplicaremos o recheo innecesariamente nas ventás inferiores cando a barra de navegación está contraída.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Colocación

Use as nosas utilidades de posición para colocar barras de navegación en posicións non estáticas. Escolle entre fixo para arriba, fixo para abaixo ou pegado para arriba (desprázase coa páxina ata chegar á parte superior e despois permanece alí). As barras de navegación corrixidas usan position: fixed, o que significa que son extraídas do fluxo normal do DOM e poden requirir CSS personalizado (por exemplo, padding-topno <body>) para evitar a superposición con outros elementos.

Teña en conta tamén que .sticky-topusa position: sticky, que non é totalmente compatible en todos os navegadores .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Condutas receptivas

As barras de navegación poden utilizar .navbar-toggler, .navbar-collapse, e .navbar-expand{-sm|-md|-lg|-xl}clases para cambiar cando o seu contido colapsa detrás dun botón. En combinación con outras utilidades, pode escoller facilmente cando mostrar ou ocultar determinados elementos.

Para as barras de navegación que nunca colapsan, engade a .navbar-expandclase na barra de navegación. Para as barras de navegación que sempre colapsan, non engadas ningunha .navbar-expandclase.

Alternador

Os alternadores da barra de navegación están aliñados á esquerda por defecto, pero se seguen un elemento irmán como un .navbar-brand, aliñaranse automaticamente ao extremo dereito. Se invertes o teu marcado, invertirase a colocación do alternador. A continuación móstranse exemplos de diferentes estilos de alternancia.

Sen .navbar-brandmostrar no punto de interrupción máis baixo:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</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="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Cun nome de marca que se mostra á esquerda e o alternador á dereita:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</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="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Cun alternador á esquerda e o nome da marca á dereita:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</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="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Contido externo

Ás veces queres usar o complemento de contraer para activar contido oculto noutros lugares da páxina. Debido a que o noso complemento funciona con ide data-targetcoincidente, iso faise facilmente!

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>