Navbar
Dukumeentiyo iyo tusaalooyin loogu talagalay Bootstrap's awood badan, madax-wareejin ka jawaabaya, navbar. Waxaa ku jira taageerada summaynta, navigation, plugin burburay, iyo in ka badan.
Sida ay u shaqeyso
Waa kuwan waxa aad u baahan tahay inaad ogaato ka hor intaadan bilaabin navbar:
- Navbars-ku waxay u baahan yihiin in lagu duubo burburka jawaaba
.navbar
leh.navbar-expand{-sm|-md|-lg|-xl}
iyo fasallada nidaamka midabka . - Navbars iyo waxa ku jira waa dareere ahaan. Isticmaal weel ikhtiyaari ah si aad u xaddiddo ballacooda jiifka ah.
- U isticmaal kala dheeraynta iyo fasallada utility-ga dabacsan si aad u xakamayso kala dheeraynta iyo toosinta navbars gudahooda.
- Navbars si toos ah ayey uga jawaabaan, laakiin si fudud ayaad u beddeli kartaa si aad taas u beddesho. Dabeecada jawaab celinta waxay ku xiran tahay Burburinta JavaScript plugin.
- Navbars si toos ah ayaa loo qariyaa marka la daabacayo. Ku qas in la daabaco adoo ku
.d-print
daraya.navbar
. Eeg fasalka utility bandhigay . - Hubi gelitaanka adigoo isticmaalaya shay
<nav>
ama, haddii la isticmaalayo curiye ka badan sida a<div>
, ku darrole="navigation"
navbar kasta si aad si cad ugu aqoonsato inuu yahay gobol calaamad u ah isticmaalayaasha tignoolajiyada caawinta.
prefers-reduced-motion
waydiinta warbaahinta. Eeg
qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .
Waxyaabaha la taageeray
Navbars waxay la yimaadaan taageero ku dhisan qayb yar oo ka kooban qaybo hoose. Ka dooro kuwa soo socda haddii loo baahdo:
.navbar-brand
ee shirkaddaada, alaabtaada, ama magaca mashruuca..navbar-nav
loogu talagalay socodka dhererka buuxa iyo fududaanta (ay ku jirto taageerada hoos u dhaca)..navbar-toggler
si loogu isticmaalo pluginkeena burburay iyo dabeecadaha kale ee leexinta ..form-inline
qaab kasta oo la xakameeyo iyo ficilada..navbar-text
si loogu daro xardho qoraal ah oo toosan..collapse.navbar-collapse
kooxaynta iyo qarinta waxa ku jira navbar barta waalidka.
Waa kuwan tusaale dhammaan qaybaha-hoosaadka ee lagu daray navbar-fudud iftiin leh oo si toos ah ugu dunta meesha lg
(weyn).
<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>
Tusaalahani waxa uu isticmaalaa midab ( bg-light
) iyo kala dheerayn ( my-2
, my-lg-0
, mr-sm-0
) my-sm-0
fasalada utility.
Summada
Midda .navbar-brand
waxaa lagu dabaqi karaa inta badan walxaha, laakiin barroosintu si fiican ayey u shaqeysaa, maadaama walxaha qaar ay u baahan karaan fasalo utility ama qaabab gaar ah.
<!-- 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>
Ku darista sawirada .navbar-brand
waxay u badan tahay inay had iyo jeer u baahan tahay qaabab gaar ah ama utility si ay u cabbiraan si sax ah. Waa kuwan tusaalooyin lagu muujinayo.
<!-- 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
Isku xirka navbar navigation waxay ku dhismaan .nav
ikhtiyaarkayaga fasalkooda wax ka beddelka waxayna u baahan yihiin isticmaalka fasallada toggler si habayn habboon looga jawaabo. Navigation in navbars sidoo kale kori doonaa si ay u qabsadaan inta badan oo bannaan oo siman inta suurtogalka ah si ay u dhawrto ka kooban navbar aad la siman yahay.
Dawladaha fir-fircoon ee leh .active
-si loo muujiyo bogga hadda jira waxaa si toos ah loogu dabaqi karaa .nav-link
s ama waalidkooda dhow .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">Disabled</a>
</li>
</ul>
</div>
</nav>
Iyo sababta oo ah waxaan u isticmaalnaa fasalada maraakiibtayada, waxaad ka fogaan kartaa habka liiska ku saleysan gabi ahaanba haddii aad rabto.
<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>
Waxa kale oo aad isticmaali kartaa hoos-u-dhacyada navbar-kaaga. Liiska hoos-u-dhaca wuxuu u baahan yahay cunsur wax lagu duubo si loo meeleeyo, markaa hubso inaad isticmaasho walxo gaar ah oo buul leh .nav-item
iyo .nav-link
sida hoos ku cad.
<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>
Foomamka
Dhig kontaroolo kala duwan iyo qaybo kala duwan gudaha navbar leh .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>
Cunsurka ilmaha ee degdega ah ee .navbar
isticmaalka qaabka dabacsanaanta oo ku dhici doona justify-content: space-between
. Isticmaal qalab dabacsan oo dheeri ah markaad u baahan tahay si aad u hagaajiso dhaqankan.
<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>
Kooxaha wax-gelinta ayaa sidoo kale shaqeeya:
<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>
Badhamada kala duwan ayaa sidoo kale lagu taageeraa qayb ka mid ah foomamka navbar. Tani waxay sidoo kale xusuusin weyn u tahay in utility-ka toosan ee toosan loo isticmaali karo in lagu toosiyo walxaha kala duwan.
<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>
Qoraal
Navbars waxaa laga yaabaa inay ku jiraan qaybo qoraal ah iyadoo la kaashanayo .navbar-text
. Fasalkani wuxuu hagaajiyaa toosinta toosan iyo kala dheeraynta toosan ee xargaha qoraalka.
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
Ku qas oo ku dhig qaybaha kale iyo adeegyada sida loo baahdo.
<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>
Nidaamyada midabka
Dulucda navbar-ka waligeed ma fududa iyada oo ay ugu wacan tahay isku darka xiisadaha mawduuca iyo background-color
adeegyada. Ka dooro .navbar-light
isticmaalka midabada asalka ah ee iftiinka, ama .navbar-dark
midabada asalka madow. Ka dib, ku beddel .bg-*
adeegyada.
<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>
Konteenarada
Inkasta oo aan loo baahnayn, waxaad ku duubi kartaa navbar a .container
si aad u dhex dhigto bogga. Ama waxaad ku dari kartaa weel gudaha gudaha ah .navbar
oo kaliya dhexda ugu jira waxa ku jira navbar sare oo go'an ama taagan .
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
Marka weelku ku dhex jiro navbarkaaga, suufkiisa jiifka ah ayaa laga saarayaa meelaha jaban ee ka hooseeya .navbar-expand{-sm|-md|-lg|-xl}
fasalkaaga cayiman. Tani waxay xaqiijinaysaa inaanaan labanlaabin suufka aan loo baahnayn ee meelaha hoose marka navbar kaaga uu burburay.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Meelaynta
Isticmaal qalabkayada booska si aad navbars ugu dhejiso boosaska aan joogsiga lahayn. Ka dooro mid go'an ilaa sare, go'an xagga hoose, ama ku dheggan xagga sare (ku duub bogga ilaa ay ka gaadhayso xagga sare, ka dibna halkaa ku sii jir). Navbars go'an ayaa isticmaala position: fixed
, taasoo la macno ah in laga soo jiiday socodka caadiga ah ee DOM waxaana laga yaabaa inay u baahdaan CSS caado ah (tusaale, padding-top
on the <body>
) si looga hortago isku dhafka walxaha kale.
Sidoo kale ogow .sticky-top
isticmaalkaas position: sticky
, kaas oo aan si buuxda u taageersanayn browser kasta .
<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>
Duubista
.navbar-nav-scroll
Ku dar .navbar-collapse
(ama qayb-hoosaadka navbar kale) si aad awood ugu yeelatid rogid toosan gudaha waxa ku jira beddelka navbar burburay. Sida caadiga ah, 75vh
rog-rogiddu waxay ku bilaabataa (ama 75% ee dhererka daawashada), laakiin waxaad taas kaga takhalusi kartaa qaababka khad toosan ama caadada ah. Goobaha waaweyn ee daawashada marka navbar la balaadhiyo, waxa ku jira waxa ay ka soo muuqan doonaan sida navbar caadiga ah.
Fadlan ogow in hab-dhaqankani uu la yimaado dib-u-dhac suurtagal ah oo ah — overflow
marka dejinta overflow-y: auto
(loo baahan yahay in lagu rogo waxa ku jira halkan), overflow-x
waxa ay u dhigantaa auto
, kaas oo goosan doona qayb toosan.
Waa kuwan tusaale navbar la isticmaalayo .navbar-nav-scroll
, style="max-height: 100px;"
oo wata qaar ka mid ah utility margin dheeraad ah ee kala dheeraynta ugu wanaagsan.
<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>
Dabeecadaha ka jawaaba
Navbars waxay isticmaali karaan .navbar-toggler
, .navbar-collapse
, iyo .navbar-expand{-sm|-md|-lg|-xl}
fasallo si ay u go'aamiyaan marka nuxurkoodu ku dumo badhan gadaashiisa. Marka lagu daro tas-hiilaadka kale, waxaad si fudud u dooran kartaa marka aad muujinayso ama qarinayso waxyaabo gaar ah.
Navbars aan waligood dumin, ku dar .navbar-expand
fasalka navbar-ka. Navbar-yada had iyo jeer burbura, ha ku darin wax .navbar-expand
fasal ah.
Toggler
Togglers Navbar si toos ah ayay bidix u toosan yihiin, laakiin haddii ay raacaan walxaha walaalaha ah sida a .navbar-brand
, waxay si toos ah ula toosi doonaan midigta fog. Dib u noqoshada calaamadayntaada waxay beddeli doontaa meelaynta toggler-ka. Hoos waxaa ah tusaalayaal qaababka beddelka ee kala duwan.
Iyadoo aan .navbar-brand
lagu tusin meesha ugu yar:
<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>
Leh magaca summada oo ka muuqda bidix iyo toggler dhanka midig:
<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>
Ku-rogeeyaha bidix iyo magaca summada ee midig:
<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>
Waxyaabaha dibadda
Mararka qaarkood waxaad rabtaa inaad isticmaasho plugin burburka si aad u kiciso curiyaha weelka ee nuxurka qaab ahaan u fadhiya meel ka baxsan .navbar
. id
Sababtoo ah pluginkeena wuxuu ku shaqeeyaa data-target
isbarbardhigga, taas si fudud ayaa loo sameeyaa!
<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>
Markaad tan sameyso, waxaan kugula talineynaa inaad ku darto JavaScript dheeraad ah si aad barnaamij ahaan diirada ugu wareejiso weelka marka la furo. Haddii kale, isticmaalayaasha kiiboodhka iyo isticmaalayaasha tignoolajiyada caawinta waxay u badan tahay inay ku adkaan doonto helista waxa cusub ee la daaha ka qaaday - gaar ahaan haddii weelka la furay uu ka hor yimaado beddelaha qaab dhismeedka dukumeentiga. Waxaan sidoo kale ku talinaynaa in la hubiyo in toggler-ku uu leeyahay sifada aria-controls
, iyadoo tilmaamaysa id
weelka ka kooban yahay. Aragti ahaan, tani waxay u oggolaanaysaa isticmaalayaasha tignoolajiyada caawinta inay si toos ah uga boodaan toggler-ka oo ay u gudbaan weelka ay gacanta ku hayso-laakin taageerada tani hadda aad bay u yar tahay.