Source

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ó i molt més, inclòs el suport per al nostre connector de col·lapse.

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 .

Continueu llegint per obtenir un exemple i una llista de subcomponents compatibles.

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

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

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" href="#" tabindex="-1" aria-disabled="true">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-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>

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

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 en .navbarús de disseny flexible i per defecte 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ó en un .containerper centrar-la en una pàgina o afegir-ne una per 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>

Conductes sensibles

Les barres de navegació poden utilitzar .navbar-toggler, .navbar-collapse, i .navbar-expand{-sm|-md|-lg|-xl}classes per canviar 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 baix:

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

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

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

Contingut extern

De vegades, voleu utilitzar el connector de col·lapse per activar contingut ocult en altres llocs de la pàgina. Com que el nostre connector funciona amb la combinació idi , això es fa fàcilment!data-target

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