Navs
Belgekirin û nimûneyên ji bo meriv çawa Bootstrap-ê hêmanên navîgasyonê bikar tîne.
Navê bingehîn
Navîgasyon ku di Bootstrap de peyda dibe, nîşankirin û şêwazên gelemperî, ji .nav
çîna bingehîn bigire heya dewletên çalak û neçalak. Dersên guhêrbar biguhezînin da ku di navbera her şêwazê de biguhezînin.
Parçeya bingehîn .nav
bi flexbox ve hatî çêkirin û bingehek bihêz ji bo avakirina hemî celeb pêkhateyên navîgasyonê peyda dike. Di nav xwe de hin guheztinên şêwazê (ji bo xebata bi navnîşan) vedihewîne, hin peldanka girêdanê ji bo deverên lêdan ên mezin, û şêwaza bingehîn a astengdar vedihewîne.
Pêkhateya bingehîn .nav
tu dewletî nagire nav xwe .active
. Mînakên jêrîn polê vedigirin, bi taybetî ji bo ku nîşan bidin ku ev çîna taybetî tu şêwazek taybetî dernakeve.
Ders li seranserê têne bikar anîn, ji ber vê yekê nîşankirina we dikare super maqûl be. <ul>
Mîna jorîn bikar bînin , <ol>
ger rêzika tiştên we girîng e, an jî xwe bi <nav>
hêmanek bixin. Ji ber ku .nav
karanîn display: flex
, girêdanên navî wekî tiştên navokê tevdigerin, lê bêyî nîşana zêde.
Şêweyên berdest
Bi guherbar û karûbaran şêwaza .nav
pêkhateya s biguherînin. Li gorî hewcedariyê tevlihev bikin û li hev bikin, an ya xwe ava bikin.
Alignment Horizontal
Bi karûbarên flexbox re hevrêziya horizontî ya navika xwe biguhezînin . Ji hêla xwerû ve, navok li çepê têne rêz kirin, lê hûn dikarin bi hêsanî wan biguhezînin navend an rastê.
Navendî bi .justify-content-center
:
Rast-rast bi .justify-content-end
:
Çikanî
Navîgasyona xwe bi guheztina rêgeziya babetê nerm bi kargêriyê ve .flex-column
biguhezînin. Ma hûn hewce ne ku wan li ser hin dîmenderan bixin lê ne yên din? Guhertoyên bersivdar bikar bînin (mînak, .flex-sm-column
).
Mîna her gav, navîgasyon vertîkal bêyî <ul>
s jî gengaz e.
Tabs
Navê bingehîn ji jor digire û .nav-tabs
polê lê zêde dike da ku navbeynek tablo çêbike. Wan bikar bînin da ku bi pêveka meya JavaScript tabê re herêmên tabloyê biafirînin .
Pills
Heman HTML-ê bistînin, lê li şûna wê bikar .nav-pills
bînin:
Dagirtin û rewa kirin
Bi zorê naverokên xwe .nav
bidin ku firehiya berdest yek ji du çînên guhêrbar dirêj bike. Ji bo ku bi s-ya xwe bi rêjeyî hemî cîhê berdest tijî bikin .nav-item
, bikar bînin .nav-fill
. Bala xwe bidinê ku hemî cîhê horizontî dagirkirî ye, lê ne her babet navokê xwedî heman firehiyê ye.
Dema ku <nav>
navîgasyonek-based bikar tînin, hûn dikarin bi ewlehî ji holê rakin .nav-item
ji ber ku tenê .nav-link
ji bo <a>
hêmanên şêwazê hewce ye.
Ji bo hêmanên wekhev-fireh, bikar bînin .nav-justified
. Hemî cîhê horizontî dê ji hêla girêdanên navikê ve were dagîr kirin, lê berevajî ya .nav-fill
jorîn, her babet nav dê heman firehiyê be.
Wek .nav-fill
mînak bi karanîna <nav>
navîgasyonek -based.
Bi karûbarên flex re dixebitin
Heke hûn hewceyê guhertoyên nav-ê yên bersivdar in, bi karanîna rêzek karûbarên flexbox -ê bifikirin . Digel ku bêtir devkî, van karûbaran di nav xalên veqetandinê yên bersivdar de xwerûkirina mezintir pêşkêş dikin. Di mînaka li jêr de, navika me dê li ser xala veqetînê ya herî nizm were danîn, dûv re bi sêwirana horizontî ya ku ji xala veqetînê ya piçûk dest pê dike firehiya berdest tije dike.
Di derbarê gihîştinê de
Heke hûn navîgasyonê bikar tînin da ku barek navîgasyon peyda bikin, pê ewle bin ku hûn a role="navigation"
li konteynera dêûbavê ya herî mantiqî ya <ul>
, an jî <nav>
hêmanek li dora tevaya navîgasyonê bipêçin. Rolê li <ul>
xwe zêde nekin, ji ber ku ev ê rê li ber ku ew wekî navnîşek rastîn ji hêla teknolojiyên arîkar ve were ragihandin.
Bala xwe bidinê ku barên navîgasyonê, her çend bi dîtbarî wekî tabloyên bi .nav-tabs
polê re were şêwaz kirin, divê neyên dayîn role="tablist"
, role="tab"
an role="tabpanel"
taybetmendî. Vana tenê ji bo navbeynkên tabloyên dînamîkî guncan in, wekî ku di Pratîkên Nivîsandina WAI ARIA de têne diyar kirin . Di vê beşê de ji bo mînakek tevgerên JavaScript -ê ji bo navrûyên tabloyên dînamîkî bibînin .
Bikaranîna peldankan
Pêşekên daketinê bi HTML-ya piçûktir û pêveka JavaScript -a daketî zêde bikin.
Tabên bi daxistinan
Pills bi dropdown
tevgera JavaScript
Pêveka JavaScript-a tabê bikar bînin - wê bi serê xwe an bi bootstrap.js
pelê berhevkirî ve têxin nav xwe - da ku tablo û hebên me yên navîgasyonê dirêj bikin da ku paceyên tabloyên naveroka herêmî biafirînin, tewra bi navgîniya pêşekên dakêşanê.
Heke hûn JavaScript-a me ji çavkaniyê ava dikin, ew hewce dikeutil.js
.
Têkiliyên tabloyên dînamîk, wekî ku di Pratîkên Nivîskariya WAI ARIA de têne diyar kirin , hewceyê role="tablist"
, role="tab"
, role="tabpanel"
, û aria-
taybetmendiyên zêde hene da ku struktur, fonksiyon û rewşa xwe ya heyî ji bikarhênerên teknolojiyên arîkar re (wek xwendevanên ekranê) ragihînin.
Bala xwe bidinê ku navberên tabloyên dînamîkî divê pêşekên dakêşanê nehewînin, ji ber ku ev dibe sedema pirsgirêkên bikêr û gihîştinê. Ji perspektîfek karanîna, rastiya ku hêmana tabloya ku niha tê xuyang kirin tavilê nayê xuyang kirin (ji ber ku ew di hundurê menuya dakêşana girtî de ye) dikare bibe sedema tevliheviyê. Ji nihêrîna gihîştinê, heya niha rêyek maqûl tune ku meriv bi vî rengî avahîsaziyê bi şêwazek standard WAI ARIA nexşe bike, tê vê wateyê ku ew bi hêsanî ji bikarhênerên teknolojiyên arîkar re nayê fam kirin.
Denim raw belkî we nebihîstiye ji wan jean shorts Austin. Nesciunt tofu stumptown aliqua, paqijkirina masterê synth retro. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip cîhê salvia cillum iphone. Seitan aliquip quis cardigan kincên amerîkî, qesab voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Ji bo ku ji hewcedariyên we re bibe alîkar, ev bi <ul>
nîşankirina-bingehîn, wekî ku li jor hatî destnîşan kirin, an bi nîşanek "xweya xweya xwe" ya kêfî re dixebite. Bala xwe bidinê ku heke hûn bikar tînin <nav>
, divê hûn role="tablist"
rasterast lê zêde nekin, ji ber ku ev ê rola xweya elementê wekî nîşana navîgasyonê bişkîne. Di şûna wê de, veguhezînin hêmanek alternatîf (di mînaka jêrîn de, a hêsan <div>
) û li <nav>
dora wê bipêçin.
Pêveka tabê jî bi hebanan re dixebite.
Encama occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa exclusiveeur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
Û bi hebên vertical.
Ji ber vê yekê, ji bo ku hûn ji bo vê yekê biqewimin e ku ji bo demek dirêj ve girêdayî ye. Veniam sint duis incididunt do esse magna mollit bilî laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et illum eu deserunt onlyeur ea incididunt minim occaecat.
Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.
Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.
Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.
Taybetmendiyên daneyê bikar tînin
Hûn dikarin navîgasyonek tabloyek an pileyek bêyî nivîsandina JavaScriptê bi tenê diyar kirin data-toggle="tab"
an data-toggle="pill"
li ser hêmanek çalak bikin. Van taybetmendiyên daneyê li ser .nav-tabs
an bikar bînin .nav-pills
.
Bi JavaScript
Bi JavaScript-ê tabloyên tabloyê çalak bikin (pêdivî ye ku her tabloyek kesane were çalak kirin):
Hûn dikarin tabloyên kesane bi çend awayan çalak bikin:
Bandora fade
Ji bo ku tabloyan bişewitînin, li her yekê zêde .fade
bikin .tab-pane
. Pêdivî ye ku tabloya yekem jî pêdivî .show
ye ku naveroka destpêkê xuya bike.
Methods
Rêbaz û veguherînên Asynchronous
Hemî rêbazên API-ê asynkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.
$().tab
Elementek tabê û konteynir naverokê çalak dike. Tabê pêdivî ye ku di DOM-ê de girêkek konteynerê data-target
an jî armancek hebe.href
.tab('nîşan bide')
Tabloya diyarkirî hildibijêre û panela wê ya têkildar nîşan dide. Her tabloyek din a ku berê hatibû hilbijartin, nehilbijartî dibe û pencereya wê ya têkildar tê veşartin. Berî ku tablo bi rastî were xuyang kirin (ango berî ku shown.bs.tab
bûyer çêbibe) vedigere bangewazî.
.tab('dispose')
Tabloya hêmanekê hilweşîne.
Events
Dema ku tabloyek nû nîşan dide, bûyer bi rêza jêrîn dişewitin:
hide.bs.tab
(li ser tabloya çalak a heyî)show.bs.tab
(li ser tabloya ku tê xuyang kirin)hidden.bs.tab
(li ser tabloya çalak a berê, heman wekîhide.bs.tab
bûyerê)shown.bs.tab
(li ser tabloya ku nû-çalak hatî xuyang kirin, heman wekîshow.bs.tab
bûyerê)
Ger tu tablo jixwe çalak nebûya, wê hingê hide.bs.tab
û hidden.bs.tab
bûyer nayên avêtin.
Cureyê bûyerê | Terîf |
---|---|
nîşan bide.bs.tab | Ev bûyer di pêşandana tabloyê de dişewite, lê berî ku tabloya nû were xuyang kirin. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin event.target û bikin hedef.event.relatedTarget |
nîşan dan.bs.tab | Ev bûyer piştî ku tabloyek hate pêşandan li ser pêşandana tabê derdikeve. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin event.target û bikin hedef.event.relatedTarget |
veşêre.bs.tab | Dema ku tabloyek nû were xuyang kirin ev bûyer dişewite (û bi vî rengî tabloya çalak a berê were veşartin). Bi rêzê ve tabloya aktîf a heyî û tabloya nû ya zû-çalak bibe event.target û armanc bikin.event.relatedTarget |
veşartî.bs.tab | Ev bûyer piştî ku tabloyek nû tê xuyang kirin dişewite (û bi vî rengî tabloya çalak a berê tê veşartin). Bi rêzê ve tabloya çalak a berê û tabloya nû ya çalak bikar bînin event.target û bikin hedef.event.relatedTarget |