in English

Barra de navegació

Documentació i exemples per a la capçalera de navegació potent i sensible de Bootstrap, la barra de navegació. Inclou suport per a la marca, la navegació, el complement de col·lapse i molt més.

Com funciona

Això és el que necessiteu saber abans de començar amb la barra de navegació:

  • Les barres de navegació requereixen un embolcall .navbaramb classes d'esquemes de colors.navbar-expand{-sm|-md|-lg|-xl} i col·lapse sensibles .
  • Les barres de navegació i el seu contingut són fluids per defecte. Utilitzeu contenidors opcionals per limitar-ne l'amplada horitzontal.
  • Utilitzeu les nostres classes d'utilitat d' espaiat i flexió per controlar l'espaiat i l'alineació dins de les barres de navegació.
  • Les barres de navegació responen per defecte, però podeu modificar-les fàcilment per canviar-ho. El comportament responsiu depèn del nostre connector Collapse JavaScript.
  • Les barres de navegació s'oculten per defecte quan s'imprimeix. Força a imprimir-los afegint -los .d-printal fitxer .navbar. Vegeu la classe d'utilitat de visualització .
  • Assegureu-vos l'accessibilitat mitjançant l'ús d'un <nav>element o, si feu servir un element més genèric, com ara un <div>, afegiu una role="navigation"a cada barra de navegació per identificar-la de manera explícita com a regió de referència per als usuaris de tecnologies d'assistència.
L'efecte d'animació d'aquest component depèn de la prefers-reduced-motionconsulta de mitjans. Consulteu la secció de moviment reduït de la nostra documentació d'accessibilitat .

Contingut compatible

Les barres de navegació inclouen suport integrat per a un grapat de subcomponents. Trieu entre els següents segons sigui necessari:

  • .navbar-brandper al nom de la vostra empresa, producte o projecte.
  • .navbar-navper a una navegació lleugera i d'alçada completa (incloent suport per a menús desplegables).
  • .navbar-togglerper utilitzar-lo amb el nostre connector de col·lapse i altres comportaments de commutació de navegació .
  • .form-inlineper a qualsevol control i acció de formulari.
  • .navbar-textper afegir cadenes de text centrades verticalment.
  • .collapse.navbar-collapseper agrupar i ocultar el contingut de la barra de navegació per un punt d'interrupció principal.

Aquí hi ha un exemple de tots els subcomponents inclosos en una barra de navegació responsiva de temàtica lleugera que es col·lapsa automàticament al punt d' lginterrupció (gran).

<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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <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">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>

Aquest exemple utilitza classes d'utilitat de color ( bg-light) i espaiat ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Marca

Es .navbar-brandpot aplicar a la majoria d'elements, però un àncora funciona millor, ja que alguns elements poden requerir classes d'utilitat o estils personalitzats.

<!-- 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>

L'addició d'imatges al .navbar-brandfitxer és probable que sempre requereixi estils personalitzats o utilitats per a la mida adequada. Aquí teniu alguns exemples per demostrar.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/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.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Els enllaços de navegació de la barra de navegació es basen en les nostres .navopcions amb la seva pròpia classe modificadora i requereixen l'ús de classes de commutació per a un estil responsiu adequat. La navegació a les barres de navegació també creixerà per ocupar el màxim d'espai horitzontal possible per mantenir el contingut de la barra de navegació alineat de manera segura.

Els estats actius—amb— .activeper indicar la pàgina actual es poden aplicar directament a .nav-links o als seus pares immediats .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">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

I com que utilitzem classes per als nostres navegadors, podeu evitar completament l'enfocament basat en llistes si voleu.

<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-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

També podeu utilitzar menús desplegables a la vostra barra de navegació. Els menús desplegables requereixen un element d'embolcall per al posicionament, així que assegureu-vos d'utilitzar elements separats i imbricats .nav-itemcom .nav-linkes mostra a continuació.

<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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <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>

Formes

Col·loqueu diversos controls de formulari i components dins d'una barra de navegació amb .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>

Elements secundaris immediats d' .navbarús de disseny flexible i predeterminat justify-content: space-between. Utilitzeu utilitats flexibles addicionals segons sigui necessari per ajustar aquest comportament.

<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>

Els grups d'entrada també funcionen:

<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>

També s'admeten diversos botons com a part d'aquests formularis de la barra de navegació. Això també és un gran recordatori que les utilitats d'alineació vertical es poden utilitzar per alinear elements de diferents mides.

<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>

Text

Les barres de navegació poden contenir fragments de text amb l'ajuda de .navbar-text. Aquesta classe ajusta l'alineació vertical i l'espaiat horitzontal de les cadenes de text.

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

