JavaScript

Keen qaybaha Bootstrap nolosha-hadda oo wata 13 jQuery plugins oo caado ah.

Madaxa kor u qaad! Dukumeentiyadan waxaa loogu talagalay v2.3.2, oo aan hadda si rasmi ah loo taageerin. Fiiri nooca ugu dambeeyay ee Bootstrap!

Shakhsi ama la ururiyey

Plugins-ka si gaar ah ayaa loogu dari karaa (inkasta oo qaarkood ay u baahdeen ku-tiirsanaan), ama dhammaan hal mar. Labada bootstrap.js iyo bootstrap.min.js waxay ka kooban yihiin dhammaan plugins hal fayl.

Sifooyinka xogta

Waxaad isticmaali kartaa dhammaan Bootstrap plugins adiga oo isticmaalaya API calaamadaynta adiga oo aan qorin hal xariiq oo JavaScript ah. Kani waa API fasalka koowaad ee Bootstrap waana inuu noqdaa tixgelintaada ugu horreysa markaad isticmaalayso plugin.

Taasi waxay tidhi, xaaladaha qaarkood waxa laga yaabaa in la jeclaysto in la damiyo shaqadan. Sidaa darteed, waxaanu sidoo kale bixinaa awooda lagu curyaamiyo sifada xogta API annagoo ka saarayna dhammaan dhacdooyinka jidhka ee ku jira magaca ''data-api''. Tani waxay u egtahay sidan:

  1. $ ( 'jirka' ). off ( '.data-api' )

Haddii kale, si loo beegsado plugin gaar ah, kaliya ku dar magaca plugin-ka oo ah meel magac ah oo ay la socoto xogta-api namespace sidan oo kale:

  1. $ ( 'jirka' ). off ( '.alert.data-api' )

API Programmatic

Waxaan sidoo kale aaminsanahay inaad awood u leedahay inaad isticmaasho dhammaan Bootstrap plugins iyada oo keliya JavaScript API. Dhammaan API-yada dadwaynaha waa hal, habab la silsiladi karo, oo soo celi ururinta lagu dhaqmay.

  1. $ ( ".btn.danger" ). badhanka ( "rogid" ). addClass ( "dufan" )

Dhammaan hababka waa in ay aqbalaan shay ikhtiyaari ikhtiyaari ah, xadhig bartilmaameed u ah hab gaar ah, ama waxba (kaas oo bilaabaya plugin leh dabeecad aan caadi ahayn):

  1. $ ( "#myModal" ). modal () // lagu bilaabay cillado
  2. $ ( "#myModal" ). modal ({ kiiboodhka : been }) // lagu bilaabay iyada oo aan lahayn kiiboobo
  3. $ ( "#myModal" ). modal ( 'show' ) // bilaaba oo ku baaqaa bandhiga isla markaaba

Plugin kasta waxa kale oo uu soo bandhigaa dhismeheeda ceeriin ee dhismaha 'Constructor': $.fn.popover.Constructor. Haddii aad jeclaan lahayd inaad hesho tusaale plugin gaar ah, si toos ah uga soo celi curiyaha: $('[rel=popover]').data('popover').

Khilaaf ma jiro

Mararka qaarkood waa lagama maarmaan in la isticmaalo bootstrap plugins oo leh qaabab kale oo UI ah. Duruufahaan, isku dhacyada meel magac ayaa marmar dhici kara. Haddii tani dhacdo, waxaad wici .noConflictkartaa plugin-ka aad rabto inaad dib u soo celiso qiimaha.

  1. var bootstrapButton = $ . fn . badhanka _ noConflict () // ku soo celi badhanka $.fn.qiimihii hore loo qoondeeyay
  2. $ . fn . bootstrapBtn = bootstrapButton // sii $() .bootstrapBtn shaqada bootstrap

Dhacdooyinka

Bootstrap waxay siisaa dhacdooyin caado u ah inta badan filalka gaarka ah ee plugin. Guud ahaan, kuwani waxay ku yimaadaan qaab aan dhammaad lahayn oo hore uga qayb-qaatay-halkaas oo aan dhammayn (tusaale ahaan show) uu kiciyo bilawga dhacdada, iyo qaabkeedii hore ee ka qaybqaadashada (tus. shown) uu kiciyo dhammaystirka ficilka.

Dhammaan dhacdooyinka aan dhamaadka lahayn waxay bixiyaan ka hortagga shaqeynta. Tani waxay siinaysaa awoodda lagu joojinayo fulinta ficilka ka hor inta uusan bilaaban.

  1. $ ( '#myModal' ). daaran ( 'show' , function ( e ) {
  2. haddii (! xog ) soo celiso e . ka hortaggaDefault () // waxay joojisaa habka in la tuso
  3. })

Ku saabsan kala-guurka

