Javascript ee Bootstrap

Keen qaybaha Bootstrap nolosha-hadda oo wata 12 alwaaxyo jQuery ah .

Hababka

La habeeyey, laakiin dabacsan, qaado plugin-ka Javascript-ka caadiga ah oo leh shaqada ugu yar ee loo baahan yahay iyo cillado caqli-gal ah.

Hoos u dhac

Ku dar liiska hoos-u-dhaca ku dhawaad ​​wax kasta oo ku jira Bootstrap oo wata plugin fudud. Bootstrap wuxuu leeyahay taageero menu hoos u dhac buuxa oo ku jira navbar, tabs, iyo kaniiniyada.

Scrollspy

Isticmaal scrollspy si aad si otomaatig ah u cusboonaysiiso xidhiidhada ku jira navbar kaaga si aad u muujiso xidhiidhka hadda jira ee ku salaysan booska rogid.

Tabaha la rogi karo

Isticmaal plugin-kan si aad uga dhigto tabs iyo kaniiniyada faa'iido badan leh adiga oo u oggolaanaya inay ku dhex wareegaan muraayadaha la taaban karo ee macluumaadka gudaha.

Tilmaamaha Qalabka

Qaadasho cusub oo ku saabsan jQuery Tipsy plugin, Tooltips kuma tiirsan yihiin sawirada - waxay u isticmaalaan CSS3 animations iyo xogta sifada kaydinta cinwaanka maxaliga ah.

Popovers *

Ku dar waxyaabo yaryar oo dulsaaran, sida kuwa iPadka, shay kasta oo loogu talagalay macluumaadka labaad ee guriyeynta.

* Waxay u baahan tahay Tilmaamaha Qalabka si loogu daro

Fariimaha digniinta

Plugin-ka digniinta waa fasal aad u yar oo loogu darayo shaqeynta dhow ee digniinaha.

Badhamada

Wax badan ku samee badhamada. Xakamaynta badhanka ayaa sheegaysa ama samee kooxo badhamada qaybo badan sida qalabyada.

Burbur

U hel qaababka aasaasiga ah iyo taageerada dabacsan ee qaybaha burburi kara sida accordions iyo navigation.

Carousel

Samee wareeg-ku-meel-gaar ah oo ah xog kasta oo aad rabto inaad bixiso sawir-qaadis nuxur leh.

Nooca madaxa

Qalab aasaasi ah, oo si fudud loo fidiyay si dhakhso ah loogu abuuro madax-qoritaan xarrago leh oo leh qaab kasta oo qoraal ah.

Kala-guurka *

Saamaynta kala-guurka ee fudud, ku dar bootstrap-transition.js hal mar si aad ugu dul-booddo moodalka ama aad u tirtirto digniinaha.

* Looga baahan yahay animation in plugins

Madaxa kor u qaad! Dhammaan furayaasha Javascript waxay u baahan yihiin noocii ugu dambeeyay ee jQuery.

Ku saabsan moodooyinka

La habeeyey, laakiin dabacsan, qaado plugin-ka Javascript-ka caadiga ah oo leh shaqada ugu yar ee loo baahan yahay iyo cillado caqli-gal ah.

Soo deji faylka

Tusaale taagan

Hoos waxaa ku yaal qaab la sameeyay.

Muujinta tooska ah

U beddel modal adigoo isticmaalaya javascript adigoo gujinaya badhanka hoose. Hoos ayay u soo degi doontaa oo waxay ka soo geli doontaa xagga sare ee bogga.

Bilaw demo modal

Isticmaalka bootstrap-modal

Ka wac modal ka Javascript:

  1. $ ( '#myModal' ). moodal ( ikhtiyaar )

Ikhtiyaarada

Magaca nooca default sharaxaad
dib-u-dhac booliyan run Waxaa ka mid ah curiyaha qaab-dhabeedka. Beddelkeeda, sheeg staticmeel-dambe oo aan xidhin habka gujiska.
kiiboodhka booliyan run Wuxuu xidhaa habka marka furaha baxsadka la riixo
show booliyan run Muujinaya habka marka la bilaabay.

Calaamadayn