Combina i combina amb altres components i utilitats segons sigui necessari.

<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>

Esquemes de colors

Tematitzar la barra de navegació mai ha estat tan fàcil gràcies a la combinació de classes de tematització i background-colorutilitats. Trieu entre .navbar-lightper utilitzar-lo amb colors de fons clars o .navbar-darkper a colors de fons foscos. A continuació, personalitzeu-los amb .bg-*utilitats.

<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>

Contenidors

Tot i que no és obligatori, podeu embolicar una barra de navegació .containerper centrar-la en una pàgina. O podeu afegir un contenidor a l'interior .navbarper centrar només el contingut d'una barra de navegació superior fixa o estàtica .

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

Quan el contenidor es troba dins de la vostra barra de navegació, el seu farciment horitzontal s'elimina als punts d'interrupció inferiors a la vostra .navbar-expand{-sm|-md|-lg|-xl}classe especificada. Això garanteix que no estem duplicant el farciment innecessàriament a les finestres inferiors quan la barra de navegació està col·lapsada.

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

Col·locació

Utilitzeu les nostres utilitats de posició per col·locar barres de navegació en posicions no estàtiques. Trieu entre fixa a la part superior, fixa a la part inferior o enganxada a la part superior (es desplaça amb la pàgina fins que arriba a la part superior i després es queda allà). Les barres de navegació fixes utilitzen position: fixed, és a dir, s'extreuen del flux normal del DOM i poden requerir CSS personalitzats (per exemple, padding-topa <body>) per evitar la superposició amb altres elements.

Tingueu en compte també que .sticky-toputilitza position: sticky, que no és totalment compatible amb tots els navegadors .

<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>

Desplaçament

Afegiu -lo .navbar-nav-scrolla un .navbar-collapse(o a un altre subcomponent de la barra de navegació) per habilitar el desplaçament vertical dins dels continguts alternables d'una barra de navegació replegada. De manera predeterminada, el desplaçament s'inicia a 75vh(o al 75% de l'alçada de la finestra), però podeu anul·lar-ho amb estils en línia o personalitzats. A les finestres més grans quan la barra de navegació s'amplia, el contingut apareixerà tal com ho fa en una barra de navegació predeterminada.

Tingueu en compte que aquest comportament comporta un inconvenient potencial de overflow—quan la configuració overflow-y: auto(obligatòria per desplaçar-vos aquí) overflow-xés l'equivalent a auto, que retallarà part del contingut horitzontal.

Aquí hi ha un exemple de barra de navegació .navbar-nav-scrollamb style="max-height: 100px;", amb algunes utilitats de marge addicionals per a un espai òptim.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarScroll">
    <ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Link
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Link</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Conductes sensibles

Les barres de navegació poden utilitzar .navbar-toggler, .navbar-collapse, i .navbar-expand{-sm|-md|-lg|-xl}classes per determinar quan el seu contingut es col·lapsa darrere d'un botó. En combinació amb altres utilitats, podeu triar fàcilment quan mostrar o amagar elements concrets.

Per a les barres de navegació que no es redueixen mai, afegiu la .navbar-expandclasse a la barra de navegació. Per a les barres de navegació que sempre col·lapsen, no afegiu cap .navbar-expandclasse.

Alternador

Els commutadors de la barra de navegació estan alineats a l'esquerra per defecte, però si segueixen un element germà com un .navbar-brand, s'alinearan automàticament a l'extrem dret. Si inverteix el teu marcatge, invertirà la ubicació del commutador. A continuació es mostren exemples de diferents estils de commutació.

Sense .navbar-brandmostrar-se al punt d'interrupció més petit:

<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">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>

Amb un nom de marca que es mostra a l'esquerra i el commutador a la dreta:

<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">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>

Amb un commutador a l'esquerra i el nom de la marca a la dreta:

<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">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>

Contingut extern

De vegades, voleu utilitzar el connector de col·lapse per activar un element contenidor per al contingut que estructuralment es troba fora del fitxer .navbar. Com que el nostre connector funciona amb la combinació idi , això es fa fàcilment!data-target

<div class="fixed-top">
  <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>

Quan feu això, us recomanem incloure JavaScript addicional per moure el focus de manera programàtica al contenidor quan s'obre. En cas contrari, els usuaris de teclat i els usuaris de tecnologies d'assistència probablement tindran dificultats per trobar el contingut recentment revelat, sobretot si el contenidor que es va obrir arriba abans del commutador a l'estructura del document. També us recomanem que us assegureu que el commutador té l' aria-controlsatribut, apuntant al idcontenidor del contenidor. En teoria, això permet als usuaris de tecnologia d'assistència saltar directament del commutador al contenidor que controla, però el suport per a això actualment és força irregular.