Saamaynta kala-guurka fudud, ku dar bootstrap-transition.js hal mar oo ay la socdaan faylalka kale ee JS. Haddii aad isticmaalayso bootstrap.js la soo ururiyey (ama la yareeyey) , looma baahna in lagu daro tan-horay ayay u jirtaa.

Isticmaal kiisaska

Tusaalayaal dhowr ah oo ku saabsan plugin-ka wareejinta:

  • Simbiriirixid ama libdhaysa moodalka
  • Baabi'inta tabs
  • Diidmada digniinaha
  • Muraayadaha carousel-ka simbiriirixaya

Tusaalooyinka

Hababka waa la habeeyey, laakiin dabacsanaan, waxay kiciyaan wada hadal oo leh shaqada ugu yar ee loo baahan yahay iyo khaladaad caqli gal ah.

Tusaale taagan

Hab la sameeyay oo leh madax, jidh, iyo hab ficil oo ku jira lugta.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "run" > × </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"> Xir </a> _
  11. <a href = "#" class = "btn btn-primary" > Keydi isbeddelada </a>
  12. </div>
  13. </div>

Muujinta tooska ah

U beddel habka JavaScript adoo gujinaya badhanka hoose. Hoos ayay u soo degi doontaa oo waxay ka soo geli doontaa xagga sare ee bogga.

  1. <!-- Button si loo kiciyo modal -->
  2. <a href = "#myModal" doorka = "button" class = "btn" data-toggle = "modal" > Bilaw demo modal </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" doorka = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "run" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "xir" data-dismiss = "modal" aria-hidden = "run" > × </button>
  8. <h3 id = "myModalLabel" > Madaxa qaabka </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Hal jidh oo wanaagsan… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data- dismiss = "modal" aria-hidden = "run" > Xir </button>
  15. <button class = "btn btn-primary" > Keydi isbeddelada </button>
  16. </div>
  17. </div>

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Dhaqdhaqaaqa modal adigoon qorin JavaScript. Deji curiyaha data-toggle="modal"kontoroolka, sida badhan, oo ay la socoto a data-target="#foo"ama href="#foo"si aad u beegsato hab gaar ah si aad u leexiso.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Qaabka bilawga </button>

Iyadoo loo marayo JavaScript

Wac modal leh id myModalleh hal xariiq oo JavaScript ah:

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-backdrop="".

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.
fogaan waddo been ah

Haddii url fog la bixiyo, waxa ku jira waxa lagu shubi doonaa loadhabka jQuery waxaana lagu duri doonaa .modal-body. Haddii aad isticmaalayso api data, waxa kale oo aad isticmaali kartaa hrefsummada si aad u qeexdo isha fog. Tusaalaha tan ayaa lagu muujiyay hoos:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Hababka

.modal(ikhtiyaar)

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

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

.modal('toogag')

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 waxa la eryaa marka habka loo muujiyo isticmaalaha (waxa ay sugi doontaa inta css kala guurka la dhamaystirayo).
qari Dhacdadan ayaa isla markaaba 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. })

Tusaale ahaan navbar

Plugin ScrollSpy waxaa loogu talagalay si toos ah cusboonaysiinta bartilmaameedyada nav ku salaysan booska duudduuban. U rog aagga navbar ka hooseeya oo daawo isbeddelka fasalka firfircoon. Qodobada hoos u dhaca ayaa sidoo kale la iftiimin doonaa.

@ 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

Iyada oo loo marayo sifooyinka xogta

Si aad si fudud ugu darto dabeecadda scrollspy to your topbar navigation, kaliya ku dar data-spy="scroll"element aad rabto in aad basaasaan on (inta badan sida caadiga ah tani waxay noqon doontaa jidhka) iyo data-target=".navbar"in la doorto mid ka mid ah nav in la isticmaalo. Waxaad u baahan doontaa inaad isticmaasho scrollspy oo leh .navqayb.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

Iyadoo loo marayo JavaScript

Ka wac qoraalka qoraalka adigoo isticmaalaya JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
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

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-offset="".

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.

Tusaalaha tabs

Ku dar hawlqabad tab degdeg ah, firfircoon si aad ugu gudubto muraayadaha nuxurka gudaha, xitaa iyada oo loo marayo menus-hoosaadka.

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 dharka mareykanka, 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

U oggolow tab tabsiyada JavaScript-ka (tabo kastaa waxay 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 adiga oo si fudud u qeexaya data-toggle="tab"ama data-toggle="pill"shay. 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" > Fariimaha </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" > Fariimaha </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. })

Tusaalooyinka

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.

Sababaha waxqabadka awgood, aaladda tip-ka iyo popover data-apis ayaa door biday, taasoo la macno ah in aad adigu bilawdo .

Ka dul rog xiriirka hoose si aad u aragto aaladaha:

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.

Afar jiho

