JavaScript
Bi zêdetirî bi dehan pêvekên xwerû yên jQuery re pêkhateyên Bootstrap bijîn. Bi hêsanî wan hemî, an yek bi yek têxin nav xwe.
Bi zêdetirî bi dehan pêvekên xwerû yên jQuery re pêkhateyên Bootstrap bijîn. Bi hêsanî wan hemî, an yek bi yek têxin nav xwe.
Pêvek dikarin bi rengek kesane (bi karanîna *.js
pelên kesane yên Bootstrap bikar bînin), an jî bi yekcarî (bikaranîna bootstrap.js
an kêmkirina bootstrap.min.js
).
Hem bootstrap.js
û hem bootstrap.min.js
jî di pelek yekane de hemî pêvekan hene. Tenê yek tê de.
Hin pêvek û hêmanên CSS bi pêvekên din ve girêdayî ne. Ger hûn pêvekên kesane bi nav bikin, pê ewle bin ku hûn van girêdanan di belgeyan de kontrol bikin. Di heman demê de bala xwe bidin ku hemî pêvek bi jQuery ve girêdayî ne (ev tê vê wateyê ku jQuery divê berî pelên pêvekê were nav kirin). Bi me re şêwirbower.json
bikin ku bibînin ka kîjan guhertoyên jQuery têne piştgirî kirin.
Hûn dikarin hemî pêvekên Bootstrap tenê bi navgîniya API-ya nîşankirinê bêyî nivîsandina yek rêzek JavaScript-ê bikar bînin. Ev API-a çîna yekem a Bootstrap-ê ye û dema ku pêvekek bikar tîne divê bala weya yekem be.
Wusa got, di hin rewşan de dibe ku were xwestin ku vê fonksiyonê were qut kirin. Ji ber vê yekê, em di heman demê de şiyana neçalakkirina API-a taybetmendiya daneyê peyda dikin bi veqetandina hemî bûyerên li ser cîhê navên belgeyê bi data-api
. Ev bi vî rengî xuya dike:
Wekî din, ji bo armanckirina pêvekek taybetî, tenê navê pêvekê wekî navek bi navgîniya daneya-api re bi vî rengî têxin nav:
Taybetmendiyên daneyê ji pir pêvekan li ser heman elementê bikar neynin. Mînakî, bişkokek hem nikare xwedan amûrek be û hem jî modalek biguhezîne. Ji bo pêkanîna vê, hêmanek pêçandî bikar bînin.
Em her weha bawer dikin ku hûn dikarin hemî pêvekên Bootstrap bi tenê bi navgîniya JavaScript API-ê bikar bînin. Hemî API-yên gelemperî rêbazên yekane, zincîrbar in, û berhevoka ku li ser hatî kirin vedigerînin.
Pêdivî ye ku hemî rêbaz tiştek vebijarkek vebijarkî, rêzek ku rêbazek taybetî armanc dike, an tiştek (ya ku pêvekek bi tevgerek xwerû dest pê dike) qebûl bikin:
Her pêvek di heman demê de çêkerê xweya xav li ser Constructor
taybetmendiyek eşkere dike: $.fn.popover.Constructor
. Heke hûn dixwazin mînakek pêvekek taybetî bistînin, wê rasterast ji hêmanek bistînin: $('[rel="popover"]').data('popover')
.
Hûn dikarin mîhengên xwerû ji bo pêvekê bi guheztina Constructor.DEFAULTS
tiştê pêvekê biguhezînin:
Carinan hewce ye ku pêvekên Bootstrap bi çarçoveyên UI yên din re bikar bînin. Di van şertan de, car caran dibe ku pevçûnên navan çêbibin. Ger ev diqewime, hûn dikarin gazî .noConflict
pêveka ku hûn dixwazin nirxa wê vegerînin bikin.
Bootstrap ji bo çalakiyên yekta yên piraniya pêvekan bûyerên xwerû peyda dike. Bi gelemperî, ev bi rengek nebinavkirî û paşverû têne - ku di destpêka bûyerekê de nefsbiçûk (mînak. show
) di destpêka bûyerekê de, û forma wê ya dema borî (mînak. shown
) bi qedandina kirdeyekê tê derxistin.
Ji 3.0.0-ê ve, hemî bûyerên Bootstrap bi navan têne navnîş kirin.
Hemî bûyerên bêdawî preventDefault
fonksiyonê peyda dikin. Ev şiyana rawestandina pêkanîna çalakiyek berî ku ew dest pê bike peyda dike.
Guhertoya her yek ji pêvekên jQuery yên Bootstrap dikare bi navgîniya avakera VERSION
pêvekê ve were gihîştin. Mînakî, ji bo pêveka tooltip:
Pêvekên Bootstrap dema ku JavaScript neçalak be bi taybetî bi dilşikestî paşve naçin. Heke hûn di vê rewşê de ji ezmûna bikarhêner eleqedar dibin, bikar bînin <noscript>
ku rewşê (û çawa JavaScript-ê ji nû ve çalak bikin) ji bikarhênerên xwe re rave bikin, û/an jî paşverûyên xweyên xwerû lê zêde bikin.
Bootstrap bi fermî pirtûkxaneyên JavaScript-ê yên wekî Prototype an jQuery UI piştgirî nake. Tevî .noConflict
bûyer û navan, dibe ku pirsgirêkên lihevhatinê hebin ku hûn hewce ne ku bi serê xwe rast bikin.
Ji bo bandorên veguherîna hêsan, transition.js
carekê bi pelên JS yên din re têxin nav xwe. Heke hûn berhevkirî (an kêmkirî) bikar tînin bootstrap.js
, ne hewce ye ku hûn vê yekê têxin nav xwe - ew jixwe li wir e.
Transition.js ji bo transitionEnd
bûyeran û hem jî emulatorek veguherîna CSS-ê arîkarek bingehîn e. Ew ji hêla pêvekên din ve tê bikar anîn da ku piştgiriya veguheztina CSS-ê kontrol bike û veguheztinên daleqandî bigire.
Veguhastin dikarin li seranserê cîhanê bi karanîna pişka JavaScriptê ya jêrîn, ku divê piştî barkirin transition.js
(an bootstrap.js
an jî bootstrap.min.js
, li gorî rewşê) were neçalak kirin:
Modal rêkûpêk in, lê maqûl in, diyalogê bi fonksiyonên herî hindik ên hewce û pêşnumayên biaqil dişoxilîne.
Bawer bikin ku hûn modalek vekin dema ku yekî din hîn xuya ye. Nîşandana ji yekê zêdetir modal di carekê de koda xwerû hewce dike.
Her gav hewl bidin ku koda HTML-a modalê di belgeya xwe de di pozîsyonek jorîn de bi cîh bikin da ku hêmanên din bandorê li xuyang û/an fonksiyona modal nekin.
Di derbarê karanîna modalên li ser cîhazên mobîl de hin hişyarî hene. Ji bo hûragahiyan li belgeyên piştevaniya geroka me binêrin.
Ji ber ku HTML5 çawa semantîka xwe diyar dike, autofocus
taybetmendiya HTML-ê di modalên Bootstrap de bandorek nake. Ji bo bidestxistina heman bandorê, hin JavaScript-a xwerû bikar bînin:
Modalek çêkirî ya bi sernav, laş û komek çalakiyan di pêlavê de.
Modalek bi JavaScript-ê ve bi tikandina bişkoja jêrîn veguhezînin. Ew ê ji jorê rûpelê ve biçe xwarê û têkeve hundur.
Bê guman lê zêde bikin role="dialog"
û aria-labelledby="..."
, sernavê modal, bi .modal
, û role="document"
bi .modal-dialog
xwe re referans bikin.
Wekî din, hûn dikarin ravekirina diyaloga xweya modal bi aria-describedby
li ser re bidin .modal
.
Veguheztina vîdyoyên YouTube-ê di modalan de JavaScriptek din hewce dike ku ne di Bootstrap-ê de ye da ku bixweber lîstin û bêtir rawestîne. Ji bo bêtir agahdarî vê posta alîkar a Stack Overflow bibînin.
Modal xwedan du mezinahiyên vebijarkî ne, ku bi navgîniya dersên guhêrbar ve têne peyda kirin ku li ser a .modal-dialog
.
Ji bo modalên ku bi hêsanî xuya dikin ne ku di nav dîtinê de biqewimin, polê ji nîşankirina modaliya xwe derxînin .fade
.
Ji bo ku hûn ji pergala torê ya Bootstrap-ê di nav modalek de sûd werbigirin, tenê .row
di hundurê de hêlîn bikin .modal-body
û dûv re çînên pergala torê ya normal bikar bînin.
Xwedî komek bişkok hene ku hemî heman modalê, tenê bi naverokên piçûktir cûda vedigirin? Taybetmendiyênevent.relatedTarget
HTML û HTML-êdata-*
bikar bînin (dibe ku bi riya jQuery ) ve girêdayî naveroka modalê li gorî kîjan bişkojkê hatî klîk kirin biguhezînin. Ji bo hûrgulî li belgeyên Modal Events binêre relatedTarget
,
Pêveka modal li gorî daxwazê, bi navgîniya taybetmendiyên daneyê an JavaScript-ê naveroka weya veşartî diguhezîne. Di heman demê de ew li ser guheztina tevgerê gerokê ya xwerû zêde .modal-open
dike <body>
û ji bo .modal-backdrop
ku deverek klîk peyda bike ji bo rakirina modalên nîşankirî dema ku li derveyî modalê bitikîne peyda dike.
Bêyî nivîsandina JavaScriptê modalek çalak bikin. Li data-toggle="modal"
ser hêmanek kontrolker, mîna bişkokek, bi hev re data-target="#foo"
an jî href="#foo"
ji bo veguheztina modalek taybetî were danîn.
myModal
Bi yek rêzek JavaScript re modalek bi id re bang bikin :
Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-
, wekî di data-backdrop=""
.
Nav | awa | destçûnî | terîf |
---|---|---|---|
paşperdeya | boolean an string'static' |
rast | Hêmanek modal-backdrop tê de ye. Wekî din, static ji bo paşnavek ku modalê li ser klîk negire diyar bikin. |
kilawye | boolean | rast | Dema ku bişkojka revê tê pêlkirin modalê digire |
rêdan | boolean | rast | Dema ku tê destpêkirin modalê nîşan dide. |
dûr | şop | şaş | Ev vebijêrk ji v3.3.0-ê ve hatî hilweşandin û di v4 de hate rakirin. Em li şûna vê yekê pêşniyar dikin ku şablonek ji hêla xerîdar an çarçoveyek girêdana daneyê bikar bînin, an ji xwe re gazî jQuery.load bikin. Ger URLek dûr were peyda kirin, naverok dê yek carî bi |
.modal(options)
Naveroka we wekî modal çalak dike. Vebijarkek vebijarkî qebûl object
dike.
.modal('toggle')
Modalek bi destan diguhezîne. Berî ku modal bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.modal
an hidden.bs.modal
bûyer çêbibe) vedigere bangkerê.
.modal('show')
Bi destan modalek vedike. Berî ku modal bi rastî were xuyang kirin (ango berî ku shown.bs.modal
bûyer çêbibe) vedigere bangewazî.
.modal('hide')
Bi destan modalek vedişêre. Berî ku modal bi rastî veşêre (ango berî ku hidden.bs.modal
bûyer çêbibe) vedigere bangewazî.
.modal('handleUpdate')
Pozîsyona modalê ji nû ve sererast dike da ku li hember çîçekek gerokek xuya bibe, ev yek dê modalê ber bi çepê ve biçe.
Tenê pêdivî ye ku dema ku bilindahiya modalê dema ku vekirî ye diguhezîne.
Dersa modal a Bootstrap çend bûyeran ji bo girêdana fonksiyonên modal eşkere dike.
Hemî bûyerên modal li modal bixwe (ango li <div class="modal">
).
Cureyê bûyerê | Terîf |
---|---|
nîşan bide.bs.modal | show Dema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite. Ger ji ber klîkekê be, hêmana klîkkirî wekî relatedTarget taybetmendiya bûyerê peyda dibe. |
nîşan dan.bs.modal | Dema ku modal ji bikarhênerê re xuya bibe ev bûyer tê şewitandin (dê li benda bidawîbûna veguheztinên CSS bimîne). Ger ji ber klîkekê be, hêmana klîkkirî wekî relatedTarget taybetmendiya bûyerê peyda dibe. |
veşêre.bs.modal | hide Dema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin . |
veşartî.bs.modal | Dema ku modal ji bikarhênerê veşartî qediya ev bûyer tê şewitandin (dê li benda bidawîbûna veguheztinên CSS bimîne). |
barkirin.bs.modal | Dema ku modal bi karanîna remote vebijarkê naverok barkiriye ev bûyer tê şewitandin. |
Bi vê pêveka sade, di nav de navbar, tab, û heban, pêşekên dakêşanê li hema hema her tiştî zêde bikin.
Bi riya taybetmendiyên daneyê an JavaScriptê, pêveka dakêşanê naveroka veşartî (menekên daketî) bi guheztina .open
pola li ser xala navnîşa dêûbav diguhezîne.
Li ser cîhazên desta, vekirina peldankek .dropdown-backdrop
ji bo girtina pêşekên dakêşanê dema ku li derveyî menuyê tê tikandin, deverek wekî deverek lêzêde dike, pêdivîyek ji bo piştgirîya rast a iOS. Ev tê vê wateyê ku veguheztina ji pêşekek dakêşanê ya vekirî ji pêşekek dakêşanê ya cihêreng pêvekek zêde li ser mobîl hewce dike.
Nîşe: data-toggle="dropdown"
Taybetmendî ji bo girtina pêşekên dakêşanê di astek serîlêdanê de pê ve girêdayî ye, ji ber vê yekê ramanek baş e ku hûn her gav wê bikar bînin.
Ji data-toggle="dropdown"
bo guheztina peldankekê li lînkek an bişkokek zêde bikin.
Ji bo ku URLan bi bişkokên lînkê saxlem bihêlin, li data-target
şûna href="#"
.
Bi navgîniya JavaScript-ê ve bang bikin:
data-toggle="dropdown"
hîn jî pêwîst eHer çiqas hûn bi JavaScript-ê ve gazî daketina xwe bikin an li şûna data-api-ê bikar bînin, data-toggle="dropdown"
pêdivî ye ku her gav li ser hêmana dakêşanê hebe.
Netû
$().dropdown('toggle')
Menûya dakêşanê ya navbarek diyarkirî an navîgasyonek tabloyê vedike.
Hemî bûyerên dakêşanê li .dropdown-menu
hêmana dêûbavê '' têne avêtin.
Hemî bûyerên dakêşanê xwedan relatedTarget
taybetmendiyek e, ku nirxa wê hêmana lengerê ya guhezbar e.
Cureyê bûyerê | Terîf |
---|---|
nîşan bide.bs.dropdown | Dema ku rêbaza mînaka nîşandanê tê gazî kirin, ev bûyer tavilê dişewite. |
nîşan dan.bs.dropdown | Dema ku dakêşana ji bikarhênerê re xuya bibe (dê li benda veguheztinên CSS-ê bisekine, biqede), ev bûyer tê şewitandin. |
veşêre.bs.dropdown | Dema ku rêbaza mînaka veşartinê hate gazî kirin, ev bûyer tavilê tê şewitandin. |
veşartî.bs.dropdown | Ev bûyer dema ku dakêşana ku ji bikarhênerê veşartî xilas bû (dê li benda veguheztinên CSS-ê bisekine, biqede) tê şewitandin. |
Pêveka ScrollSpy ji bo nûvekirina bixweber armancên nav li ser bingeha pozîsyona gerokê ye. Li qada li jêr navbarê bigerin û li guhertina çîna çalak temaşe bikin. Dê jêr-tiştên daketî jî werin ronî kirin.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ber wan qui firotin. Tumblr farm-to-table mafên bisîkletan çi be. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui we belkî li ser wan nebihîstiye û fona pêbaweriya cardigan culpa biodiesel wes anderson estetîk. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork rih. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat çar loko nisi, ea helvetica nulla carles. Kamyona xwarinê ya cosby ya tattookirî, vinyl quis non freegan ya mcsweeney. Lo-fi wes anderson +1 sartorial. Karlês ne estetîk quis gentrify. Brooklyn adipisicing craft beer cîgirê keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo mafên bisîkletan adipisicing banh mi, velit ea sunt asta next locavore yek-eslê qehwe li magna veniam. Vînyl id jiyana bilind, echo park consequat quis aliquip banh mi pitchfork. Vero VHS edipisicing. Consectetur nisi DIY minim qasid bag. Cred ex in, domdar delectus consectetur fanny pack iphone.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa her tiştê ku kamyonek xwarinê delectus. Sapiente synth id assumenda. Locavore sed helvetica klîşeya îroniya, birûskên ku we belkî li ser wan nebihîstiye bi hoodie-free gluten lo-fi fap aliquip. Beriya ku wan bifroşin, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan amade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ulamco thundercats.
Pêdivî ye ku girêdanên navbar xwedî armancên nasnameyê yên çareserkirî bin. Mînakî, <a href="#home">home</a>
pêdivî ye ku bi tiştek di DOM-ê de mîna <div id="home"></div>
.
:visible
armanc paşguh kirinHêmanên mebest ên ku ne :visible
li gorî jQuery ne dê werin paşguh kirin û tiştên navên wan ên têkildar dê çu carî neyên ronî kirin.
Rêbaza pêkanînê ferq nake, scrollspy hewce dike ku position: relative;
li ser hêmana ku hûn li ser sîxuriyê dikin bikar bînin. Di pir rewşan de ev e <body>
. Dema scrollspying li ser hêmanên din ji bilî <body>
, bawer bin ku xwedî height
set û overflow-y: scroll;
sepandin.
Ji bo ku bi hêsanî behreya scrollspy li navîgasyona xweya jorîn zêde data-spy="scroll"
bikin, li hêmana ku hûn dixwazin bişopînin lê zêde bikin (bi gelemperî ev dê bibe <body>
). Dûv re data-target
taybetmendiyê bi ID an pola hêmana dêûbavê ya her .nav
pêkhateyek Bootstrap ve zêde bikin.
Piştî ku position: relative;
CSS-ya xwe zêde kirin, bi JavaScript-ê re bang bikin scrollspy:
.scrollspy('refresh')
Dema ku scrollspy digel lê zêdekirin an rakirina hêmanan ji DOM-ê re bikar bînin, hûn ê hewce bikin ku rêbaza nûvekirinê ya weha bang bikin:
Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-
, wekî di data-offset=""
.
Nav | awa | destçûnî | terîf |
---|---|---|---|
offset | jimare | 10 | Pixelên ku ji jor ve têne veqetandin dema ku pozîsyona gerokê hesab dikin. |
Cureyê bûyerê | Terîf |
---|---|
activate.bs.scrollspy | Dema ku babetek nû ji hêla scrollspy ve tê çalak kirin ev bûyer dişewite. |
Karbidestiya tabê ya bilez û dînamîkî lê zêde bikin da ku di nav paceyên naveroka herêmî de derbas bibin, tewra bi navgîniya pêşekên dakêşanê. Tabên hêlîn nayên piştgirî 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.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Ev pêvek hêmana navîgasyonê ya tabloyê dirêj dike da ku deverên tabloyê zêde bike.
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:
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. Zêdekirina çînên û li tabê dê şêwaza tabloya Bootstrap bicîh bîne , lê zêdekirina çînên û dê şêwaza nav
heban bicîh bîne .nav-tabs
ul
nav
nav-pills
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î .in
ye ku naveroka destpêkê xuya bike.
$().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
Di mînakên li jor de, tabloyên <a>
bi data-toggle="tab"
taybetmendiyan in.
.tab('show')
Tabloya diyarkirî hildibijêre û naveroka wê ya têkildar nîşan dide. Tebeke din a ku berê hatibû hilbijartin, nayê hilbijartin û naveroka 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î.
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 |
Ji pêveka hêja ya jQuery.tipsy ku ji hêla Jason Frame ve hatî nivîsandin ve hatî îlhama kirin; Tooltips guhertoyek nûvekirî ye, ku xwe dispêre wêneyan, CSS3 ji bo anîmasyon, û taybetmendiyên daneyan ji bo hilanîna sernavên herêmî bikar tîne.
Sernavên amûran ên bi sernavên zero-dirêj qet nayên xuyang kirin.
Li ser zencîreyên jêrîn bihêlin ku hûn serişteyên amûran bibînin:
Pantorên teng ên asta din keffiyeh dibe ku we ji wan nebihîstiye. Bûka wêneyan rîh denim raw letterpress vegan qasid bag stumptown. Cil û bergên Amerîkî yên 8-bit quinoa domdar a mcsweeney ji çandiniyê-to-maseyê, xwedan şamek vinyl a terry richardson e. Stûpê rîh, kardigan banh mi lomo birûskên. Tofu biodiesel williamsburg marfa, çar loko mcsweeney's chambray vegan paqij dike. A artisan bi rastî îronîk çi keytar , dîmendera farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Çar vebijark hene: jor, rast, jêr û çepê rêzkirî.
Ji ber sedemên performansê, Tooltip û Popover data-apis bijartî ne, tê vê wateyê ku divê hûn bi xwe wan dest pê bikin .
Yek rê ji bo destpêkirina hemî serişteyên amûran li ser rûpelek dê ev be ku hûn wan li gorî taybetmendiya xwe data-toggle
hilbijêrin:
Pêveka tooltip li gorî daxwazê naverok û nîşankirinê çêdike, û ji hêla xwerû ve şîretên amûran li dû hêmana wan a tîrêjê bi cîh dike.
Serişteya amûrê bi JavaScriptê vekin:
Nîşana pêdivî ya ji bo serişteyek amûrek tenê data
taybetmendiyek e û title
li ser hêmana HTML-ê hûn dixwazin şîreta amûrekê hebe. Nîşana hilberandî ya amûrek pir hêsan e, her çend ew pozîsyonek hewce dike (ji hêla xwerû, ji top
hêla pêvekê ve hatî saz kirin).
Carinan hûn dixwazin pêvekek amûrek li hîpergirêdanek ku pir rêzan pêça dike zêde bikin. Tevgera xwerû ya pêveka tooltip ev e ku wê navendek horizontî û vertîkal bike. Li lengerên white-space: nowrap;
xwe zêde bikin da ku ji vê yekê dûr bikevin.
Dema ku şîretên amûran li ser hêmanên di nav a .btn-group
an an .input-group
, an jî li ser hêmanên girêdayî tabloyê ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
) bikar tînin, hûn neçar in vebijarkê container: 'body'
(li jêr hatî belge kirin) diyar bikin da ku ji bandorên alî yên nexwestî dûr bikevin (wek mînak hêman berfirehtir dibe û/ an dema ku şîreta amûrê tê kişandin quncikên xwe yên dorpêçkirî winda bike).
Ji bo bikarhênerên ku bi klavyeyekê rêve dibin, û bi taybetî bikarhênerên teknolojiyên arîkar, divê hûn tenê şîretên amûran li hêmanên ku bi klavyeyê ve girêdayî ne, mîna lînkan, kontrolên formê, an hêmanek keyfî bi tabindex="0"
taybetmendiyekê zêde bikin.
Ji bo lêzêdekirina amûrekê li hêmanekê disabled
an jî .disabled
hêmanekê, hêmanê têxin hundurê a <div>
û li <div>
şûna wê şîreta amûrê bi cîh bikin.
Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-
, wekî di data-animation=""
.
Nav | Awa | Destçûnî | Terîf |
---|---|---|---|
jayandarî | boolean | rast | Veguheztinek fade ya CSS-ê li ser amûrê bicîh bikin |
têrr | string | şaş | şaş | Serişteya amûrê li hêmanek taybetî vedike. Mînak |
derengxistin | hejmar | tişt | 0 | Dereng nîşankirin û veşartina şîreta amûrê (ms) - ji bo celebê destana destan nayê sepandin Ger jimarek were peyda kirin, dereng hem ji bo veşêrin/nîşandanê tê sepandin Struktura objektê ev e: |
html | boolean | şaş | HTML-ê têxe nav şîreta amûrê. Ger xelet be, text dê rêbaza jQuery were bikar anîn da ku naverokê têxe nav DOM-ê. Heke hûn ji êrîşên XSS-ê ditirsin, nivîsê bikar bînin. |
danîn | string | karî | 'lûtik' | Meriv çawa şîreta amûrê bi cih dike - top | binê | çep | rast | auto. Dema ku fonksiyonek ji bo destnîşankirina cîhê tê bikar anîn, ew bi girêka amûrê DOM-ê wekî argumana wê ya yekem û hêmana vekêşanê wekî girêka DOM-ê wekî duyemîn tê gotin. Têkilî |
hilbijêr | ben | şaş | Ger hilbijarkek were peyda kirin, dê tiştên şîreta amûrê ji armancên diyarkirî re werin şandin. Di pratîkê de, ev tê bikar anîn da ku naveroka HTML-a dînamîkî çalak bike ku serişteyên amûran lê zêde bike. Vê û mînakek agahdar bibînin . |
şablon | ben | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Bingeha HTML-ê ji bo ku dema çêkirina şîreta amûrê bikar bîne. The tooltip's
Pêdivî ye ku hêmana pêçanê ya herî derveyî |
nav | string | karî | '' |
Ger fonksiyonek were dayîn, ew ê bi |
kişok | ben | 'fokusa hilavêtinê' | Çawa tooltip tê derxistin - bikirtînin | hover | fokus | destî. Hûn dikarin gelek teşqeleyan derbas bikin; wan bi cihekî veqetînin. manual nikare bi ti kêşek din re were hev kirin. |
viewport | string | object | karî | { hilbijêr: 'beden', padding: 0 } | Tîpa amûrê di nav sînorên vê hêmanê de digire. Mînak: Ger fonksiyonek were dayîn, ew bi hêmana vekêşanê ya DOM-ê wekî argumana wê ya yekane tê gotin. Têkilî |
Vebijarkên ji bo serişteyên amûran ên takekesî dikarin bi karanîna taybetmendiyên daneyê, wekî ku li jor hatî ravekirin, bi alternatîf werin destnîşan kirin.
$().tooltip(options)
Pêşkêşkarek amûrek bi berhevokek elementê ve girêdide.
.tooltip('show')
Tîpa amûrek hêmanek eşkere dike. Berî ku şîreta amûrê bi rastî were xuyang kirin (ango berî ku shown.bs.tooltip
bûyer çêbibe) vedigere bangewazî. Ev wekî "bi destan" vekêşana amûrê tê hesibandin. Sernavên amûran ên bi sernavên zero-dirêj qet nayên xuyang kirin.
.tooltip('hide')
Tîpa amûrekê vedişêre. Berî ku şîreta amûrê bi rastî veşêre (ango berî ku hidden.bs.tooltip
bûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana amûrê tê hesibandin.
.tooltip('toggle')
Destûra amûrek hêmanek vedike. Berî ku şîreta amûrê bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.tooltip
an hidden.bs.tooltip
bûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana amûrê tê hesibandin.
.tooltip('destroy')
Tîpa amûrekê vedişêre û hilweşîne. Pêşniyarên amûran ên ku delegasyonê bikar tînin (yên ku bi vebijarkê têne afirandin ) selector
nekarin bi rengekî ferdî li ser hêmanên nifûsê werin hilweşandin.
Cureyê bûyerê | Terîf |
---|---|
nîşan bide.bs.tooltip | show Dema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite. |
nîşan dan.bs.tooltip | Dema ku şîreta amûrê ji bikarhênerê re xuya bibe ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS temam bibin). |
veşêre.bs.tooltip | hide Dema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin . |
veşartî.bs.tooltip | Dema ku şîreta amûrê ji bikarhênerê veşartî qediya ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS temam bibin). |
xistin.bs.tooltip | Ev bûyer piştî show.bs.tooltip bûyera dema ku şablonê tooltip li DOM-ê hate zêdekirin tê şewitandin. |
Ji bo agahdariya duyemîn xanî li her hêmanek naverokê, mîna yên li ser iPad-ê, naverokên piçûk zêde bikin.
Popoverên ku hem sernav û hem jî naveroka wan sifir-dirêj in qet nayên xuyang kirin.
Popover hewce dike ku pêveka tooltip -ê di guhertoya weya Bootstrap-ê de were girtin.
Ji ber sedemên performansê, Tooltip û Popover data-apis bijartî ne, tê vê wateyê ku divê hûn bi xwe wan dest pê bikin .
Yek rê ji bo destpêkirina hemî popoverên li ser rûpelek dê ev be ku hûn wan li gorî taybetmendiya xwe data-toggle
hilbijêrin:
Dema ku popoverên li ser hêmanên di hundurê .btn-group
an an an an .input-group
jî li ser hêmanên girêdayî tabloyê ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), bikar bînin, hûn neçar in vebijarkê container: 'body'
(li jêr hatî belge kirin) diyar bikin da ku ji bandorên alî yên nedilxwaz dûr bikevin (wek mînak hêman berfirehtir dibe û/ an dema ku popover tê dest pê kirin quncikên xwe yên dorpêçkirî winda bike).
Ji bo ku popoverek li hêmanek disabled
an .disabled
hêmanek zêde bikin, hêmanê têxin hundurê a <div>
û li şûna wê popoverê bicîh <div>
bikin.
Carinan hûn dixwazin popoverek li hîperlîndekek ku gelek rêzan dipêçe zêde bikin. Tevgera xwerû ya pêveka popover ev e ku wê navendek horizontî û vertîkal bike. Li lengerên white-space: nowrap;
xwe zêde bikin da ku ji vê yekê dûr bikevin.
Çar vebijark hene: jor, rast, jêr û çepê rêzkirî.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Tetikê bikar focus
bînin da ku popoveran li ser klîkek din a ku bikarhêner çêdike berde.
Ji bo behremendiya xaça gerok û çar-platformê ya rast, divê hûn tagê bikar bînin , <a>
ne tag<button>
, û her weha divê hûn taybetmendiyê role="button"
û têxin nav xwe.tabindex
Bi JavaScriptê popovers çalak bikin:
Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-
, wekî di data-animation=""
.
Nav | Awa | Destçûnî | Terîf |
---|---|---|---|
jayandarî | boolean | rast | Veguheztinek fade ya CSS-ê li popoverê bicîh bikin |
têrr | string | şaş | şaş | Popoverê li hêmanek taybetî vedike. Mînak |
dilşad | string | karî | '' |
Ger fonksiyonek were dayîn, ew ê bi |
derengxistin | hejmar | tişt | 0 | Dereng xuyangkirin û veşartina popover (ms) - ji bo celebê destkêşana destan nayê sepandin Ger jimarek were peyda kirin, dereng hem ji bo veşêrin/nîşandanê tê sepandin Struktura objektê ev e: |
html | boolean | şaş | HTML-ê têxe nav popover. Ger xelet be, text dê rêbaza jQuery were bikar anîn da ku naverokê têxe nav DOM-ê. Heke hûn ji êrîşên XSS-ê ditirsin, nivîsê bikar bînin. |
danîn | string | karî | 'rast' | Meriv çawa popoverê bi cih dike - top | binê | çep | rast | auto. Dema ku fonksiyonek ji bo destnîşankirina cîhê tê bikar anîn, ew bi girêka DOM-a popover wekî argumana wê ya yekem û hêmana vekêşana girê DOM-ê wekî duyemîn tê gotin. Çarçove |
hilbijêr | ben | şaş | Ger hilbijêrek were peyda kirin, dê tiştên popover ji armancên diyarkirî re werin veguheztin. Di pratîkê de, ev tê bikar anîn da ku naveroka HTML-ê ya dînamîkî bikar bîne da ku popovers lê zêde bibin. Vê û mînakek agahdar bibînin . |
şablon | ben | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Bingeha HTML-ê ku dema afirandina popover bikar bînin bikar bînin. The popover's The popover's
Pêdivî ye ku hêmana pêçanê ya herî derveyî |
nav | string | karî | '' |
Ger fonksiyonek were dayîn, ew ê bi |
kişok | ben | 'bitikîne' | Popover çawa tê derxistin - bikirtînin | hover | fokus | destî. Hûn dikarin gelek teşqeleyan derbas bikin; wan bi cihekî veqetînin. manual nikare bi ti kêşek din re were hev kirin. |
viewport | string | object | karî | { hilbijêr: 'beden', padding: 0 } | Popover di nav sînorên vê hêmanê de digire. Mînak: Ger fonksiyonek were dayîn, ew bi hêmana vekêşanê ya DOM-ê wekî argumana wê ya yekane tê gotin. Çarçove |
Vebijarkên ji bo popoverên takekesî dikare wekî ku li jor hatî ravekirin bi karanîna taybetmendiyên daneyê ve were destnîşankirin.
$().popover(options)
Ji bo berhevokek hêmanan popoveran dide destpêkirin.
.popover('show')
Popovera hêmanek eşkere dike. Berî ku popover bi rastî were xuyang kirin (ango berî ku shown.bs.popover
bûyer çêbibe) vedigere bangewazî. Ev wekî "bi destan" vekêşana popover tê hesibandin. Popoverên ku hem sernav û hem jî naveroka wan sifir-dirêj in qet nayên xuyang kirin.
.popover('hide')
Hêmanek popover vedişêre. Berî ku popover bi rastî veşêre (ango berî ku hidden.bs.popover
bûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana popover tê hesibandin.
.popover('toggle')
Pîvana hêmanekê vedike. Berî ku popover bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.popover
an hidden.bs.popover
bûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana popover tê hesibandin.
.popover('destroy')
Hêmanek popover vedişêre û hilweşîne. Popoverên ku delegasyonê bikar tînin (yên ku bi karanîna vebijarkê selector
têne afirandin ) nekarin bi rengekî ferdî li ser hêmanên nifûsê werin hilweşandin.
Cureyê bûyerê | Terîf |
---|---|
nîşan bide.bs.popover | show Dema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite. |
nîşan dan.bs.popover | Dema ku popover ji bikarhêner re xuya bibe ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS biqede). |
veşêre.bs.popover | hide Dema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin . |
veşartî.bs.popover | Dema ku popover ji bikarhênerê veşartî xilas bû ev bûyer tê şewitandin (dê li bendê bimîne ku veguherînên CSS temam bibin). |
xistin.bs.popover | Ev bûyer piştî show.bs.popover bûyerê dema ku şablonê popover li DOM-ê hate zêdekirin tê şewitandin. |
Bi vê pêvekê re fonksiyona betalkirinê li hemî peyamên hişyariyê zêde bikin.
Dema ku .close
bişkokek bikar tîne, divê ew zaroka yekem be .alert-dismissible
û naveroka nivîsê di nîşankirinê de neyê pêşiya wê.
Vê û wê biguherînin û dîsa biceribînin. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Tenê data-dismiss="alert"
li bişkoka xweya nêzîk zêde bikin da ku bixweber fonksiyonek girtina hişyariyê bidin. Girtina hişyariyek wê ji DOM-ê derdixe.
Ji bo ku hişyariyên we dema girtina anîmasyonê bikar bînin, pê ewle bin ku ew xwedî .fade
û.in
dersên berê li wan hatine sepandin.
$().alert()
Ji bo bûyerên klîk ên li ser hêmanên dûv ku xwedî data-dismiss="alert"
taybetmendiyê ne, hişyariyek dike. (Gava ku destpêkirina xweseriya data-api bikar bînin ne hewce ye.)
$().alert('close')
Bi rakirina wê ji DOM-ê hişyariyek digire. Ger çînên .fade
û .in
li ser hêmanê hebin, berî ku were rakirin hişyar dê biqede.
Pêveka hişyariya Bootstrap çend bûyeran ji bo girêdana fonksiyona hişyariyê eşkere dike.
Cureyê bûyerê | Terîf |
---|---|
girtin.bs.hişyar | close Dema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite. |
girtî.bs.hişyar | Dema ku hişyarî hat girtin ev bûyer tê şewitandin (dê li benda bidawîbûna veguheztinên CSS bimîne). |
Zêdetir bi bişkokan bikin. Rewşên bişkojka kontrol bikin an jî ji bo hêmanên zêdetir ên mîna darikên amûran komên bişkokan biafirînin.
Firefox di nav barkirina rûpelan de rewşên kontrolê (seqetbûn û kontrolkirin) berdewam dike . Rêbazek ji bo vê yekê karanîna autocomplete="off"
ye. Binêre xeletiya Mozilla #654072 .
Zêde data-loading-text="Loading..."
bikin ku li ser bişkokek rewşek barkirinê bikar bînin.
Ev taybetmendî ji v3.3.5-ê hatî derxistin û di v4-ê de hatî rakirin.
Ji bo xatirê vê xwenîşandanê, em bikar tînin data-loading-text
û $().button('loading')
, lê ew ne tenê dewlet e ku hûn dikarin bikar bînin. Di belgeyê de li ser vê yekê bêtir bibînin$().button(string)
.
Zêde data-toggle="button"
bikin ku guheztina li ser bişkokek yekane çalak bikin.
.active
ûaria-pressed="true"
Ji bo bişkokên pêş-veguheztin, divê hûn .active
çîn û aria-pressed="true"
taybetmendiyê li button
xwe zêde bikin.
Zêde data-toggle="buttons"
bikin .btn-group
qutiyek kontrolê an têketinên radyoyê yên tê de hene da ku veguheztina şêwazên wan ên têkildar çalak bikin.
.active
Ji bo vebijarkên pêşhilbijartî, divê hûn bi xwe .active
polê li têketinê zêde label
bikin.
Ger rewşa kontrolkirî ya bişkojka qutiya kontrolê bêyî ku click
bûyerek li ser bişkokê were avêtin were nûve kirin (mînak bi riya <input type="reset">
an bi danîna checked
taybetmendiya têketinê), hûn ê hewce bikin ku hûn bi xwe .active
çîna li ser têketinê biguherînin label
.
$().button('toggle')
Rewşa pushê vedike. Bişkojk xuya dike ku ew çalak bûye.
$().button('reset')
Rewşa bişkojkê ji nû ve vedike - nivîsê bi nivîsa orîjînal diguhezîne. Ev rêbaz asynkron e û berî ku vesazkirin bi rastî qediya vedigere.
$().button(string)
Nivîsarê li her rewşa nivîsê ya diyarkirî diguhezîne.
Pêveka maqûl a ku ji bo guheztina hêsan çend çîn bikar tîne.
Ji bo hilweşandinê pêdivî ye ku pêveka veguherînan di guhertoya weya Bootstrap de hebe.
Bişkojkên jêrîn bikirtînin da ku elementek din bi guhertinên polê ve nîşan bidin û veşêrin:
.collapse
naverokê vedişêre.collapsing
di dema veguherînan de tê sepandin.collapse.in
naverokê nîşan dideHûn dikarin girêdanek bi href
taybetmendiyê, an bişkokek bi data-target
taybetmendiyê bikar bînin. Di her du rewşan de, data-toggle="collapse"
pêdivî ye.
Tevgera hilweşînê ya xwerû dirêj bikin da ku bi pêkhateya panelê re akordeyonek çêbikin.
Di heman demê de gengaz e ku meriv .panel-body
s-yê bi .list-group
s-yê veguhezîne.
Bawer bikin aria-expanded
ku li hêmana kontrolê zêde bikin. Ev taybetmendî bi eşkere rewşa heyî ya hêmana hilweşandî ji xwendevanên ekranê û teknolojiyên alîkar ên mîna wan re diyar dike. Ger hêmana hilavêtinê ji hêla xwerû ve girtî be, divê nirxa wê hebe aria-expanded="false"
. Ger we hêmana hilavêtinê destnîşan kiriye ku ji hêla xwerû ve bi karanîna in
polê vekirî be, aria-expanded="true"
li şûna wê li ser kontrolê bicîh bikin. Pêvek dê bixweber vê taybetmendiyê biguherîne li ser bingeha ku hêmana hilweşandî hatiye vekirin an girtî ye.
Wekî din, heke hêmana kontrolê ya we hêmanek yekane ya hilaweşkirî hedef digire - ango data-target
taybetmendî ber bi id
hilbijêrek ve îşaret dike - hûn dikarin aria-controls
taybetmendiyek din li hêmana kontrolê zêde bikin, ku id
hêmana hilweşandî tê de ye. Xwendevanên ekrana nûjen û teknolojiyên arîkar ên bi vî rengî vê taybetmendiyê bikar tînin da ku ji bikarhêneran kurtebirên zêde peyda bikin da ku rasterast li hêmana hilweşandî bixwe bigerin.
Pêveka hilweşînê ji bo hilgirtina giran çend dersan bikar tîne:
.collapse
naverokê vedişêre.collapse.in
naverokê nîşan dide.collapsing
dema ku veguheztin dest pê dike tê zêdekirin, û dema ku ew qediya tê jêbirinVan dersan dikarin li component-animations.less
.
Tenê data-toggle="collapse"
û a data-target
li hêmanê zêde bikin da ku bixweber kontrola hêmanek hilweşandî destnîşan bikin. Taybetmendî data-target
hilbijêrek CSS-ê qebûl dike ku hilweşînê li ser bicîh bike. Bawer bikin ku polê collapse
li hêmana hilweşandî zêde bikin. Heke hûn dixwazin ku ew bi xweber vebe, çîna pêvek zêde bikin in
.
Ji bo ku rêveberiya komê ya mîna akordeyonê li kontrolek dagirtî zêde bikin, taybetmendiya daneyê zêde bikin data-parent="#selector"
. Ji bo dîtina vê di çalakiyê de, serî li demo bidin.
Bi destan çalak bike bi:
Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-
, wekî di data-parent=""
.
Nav | awa | destçûnî | terîf |
---|---|---|---|
dê û bav | hilbijêr | şaş | Ger hilbijarkek were peyda kirin, wê hingê hemî hêmanên hilweşandî yên di binê dêûbavê diyarkirî de dê werin girtin dema ku ev tişta hilvekirî were xuyang kirin. (wek behreya akordionê ya kevneşopî - ev bi polê ve girêdayî panel ye) |
toggle | boolean | rast | Hêmana hilavêtinê ya li ser bangkirinê vedike |
.collapse(options)
Naveroka we wekî hêmanek hilweşandî çalak dike. Vebijarkek vebijarkî qebûl object
dike.
.collapse('toggle')
Hêmanek dagirtî ji bo xuyangkirin an veşartinê vedigire. Berî ku hêmana hilavêtinê bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.collapse
an hidden.bs.collapse
bûyer çêbibe) vedigere bangkerê.
.collapse('show')
Elementeke davekirî nîşan dide. Berî ku hêmana hilavêtinê bi rastî were xuyang kirin (ango berî ku shown.bs.collapse
bûyer çêbibe) vedigere bangkerê.
.collapse('hide')
Hêmanek hilweşandî vedişêre. Berî ku hêmana hilavêtinê bi rastî were veşartin (ango berî ku hidden.bs.collapse
bûyer çêbibe) vedigere bangkerê.
Dersa hilweşînê ya Bootstrap çend bûyeran ji bo girêdana fonksiyona hilweşînê eşkere dike.
Cureyê bûyerê | Terîf |
---|---|
nîşan bide.bs.hilweşîn | show Dema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite. |
nîşan dan.bs.hilweşîn | Dema ku hêmanek hilweşandî ji bikarhênerê re xuya bibe ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS temam bibin). |
veşartin.bs.hilweşîn | hide Dema ku rêbaz hate gazî kirin ev bûyer yekser tê şewitandin . |
veşartî.bs.hilweşîn | Ev bûyer dema ku hêmanek hilweşandî ji bikarhêner ve hatî veşartin tê şewitandin (dê li bendê bimîne ku veguheztinên CSS biqede). |
Parçeyek slideshow ji bo bisiklêtan di nav hêmanan de, mîna karûzek. Karûzelên hêlînkirî nayên piştgirî kirin.
Parçeya carousel bi gelemperî bi standardên gihîştinê re ne lihevhatî ye. Heke hûn hewce ne ku lihevhatî bin, ji kerema xwe vebijarkên din ji bo pêşkêşkirina naveroka xwe bifikirin.
Bootstrap ji bo anîmasyonên xwe bi taybetî CSS3 bikar tîne, lê Internet Explorer 8 & 9 taybetmendiyên CSS yên pêwîst piştgirî nakin. Bi vî rengî, dema ku van gerokan bikar tînin anîmasyonên veguheztina slaytê tune. Me bi niyet biryar da ku ji bo veguheztinan paşverûyên jQuery-yê negirin.
Pêdivî ye ku .active
çîn li yek ji slaytan were zêdekirin. Wekî din, carousel dê neyê xuya kirin.
Ji bo kontrolê ders .glyphicon .glyphicon-chevron-left
û .glyphicon .glyphicon-chevron-right
ders ne hewce ne hewce ne. Bootstrap wekî alternatîfên unicode yên sade .icon-prev
peyda dike..icon-next
.carousel-caption
Bi hêmanek di nav her yekê de sernavan li slaytên xwe zêde bikin .item
. Hema hema hema her HTML-ya vebijarkî li wir bi cîh bikin û ew ê bixweber were rêzkirin û formatkirin.
Ji bo ku kontrolên carousel bi rêkûpêk tevbigerin, pêdivî ye ku id
karûzek li ser konteynera herî derveyî (ya ) were bikar anîn. .carousel
Dema ku gelek carousel lê zêde dikin, an dema ku carouselek diguhezînin id
, pê ewle bin ku kontrolên têkildar nûve bikin.
Taybetmendiyên daneyê bikar bînin da ku bi hêsanî pozîsyona carouselê kontrol bikin. data-slide
keywords prev
an jî qebûl dike next
, ku pozîsyona slideyê li gorî pozîsyona wê ya heyî diguhezîne. Alternatîf, bikar bînin data-slide-to
ku navnîşek slide ya xav bi karûselê re derbas bikin data-slide-to="2"
, ku pozîsyona slideyê vediguhezîne navnîşek taybetî ya ku bi dest pê dike 0
.
Taybetmendî data-ride="carousel"
ji bo nîşankirina carouselek wekî anîmasyonek ku di barkirina rûpelê de dest pê dike tê bikar anîn. Ew nikare bi hevberdana bi destpêkirina JavaScriptê ya eşkere ya heman carouselê (zêde û nehewce) re were bikar anîn.
Carousel bi destan bang bikin bi:
Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-
, wekî di data-interval=""
.
Nav | awa | destçûnî | terîf |
---|---|---|---|
navber | jimare | 5000 | Rêjeya dema derengmayîna di navbera bisiklêta bixweber a babetek de. Ger derew be, carousel dê bixweber nekeve. |
mizdan | string | null | "livîn" | Ger "hover" bisiklêtê bisiklêtê li ser were danîn rawestîne û bisiklêta carouselê ji nû ve mouseenter dest pê bike mouseleave . Ger li ser were danîn null , hejandina li ser karûselê wê rawestîne. |
pêçan | boolean | rast | Ger carousel bi domdarî bizivire an rawestgehên dijwar hebin. |
kilawye | boolean | rast | Ma carousel divê ji bûyerên klavyeyê re bertek nîşan bide. |
.carousel(options)
Karûselê bi vebijarkek vebijarkî object
dest pê dike û di nav tiştan de bisiklêtê dest pê dike.
.carousel('cycle')
Ji çepê ber bi rastê ve di nav tiştên karûselê re digere.
.carousel('pause')
Karûselê ji bisiklêtan di nav tiştan re rawestîne.
.carousel(number)
Karûselê di çarçoveyek taybetî de (0 bingeh, dişibihe rêzeyekê) digerîne.
.carousel('prev')
Dûv re berbi babeta berê ve diçe.
.carousel('next')
Dûv re ber bi babeta din ve diçe.
Dersa karûselê ya Bootstrap du bûyeran ji bo girêdana fonksiyona karûselê eşkere dike.
Her du bûyer xwedî taybetmendiyên din ên jêrîn in:
direction
: Arasteya ku carousel tê de dizivire (yan yan "left"
jî "right"
).relatedTarget
: Hêmana DOM-ê ya ku wekî hêmanek çalak di cîhê xwe de tê hilanîn.Hemû bûyerên carousel li carousel bi xwe (ango li <div class="carousel">
).
Cureyê bûyerê | Terîf |
---|---|
slide.bs.carousel | slide Dema ku rêbaza nimûneyê tê xwestin ev bûyer tavilê dişewite. |
slid.bs.carousel | Dema ku carousel veguherîna xwe ya slaytê qedand ev bûyer tê şewitandin. |
Pêveka affix -ê vedibe position: fixed;
û vedike, bandora ku bi position: sticky;
. Subnavîgasyon li milê rastê demoyek zindî ya pêveka affix-ê ye.
Pêveka pêvekê bi taybetmendiyên daneyê an bi destê xwe bi JavaScript-a xwe re bikar bînin. Di her du rewşan de, divê hûn ji bo cîh û firehiya naveroka xweya pêvekirî CSS peyda bikin.
Nîşe: Pêveka pêvekirinê li ser hêmanek ku di nav hêmanek bi pozîsyonek nisbeten de cih digire, wekî stûnek kişandî an pêvekirî, ji ber xeletiyek vegotina Safari bikar neynin .
Pêveka pêvekê di navbera sê çînan de vediguhere, her yek dewletek taybetî temsîl dike: .affix
, .affix-top
, û .affix-bottom
. Pêdivî ye ku hûn şêwazan, ji bilî li position: fixed;
ser .affix
, ji bo van dersan bi xwe (ji vê pêvekê serbixwe) peyda bikin da ku pozîsyonên rastîn birêve bibin.
Li vir pêveka affix çawa dixebite:
.affix-top
ku nîşan bide ku hêman di pozîsyona xweya herî jorîn de ye. Di vê nuqteyê de pozîsyona CSS-ê ne hewce ye..affix
cîh digire .affix-top
û saz dike position: fixed;
(ji hêla CSS ya Bootstrap ve hatî peyda kirin)..affix
guheztin .affix-bottom
. Ji ber ku veqetandin vebijarkî ne, ji bo danîna yekê hewce dike ku hûn CSS-ya guncan saz bikin. Di vê rewşê de, position: absolute;
dema ku hewce bike lê zêde bike. Pêvek taybetmendiya daneyê an vebijarka JavaScript-ê bikar tîne da ku diyar bike ku hêman ji wir li ku derê bi cîh bike.Pêngavên jorîn bişopînin da ku CSS-ya xwe ji bo yek ji vebijarkên karanîna jêrîn saz bikin.
Ji bo ku bi hêsanî behreya pêvekirinê li her hêmanekê zêde data-spy="affix"
bikin, tenê li hêmana ku hûn dixwazin bişopînin lê zêde bikin. Ji bo pênasekirina kengê guheztina pînekirina hêmanekê guheztinan bikar bînin.
Bi JavaScriptê re pêveka affix bang bikin:
Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-
, wekî di data-offset-top="200"
.
Nav | awa | destçûnî | terîf |
---|---|---|---|
offset | hejmar | fonksiyon | tişt | 10 | Pîkselên ku ji ekranê têne derxistin dema ku pozîsyona gerokê hesab dikin. Ger jimareyek yekane were peyda kirin, dê guheztin hem di rêyên jorîn û jêrîn de were sepandin. Ji bo peydakirina yekane, binî û jor veqetandek tenê tiştek peyda bikin offset: { top: 10 } an offset: { top: 10, bottom: 5 } . Dema ku hûn hewce ne ku bi dînamîk veqetandinê hesab bikin fonksiyonek bikar bînin. |
armanc | hilbijêr | girêk | hêmana jQuery | window object _ |
Hêmana armancê ya pêvekê diyar dike. |
.affix(options)
Naveroka we wekî naveroka pêvekirî çalak dike. Vebijarkek vebijarkî qebûl object
dike.
.affix('checkPosition')
Li ser bingeha pîvan, pozîsyon û pozîsyona gerîdeyê ya hêmanên têkildar, rewşa pêvekê ji nû ve hesab dike. Çîn .affix
, .affix-top
, û .affix-bottom
li gorî dewleta nû li naveroka pêvekirî têne zêdekirin an jê têne derxistin. Dema ku pîvanên naveroka pêvekirî an hêmana armanc têne guheztin pêdivî ye ku ev rêbaz were gazî kirin, da ku cîhgirtina rast a naveroka pêvekirî were misoger kirin.
Pêveka pêvekirinê ya Bootstrap çend bûyeran ji bo girêdana fonksiyona pêvekirinê eşkere dike.
Cureyê bûyerê | Terîf |
---|---|
affix.bs.affix | Berî ku hêman were pêvekirin, ev bûyer yekser dişewite. |
pêxist.bs.affix | Ev bûyer piştî ku hêman hate pêvekirin tê şewitandin. |
affix-top.bs.affix | Berî ku hêman li jorê were girêdan ev bûyer yekser dişewite. |
affixed-top.bs.affix | Ev bûyer piştî ku hêman li jorê hate girêdan tê şewitandin. |
affix-bottom.bs.affix | Berî ku hêman li jêr were girêdan, ev bûyer yekser dişewite. |
affixed-bottom.bs.affix | Ev bûyer piştî ku hêman li jêr hate pêvekirin tê şewitandin. |