in English

Navbar

Zvinyorwa uye mienzaniso yeBootstrap ine simba, inopindura navigation musoro, iyo navbar. Inosanganisira tsigiro yemhando, kufamba, kudonha plugin, nezvimwe.

Zvinoshanda sei

Hezvino izvo zvaunoda kuziva usati watanga ne navbar:

  • Navbars inoda kuputirwa neiyo .navbarinopindura .navbar-expand{-sm|-md|-lg|-xl}kudonha uye ruvara chirongwa makirasi.
  • Navbars uye zviri mukati mavo zvinoyerera nekusarudzika. Shandisa zvigubhu zvekusarudza kudzikamisa upamhi hwawo hwakachinjika.
  • Shandisa nzvimbo yedu uye flex utility makirasi ekudzora nzvimbo uye kurongeka mukati menavbar.
  • MaNavbars anopindura nekukasira, asi unogona kuzvishandura zviri nyore kuti uchinje izvozvo. Maitiro ekupindura anoenderana neyedu Collapse JavaScript plugin.
  • Navbars dzakavanzwa nekusarudzika kana ichidhinda. Manikidza kuti adhindwe nekuwedzera .d-printkune .navbar. Ona kirasi yezvishandiso zvekuratidzira .
  • Ita shuwa kuwanikwa nekushandisa <nav>chinhu kana, kana uchishandisa chimwe chinhu chakajairwa senge <div>, wedzera a role="navigation"kune yega navbar kuti uiratidze zvakajeka senzvimbo inocherekedza yevashandisi vetekinoroji inobatsira.
Iyo animation mhedzisiro yechikamu ichi zvinoenderana prefers-reduced-motionnemubvunzo wenhau. Ona chikamu chakaderedzwa chezvinyorwa zvedu zvekusvikika .

Zvinotsigirwa zvemukati

Navbars inouya neyakavakwa-mukati tsigiro kune mashoma mashoma ezvikamu. Sarudza kubva pane zvinotevera sezvinodiwa:

  • .navbar-brandyekambani yako, chigadzirwa, kana zita reprojekiti.
  • .navbar-navyehurefu hwakazara uye huremu hwekufamba (kusanganisira rutsigiro rwekudonha).
  • .navbar-toggleryekushandisa neyedu yekudonha plugin uye mamwe mafambiro ekuchinja maitiro.
  • .form-inlinekune chero chimiro chekutonga nezviito.
  • .navbar-textyekuwedzera tambo dzakadzika pakati pemavara.
  • .collapse.navbar-collapseyekuisa mumapoka nekuviga zvirimo zvemubhara nemubereki.

Heino muenzaniso wezvose zvidiki-zvinosanganisirwa mune inopindura mwenje-themed navbar iyo inongodonha pa lg(hombe) breakpoint.

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

Uyu muenzaniso unoshandisa ruvara ( bg-light) uye spacing ( my-2, my-lg-0, mr-sm-0, my-sm-0) utility makirasi.

Brand

Iyo .navbar-brandinogona kuiswa kune zvakawanda zvinhu, asi anchor inoshanda zvakanyanya, sezvimwe zvinhu zvingangoda makirasi ekushandisa kana masitaera etsika.

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

Kuwedzera mifananidzo kune iyo .navbar-brandingangogara ichida masitaira echinyakare kana zvishandiso kuti ikwane saizi. Heino mimwe mienzaniso yekuratidza.

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

Navbar navigation links inovaka pane zvatinosarudza .navnekirasi yavo yekugadziridza uye inoda kushandiswa kwemakirasi etoggler kuti aite maitiro anoteerera. Kufamba mumabhara kunozokurawo kutora nzvimbo yakatwasuka sezvinobvira kuti uchengetedze zvirimo zvemubhara wako zvakabatana.

Active states-ne- .activekuratidza peji razvino rinogona kushandiswa zvakananga kune .nav-links kana mubereki wavo wepedyo .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">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Uye nekuti isu tinoshandisa makirasi kune edu navs, unogona kudzivirira iyo rondedzero-yakavakirwa maitiro zvachose kana uchida.

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

Iwe unogona zvakare kushandisa kudonhedza mune yako navbar. Mamenu ekudonhedza anoda chinhu chekuputira chekumisikidza, saka iva nechokwadi chekushandisa zvakaparadzana uye nested zvinhu .nav-itemuye .nav-linksezvakaratidzwa pazasi.

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

Mafomu

Isa zvakasiyana-siyana zvidzoreso zvemafomu uye zvikamu mukati mebhara rekufambisa rine .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>

Pakarepo zvinhu zvemwana .navbarzvekushandisa flex marongero uye zvichagara kune justify-content: space-between. Shandisa mamwe flex utilities sezvinodiwa kugadzirisa maitiro aya.

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

Mapoka ekuisa anoshanda, zvakare:

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

Mabhatani akasiyana-siyana anotsigirwa sechikamu cheaya mafomu e navbar, zvakare. Ichi zvakare chiyeuchidzo chikuru chekuti vertical alignment utilities inogona kushandiswa kuwiriranisa hukuru hwakasiyana zvinhu.

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

Text

Navbar inogona kunge iine zvidimbu zvemavara nerubatsiro rwe .navbar-text. Kirasi iyi inogadzirisa kurongeka kwakatwasuka uye nzvimbo yakachinjika yetambo dzemavara.

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