Waxaad si fudud ugu dhaqaajin kartaa modal-ka boggaaga adigoon qorin hal xariiq oo javascript ah. Kaliya deji data-toggle="modal"curiyaha kontoroolka leh data-target="#foo"ama href="#foo"u dhigma modal element id, oo marka la gujiyo, waxay bilaabi doontaa habkaaga.

Sidoo kale, si aad ugu darto ikhtiyaarada tusaalahaaga moodeelka ah, kaliya ku dar iyaga sifada xogta dheeraadka ah ee qaybta kontoroolka ama jaantuska laftiisa.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Qaabka bilawga </a>
  1. <div class = "Qarin modal" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "xir" data-dismiss = "modal" > × </button>
  4. <h3> Madaxa Modal </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Hal jidh oo wanaagsan… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Xir </a>
  11. <a href = "#" class = "btn btn-primary" > Keydi isbeddelada </a>
  12. </div>
  13. </div>
Madaxa kor u qaad! Haddii aad rabto in modal-kaagu uu ku nooleeyo gudaha iyo dibadda, kaliya ku dar .fadefasalka .modalcuriyaha (tixraac demo si aad tan u aragto) oo ku dar bootstrap-transition.js.

Hababka

.modal(ikhtiyaar)

Waxay u hawlgelisaa macluumaadkaaga qaab habaysan. Aqbala ikhtiyaarka ikhtiyaarka ah object.

  1. $ ( '#myModal' ). modal ({
  2. kiiboodhka : been
  3. })

.modal('rogid')

Gacanta ayaa u roga modal

  1. $ ( '#myModal' ). moodal ( 'rogrogmi kara' )

.modal('show')

Gacanta ayaa u fura modal

  1. $ ( '#myModal' ). moodal ( 'show' )

.modal('Qarin')

Gacanta ayaa u qarisa habka.

  1. $ ( '#myModal' ). modal ( 'Qarin' )

Dhacdooyinka

Bootstrap's modal class wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay in lagu xidho shaqaynta modal.

Dhacdo Sharaxaada
show Dhacdadani waxay isla markaaba gubataa marka showhabka tusaalaha la yiraahdo.
tusay Dhacdadan ayaa la eryaa marka habka loo muujiyo isticmaalaha (waxay sugi doontaa inta u wareejinta css ay dhamaystirayso).
qari Dhacdadan ayaa isla markiiba la eryaa marka hidehabka tusaale ahaan loo waco.
qarsoon Dhacdadan waxa la eryaa marka modalku dhammeeyo in laga qariyo isticmaalaha (waxa ay sugi doontaa inta css kala guurka la dhamaystirayo).
  1. $ ( '#myModal' ). daaran ( 'Qarin' , function () {
  2. // wax samee…
  3. })

Plugin ScrollSpy waxaa loogu talagalay si toos ah cusboonaysiinta bartilmaameedyada nav ku salaysan booska duudduuban.

Soo deji faylka

Tusaale navbar leh scrollspy

Guji aagga hoose oo daawo cusboonaysiinta navigation Qodobada hoos u dhaca ayaa sidoo kale la iftiimin doonaa. Isku day!

@ buuran

Ad leggings keytar, brunch id art party dolor labour. Pitchfork yr enim lo-fi ka hor inta aysan iibin qui. Tumblr beer-ilaa-miiska xuquuqda baaskiilka wax kasta ha ahaatee. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby funaanad lomo Jean shorts, williamsburg hoodie minim qui waxaa laga yaabaa inaadan maqlin iyaga iyo cardigan Trust fund culpa biodiesel wes anderson bilicda. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa shaarib skateboard, oo leh gadhka fugiat velit gadhka. Gadhka xorta ah aliqua cupidatat mcsweeney's vero. Cupidatat afar loko nisi, iyo helvetica nulla carles. Gaariga cuntada ee shaabada leh ee cosby funaanad, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non bilicda jimicsiga quis gentrify. Brooklyn adipisicing craft biir ku xigeenka keytar deserunt.

mid