Tilmaamaha qalabka ee kooxaha wax gelinta

Markaad isticmaalayso qalab-tips iyo popovers kooxaha gelinta Bootstrap, waa inaad dejisaa containerikhtiyaarka (hoos ku qoran) si aad uga fogaato waxyeelooyinka aan loo baahnayn.


Isticmaalka

Ku kiciya tilmaanta aalada JavaScript:

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-animation="".

Magaca nooca default sharaxaad
animation booliyan run codso u gudubka css libdhi xagga qalabka
html booliyan been ah Geli html galka qalabka Haddii ay been tahay, habka jquery ayaa textloo isticmaali doonaa in la geliyo waxa ku jira guriga. Isticmaal qoraal haddii aad ka welwelsan tahay weerarrada XSS.
meelaynta xadhig | shaqayn '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 'ciwaanka' taaga uusan jirin
kicin xadhig 'fiirsashada dulsaarka' sida qalabka loo kiciyo - guji | dullid | diiradda | buug-gacmeedka. Ogsoonow in kiisku dhaafo kiciyeyaasha mutliple, meel bannaan oo kala soocan, noocyada kiciya.
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 }

weel xadhig | been ah been ah

Waxay ku dhejisaa caarada aaladda shay gaar ahcontainer: 'body'

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

Calaamadayn

  1. <a href = "#" data-toggle = "tooltip" title = "tooltip first" > i dul heehaab </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' )

.tooltip('burbur')

Qariyaa oo burburiyaa aaladda curiyaha.

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

Tusaalooyinka

Ku dar waxyaabo yaryar oo dulsaaran, sida kuwa iPadka, shay kasta oo loogu talagalay macluumaadka labaad ee guriyeynta. Dul mar badhanka si aad u kiciso popover-ka Waxay u baahan tahay tilmaan -bixinta in lagu daro.

popover taagan

Afar doorasho ayaa diyaar ah: sare, midig, hoose, iyo bidix oo toosan.

Korka sare

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Midig popover

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Hooska popover

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bidix

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Ma jiro calaamad muujinaysa sida popovers laga soo saaray JavaScript iyo macluumaadka ku jira datasifo.

Muujinta tooska ah

Afar jiho


Isticmaalka

U oggolow popovers iyada oo loo marayo JavaScript:

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-animation="".

Magaca nooca default sharaxaad
animation booliyan run codso u gudubka css libdhi xagga qalabka
html booliyan been ah Geli html goobta popover-ka Haddii ay been tahay, habka jquery ayaa textloo isticmaali doonaa in la geliyo waxa ku jira guriga. Isticmaal qoraal haddii aad ka welwelsan tahay weerarrada XSS.
meelaynta xadhig | shaqayn '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 'guji' sida popover loo kiciyo - guji | dullid | 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 (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 }

weel xadhig | been ah been ah

Ku dhejinta popover-ka shay gaar ahcontainer: 'body'

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 rabto inaad isticmaasho kaliya caddee ikhtiyaarka xulashada.

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('rogrogmi')

Wuxuu rogaa curiyayaasha soo booda

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

.popover('burbur')

Qariyaa oo baabi'iyaa popover element.

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

Tusaale ahaan digniinaha

Ku dar shaqada ka eryida dhammaan fariimaha digniinta leh ee plugin this.

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

U oggolow cayrinta digniinta iyada oo loo marayo JavaScript:

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

Calaamadayn

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

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

Hababka

$() digtoonaan()

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. })

Tusaale ahaan isticmaal

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

Dawlad leh

Ku dar data-loading-text="Loading..."si aad u isticmaasho xaalad rarid badhanka.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Xaaladda soo dejinta </button>

Kelida beddelka

Ku dar data-toggle="button"si aad dhaqaajiso togging hal badhan.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Hal Toggle </button>

Sanduuqa hubinta

Ku dar data-toggle="buttons-checkbox"qaabka sanduuqa jeeg-gudbinta ee btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Bidix </button>
  3. <button type = "button" class = "btn btn-primary" > Dhexe </button>
  4. <button type = "button" class = "btn btn-primary" > Midig </button>
  5. </div>

Raadiyaha

Ku darso data-toggle="buttons-radio"qaabka raadiyaha ee btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Bidix </button>
  3. <button type = "button" class = "btn btn-primary" > Dhexe </button>
  4. <button type = "button" class = "btn btn-primary" > Midig </button>
  5. </div>

Isticmaalka

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.

Ikhtiyaarada

Midna

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 type = "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 type = "button" class = "btn" data-loading-text = "wax rarista..." > ... </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 type = "button" class = "btn" data-complete-text = "dhammeeyey!" > ... </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.

