Source

Navbar

Dokumentasie en voorbeelde vir Bootstrap se kragtige, responsiewe navigasie-opskrif, die navigasiebalk. Sluit ondersteuning vir handelsmerke, navigasie en meer in, insluitend ondersteuning vir ons ineenvou-inprop.

Hoe dit werk

Hier is wat jy moet weet voordat jy met die navigasiebalk begin:

  • Navbars vereis 'n wikkel .navbarmet .navbar-expand{-sm|-md|-lg|-xl}vir responsiewe ineenstorting en kleurskemaklasse .
  • Navbars en hul inhoud is by verstek vloeibaar. Gebruik opsionele houers om hul horisontale breedte te beperk.
  • Gebruik ons ​​spasiëring- en buignutsklasse om spasiëring en belyning binne navigasiebalke te beheer.
  • Navbars reageer by verstek, maar jy kan dit maklik verander om dit te verander. Responsiewe gedrag hang af van ons Collapse JavaScript-inprop.
  • Navbars word by verstek versteek wanneer dit gedruk word. Dwing hulle om gedruk te word deur .d-printby die .navbar. Sien die vertoningsnutsklas .
  • Verseker toeganklikheid deur 'n <nav>element te gebruik of, indien 'n meer generiese element soos 'n <div>gebruik word, voeg 'n role="navigation"by elke navigasiebalk om dit uitdruklik as 'n landmerkstreek vir gebruikers van ondersteunende tegnologieë te identifiseer.

Die animasie-effek van hierdie komponent is afhanklik van die prefers-reduced-motionmedianavraag. Sien die verminderde beweging-afdeling van ons toeganklikheidsdokumentasie .

Lees verder vir 'n voorbeeld en lys van ondersteunde subkomponente.

Ondersteunde inhoud

Navbars kom met ingeboude ondersteuning vir 'n handvol sub-komponente. Kies uit die volgende soos nodig:

  • .navbar-brandvir jou maatskappy-, produk- of projeknaam.
  • .navbar-navvir 'n volle hoogte en liggewig navigasie (insluitend ondersteuning vir dropdowns).
  • .navbar-togglervir gebruik met ons invou-inprop en ander navigasiewisselgedrag .
  • .form-inlinevir enige vorm kontroles en aksies.
  • .navbar-textvir die byvoeging van vertikaal gesentreerde stringe teks.
  • .collapse.navbar-collapsevir die groepering en verberging van navigasiebalk-inhoud deur 'n ouer-breekpunt.

Hier is 'n voorbeeld van al die sub-komponente ingesluit in 'n responsiewe lig-tema navigasiebalk wat outomaties ineenstort by die lg(groot) breekpunt.

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

Hierdie voorbeeld gebruik kleur ( bg-light) en spasiëring ( my-2, my-lg-0, mr-sm-0, my-sm-0) nutsklasse.

Handelsmerk

Die .navbar-brandkan op die meeste elemente toegepas word, maar 'n anker werk die beste aangesien sommige elemente nutsklasse of pasgemaakte style kan vereis.

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

Om prente by die by te voeg, .navbar-brandsal waarskynlik altyd gepasmaakte style of nutsprogramme vereis om die regte grootte te hê. Hier is 'n paar voorbeelde om te demonstreer.

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

Navbar-navigasieskakels bou voort op ons .navopsies met hul eie wysigerklas en vereis die gebruik van wissel- klasse vir behoorlike responsiewe stilering. Navigasie in navigasiebalke sal ook groei om soveel horisontale spasie as moontlik te beset om jou navigasiebalkinhoud veilig in lyn te hou.

Aktiewe toestande—met— .activeom aan te dui die huidige bladsy kan direk op .nav-links of hul onmiddellike ouer .nav-items toegepas word.

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

En omdat ons klasse vir ons navs gebruik, kan jy die lys-gebaseerde benadering heeltemal vermy as jy wil.

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