Occaecat commodo aliqua delectus. Beerka farsamada gacanta ee deserunt skateboard ea. Xuquuqda baaskiilka Lomo adipisicing banh mi, velit ea sunt heerka xiga locavore kafee-kaliya ee magna veniam. Nolosha sare id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim boorsada fariinta. Cred ex in, waarta delectus consectetur fanny pack iphone.

laba

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.

three

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 wax alla wixii gaari cunto ah oo delectus ah. Sapiente synth id la qaatay. Locavore sed helvetica cliche bir ah, onkod laga yaabo inaadan maqlin iyaga oo keenaya hoodie gluten-free lo-fi fap aliquip. Labore elit placeat ka hor inta aysan iibin, Terry Richardson oo aad u cad cad brunch nesciunt quis cosby funaanad pariatur keffiyeh ut helvetica artisan. Beerka farsamada gacanta ee Cardigan seitan velit diyaarsan. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco onkod.


Isticmaalka bootstrap-scrollspy.js

Ka wac qoraalka qoraalka ah Javascript:

  1. $ ( '#navbar' ). scrollspy ()

Calaamadayn

Si aad si fudud ugu darto dabeecadda scrollspy to your topbar navigation, kaliya ku dar data-spy="scroll"walxaha aad rabto in aad basaasaan (inta badan sida caadiga ah tani waxay noqon doontaa jidhka).

  1. <body data-spy = "rogad" > ... </body>
Madaxa kor u qaad! Xidhiidhiyayaasha Navbar waa inay lahaadaan bartilmaameedyada id la xallin karo. Tusaale ahaan, <a href="#home">home</a>waa in uu u dhigmaa shay ku jira guriga sida <div id="home"></div>.

Hababka

.scrollspy('cusbooneysii')

Markaad isticmaalayso scrollspy iyadoo lala kaashanayo ku darista ama ka saarida walxaha DOM, waxaad u baahan doontaa inaad wacdo habka dib u cusboonaysiinta sida:

  1. $ ( '[xogta-basaasiga = "booq" ). mid kasta ( shaqo () {
  2. var $ Spy = $ ( kan ). scrollspy ( 'cusbooneysii' )
  3. }

Ikhtiyaarada

Magaca nooca default sharaxaad
dhimis tirada 10 Pixels in laga bilaabo xagga sare marka la xisaabinayo booska rogid.

Dhacdooyinka

Dhacdo Sharaxaada
firfircooni Dhacdadani waxay dab kacaysaa mar kasta oo shay cusub uu hawl galo duubista.

Pluginkani waxa uu ku darayaa tabo degdeg ah, firfircooni leh iyo shaqaynta kiniinka si loogu gudbo nuxurka maxaliga ah.

Soo deji faylka

Tusaalaha tabs

Guji tabsyada hoose si aad ugu kala beddesho muraayadaha qarsoon, xitaa iyada oo loo marayo liiska hoos u dhaca.

Denim cayriin waxaa laga yaabaa inaadan maqlin iyaga Jean-gaaban Austin. Nesciunt tofu stumptown aliqua, retro synth master nadiifinta. Shaarubaha cliche tempor, williamsburg carles vegan helvetica. Reprehenderit hiliblaha retro keffiyeh dreamcatcher synth. Cosby funaanad eu banh mi, qui irure terry richardson ex squid. Sida loo sameeyo salvia cillum iphone. Seitan aliquip quis cardigan lebbiska Maraykanka, hiliblaha 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.


Isticmaalka bootstrap-tab.js

Ku sahli tab tabsiyada Javascript-ka (tabo kasta waxa ay u baahan tahay in si gaar ah loo hawlgeliyo):

  1. $ ( '#myTab a' ). guji ( function ( e ) {
  2. e . ka hortaggaDefault ();
  3. $ ( kan ). tab ( 'show' );
  4. })

Waxaad u dhaqaajin kartaa tabs shaqsiyeed dhowr siyaabood:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'show' ); // Dooro tab magac ahaan
  2. $ ( '#myTab a: first' ). tab ( 'show' ); // Dooro tab ugu horeysa
  3. $ ( '#myTab a: last' ). tab ( 'show' ); // Dooro tab ugu dambeeya
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'show' ); // Dooro tab saddexaad (0-indexed)

