Source

Bara de navigare

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

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ță.

Citiți mai departe pentru un exemplu și o listă de subcomponente acceptate.

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="#" 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="#">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.0/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.0/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" href="#">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-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="#">Disabled</a>
    </div>
  </div>
</nav>

Puteți utiliza, de asemenea, 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="#" id="navbarDropdownMenuLink" 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>

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>

Aliniați conținutul formularelor dvs. inline cu utilitare, după cum este necesar.

<nav class="navbar navbar-light bg-light justify-content-between">
  <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 împacheta o bară de navigare într-o .containerpentru a o centra pe o pagină sau puteți adăuga una în interior pentru 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 umplutura în mod inutil pe 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>

Comportamente receptive

Barele de navigare pot utiliza .navbar-toggler, .navbar-collapseși .navbar-expand{-sm|-md|-lg|-xl}clasele pentru a se schimba atunci 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 în 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" href="#">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" href="#">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" href="#">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 conținut ascuns în altă parte a paginii. Deoarece pluginul nostru funcționează pe idși data-targetpotrivire, asta se face cu ușurință!

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <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>