Sanganisa uye sanganisa nezvimwe zvikamu uye zvishandiso sezvinodiwa.

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

Zvirongwa zvemavara

Theming the navbar haina kumbobvira yave nyore nekuda kwekusanganiswa kwemakirasi ezvidzidzo uye background-colorzvekushandisa. Sarudza kubva .navbar-lightkuti ushandise neyakajeka kumashure mavara, kana .navbar-darkkune yakasviba kumashure mavara. Zvadaro, gadzirisa .bg-*nezvinoshandiswa.

<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

Kunyangwe zvisingadiwe, unogona kuputira navbar mukuisa .containerpakati pepeji. Kana kuti iwe unogona kuwedzera mudziyo mukati meiyo .navbarchete pakati pezviri mukati meiyo yakagadziriswa kana static yepamusoro navbar .

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

Kana mudziyo uri mukati menavbar yako, padding yayo yakatwasuka inobviswa pamabreakpoints akaderera pane yako .navbar-expand{-sm|-md|-lg|-xl}kirasi yakatarwa. Izvi zvinovimbisa kuti hatisi kupeta kaviri pakupeda zvisina basa panzvimbo dzezasi dzekutarisa kana navbar yako yadhirika.

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

Placement

Shandisa zvinzvimbo zvedu zvekushandisa kuisa navbars munzvimbo dzisiri-static. Sarudza kubva kune yakagadziriswa kusvika kumusoro, yakagadziriswa kusvika pasi, kana yakanamatira kumusoro (mipumburu ine peji kusvikira yasvika kumusoro, zvino inogara ipapo). Fixed navbars use position: fixed, zvichireva kuti anodhonzwa kubva kune yakajairwa kuyerera kweDOM uye angangoda tsika CSS (semuenzaniso, padding-toppa <body>) kudzivirira kupindirana nezvimwe zvinhu.

Ziva zvakare kuti .sticky-topinoshandisa position: sticky, iyo isingatsigirwe zvizere mubrowser yega yega .

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

Kupuruzira

Wedzera .navbar-nav-scrollkune .navbar-collapse(kana imwe navbar sub-component) kuti ugone kupenengura wakatwasuka mukati mezvinobatika zviri mukati mebhara rakadonha. Nekumisikidza, kupuruzira kunopinda mukati 75vh(kana 75% yehurefu hwekutarisa), asi iwe unogona kudarika izvo neinline kana tsika masitaera. Pazviteshi zvemahombe kana iyo navbar yawedzerwa, zvirimo zvinoonekwa sezvazvinoita mubharari yekusarudzika.

Ndokumbira utarise kuti maitiro aya anouya neanogona dhiraivha ye overflow--pakuseta overflow-y: auto(inodiwa kupuruzira zvirimo pano), overflow-xinofanana ne auto, iyo inodyara zvimwe zvakachinjika zvemukati.

Heino muenzaniso navbar uchishandisa .navbar-nav-scrollne style="max-height: 100px;", iine mamwe ekuwedzera magineti ekushandisa kune yakakwana nzvimbo.

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

Maitiro ekuteerera

Navbars inogona kushandisa .navbar-toggler, .navbar-collapse, uye .navbar-expand{-sm|-md|-lg|-xl}makirasi kuona kana zvirimo zvadonha kuseri kwebhatani. Mukubatana nezvimwe zvinoshandiswa, unogona kusarudza zviri nyore nguva yekuratidza kana kuviga zvimwe zvinhu.

Kune ma navbar asingambopunzike, wedzera .navbar-expandkirasi pabhara. Kune ma navbar anogara achidhirika, usawedzera chero .navbar-expandkirasi.

Toggler

Navbar togglers dzakasiiwa-dzakamisikidzwa nekukasira, asi kana vakatevera chinhu chehama senge , ivo vanozongoenderana nekurudyi .navbar-brand. Kudzosera markup yako kunodzosera kumashure kuiswa kwetoggler. Pazasi pane mienzaniso yemhando dzakasiyana dzekuchinja.

Pasina .navbar-brandkuratidzwa pane diki breakpoint:

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

Nezita remhando rinoratidzwa kuruboshwe uye toggler kurudyi:

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

Neine toggler kuruboshwe uye zita rechiratidzo kurudyi:

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

Zvekunze zvemukati

Dzimwe nguva iwe unoda kushandisa iyo yekudonha plugin kukonzeresa mudziyo wemukati wemukati unogara kunze kweiyo .navbar. Nekuti yedu plugin inoshanda pane iduye data-targetnekufananidza, izvo zviri nyore kuita!

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

Paunenge uchiita izvi, tinokurudzira kusanganisira yekuwedzera JavaScript kuti ufambise inotarisisa zvine hurongwa kumudziyo kana wavhurwa. Zvikasadaro, vashandisi vekhibhodi nevashandisi veanobatsira matekinoroji vangangove nenguva yakaoma kuwana izvo zvichangoburwa zvemukati - kunyanya kana mudziyo wakavhurwa ukauya pamberi pemugadziri muchimiro chegwaro. Isu tinokurudzirawo kuve nechokwadi chekuti toggler ine aria-controlshunhu, inonongedza kune yemukati idmudziyo. Muchirevo, izvi zvinobvumira vashandisi vetekinoroji yekubatsira kuti vasvetuke vakananga kubva kune toggler kuenda kumudziyo waunodzora-asi tsigiro yeiyi parizvino iri patchy.