Calaamadayn

Waxaad dhaqaajin kartaa tab ama kaniiniga navigation adoon qorin wax javascript ah adigoo si fudud u qeexaya data-toggle="tab"ama data-toggle="pill"curiye. Ku darista naviyo nav-tabsxiisadaha tab ulwaxay dabaqi doontaa habaynta tabka bootstrap.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Guriga </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profile </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Farriimaha </a></li>
  5. <li><a href = "#settings" data-toggle = "tab"> Settings </a></li >
  6. </ul>

Hababka

$() tab

Wuxuu hawlgeliyaa curiyaha tab iyo weelka ka kooban. Tabku waa inuu lahaadaa mid data-targetama meel la hrefbeegsanayo noodhka weelka ee DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "firfircoon" ><a href = "#guriga" > Guriga </a></li>
  3. <li><a href = "#profile" > Profile </a></li>
  4. <li><a href = "#farimaha" > Farriimaha </a></li>
  5. <li><a href = "#Settings" > Dejinta </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "guri" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "farimaha" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( shaqada () {
  17. $ ( '#myTab a: last' ). tab ( 'show' );
  18. })
  19. </script>

Dhacdooyinka

Dhacdo Sharaxaada
show Dhacdadani waxay ku shidan tahay bandhiga tab, laakiin ka hor intaan tab cusub la muujin. Isticmaal event.targetoo event.relatedTargetsi aad u beegsato tab firfircoon iyo tabtii hore ee firfircoonayd (haddii la heli karo) siday u kala horreeyaan.
tusay Dhacdadani waxay ku gubanaysaa bandhiga tab ka dib marka tab la muujiyo. Isticmaal event.targetoo event.relatedTargetsi aad u beegsato tab firfircoon iyo tabtii hore ee firfircoonayd (haddii la heli karo) siday u kala horreeyaan.
  1. $ ( 'a[data-toggle="tab"]' ). daaran ( 'la tusay' , shaqada ( e ) {
  2. e . bartilmaameed // tab firfircoon
  3. e . laxiriiraTarget // tab hore
  4. })

Ku saabsan Tilmaamaha Qalabka

Waxaa dhiirigeliyay plugin jQuery.tipsy ee aad u wanaagsan oo uu qoray Jason Frame; Tilmaamaha qalabku waa nooc la cusboonaysiiyay, kaas oo aan ku tiirsanayn sawirada, u isticmaal css3 animations, iyo xogta sifada kaydinta cinwaanka maxaliga ah.

Soo deji faylka

Tusaale ahaan isticmaalka qalabka

Ka dul rog xiriirka hoose si aad u aragto qalabyada:

Surwaal dhagan keffiyeh malaha maadan maqlin iyaga. Photo booth gadhka cayriin denim warqad-press vegan messenger bag stumptown. Beer-ilaa-miiska seitan, mcsweeney's fixie sustainable quinoa 8-bit dharka maraykanku waxay leeyihiin terry Richardson vinyl chambray. Gadhka stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, afar loko mcsweeney's chambray vegan nadiif ah. Farsamoyaqaan dhab ah oo biro ah wax kasta oo keytar , scenester farm-to-table banksy Austin twitter handle freegan cred denim ceeriin hal-asalka kafeega viral.


Isticmaalka bootstrap-tooltip.js

Ku kiciya aaladda javascript:

  1. $ ( '#tusaale' ). qalab ( ikhtiyaar )

Ikhtiyaarada

Magaca nooca default sharaxaad
animation booliyan run Codso u gudubka css libdhi xagga qalabka
meelaynta xarig |shaqo 'sare' sida loo dhigo tip-tip-top | hoose | bidix | xaq
dooriye xadhig been ah Haddii la bixiyo doorasho, walxaha tibaaxaha ah waxaa loo igman doonaa bartilmaameedyada la cayimay.
horyaalka xadhig | shaqayn '' Qiimaha cinwaanka caadiga ah haddii aan 'ciwaanka' taaggu jirin
kicin xadhig 'gaabsi' sida aaladda loo kiciyo - hover | diiradda | buug-gacmeedka
dib u dhac lambarka | walax 0