U kan ook aftreklys in u navigasiebalk gebruik. Aftrekkieslyste vereis 'n omvou-element vir posisionering, so maak seker dat jy aparte en geneste elemente gebruik vir .nav-itemen .nav-linksoos hieronder getoon.

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

Vorms

Plaas verskeie vormkontroles en komponente binne 'n navigasiebalk met .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>

Onmiddellike kinders elemente in .navbargebruik buig uitleg en sal verstek na justify-content: space-between. Gebruik addisionele flex-nutsprogramme soos nodig om hierdie gedrag aan te pas.

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

Insetgroepe werk ook:

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

Verskeie knoppies word ook ondersteun as deel van hierdie navigasiebalkvorms. Dit is ook 'n goeie herinnering dat vertikale belyningshulpmiddels gebruik kan word om elemente van verskillende groottes in lyn te bring.

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

Teks

Navbars kan stukkies teks bevat met behulp van .navbar-text. Hierdie klas pas vertikale belyning en horisontale spasiëring vir stringe teks aan.

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

Meng en pas saam met ander komponente en hulpmiddels soos nodig.

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

Kleurskemas

Die tema van die navigasiebalk was nog nooit so maklik nie, danksy die kombinasie van temaklasse en background-colornutsprogramme. Kies uit .navbar-lightvir gebruik met ligte agtergrondkleure, of .navbar-darkvir donker agtergrondkleure. Pas dan aan met .bg-*hulpprogramme.

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

Houers

Alhoewel dit nie nodig is nie, kan jy 'n navigasiebalk in 'n toevou .containerom dit op 'n bladsy te sentreer of een byvoeg om net die inhoud van 'n vaste of statiese boonste navigasiebalk te sentreer .

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

Wanneer die houer binne jou navigasiebalk is, word sy horisontale vulling verwyder by breekpunte laer as jou gespesifiseerde .navbar-expand{-sm|-md|-lg|-xl}klas. Dit verseker dat ons nie onnodig opvulling op laer uitsigpoorte verdubbel wanneer jou navigasiebalk ingevou is nie.

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

Plasing

Gebruik ons ​​posisiehulpmiddels om navigasiebalke in nie-statiese posisies te plaas. Kies tussen vas na bo, vas aan onder, of vas aan bo (blaai saam met die bladsy totdat dit bo bereik, en bly dan daar). Vaste navigasiebalke gebruik position: fixed, wat beteken dat hulle uit die normale vloei van die DOM getrek word en dalk pasgemaakte CSS (bv. padding-topop die <body>) vereis om oorvleueling met ander elemente te voorkom.

Neem ook kennis dat .sticky-topgebruike position: sticky, wat nie ten volle in elke blaaier ondersteun word nie .

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

Responsiewe gedrag

Navbars kan .navbar-toggler, .navbar-collapse, en .navbar-expand{-sm|-md|-lg|-xl}klasse gebruik om te verander wanneer hul inhoud agter 'n knoppie ineenstort. In kombinasie met ander nutsprogramme kan u maklik kies wanneer u spesifieke elemente moet wys of versteek.

Vir navigasiebalke wat nooit ineenstort nie, voeg die .navbar-expandklas op die navigasiebalk by. Vir navigasiebalke wat altyd ineenstort, moenie enige .navbar-expandklas byvoeg nie.

Wissel

Navbar-wisselaars is by verstek linksbelyn, maar sou hulle 'n broer- of susterelement soos 'n volg .navbar-brand, sal hulle outomaties heel regs belyn word. Deur jou opmaak om te keer, sal die plasing van die wisselaar omkeer. Hieronder is voorbeelde van verskillende skakelstyle.

Met geen .navbar-brandvertoon in die laagste breekpunt:

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

Met 'n handelsnaam aan die linkerkant en skakelaar aan die regterkant:

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

Met 'n skakelaar aan die linkerkant en handelsnaam aan die regterkant:

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

Eksterne inhoud

Soms wil jy die invou-inprop gebruik om verborge inhoud elders op die bladsy te aktiveer. Omdat ons inprop werk op die iden data-targetooreenstem, is dit maklik gedoen!

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