Navbar

Skjöl og dæmi fyrir öflugan, móttækilegan leiðsagnarhaus Bootstrap, navbarinn. Inniheldur stuðning við vörumerki, siglingar, samdráttarviðbætur og fleira.

Hvernig það virkar

Hér er það sem þú þarft að vita áður en þú byrjar að nota navbar:

Navbars krefjast umbúðir .navbarmeð .navbar-expand{-sm|-md|-lg|-xl}fyrir móttækilega hrynjandi og litasamsetningu flokka.
Navbars og innihald þeirra er sjálfgefið fljótandi. Notaðu valfrjálsa ílát til að takmarka lárétta breidd þeirra.
Notaðu bil- og sveigjanlegu tólaflokkana okkar til að stjórna bili og jöfnun innan siglingastikanna.
Navbars eru sjálfgefið móttækilegur, en þú getur auðveldlega breytt þeim til að breyta því. Móttækileg hegðun fer eftir Collapse JavaScript viðbótinni okkar.
Navbars eru sjálfgefið falin við prentun. Þvingaðu þá til prentunar með því að bæta .d-printvið .navbar. Sjá skjábúnaðarflokkinn .
Tryggðu aðgengi með því að nota <nav>þátt eða, ef notaður er almennari þáttur eins og <div>, bættu við a role="navigation"við hverja siglingastiku til að auðkenna það sem kennileiti svæði fyrir notendur hjálpartækni.

Hreyfiáhrif þessa íhluts eru háð prefers-reduced-motionmiðlunarfyrirspurninni. Sjá kaflann um minni hreyfingu í aðgengisskjölunum okkar .

Stutt efni

Navbars koma með innbyggðum stuðningi fyrir handfylli af undirhlutum. Veldu úr eftirfarandi eftir þörfum:

.navbar-brandfyrir fyrirtæki þitt, vöru eða verkefnisheiti.
.navbar-navfyrir fulla hæð og létta siglingu (þar á meðal stuðning við fellilista).
.navbar-togglertil notkunar með samrunaviðbótinni okkar og annarri hegðun til að skipta um siglingar .
.form-inlinefyrir hvaða form stjórna og aðgerða sem er.
.navbar-texttil að bæta við lóðrétt miðjum textastreng.
.collapse.navbar-collapsetil að flokka og fela innihald siglingastikunnar með foreldrisbrotspunkti.

Hér er dæmi um alla undiríhluti sem eru innifalin í móttækilegri ljósþema siglingastiku sem hrynur sjálfkrafa saman við lg(stóra) brotpunktinn.

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

Þetta dæmi notar lita ( bg-light) og bil ( my-2, my-lg-0, mr-sm-0, my-sm-0) gagnaflokka.

Merki

Hægt .navbar-brander að nota þetta á flesta þætti, en akkeri virkar best, þar sem sumir þættir gætu þurft gagnsemisflokka eða sérsniðna stíl.

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

Að bæta myndum við .navbar-brandmun líklega alltaf krefjast sérsniðinna stíla eða tóla í réttri stærð. Hér eru nokkur dæmi til að sýna fram á.

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

Navbar siglingatenglar byggja á .navvalmöguleikum okkar með sínum eigin breytingaflokki og krefjast notkunar á skiptaflokkum fyrir rétta móttækilega stíl. Leiðsögn á siglingastikum mun einnig stækka og taka eins mikið lárétt pláss og hægt er til að halda innihaldi siglingastikunnar á öruggan hátt.

Virkar stöður—með .active—til að gefa til kynna núverandi síðu er hægt að nota beint á .nav-links eða nánasta foreldra þeirra .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>

Og vegna þess að við notum námskeið fyrir siglingar okkar, geturðu forðast listatengda nálgun algjörlega ef þú vilt.

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

Þú getur líka notað fellivalmyndir í navbarinn þinn. Fellivalmyndir krefjast umbúðaeiningar fyrir staðsetningu, svo vertu viss um að nota aðskilda og hreidda þætti fyrir .nav-itemog .nav-linkeins og sýnt er hér að neðan.

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

Eyðublöð

Settu ýmsar eyðublaðastýringar og íhluti í siglingastiku með .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>

Strax undirlagsþættir í .navbarnotkun sveigjanlegt skipulag og verða sjálfgefið justify-content: space-between. Notaðu viðbótar flex tól eftir þörfum til að stilla þessa hegðun.

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

Inntakshópar vinna líka:

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

Ýmsir hnappar eru einnig studdir sem hluti af þessum navbar eyðublöðum. Þetta er líka frábær áminning um að hægt er að nota lóðrétt jöfnunartæki til að samræma mismunandi stærðir.

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

Texti

Navbars geta innihaldið bita af texta með hjálp .navbar-text. Þessi flokkur aðlagar lóðrétta röðun og lárétt bil fyrir textastrengi.

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