daahitaanka muujinta iyo qarinta aaladda (ms) - kuma khusayso nooca kiciya gacanta

Haddii nambar la keeno, dib u dhac ayaa lagu dabaqayaa qarinta/muujinta labadaba

Qaab dhismeedka shaygu waa:delay: { show: 500, hide: 100 }

Madaxa kor u qaad! Ikhtiyaarada aaladaha gaarka ah waxaa lagu qeexi karaa iyadoo la adeegsanayo sifooyinka xogta.

Calaamadayn

Sababaha waxqabadka awgood, Tooltip iyo Popover data-apis ayaa door biday. Haddii aad jeclaan lahayd inaad isticmaasho kaliya caddee ikhtiyaarka doorashada.

  1. <a href = "#" rel = "tooltip" title = "tooltip first" > dusha iga bood </a>

Hababka

$().tooltip(ikhtiyaar)

Wuxuu ku lifaaqaa gacan hayaha qalab ururinta walxaha.

.tooltip('show')

Waxay daaha ka qaadaysaa aaladda curiyaha

  1. $ ( '# element' ). qalab tip ( 'show' )

.tooltip('Qarin')

Wuxuu qariyaa calaamadda curiyaha.

  1. $ ( '# element' ). qalab ( 'Qarin' )

.tooltip('Toggle')

Beddelayaa shay raadka.

  1. $ ( '# element' ). Tooltip ( 'rogid' )

Ku saabsan popovers

Ku dar waxyaabo yaryar oo dulsaaran, sida kuwa iPadka, shay kasta oo loogu talagalay macluumaadka labaad ee guriyeynta.

* Waxay u baahan tahay qalab si loogu daro

Soo deji faylka

Tusaale boodboodka

Dul mar badhanka si aad u kiciso popover-ka


Isticmaalka bootstrap-popover.js

U oggolow popovers iyada oo loo marayo Javascript:

  1. $ ( '#tusaale' ). popover ( doorashooyinka )

Ikhtiyaarada

Magaca nooca default sharaxaad
animation booliyan run Codso u gudubka css libdhi xagga qalabka
meelaynta xarig |shaqo 'sax' sida loo dhigo popover - top | hoose | bidix | xaq
dooriye xadhig been ah haddii la bixiyo doorasho, walxaha tibaaxaha ah waxaa loo igman doonaa bartilmaameedyada la cayimay
kicin xadhig 'gaabsi' sida aaladda loo kiciyo - hover | diiradda | buug-gacmeedka
horyaalka xadhig | shaqayn '' Qiimaha cinwaanka caadiga ah haddii 'cinwaanka' uusan jirin
nuxurka xadhig | shaqayn '' Qiimaha nuxurka caadiga ah haddii 'data-content' sifo aysan jirin
dib u dhac lambarka | walax 0

daahitaanka muujinta iyo qarinta popover-ka (ms) - kuma khusayso nooca kiciya gacanta

Haddii nambar la keeno, dib u dhac ayaa lagu dabaqayaa qarinta/muujinta labadaba

Qaab dhismeedka shaygu waa:delay: { show: 500, hide: 100 }

Madaxa kor u qaad! Ikhtiyaarada popovers shaqsi ahaan waxaa lagu qeexi karaa iyadoo la adeegsanayo sifooyinka xogta.

Calaamadayn

Sababaha waxqabadka awgood, Tooltip iyo Popover data-apis ayaa door biday. Haddii aad jeclaan lahayd inaad isticmaasho kaliya caddee ikhtiyaarka doorashada.

Hababka

$().popover(ikhtiyaar)

Wuxuu u bilaabaa popovers ururinta curiyaha.

.popover('show')

Waxay daaha ka qaadaysaa curiyayaasha soo booda.

  1. $ ( '# element' ). popover ( 'muuji' )

.popover('Qarin')

Waxay qarisaa curiyayaasha soo booda.

  1. $ ( '# element' ). popover ( 'Qarin' )

.popover('toggle')

Wuxuu rogaa curiyayaasha soo booda

  1. $ ( '# element' ). popover ( "rogrogmi" )

