Source

Navbar

Skjöl og dæmi fyrir öflugan, móttækilegan leiðsagnarhaus Bootstrap, navbarinn. Inniheldur stuðning við vörumerki, siglingar og fleira, þar á meðal stuðning við samrunaviðbótina okkar.

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 .

Lestu áfram til að fá dæmi og lista yfir studda undirþætti.

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 hvers kyns stýringar og aðgerðir.
  • .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 undirhluti 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="#" 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>

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

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ð myndina .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.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 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" href="#" tabindex="-1" aria-disabled="true">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-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>

Þú getur líka notað fellivalmyndir í navbar nav þinni. 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="#" 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>

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 börn þæ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 krafist geturðu sett siglingastiku inn í .containertil að miðja hana á síðu eða bætt við einni innan til að miðja aðeins innihald föstrar 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>

Móttækileg hegðun

Navbars geta notað .navbar-toggler, .navbar-collapse, og .navbar-expand{-sm|-md|-lg|-xl}flokka til að breyta þegar innihald þ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 í lægsta brotpunkti:

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

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

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

Ytra efni

Stundum viltu nota samrunaviðbótina til að kalla fram falið efni annars staðar á síðunni. Vegna þess að viðbótin okkar virkar á idog data-targetsamsvörun, er það auðveldlega gert!

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