Source

Navbar

Dokumintaasje en foarbylden foar Bootstrap's krêftige, responsive navigaasjekoptekst, de navbar. Omfettet stipe foar branding, navigaasje, en mear, ynklusyf stipe foar ús ynstoartplugin.

Hoe't it wurket

Hjir is wat jo witte moatte foardat jo begjinne mei de navbar:

  • Navbars fereaskje in wrapping .navbarmei .navbar-expand{-sm|-md|-lg|-xl}foar responsive ynstoarten en kleur skema klassen.
  • Navbars en har ynhâld binne standert floeiend. Brûk opsjonele konteners om har horizontale breedte te beheinen.
  • Brûk ús spacing- en flex -nutsklassen foar it kontrolearjen fan ôfstân en ôfstimming binnen navbars.
  • Navbars binne standert responsyf, mar jo kinne se maklik oanpasse om dat te feroarjen. Responsyf gedrach hinget ôf fan ús JavaScript-plugin ynklapt.
  • Navbars binne standert ferburgen by it printsjen. Tsjinje se om te printsjen troch ta te foegjen .d-printoan de .navbar. Sjoch de display utility klasse.
  • Fersekerje tagonklikens troch in <nav>elemint te brûken of, as jo in mear generyk elemint brûke, lykas in <div>, foegje in role="navigation"oan elke navbar ta om it eksplisyt te identifisearjen as in landmarkregio foar brûkers fan assistinte technologyen.

It animaasje-effekt fan dizze komponint is ôfhinklik fan 'e prefers-reduced-motionmediafraach. Sjoch de seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .

Lês fierder foar in foarbyld en list mei stipe subkomponinten.

Stipe ynhâld

Navbars komme mei ynboude stipe foar in hânfol sub-komponinten. Kies út de folgjende as nedich:

  • .navbar-brandfoar jo bedriuw, produkt of projektnamme.
  • .navbar-navfoar in folsleine hichte en lichtgewicht navigaasje (ynklusyf stipe foar dropdowns).
  • .navbar-togglerfoar gebrûk mei ús ynstoartplugin en oare navigaasje-wikselgedrach .
  • .form-inlinefoar elke foarm kontrôles en aksjes.
  • .navbar-textfoar it tafoegjen fan fertikaal sintraal teksttekens.
  • .collapse.navbar-collapsefoar groepearjen en ferbergjen navbar ynhâld troch in âlder brekpunt.

Hjir is in foarbyld fan alle sub-komponinten opnommen yn in responsive ljocht-tema navbar dy't automatysk ynstoart by it lg(grutte) brekpunt.

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

Dit foarbyld brûkt kleur ( bg-light) en spacing ( my-2, my-lg-0, mr-sm-0, my-sm-0) nutklassen.

Merk

De .navbar-brandkin tapast wurde op de measte eleminten, mar in anker wurket it bêste, om't guon eleminten nutklassen as oanpaste stilen fereaskje kinne.

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

It tafoegjen fan ôfbyldings oan 'e .navbar-brandsil wierskynlik altyd oanpaste stilen of nutsbedriuwen nedich wêze foar juste grutte. Hjir binne wat foarbylden om te demonstrearjen.

<!-- 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-navigaasjekeppelings bouwe op ús .navopsjes mei har eigen modifier-klasse en fereaskje it gebrûk fan toggler-klassen foar juste responsive styling. Navigaasje yn navbars sil ek groeie om safolle mooglik horizontale romte yn te nimmen om jo navbar-ynhâld feilich ôfstimd te hâlden.

Aktive steaten - mei .active- om oan te jaan dat de aktuele side direkt kin wurde tapast op .nav-links of har direkte âlder .nav-items.

<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 om't wy klassen brûke foar ús navs, kinne jo de list-basearre oanpak folslein foarkomme as jo wolle.

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

Jo kinne ek dropdowns brûke yn jo navigaasjebalke. Dropdown-menu's fereaskje in wrapping elemint foar posysjonearring, dus wês wis dat jo aparte en nestele eleminten brûke foar .nav-itemen .nav-linklykas hjirûnder werjûn.

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