Ku saabsan digniinaha

Plugin-ka digniinta waa fasal aad u yar oo loogu darayo shaqeynta dhow ee digniinaha.

Download

Tusaale ahaan digniinaha

Plugin-ka digniinta wuxuu ku shaqeeyaa fariimaha digniinta joogtada ah, wuxuuna xannibaa fariimaha.

guacamole quduuska ah! Hubinta ugu fiican ee naftaada, uma eka mid aad u wanaagsan.

Alla degdeg! Khalad baad gashay!

Beddel kan iyo taas oo isku day mar kale. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Tallaabadan qaado Ama tan samee


Isticmaalka bootstrap-alert.js

U oggolow cayrinta digniinta iyada oo loo marayo Javascript:

  1. $ ( ". heegan" ). heegan ()

Calaamadayn

Kaliya ku dar data-dismiss="alert"batoonkaaga dhow si aad si toos ah u siiso hawlgelinta heeganka dhow.

  1. <a class = "close" data-dismiss = "alert" href = "#" > × </a>

Hababka

$() digniin()

Waxay ku duubtaa dhammaan digniinaha oo leh shaqeyn dhow. Si ogeysiisyadaadu u soo baxaan marka la xiro, hubi inay haystaan .fade​​​​iyo .infasalka mar hore lagu dabaqay iyaga.

digniin ('ku dhow')

Xidhaa digniinta

  1. $ ( ". heegan" ). heegan ( 'xir' )

Dhacdooyinka

Fasalka feejignaanta ee Bootstrap wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay in lagu xidho shaqaynta heeganka.

Dhacdo Sharaxaada
dhow Dhacdadani waxay isla markaaba gubataa marka closehabka tusaalaha la yiraahdo.
xiran Dhacdadan waxa la eryaa marka digniinta la xidho (waxa ay sugi doontaa inta css kala guurka la dhamaystirayo).
  1. $ ( '# feejignaantayda' ). xidhi ( 'xiran' , function () {
  2. // wax samee…
  3. })

Ku saabsan

Wax badan ku samee badhamada. Xakamaynta badhanka ayaa sheegaysa ama samee kooxo badhamada qaybo badan sida qalabyada.

Soo deji faylka

Tusaale ahaan isticmaal

U isticmaal badhamada furaha gobolada iyo beddelka

Dawlad leh
Kelida beddelka
Sanduuqa hubinta
Raadiyaha

Isticmaalka bootstrap-button.js

Daar badhamada Javascript:

  1. $ ( '.nav-tabs' ). badhanka ()

Calaamadayn

Sifooyinka xogtu waxay udub dhexaad u yihiin furaha badhanka. Fiiri koodhka tusaalaha hoose ee noocyada calaamadaynta ee kala duwan.

  1. <!-- Ku dar data-toggle="button" si aad u dhaqaajiso togging hal badhan -->
  2. <button class = "btn" data-toggle = "button" > Kelida Toggle </button>
  3.  
  4. <!-- Ku dar data-toggle="buttons-checkbox" qaabka sanduuqa jeeg-rogista ee btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Bidix </button>
  7. <button class = "btn" > Dhexe </button>
  8. <button class = "btn" > Midig </button>
  9. </div>
  10.  
  11. <!-- Ku dar data-toggle="buttons-radio" qaabka raadiyaha ee btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Bidix </button>
  14. <button class = "btn" > Dhexe </button>
  15. <button class = "btn" > Midig </button>
  16. </div>

Hababka

$().badhanka('toogag')

Beddelayaa gobolka riix Siinaya badhanka muuqaalka in la hawlgeliyay.

Madaxa kor u qaad! Waxaad awood u yeelan kartaa inaad si toos ah u leexiso badhanka adoo isticmaalaya data-togglesifada.
  1. <button class = "btn" data-toggle = "button" > </button>

$().badhanka('loading')

Waxay dejisaa xaalada badhanka si loo raro - wuxuu demiyaa badhanka oo wuxuu ku beddelaa qoraalka qoraalka. Qoraalka soo dejinta waa in lagu qeexaa qaybta badhanka iyadoo la adeegsanayo sifada xogta data-loading-text.

  1. <button class = "btn" data-loading-text = "qalabaynta alaabta..." > ... </button>