* Waxay u baahan tahay plugin Transitions 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 waxay dul saartay 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 waxay dul saartay 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 waxay dul saartay 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.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "accordion-group" >
  3. <div class = "accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Kooxda La Burburin karo Shayga #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordion-body burburay gudaha" >
  9. <div class = "accordion-inner" >
  10. Anim pariatur cliche...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "accordion-group" >
  15. <div class = "accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Kooxda La Burburin karo Shayga #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "accordion-body collapse" >
  21. <div class = "accordion-inner" >
  22. Anim pariatur cliche...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Waxa kale oo aad isticmaali kartaa plugin la'aanteed calaamadda accordion. Samee badhanka beddel fidinta iyo burburka shay kale.

  1. <button type = "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>

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

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.

Si loogu daro maamulka kooxda accordion u eg kantaroolka burburi kara, ku dar xogta sifada data-parent="#selector". Tixraac demo si aad u aragto tan ficil ahaan

Iyadoo loo marayo JavaScript

Ku oggolow gacanta:

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-parent="".

Magaca nooca default sharaxaad
waalid dooriye been ah Haddii dooraha 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

Hababka

.burbur (ikhtiyaar)

Waxay u hawlgelisaa macluumaadkaaga sidii shay burburi kara. Aqbala ikhtiyaarka ikhtiyaariga 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')

Qariyaa 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 la arko isticmaaluhu (waxay 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. })

Tusaale

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

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

Waxaad u baahan doontaa inaad dejiso autocomplete="off"si aad uga ilaaliso menu-yada browser-ka caadiga ah inay ka soo baxaan hoos-u-dhaca nooca Bootstrap.


Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Ku dar sifada xogta si aad u diiwaan geliso shay leh shaqaynta nooca-head sida ku cad tusaalaha kore.

Iyadoo loo marayo JavaScript

Si gacanta ugu wac nooca-head:

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-source="".

Magaca nooca default sharaxaad
isha habayn, shaqo [ ] Isha xogta si wax looga weydiiyo. Waxa laga yaabaa in ay noqoto tiro xargo ah ama shaqo. Hawsha waxa la dhaafaa laba doodood, queryqiimaha goobta gelinta iyo processdib u yeedhista. Shaqada waxaa loo isticmaali karaa si isku mid ah iyadoo loo soo celinayo isha xogta si toos ah ama si isku mid ah iyada oo loo marayo processdooda kaliya ee dib u yeerista.
alaabta tirada 8 Tirada ugu badan ee alaabta lagu muujinayo hoos u dhaca.
Dhererka da'da tirada 1 Dhererka xarfaha ugu yar ee loo baahan yahay ka hor inta aan la kicin talooyinka dhammaystiran
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.
updater shaqayn soo celisaa shay la doortay Habka loo isticmaalo soo celinta shay la doortay. Aqbala hal dood, itemoo leh baaxadda tusaalaha nooca madax.
iftiimiye shaqayn waxay iftiimisaa dhammaan kulammada aan caadiga ahayn Habka loo isticmaalo in lagu muujiyo natiijooyinka otomaatiga ah. Aqbal hal dood itemoo leh baaxadda tusaalaha nooca-head. Waa inuu soo celiyaa html

Hababka

.typehead(ikhtiyaarada)

Wuxuu ku bilaabayaa wax gelinta oo leh madax-madaxeedka.

Tusaale

Navigation hoose ee bidix waa demo toos ah ee plugin lifaaqa ah.


Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Si aad si sahal ah ugu darto habdhaqanka lifaaqa shay kasta, kaliya ku dar data-spy="affix"walxaha aad rabto in aad basaasto. Ka dib isticmaal offsets si aad u qeexdo goorta la beddelo ku xidhka curiyaha daar iyo dami.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Madaxa kor u qaad! Waa in aad maamushaa booska curiyaha guntanka ah iyo hab-dhaqanka waalidkiisa. Booska waxaa gacanta ku haya affix, affix-topiyo affix-bottom. Xusuusnow inaad hubiso waalidka dhici kara inuu burburay marka lifaaqu soo gasho maadaama ay ka saarayso macluumaadka socodka caadiga ah ee bogga.

Iyadoo loo marayo JavaScript

Ka wac plugin ku lifaaqan JavaScript:

  1. $ ( '#navbar' ). ku dheji ()

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-offset-top="200".

Magaca nooca default sharaxaad
dhimis lambarka | shaqada | walax 10 Pixels si looga saaro shaashadda marka la xisaabinayo booska duudduuban. Haddii hal nambar la bixiyo, kabista waxa lagu dabaqi doonaa jihooyinka sare iyo bidixda labadaba. Si aad u dhegaysato hal jiho, ama meelo badan oo gaar ah, kaliya bixi shay offset: { x: 10 }. Isticmaal shaqo marka aad u baahan tahay inaad si firfircoon u bixiso kabista (waxtar u leh qaar ka mid ah naqshadaha jawaabaha leh).