in English

Bara de navigare

Documentație și exemple pentru antetul de navigare puternic și receptiv al Bootstrap, bara de navigare. Include suport pentru branding, navigare, restrângere plugin și multe altele.

Cum functioneaza

Iată ce trebuie să știți înainte de a începe să utilizați bara de navigare:

Barele de navigare necesită o împachetare .navbarcu .navbar-expand{-sm|-md|-lg|-xl}pentru restrângerea receptivă și clase de schemă de culori .
Barele de navigare și conținutul lor sunt fluide în mod implicit. Utilizați containere opționale pentru a limita lățimea orizontală.
Utilizați clasele noastre de utilitate de spațiere și flexibilitate pentru a controla spațierea și alinierea în barele de navigare.
Barele de navigare sunt receptive în mod implicit, dar le puteți modifica cu ușurință pentru a schimba asta. Comportamentul receptiv depinde de pluginul nostru restrâns JavaScript.
Barele de navigare sunt ascunse în mod implicit la imprimare. Forțați-le să fie tipărite prin adăugarea .d-printla .navbar. Vedeți clasa de utilitate de afișare .
Asigurați accesibilitatea utilizând un <nav>element sau, dacă utilizați un element mai generic, cum ar fi un <div>, adăugați o role="navigation"la fiecare bară de navigare pentru a o identifica în mod explicit ca regiune de reper pentru utilizatorii tehnologiilor de asistență.

Efectul de animație al acestei componente depinde de prefers-reduced-motioninterogarea media. Consultați secțiunea cu mișcare redusă a documentației noastre de accesibilitate .

Conținut acceptat

Navbar-urile vin cu suport încorporat pentru o mână de subcomponente. Alegeți dintre următoarele după cum este necesar:

.navbar-brandpentru numele companiei, produsului sau proiectului dvs.
.navbar-navpentru o navigare la înălțime completă și ușoară (inclusiv suport pentru meniuri derulante).
.navbar-togglerpentru utilizare cu pluginul nostru de restrângere și alte comportamente de comutare a navigației .
.form-inlinepentru orice controale și acțiuni de formular.
.navbar-textpentru adăugarea șirurilor de text centrate vertical.
.collapse.navbar-collapsepentru gruparea și ascunderea conținutului barei de navigare după un punct de întrerupere părinte.

Iată un exemplu de toate subcomponentele incluse într-o bară de navigare receptivă cu tematică luminoasă, care se prăbușește automat la punctul de lgîntrerupere (mare).

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

Acest exemplu folosește clase de utilitate color ( bg-light) și spațiere ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Marca

.navbar-brandPoate fi aplicat la majoritatea elementelor, dar o ancoră funcționează cel mai bine, deoarece unele elemente ar putea necesita clase de utilitate sau stiluri personalizate .

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

Adăugarea de imagini la .navbar-brandva necesita întotdeauna stiluri personalizate sau utilități pentru a dimensiona corect. Iată câteva exemple de demonstrat.

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

Nav

Legăturile de navigare din bara de navigare se bazează pe .navopțiunile noastre cu propria lor clasă modificatoare și necesită utilizarea claselor de comutare pentru un stil responsiv adecvat. Navigarea în barele de navigare va crește, de asemenea, pentru a ocupa cât mai mult spațiu orizontal posibil pentru a menține conținutul barei de navigare aliniat în siguranță.

Stările active—cu .active—pentru a indica pagina curentă pot fi aplicate direct la .nav-links sau la părinții lor imediati .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 pentru că folosim clase pentru navigarea noastră, puteți evita în întregime abordarea bazată pe liste dacă doriți.

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

De asemenea, puteți utiliza meniuri derulante în bara de navigare. Meniurile drop-down necesită un element de împachetare pentru poziționare, așa că asigurați-vă că utilizați elemente separate și imbricate pentru .nav-itemși .nav-linkașa cum se arată mai jos.

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

Forme

Plasați diferite controale de formular și componente într-o bară de navigare cu .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>

Elementele secundare imediate de .navbarutilizare a aspectului flexibil și vor fi implicit justify-content: space-between. Utilizați utilitare flexibile suplimentare după cum este necesar pentru a ajusta acest 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>

Grupurile de intrare funcționează, de asemenea:

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

Diverse butoane sunt acceptate și ca parte a acestor forme de bară de navigare. Acesta este, de asemenea, o reamintire grozavă că utilitățile de aliniere verticală pot fi folosite pentru a alinia elemente de diferite dimensiuni.

<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

Barele de navigare pot conține fragmente de text cu ajutorul .navbar-text. Această clasă ajustează alinierea verticală și spațierea orizontală pentru șirurile de text.

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

Se amestecă și se potrivește cu alte componente și utilități, după cum este necesar.

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