Madaxa kor u qaad! Firefox waxay ku sii jirtaa xaalada naafada ah ee guud ahaan culeyska bogga . Habka xalinta tani waa in la isticmaalo autocomplete="off".

$().badhanka('dib u dajin')

Dib u dajinaysaa xaalada badhanka - waxay ku badashaa qoraalka qoraalka asalka ah.

$() badhan (xadhig)

Dib u dajiya xaalada badhanka - waxay ku badashaa qoraalka xaalad kasta oo qoraal ah oo qeexan.

  1. <button class = "btn" data-complete-text = "dhamaatay!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). badhanka ( 'dhamaystiran' )
  4. </script>

Ku saabsan

U hel qaababka aasaasiga ah iyo taageerada dabacsan ee qaybaha burburi kara sida accordions iyo navigation.

Soo deji faylka

* Waxay u baahan tahay plugin Transition in lagu daro.

Tusaale accordion

Annaga oo adeegsanayna plugin burburka, waxaan dhisnay widget qaab accordion fudud:

Anim pariatur cliche reprehenderit, anim eiusmod nolosha sare eedeeymo Terry Richardson iyo squid. 3 xafiis dayax yeey aute, non cupidatat skateboard dolor brunch. Gaariga cuntada quinoa nesciunt laborum eiusmod. Brunch 3 yeey dayax tempor, sunt aliqua ayaa dul saaray shimbir squid kafee hal asal ah nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, biirka farsamada gacanta wes anderson cred nesciunt sapiente ea proident. Ad vegan marka laga reebo hiliblaha ku xigeenka lomo. Leggings occaecat biir beer-la-miiska, denim cayriin bilicsanaanta synth nesciunt malaha ma aadan maqlin iyaga oo ku eedeeyay VHS waara.
Anim pariatur cliche reprehenderit, anim eiusmod nolosha sare eedeeymo Terry Richardson iyo squid. 3 xafiis dayax yeey aute, non cupidatat skateboard dolor brunch. Gaariga cuntada quinoa nesciunt laborum eiusmod. Brunch 3 yeey dayax tempor, sunt aliqua ayaa dul saaray shimbir squid kafee hal asal ah nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, biirka farsamada gacanta wes anderson cred nesciunt sapiente ea proident. Ad vegan marka laga reebo hiliblaha ku xigeenka lomo. Leggings occaecat biir beer-la-miiska, denim cayriin bilicsanaanta synth nesciunt malaha ma aadan maqlin iyaga oo ku eedeeyay VHS waara.
Anim pariatur cliche reprehenderit, anim eiusmod nolosha sare eedeeymo Terry Richardson iyo squid. 3 xafiis dayax yeey aute, non cupidatat skateboard dolor brunch. Gaariga cuntada quinoa nesciunt laborum eiusmod. Brunch 3 yeey dayax tempor, sunt aliqua ayaa dul saaray shimbir squid kafee hal asal ah nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, biirka farsamada gacanta wes anderson cred nesciunt sapiente ea proident. Ad vegan marka laga reebo hiliblaha ku xigeenka lomo. Leggings occaecat biir beer-la-miiska, denim cayriin bilicsanaanta synth nesciunt malaha ma aadan maqlin iyaga oo ku eedeeyay VHS waara.

Isticmaalka bootstrap-collapse.js

Ku oggolow Javascript:

  1. $ ( ". dumay" ). burbur ()

Ikhtiyaarada

Magaca nooca default sharaxaad
waalid dooriye been ah Haddii dooruhu markaas dhammaan walxaha burburi kara ee hoos yimaada waalidka la cayimay waa la xidhi doonaa marka shaygan dumin kara la muujiyo. (oo la mid ah hab-dhaqanka hab-dhaqanka dhaqanka)
leexleex booliyan run Wuxuu beddelaa cunsurka burburi kara marka la codsado

Calaamadayn

