Navbar
Belgekirin û nimûneyên ji bo sernavê navîgasyonê ya hêzdar, bersivdar a Bootstrap, navbar. Piştgiriya ji bo nîşankirin, navîgasyon, pêveka hilweşandinê, û hêj bêtir vedihewîne.
Çawa dixebite
Li vir tiştê ku hûn hewce ne ku zanibin berî ku hûn dest bi navbarê bikin ev e:
- Navbar ji bo qutbûna bersivdar û dersên nexşeya rengîn pêdivî bi pêçekê
.navbar
heye ..navbar-expand{-sm|-md|-lg|-xl}
- Navbar û naveroka wan ji hêla xwerû ve şil in. Konteynirên vebijarkî bikar bînin da ku firehiya wan a horizontal sînordar bikin.
- Ji bo kontrolkirina cihêbûn û lihevhatina di navbaran de dersên meya ferq û kargêriya nerm bikar bînin .
- Navbar ji hêla xwerû ve bersivdar in, lê hûn dikarin bi hêsanî wan biguhezînin da ku wê biguhezînin. Tevgera bersivdar bi pêveka meya Collapse JavaScript ve girêdayî ye.
- Dema çapkirinê navbar ji hêla xwerû ve têne veşartin. Bi zêdekirina wan bi zorê çap
.d-print
bikin.navbar
. Binêre çîna karûbarê nîşankirinê. - Bi karanîna
<nav>
hêmanek ve gihîştinê piştrast bikin an jî, heke hêmanek gelemperîtir wekî , bikar bînin, navbarek li her navbarek<div>
zêde bikin da ku wê bi eşkere wekî herêmek nîşanek ji bo bikarhênerên teknolojiyên arîkar destnîşan bikin.role="navigation"
prefers-reduced-motion
medyayê ve girêdayî ye. Binêre
beşa tevgera kêmkirî ya belgeya gihîştina me .
Naveroka piştgirî
Navbar ji bo çend hêmanan bi piştgirîya çêkirî tê. Li gorî hewcedariyê ji van jêrîn hilbijêrin:
.navbar-brand
ji bo pargîdaniya we, hilber, an navê projeya we..navbar-nav
ji bo navîgasyonek tije-bilind û sivik (tevî piştgirîya dakêşan)..navbar-toggler
ji bo karanîna bi pêveka meya hilweşandinê û tevgerên din ên guheztina navîgasyonê re..form-inline
ji bo her cûre kontrol û çalakiyan..navbar-text
ji bo lêzêdekirina rêzikên nivîsê yên vertîkal navendî..collapse.navbar-collapse
ji bo komkirin û veşartina naveroka navbarê ji hêla xala veqetandinê ya dêûbav.
Li vir mînakek ji hemî jêr-pêkhatan hene ku di navbarek bi mijara ronahiyê ya bersivdar de hene ku bixweber li xala lg
veqetandinê (mezin) hilweşe.
<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>
Ev nimûne çînên karûbar reng ( bg-light
) û dûr ( my-2
, my-lg-0
, mr-sm-0
, ) bikar tîne.my-sm-0
Şanika şewatê
Ew .navbar-brand
dikare li piraniya hêmanan were sepandin, lê ankerek çêtirîn dixebite, ji ber ku hin hêman dibe ku hewceyê dersên karûbar an şêwazên xwerû hewce bike.
<!-- 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>
Zêdekirina wêneyan li .navbar-brand
wê belkî her gav hewce dike ku şêwazên xwerû an karûbarên xwerû bi mezinahiya rast hewce bike. Li vir çend nimûne hene ku nîşan bidin.
<!-- 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
Zencîreyên navîgasyonê .nav
yên navbarê li ser vebijarkên me bi çîna xweya guhêrbar ava dikin û ji bo şêwazê bersivdar rast karanîna dersên veguheztinê hewce dikin . Navîgasyon di navbaran de dê di heman demê de mezin bibe da ku bi qasî ku pêkan cîhê horizontî dagir bike da ku naveroka navbara we bi ewlehî li hev bihêle.
Dewletên çalak-bi-ji .active
bo nîşankirina rûpela heyî dikare rasterast li .nav-link
s an s-yên dêûbavên wan ên yekser were sepandin .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>
Û ji ber ku em dersan ji bo navên xwe bikar tînin, heke hûn bixwazin hûn dikarin ji nêzîkatiya bingehîn-lîsteyê bi tevahî dûr bixin.
<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>
Her weha hûn dikarin di navbara xwe de dakêşan bikar bînin. Pêşekên daketinê ji bo pozîsyonê hêmanek pêçandî hewce dike, ji ber vê yekê pê ewle bin ku hûn ji bo .nav-item
û .nav-link
wekî ku li jêr tê xuyang kirin hêmanên veqetandî û hêlîn bikar bînin.
<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>
Forms
Kontrol û pêkhateyên cihêreng ên formê di navbarek bi .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>
Hêmanên zaroka tavilê yên .navbar
karanîna sêwirana nerm û dê wekî xwerû bi kar bînin justify-content: space-between
. Ji bo eyarkirina vê tevgerê wekî ku hewce be karûbarên flex ên din bikar bînin.
<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>
Komên têketinê jî dixebitin:
<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>
Bişkokên cihêreng wekî beşek ji van formên navbarê jî têne piştgirî kirin. Ev di heman demê de bîranînek girîng e ku karûbarên hevrêziya vertîkal dikare were bikar anîn da ku hêmanên mezinahiyên cihêreng li hev bikin.
<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>
Nivîstok
Dibe ku navbar bi alîkariya .navbar-text
. Ev çîn ji bo rêzikên nivîsê hevrêziya vertîkal û cîhê horizontî eyar dike.
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
Li gorî hewcedariyê bi hêman û amûrên din re tevlihev bikin û li hev bikin.
<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>
Rengên rengîn
Mijara navbarê bi saya tevhevkirina dersên mijarê û karûbaran qet hêsantir nebûye background-color
. Ji .navbar-light
bo karanîna bi rengên paşxaneya sivik, an .navbar-dark
ji bo rengên paşxaneya tarî hilbijêrin. Dûv re, bi .bg-*
karûbaran xweş bikin.
<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>
Konteynirên
Her çend ew ne hewce ye jî, hûn dikarin navbarek di navberekê de bipêçin da .container
ku wê li ser rûpelek navendî bikin. An jî hûn dikarin konteynirek li hundurê lê zêde bikin .navbar
da ku tenê naverokek navbarek jorîn a sabît an statîk navend bike .
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
Gava ku konteynir di navbara we de ye, pelika wê ya horizontî li xalên veqetandinê ji .navbar-expand{-sm|-md|-lg|-xl}
çîna weya diyarkirî kêmtir tê rakirin. Ev piştrast dike ku dema ku navbara we hilweşe, em li ser dîmenderên jêrîn ên nehewce padding dubare nakin.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Cihkirin
Karûbarên pozîsyona me bikar bînin da ku navbaran di pozîsyonên ne-statîk de bi cîh bikin. Hilbijartina ji sabît ber bi jor, sabîtkirî li jêr, an bi jor ve zeliqandî (bi rûpel digere heta ku ew digihîje jor, paşê li wir dimîne). Navbarên rastkirî bikar tînin position: fixed
, tê vê wateyê ku ew ji herikîna normal ya DOM-ê têne derxistin û dibe ku CSS-ya xwerû hewce bike (mînak, padding-top
li ser <body>
) da ku pêşî li hevgirtina bi hêmanên din re bigire.
Di heman demê de bala xwe bidin ku .sticky-top
bikar tîne position: sticky
, ku di her gerokê de bi tevahî nayê piştgirî kirin .
<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>
Scrolling
Zêde .navbar-nav-scroll
bikin .navbar-collapse
(an hêmanek din a navbarê) da ku gerandina vertîkal di nav naverokên veguhezbar ên navbarek hilweşandî de çalak bike. Ji hêla xwerû ve, gerok li 75vh
(an 75% ji bilindahiya dîmenderê) dest pê dike, lê hûn dikarin wê bi şêwazên hundurîn an xwerû bişopînin. Di dîmenderên mezin de dema ku navbar were berfireh kirin, naverok dê wekî ku di navbarek xwerû de xuya dike.
Ji kerema xwe not bikin ku ev tevger bi kêmasiyek potansiyel re tê - dema overflow
ku were danîn overflow-y: auto
(pêdivî ye ku naverokê li vir bigerin), overflow-x
wekheviya auto
, ku dê hin naverokek horizontî bibire.
Li vir mînakek navbarek heye ku .navbar-nav-scroll
bi style="max-height: 100px;"
, digel hin karûbarên marjînal ên zêde ji bo cîhê herî baş tê bikar anîn.
<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>
Tevgerên bersivdar
Navbar dikarin .navbar-toggler
, .navbar-collapse
, û .navbar-expand{-sm|-md|-lg|-xl}
çînan bikar bînin da ku diyar bikin ka kengê naveroka wan li pişt bişkokekê hilweşe. Bi tevlêbûna bi karûbarên din re, hûn dikarin bi hêsanî hilbijêrin kengê hêmanên taybetî nîşan bidin an veşêrin.
Ji bo navbarên ku qet naqedin, .navbar-expand
çîna li ser navbarê zêde bikin. Ji bo navbarên ku her gav hildiweşin, tu .navbar-expand
çînek zêde nekin.
Toggler
Veguhezerên navbarê ji hêla xwerû ve li çepê têne rêz kirin, lê ger ew hêmanek xwişk û birayên mîna a bişopînin .navbar-brand
, ew ê bixweber berbi rasta dûr ve werin rêz kirin. Berevajîkirina nîşankirina we dê cîhkirina vekêşanê berevajî bike. Li jêr mînakên şêwazên cûda yên guheztinê hene.
.navbar-brand
Di xala şkestinê ya herî piçûk de nayê nîşandan:
<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>
Bi navek marqeya ku li milê çepê û veguheztina li milê rastê tê xuyang kirin:
<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>
Li milê çepê vekêşkek û navê marqeyê li milê rastê:
<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>
Naveroka derve
Carinan hûn dixwazin pêveka hilweşandinê bikar bînin da ku hêmanek konteynerê ji bo naveroka ku bi strukturî li derveyî hundurê rûniştî ye bişopîne .navbar
. Ji ber ku pêveka me li ser id
û lihevhatinê dixebite data-target
, ew bi hêsanî tê kirin!
<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>
Dema ku hûn wiya dikin, em pêşniyar dikin ku JavaScript-a din jî tê de hebe da ku dema ku ew vebe balê bi bername li konteynerê bikişîne. Wekî din, bikarhênerên klavyeyê û bikarhênerên teknolojiyên arîkar dê di dîtina naveroka nû ya eşkerekirî de dijwariyek hebe - nemaze heke konteynera ku hatî vekirin di strukturê belgeyê de were pêşiya vekêşanê. Di heman demê de em pêşniyar dikin ku pê ewle bin ku vekêşker xwedan aria-controls
taybetmendî ye, îşaret bi id
konteynera naverokê dike. Di teorîyê de, ev dihêle ku bikarhênerên teknolojiya arîkar rasterast ji togler berbi konteynera ku ew kontrol dike - lê piştgirî ji bo vê yekê nuha pir qut e.