Formulieren

Pleats ferskate foarmkontrôles en komponinten binnen in navigaasjebalke mei .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>

Direkte bern eleminten yn .navbargebrûk flex layout en sil standert oan justify-content: space-between. Brûk ekstra flex-helpprogramma's as nedich om dit gedrach oan te passen.

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

Ynputgroepen wurkje ek:

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

Ferskate knoppen wurde ek stipe as ûnderdiel fan dizze navbarfoarmen. Dit is ek in geweldige herinnering dat nutsbedriuwen foar fertikale ôfstimming kinne wurde brûkt om eleminten fan ferskate grutte út te rjochtsjen.

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

Tekst

Navbars kinne stikjes tekst befetsje mei help fan .navbar-text. Dizze klasse past de fertikale ôfstimming en horizontale ôfstân oan foar tekststrings.

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

Mix en oerien mei oare komponinten en nutsbedriuwen as nedich.

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

Kleurskema's

Tema's fan de navbar hat noait makliker west troch de kombinaasje fan temaklassen en background-colornutsfoarsjenningen. Kies út .navbar-lightfoar gebrûk mei ljochte eftergrûnkleuren, of .navbar-darkfoar donkere eftergrûnkleuren. Pas dan oan mei .bg-*helpprogramma's.

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

Containers

Hoewol it net fereaske is, kinne jo in navigaasjebalke yn in wikkelje .containerom it op in side te sintrum of ien taheakje om allinich de ynhâld fan in fêste of statyske topnavigaasje te sintrum .

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

As de kontener binnen jo navbar is, wurdt syn horizontale padding fuortsmiten by brekpunten leger as jo oantsjutte .navbar-expand{-sm|-md|-lg|-xl}klasse. Dit soarget derfoar dat wy net ferdûbelje op padding ûnnedich op legere viewports as jo navbar is ynstoart.

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

Pleatsing

Brûk ús posysje-hulpprogramma's om navbars yn net-statyske posysjes te pleatsen. Kies út fêst oan 'e boppekant, fêst oan' e ûnderkant, of oan 'e boppekant plakke (scrollt mei de side oant it de top berikt, bliuwt dan dêr). Fêste navbars brûke position: fixed, wat betsjut dat se út 'e normale stream fan' e DOM lutsen wurde en kinne oanpaste CSS (bygelyks padding-topop 'e <body>) fereaskje om oerlaap mei oare eleminten te foarkommen.

Merk ek op dat .sticky-topbrûkt wurdt position: sticky, dy't net folslein yn elke browser stipe wurdt .

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

Responsive gedrach

Navbars kinne .navbar-toggler, .navbar-collapse, en .navbar-expand{-sm|-md|-lg|-xl}klassen brûke om te feroarjen as har ynhâld efter in knop ynstoart. Yn kombinaasje mei oare nutsbedriuwen kinne jo maklik kieze wannear't jo bepaalde eleminten sjen litte of ferbergje.

Foar navbars dy't nea ynstoarte, foegje de .navbar-expandklasse ta oan 'e navbar. Foar navbars dy't altyd ynstoarten, foegje gjin .navbar-expandklasse ta.

Toggler

Navbar-wikselers binne standert linksôfstimd, mar as se in sibling-elemint folgje lykas in .navbar-brand, wurde se automatysk rjochts rjochts rjochts. It omkearjen fan jo markup sil de pleatsing fan 'e toggler omkeare. Hjirûnder binne foarbylden fan ferskate skeakelstilen.

Mei gjin .navbar-brandwerjûn yn leechste brekpunt:

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

Mei in merknamme werjûn oan de linkerkant en toggler oan de rjochterkant:

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

Mei in toggler links en merknamme rjochts:

<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 ynhâld

Soms wolle jo de ynklapplugin brûke om ferburgen ynhâld op oare plakken op 'e side te triggerjen. Omdat ús plugin wurket op de iden data-targetmatching, dat is maklik dien!

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