Kaliya ku dar data-toggle="collapse"oo a data-targetcuriye si si toos ah loogu qoondeeyo xakamaynta shay burburi kara. Sifadu data-targetwaxay aqbashaa css-dooriyaha si loogu dabaqo burburka. U hubso inaad fasalka ku darto collapsewalxaha duminaya. Haddii aad rabto in uu furmo, ku dar fasalka dheeraadka ah in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. fudud oo la dumin karo
  3. </button>
  4.  
  5. <div id = "demo" class = "ku dumi" > </div>
Madaxa kor u qaad! Si loogu daro maamulka kooxda accordion la mid ah kantaroolka burburi kara, ku dar xogta sifada data-parent="#selector". Tixraac demo si aad u aragto tan ficil ahaan

Hababka

.burbur (ikhtiyaar)

Waxay u hawlgelisaa macluumaadkaaga sidii shay burburi kara. Aqbala ikhtiyaarka ikhtiyaarka ah object.

  1. $ ( '#my Collapsible' ). burbur ({
  2. leexo : been
  3. })

.burbur('rogid')

U rogaa shay burburi kara si loo muujiyo ama loo qariyo.

.burbur ('show')

Wuxuu muujiyaa shay burburi kara.

.burbur('qari')

Waxay qarisaa shay burburi kara.

Dhacdooyinka

Fasalka burburka Bootstrap wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xirida shaqeynta burburka.

Dhacdo Sharaxaada
show Dhacdadani waxay isla markaaba gubataa marka showhabka tusaalaha la yiraahdo.
tusay Dhacdadan waxa la eryaa marka curiyaha burburku uu muuqdo isticmaaluhu (waxa ay sugi doontaa inta css kala guurka la dhamaystirayo).
qari Dhacdadan ayaa isla markiiba la eryaa marka hidehabka loo waco.
qarsoon Dhacdadan waxa la eryaa marka walxaha burburay laga qariyay isticmaalaha (waxa ay sugi doontaa inta css kala guurka la dhamaystirayo).
  1. $ ( '#my Collapsible' ). daaran ( 'Qarin' , function () {
  2. // wax samee…
  3. })

Ku saabsan

Qalab aasaasi ah, oo si fudud loo fidiyay si dhakhso ah loogu abuuro madax-qoritaan xarrago leh oo leh qaab kasta oo qoraal ah.

Soo deji faylka

Tusaale

Bilow ku qor goobta hoose si aad u muujiso natiijooyinka nooca-head.


Isticmaalka bootstrap-typeahead.js

Ka wac typeahead adigoo isticmaalaya javascript:

  1. $ ( '.typehead' ). qoriga ()

Ikhtiyaarada

Magaca nooca default sharaxaad
isha diyaarin [ ] Isha xogta si wax looga weydiiyo.
alaabta tirada 8 Tirada ugu badan ee alaabta lagu muujinayo hoos u dhaca.
dheele shaqayn kiis aan dareen lahayn Habka loo isticmaalo in lagu go'aamiyo haddii weydiintu la mid tahay shay. Aqbala hal dood, itemka soo horjeedda oo lagu tijaabiyo weydiinta. Ku gal weydiinta hadda this.query. Soo celi boolean truehaddii weydiintu tahay mid isku mid ah.
kala soocida shaqayn u dhigma saxda ah,
kiis xasaasi ah,
kiis dareen la'aan ah
Habka loo isticmaalo in lagu kala saaro natiijooyinka otomaatiga ah. Aqbal hal dood itemsoo leh baaxadda tusaalaha nooca-head. Tixraac su'aalaha hadda jira this.query.
iftiimiye shaqayn ayaa iftiiminaya dhammaan kulammada caadiga ah Habka loo isticmaalo in lagu muujiyo natiijooyinka otomaatiga ah. Aqbal hal dood itemoo leh baaxadda tusaalaha nooca-head. Waa inuu soo celiyaa html

Calaamadayn

Ku dar sifada xogta si aad u diiwaan geliso shay leh shaqaynta nooca-head.

  1. <input type = "text" data-provide = "typeahead" >

Hababka

.typehead(ikhtiyaarada)

Wuxuu ku bilaabayaa wax gelinta oo leh madax-madaxeedka.