Blandaðu saman við aðra íhluti og tól eftir þörfum.

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

Litasamsetning

Þema navbar hefur aldrei verið auðveldara þökk sé samsetningu þemaflokka og background-colortóla. Veldu úr .navbar-lighttil notkunar með ljósum bakgrunnslitum, eða .navbar-darkfyrir dökka bakgrunnsliti. Síðan skaltu sérsníða með .bg-*tólum.

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

Gámar

Þó að það sé ekki nauðsynlegt geturðu vefstýrt stýristiku inn til .containerað miðja hana á síðu. Eða þú getur bætt við gámi inni í .navbartil að miðja aðeins innihald fastrar eða kyrrstæðrar toppstýringar .

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

Þegar gámurinn er innan stýristikunnar þinnar er lárétt bólstrun hans fjarlægð við brotpunkta sem eru lægri en tilgreindur .navbar-expand{-sm|-md|-lg|-xl}flokkur þinn. Þetta tryggir að við séum ekki að tvöfalda uppfyllingu að óþörfu á neðri útsýnisgluggum þegar stýristikan þín er hrundin saman.

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

Staðsetning

Notaðu stöðutólin okkar til að setja siglingastikur í óstöðugar stöður. Veldu úr föstum að toppnum, föstum neðst eða límd við toppinn (flettir með síðunni þar til hún nær efst og helst þar). Fastar navbars nota position: fixed, sem þýðir að þær eru teknar úr venjulegu flæði DOM og gætu þurft sérsniðna CSS (td padding-topá <body>) til að koma í veg fyrir skörun við aðra þætti.

Athugaðu líka að .sticky-topnotar position: sticky, sem er ekki að fullu studd í öllum vafra .

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

Skruna

Bættu .navbar-nav-scrollvið .navbar-collapse(eða öðrum undirhluta stýrisstikunnar) til að virkja lóðrétta flun innan breytanlegs innihalds á hruninni siglingastiku. Sjálfgefið er að fletta byrjar á 75vh(eða 75% af útsýnishæðinni), en þú getur hnekkt því með innbyggðum eða sérsniðnum stílum. Í stærri útsýnisgluggum þegar siglingastikan er stækkuð mun efni birtast eins og það gerir á sjálfgefna siglingastiku.

Vinsamlegast athugaðu að þessari hegðun fylgir hugsanlegur galli af overflow— þegar stilling overflow-y: auto(nauðsynlegt til að fletta innihaldinu hér), overflow-xjafngildir auto, sem mun skera eitthvað lárétt efni.

Hér er dæmi um navbar sem notar .navbar-nav-scrollmeð style="max-height: 100px;", með nokkrum auka spássíutólum fyrir besta bilið.

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

Móttækileg hegðun

Navbars geta notað .navbar-toggler, .navbar-collapse, og .navbar-expand{-sm|-md|-lg|-xl}flokka til að ákvarða hvenær efni þeirra hrynur á bak við hnapp. Ásamt öðrum tólum geturðu auðveldlega valið hvenær á að sýna eða fela tiltekna þætti.

Fyrir siglingastikur sem aldrei hrynja, bætið .navbar-expandbekknum við á stýristikunni. Ekki bæta við neinum .navbar-expandflokki fyrir siglingastikur sem hrynja alltaf.

Toggler

Navbar víxlar eru sjálfgefið vinstrijafnaðir, en ef þeir fylgja systkinaeiningu eins og .navbar-brand, verða þeir sjálfkrafa stilltir lengst til hægri. Að snúa merkingunni við mun snúa við staðsetningu skipta. Hér að neðan eru dæmi um mismunandi skiptistíla.

Með ekkert .navbar-brandsýnt við minnsta brot:

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

Með vörumerki til vinstri og skipta til hægri:

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

Með rofi til vinstri og vörumerki til hægri:

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

Ytra efni

Stundum viltu nota samrunaviðbótina til að kveikja á gámaeiningu fyrir efni sem er skipulagslega staðsett fyrir utan .navbar. Vegna þess að viðbótin okkar virkar á idog data-targetsamsvörun, er það auðveldlega gert!

Samsett efni

Hægt að skipta um með vörumerkinu 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>

Þegar þú gerir þetta, mælum við með því að hafa viðbótar JavaScript til að færa fókusinn forritunarlega í ílátið þegar það er opnað. Annars munu lyklaborðsnotendur og notendur hjálpartækni líklega eiga erfitt með að finna nýlega opinberað efnið - sérstaklega ef ílátið sem var opnað kemur á undan skiptanum í uppbyggingu skjalsins. Við mælum líka með því að ganga úr skugga um að skiptarinn hafi aria-controlseiginleikann, sem bendir idá innihaldsílátið. Fræðilega séð gerir þetta notendum hjálpartækni kleift að hoppa beint úr víxlinum yfir í ílátið sem það stjórnar - en stuðningur við þetta er eins og er ansi misjafn.