Source

Navbar

Zvinyorwa uye mienzaniso yeBootstrap ine simba, inopindura navigation musoro, iyo navbar. Inosanganisira tsigiro yekumaka, kufamba, nezvimwe, kusanganisira rutsigiro rwekudonha kwedu plugin.

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 .

Verenga pamusoro pemuenzaniso uye runyorwa rwezvinotsigirwa zvikamu zviduku.

Zvinotsigirwa zvemukati

MaNavbars anouya neakavakirwa-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="#" 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>

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 akawanda zvinhu, asi anchor inoshanda zvakanyanya sezvo zvimwe zvinhu zvingangoda zvekushandisa makirasi kana tsika masitayipi.

<!-- 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 masitaera 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.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 navigation links inovaka pane zvatinosarudza .navnekirasi yavo yekugadziridza uye inoda kushandiswa kwemakirasi etoggler kuti aite maitiro anoteerera. Kufamba mumabhawa 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" href="#" tabindex="-1" aria-disabled="true">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-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>

Iwe unogona zvakare kushandisa kudonhedza mune yako navbar nav. Mamenu ekudonha 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="#" 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>

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>

Zvekare zvevana zvinhu .navbarmukushandisa flex dhizaini 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 kupeta navbar mukuisa .containerpakati pepeji kana kuwedzera imwe mukati mekuisa pakati chete zviri mukati meiyo yakatarwa 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 yaro yakachinjika 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>

Maitiro ekupindura

Navbars anogona kushandisa .navbar-toggler, .navbar-collapse, uye .navbar-expand{-sm|-md|-lg|-xl}makirasi kuchinja 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 rekufambisa. Kune ma navbar anogara achidhirika, usawedzera chero .navbar-expandkirasi.

Toggler

Navbar togglers inosiiwa-yakamisikidzwa neyakagadzika, 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 mune yakaderera 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" 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>

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

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

Zvekunze zvemukati

Dzimwe nguva iwe unoda kushandisa iyo yekudonha plugin kukonzeresa zvakavanzika zvemukati kumwe pane peji. Nekuti yedu plugin inoshanda pane iduye data-targetnekufananidza, izvo zviri nyore kuita!

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