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.

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

Þ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.1/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.1/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="#">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="#">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: 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="#">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="#">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="#">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>