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
.navbar
inopindura.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-print
kune.navbar
. Ona kirasi yezvishandiso zvekuratidzira . - Ita shuwa kuwanikwa nekushandisa
<nav>
chinhu kana, kana uchishandisa chimwe chinhu chakajairwa senge<div>
, wedzera arole="navigation"
kune yega navbar kuti uiratidze zvakajeka senzvimbo inocherekedza yevashandisi vetekinoroji inobatsira.
prefers-reduced-motion
nemubvunzo wenhau. Ona chikamu
chakaderedzwa chezvinyorwa zvedu zvekusvikika .
Zvinotsigirwa zvemukati
Navbars inouya neyakavakwa-mukati tsigiro kune mashoma mashoma ezvikamu. Sarudza kubva pane zvinotevera sezvinodiwa:
.navbar-brand
yekambani yako, chigadzirwa, kana zita reprojekiti..navbar-nav
yehurefu hwakazara uye huremu hwekufamba (kusanganisira rutsigiro rwekudonha)..navbar-toggler
yekushandisa neyedu yekudonha plugin uye mamwe mafambiro ekuchinja maitiro..form-inline
kune chero chimiro chekutonga nezviito..navbar-text
yekuwedzera tambo dzakadzika pakati pemavara..collapse.navbar-collapse
yekuisa 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-brand
inogona 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-brand
ingangogara 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>
Nav
Navbar navigation links inovaka pane zvatinosarudza .nav
nekirasi 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- .active
kuratidza peji razvino rinogona kushandiswa zvakananga kune .nav-link
s kana mubereki wavo wepedyo .nav-item
s.
<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-item
uye .nav-link
sezvakaratidzwa 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 .navbar
zvekushandisa 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-color
zvekushandisa. Sarudza kubva .navbar-light
kuti ushandise neyakajeka kumashure mavara, kana .navbar-dark
kune 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 .container
pakati pepeji. Kana kuti iwe unogona kuwedzera mudziyo mukati meiyo .navbar
chete 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-top
pa <body>
) kudzivirira kupindirana nezvimwe zvinhu.
Ziva zvakare kuti .sticky-top
inoshandisa 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-scroll
kune .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-x
inofanana ne auto
, iyo inodyara zvimwe zvakachinjika zvemukati.
Heino muenzaniso navbar uchishandisa .navbar-nav-scroll
ne 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-expand
kirasi pabhara. Kune ma navbar anogara achidhirika, usawedzera chero .navbar-expand
kirasi.
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-brand
kuratidzwa 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 id
uye data-target
nekufananidza, 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-controls
hunhu, inonongedza kune yemukati id
mudziyo. Muchirevo, izvi zvinobvumira vashandisi vetekinoroji yekubatsira kuti vasvetuke vakananga kubva kune toggler kuenda kumudziyo waunodzora-asi tsigiro yeiyi parizvino iri patchy.