Scheme de culori

Tematica barei de navigare nu a fost niciodată mai ușoară datorită combinației de clase de tematică și background-colorutilități. Alegeți dintre .navbar-lightpentru utilizarea cu culori de fundal deschise sau .navbar-darkpentru culori de fundal închise. Apoi, personalizați cu .bg-*utilități.

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

Containere

Deși nu este obligatoriu, puteți înfășura o bară de navigare într-o .containerpentru a o centra pe o pagină. Sau puteți adăuga un container în interiorul .navbarpentru a centra numai conținutul unei bare de navigare superioare fixe sau statice .

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

Când containerul se află în bara de navigare, umplutura orizontală a acestuia este eliminată la punctele de întrerupere mai mici decât .navbar-expand{-sm|-md|-lg|-xl}clasa specificată. Acest lucru asigură că nu dublăm în mod inutil umplerea în ferestrele de vizualizare inferioare atunci când bara de navigare este restrânsă.

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

Plasarea

Utilizați utilitățile noastre de poziție pentru a plasa barele de navigare în poziții non-statice. Alegeți dintre fix în sus, fix în jos sau lipit în partea de sus (se derulează cu pagina până ajunge în sus, apoi rămâne acolo). Barele de navigare fixe folosesc position: fixed, ceea ce înseamnă că sunt extrase din fluxul normal al DOM și pot necesita CSS personalizat (de exemplu, padding-toppe <body>) pentru a preveni suprapunerea cu alte elemente.

De asemenea, rețineți că .sticky-topfolosește position: sticky, care nu este pe deplin acceptat în fiecare browser .

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

Derulare

Adăugați .navbar-nav-scrollla o .navbar-collapse(sau la altă subcomponentă a barei de navigare) pentru a activa derularea verticală în conținutul comutabil al unei bare de navigare restrânse. În mod implicit, defilarea se activează la 75vh(sau 75% din înălțimea ferestrei de vizualizare), dar o puteți înlocui cu stiluri inline sau personalizate. La ferestrele de vizualizare mai mari, când bara de navigare este extinsă, conținutul va apărea așa cum apare într-o bară de navigare implicită.

Vă rugăm să rețineți că acest comportament vine cu un potențial dezavantaj de overflow—când setarea overflow-y: auto(necesară pentru a derula conținutul aici), overflow-xeste echivalentul lui auto, care va decupa o parte a conținutului orizontal.

Iată un exemplu de bară de navigare care folosește .navbar-nav-scrollcu style="max-height: 100px;", cu câteva utilități de marjă suplimentare pentru o spațiere optimă.

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

Comportamente receptive

Barele de navigare pot folosi .navbar-toggler, .navbar-collapse, și .navbar-expand{-sm|-md|-lg|-xl}clase pentru a determina când conținutul lor se prăbușește în spatele unui buton. În combinație cu alte utilități, puteți alege cu ușurință când să afișați sau să ascundeți anumite elemente.

Pentru barele de navigare care nu se restrâng niciodată, adăugați .navbar-expandclasa în bara de navigare. Pentru barele de navigare care se prăbușesc întotdeauna, nu adăugați nicio .navbar-expandclasă.

Comutator

Comutatoarele din bara de navigare sunt aliniate la stânga în mod implicit, dar dacă urmează un element frate, cum ar fi un .navbar-brand, vor fi aliniate automat la extrema dreaptă. Inversarea marcajului va inversa plasarea comutatorului. Mai jos sunt exemple de diferite stiluri de comutare.

Fără .navbar-brandafișare la cel mai mic punct de întrerupere:

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

Cu un nume de marcă afișat în stânga și comutator în dreapta:

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

Cu un comutator în stânga și numele mărcii în dreapta:

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

Conținut extern

Uneori doriți s�� utilizați pluginul de restrângere pentru a declanșa un element container pentru conținut care se află structural în afara fișierului .navbar. Deoarece pluginul nostru funcționează pe idși data-targetpotrivire, asta se face cu ușurință!

Conținut restrâns

Comutabil prin marca navbar.

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

Când faceți acest lucru, vă recomandăm să includeți JavaScript suplimentar pentru a muta focalizarea în mod programatic în container atunci când acesta este deschis. În caz contrar, utilizatorii de tastatură și utilizatorii de tehnologii de asistență vor avea probabil greutăți să găsească conținutul nou dezvăluit - mai ales dacă containerul care a fost deschis vine înaintea comutatorului în structura documentului. De asemenea, vă recomandăm să vă asigurați că comutatorul are aria-controlsatributul, care indică către idcontainerul de conținut. În teorie, acest lucru permite utilizatorilor de tehnologie de asistență să treacă direct de la comutator la containerul pe care îl controlează, dar suportul pentru aceasta este în prezent destul de neregulat.