Malunga neemodeli

I-plugin elungelelanisiweyo, kodwa eguquguqukayo, ithatha i-plugin ye-javascript ye-modal yendabuko enobuncinane obufunekayo obufunekayo kunye nokusilela okuhlakaniphile.

Umzekelo omileyo

Apha ngezantsi kukho imodali enikezelwe ngokwezibalo.

Idemo ephilayo

Guqula imodal ngejavascript ngokucofa iqhosha elingezantsi. Iza kutyibilika phantsi kwaye iphele ukusuka phezulu ephepheni.

Ukusebenzisa i-bootstrap-modal

Fowunela imodal usebenzisa ijavascript:

$ ( '#myModal' ). imodeli ( iinketho )

Iinketho

IMarkup

Unokwenza iimodyuli kwiphepha lakho ngokulula ngaphandle kokubhala umgca omnye wejavascript. Ukuseta data-toggle="modal"nje into yokulawula ene data-target="#foo"okanye href="#foo"ehambelana ne-id yesiqalelo se-modal, kwaye xa ucofa, iyakusungula imodal yakho.

Kwakhona, ukongeza iinketho kumzekelo wakho wemodal, zibandakanye nje njengeempawu ezongezelelweyo zedatha nokuba yinto yolawulo okanye imodal markup ngokwayo.

<a iklasi = "btn" data-toggle = "modal" href = "#myModal" > Yazisa iNdlela </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    < uhlobo lweqhosha = "iqhosha" iklasi = "vala" idatha-dismiss = "modal" > × </ iqhosha>   
    <h3> imodal header </h3>
  </ div>
  <div class = "modal-body" > 
    <p> Umzimba omnye olungileyo… </p>
  </ div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal"> Vala </a> _   
    <a href = "#" class = "btn btn-primary"> Gcina utshintsho </a>  
  </ div>
</ div>

Iindlela

.modal(iinketho)

Yenza umxholo wakho ube yimodali. Yamkela iinketho ozikhethelayo object.

$ ( '#myModal' ). imodeli ({
  keyboard : bubuxoki 
})

.modal('tshintsha')

Yenza imodal ngesandla.

$ ( '#myModal' ). imodali ( 'tshintsha' )

.modal('umboniso')

Ivula imodali ngesandla.

$ ( '#myModal' ). imodali ( 'bonisa' )

.modal('fihla')

Ufihla imodali ngesandla.

$ ( '#myModal' ). imodali ( 'fihla' )

Iziganeko

Iklasi ye-modal ye-Bootstrap iveza iminyhadala embalwa yokuqhagamshelwa ekusebenzeni kwe-modal.

$ ( '#myModal' ). kwi ( 'ifihliwe' , umsebenzi () {   
  // Yenza into…
})

Malunga nokwehla

Yongeza iimenyu ezihlayo phantse kuyo yonke into eBootstrap ngale plugin ilula. I-Bootstrap inenkxaso epheleleyo yemenyu eyehlayo kwi-navbar, iithebhu, kunye neepilisi.

Imizekelo

Cofa kwi-dropdown nav links kwi-navbar kunye neepilisi ezingezantsi ukuvavanya ukuhla.

• Ikhonkco eliqhelekileyo
• Lahla phantsi
  • Action
  • Another action
  • Something else here
  • Separated link
• Ukwehla 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Ukwehla 3
  • Action
  • Another action
  • Something else here
  • Separated link

Ukusebenzisa i-bootstrap-dropdown.js

Fowunela ukwehla ngejavascript:

$ ( '.ukuhla-ukuguqula' ). ukwehla ()

IMarkup

Ukongeza ngokukhawuleza ukusebenza kokwehla kuyo nayiphi na into yongeza nje data-toggle="dropdown"kwaye nakuphi na ukuhla kwe-bootstrap okusebenzayo kuya kwenziwa kusebenze ngokuzenzekelayo.

<ul class = "nav nav-pills" > 
  <li iklasi = "esebenzayo" > <a href = "#"> Ikhonkco eliqhelekileyo </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1"> _   
      Lahla phantsi
      <b iklasi = "inkathalo" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#"> Isenzo </a> </li> 
      <li><a href = "#" > Esinye isenzo </a></li> 
      <li><a href = "#" > Enye into apha </a></li> 
      <li iklasi = "isahluli" > </ li> 
      <li><a href = "#"> Ikhonkco elahluliweyo </a></li> 
    </ul>
  </ li>
  ...
</ul>

Ukugcina ii-URL zicocekile, sebenzisa data-targetuphawu loyelelwano endaweni ye href="#".

<ul class = "nav nav-pills" > 
  <li iklasi = "ehlayo" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Lahla phantsi
      <b iklasi = "inkathalo" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </ li>
</ul>

Iindlela

$().ukwehla()

I-api ecwangcisiweyo yokuvula iimenu zebar ye navbar enikiweyo okanye ukukhangela kwe tab.

I-plugin yeScrollSpy yeyokuhlaziya ngokuzenzekelayo iithagethi ze-nav ngokusekelwe kwindawo yokuskrola.

Umzekelo we-navbar ene-scrollspy

Skrolela indawo engezantsi kwaye ubukele uhlaziyo lokukhangela. Imiba esezantsi yokwehla nayo iya kuphawulwa. Yizame!

Ukusebenzisa i-bootstrap-scrollspy.js

Fowunela iscrollspy ngejavascript:

$ ( '#navbar' ). skrola ()

IMarkup

Ukongeza ngokulula isimilo sokuskrola kulawulo lwakho lwebar ephezulu, yongeza data-spy="scroll"nje kwinto ofuna ukuyihlola (ubukhulu becala lo iyakuba ngumzimba).

<body data-spy = "skrola" > ... </ body>  

Iindlela

.skrola('hlaziya')

Xa usebenzisa i-scrollspy ngokudibanisa okanye ukususa izinto kwi-DOM, kuya kufuneka ufowunele indlela yokuhlaziya ngolu hlobo:

$ ( '[data-spy="scroll"]' ). Nganye ( umsebenzi () {  
  var $ hlola = $ ( le ). scrollspy ( 'hlaziya' )
});

Iinketho

Iziganeko

Le plugin yongeza ithebhu ekhawulezayo, eguquguqukayo kunye nokusebenza kweepilisi zokutshintshwa ngomxholo wendawo.

Iithebhu zemizekelo

Cofa iithebhu ezingezantsi ukuguqula phakathi kweefestile ezifihliweyo, nokuba usebenzisa imenu eyehlayo.

• Ekhaya
• Inkangeleko yesimo
• Lahla phantsi
  • @fat
  • @mdo

Ukusebenzisa i-bootstrap-tab.js

Yenza iithebhu ezinokubakho usebenzisa i-javascript (ithebhu nganye kufuneka ivulwe ngokwayo):

$ ( '#myTab a' ). cofa ( umsebenzi ( e ) {  
  e . preventDefault ();
  $ ( oku ). ithebhu ( 'bonisa' );
})

Unokwenza ithebhu nganye isebenze ngeendlela ezininzi:

$ ( '#myTab a[href="#profile"]' ). ithebhu ( 'bonisa' ); // Khetha isithuba ngegama 
$ ( '#myTab a:first' ). ithebhu ( 'bonisa' ); // Khetha ithebhu yokuqala 
$ ( '#myTab a:last' ). ithebhu ( 'bonisa' ); // Khetha isithuba sokugqibela 
$ ( '#myTab li:eq(2) a' ). ithebhu ( 'bonisa' ); // Khetha ithebhu yesithathu (0-isalathisi) 

IMarkup

Unokwenza ithebhu okanye ujongo lwepilisi ngaphandle kokubhala nayiphi na i-javascript ngokuchaza ngokulula data-toggle="tab"okanye data-toggle="pill"kwinto. Ukongeza i navkunye nav-tabsneeklasi kwithebhu ulkuya kusebenzisa isitayile sethebhu ye-bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#ikhaya" data-toggle = "tab"> Ekhaya </a> < /li>  
  <li><a href = "#profile" data-toggle = "tab"> Inkangeleko yesimo </a></li >  
  <li><a href = "# imiyalezo" data-toggle = "tab"> Imiyalezo </a> < /li>  
  <li><a href = "#settings" data-toggle = "tab"> Useto </a> </li>  
</ul>

Iindlela

$().tab

Yenza isiqalelo sethebhu kunye nesiqulatho sisebenze. Isithuba kufuneka sibenendawo data-targetokanye indawo hrefyesikhongozeli kwiDOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li iklasi = "esebenzayo" > <a href = "#ikhaya"> Ekhaya </a></li>  
  <li><a href = "#profile"> Inkangeleko yesimo </a></li> 
  <li><a href = "#imiyalezo"> Imiyalezo </a> </li> 
  <li><a href = "#iisetingi"> Useto </a> </li> 
</ul>
 
<div class = "ithebhu-umxholo" > 
  <div class = "i-tab-pane esebenzayo" id = "ikhaya" > ... </div>  
  <div class = "i-tab-pane" id = "iprofayile" > ... </div>  
  <div class = "i-tab-pane" id = "imiyalezo" > ... </div>  
  <div class = "i-tab-pane" id = "iisetingi" > ... </div>  
</ div>
 
<script>
  $ ( umsebenzi () {  
    $ ( '#myTab a:last' ). ithebhu ( 'bonisa' );
  })
</script>

Iziganeko

$ ( 'a[data-toggle="tab"]' ). kwi ( 'ibonisiwe' , umsebenzi ( e ) {   
  e . ekujoliswe kuko // ithebhu evuliwe
  e . relatedTarget // ithebhu yangaphambili
})

Malunga neengcebiso zezixhobo

Iphefumlelwe yi-plugin egqwesileyo ye-jQuery.tipsy ebhalwe nguJason Frame; Iingcebiso zesixhobo luguqulelo oluhlaziyiweyo, olungathembekanga kwimifanekiso, sebenzisa i-css3 yoopopayi, kunye neempawu zedatha zogcino lwesihloko sendawo.

Umzekelo wokusetyenziswa kweengcebiso

Hambisa ngaphezulu kwezi linki zingezantsi ukuze ubone iingcebiso zesixhobo:

Ukusebenzisa i-bootstrap-tooltip.js

Qalisa incam yesixhobo ngejavascript:

$ ( '#example' ). incam yesixhobo ( iinketho )

Iinketho

IMarkup

Ngenxa yezizathu zokusebenza, iSixhobo kunye nePopover data-apis zingenile.

<a href = "#" rel = "isihloko sesixhobo" = "ingcebiso yesixhobo sokuqala"> hambisa phezu kwam </a>   

Iindlela

$().ingcebiso yesixhobo(iinketho)

Iqhoboshela isibambi sesixhobo kwingqokelela yesiqalelo.

.ingcebiso yesixhobo('bonisa')

Ityhila inqaku lesixhobo.

$ ( '#isiqalelo' ). incam yesixhobo ( 'bonisa' )

.ingcebiso yesixhobo('fihla')

Ifihla incam yesixhobo.

$ ( '#isiqalelo' ). incam yesixhobo ( 'fihla' )

.ingcebiso yesixhobo('tshintsha')

Itshintshela incam yesixhobo.

$ ( '#isiqalelo' ). incam yesixhobo ( 'toggle' )

Malunga neepopovers

Yongeza imixholo emincinci, njengaleyo ikwi-iPad, kuyo nayiphi na into yolwazi lwesibini lwezindlu.

* Ifuna iNcwadana yesixhobo ukuba ibandakanywe

Umzekelo hover popover

Hambisa ngaphezulu kweqhosha ukuqalisa ipopover.

Ukusebenzisa i-bootstrap-popover.js

Vumela iipopovers ngejavascript:

$ ( '#example' ). popover ( iinketho )

Iinketho

IMarkup

Ngenxa yezizathu zokusebenza, iSixhobo kunye nePopover data-apis zingenile.

Iindlela

$().popover(iinketho)

Uqalisa iipopovers zengqokelela yezinto.

.popover('bonisa')

Ityhila i-elementi popover.

$ ( '#isiqalelo' ). popover ( 'bonisa' )

.popover('fihla')

Ifihla i-elements popover.

$ ( '#isiqalelo' ). popover ( 'fihla' )

.popover('tshintsha')

Itshintshela izinto popover.

$ ( '#isiqalelo' ). ipopover ( 'tshintsha' )

Malunga nezilumkiso

Iplagi yesilumkiso yiklasi encinci yokongeza ukusebenza ngokusondeleyo kwizilumkiso.

Imizekelo yezilumkiso

I-plugin yezilumkiso isebenza kwimiyalezo yesilumkiso rhoqo, kunye nemiyalezo yokubhloka.

Ukusebenzisa i-bootstrap-alert.js

Vumela ukugxothwa kwesivuseleli ngejavascript:

$ ( ".alert" ). lumkisa ()

IMarkup

Yongeza data-dismiss="alert"nje kwiqhosha lakho lokuvala ukunika ngokuzenzekelayo umsebenzi okufutshane wesilumkiso.

<a class = "close" data-dismiss = "alert" href = "#" > &amaxesha; </a>   

Iindlela

$().isilumkiso()

Isonga zonke izilumkiso ngokusebenza ngokusondeleyo. Ukuze izilumkiso zakho ziphile xa zivaliwe, qiniseka ukuba zine .fadekwaye .inudidi sele lufakiwe kuzo.

.alert('vala')

Ivala isilumkiso.

$ ( ".alert" ). lumkisa ( 'vala' )

Iziganeko

Iklasi yesilumkiso ye-Bootstrap iveza iminyhadala embalwa yokuqhagamshelwa ekusebenzeni kwesilumkiso.

$ ( '#isilumkiso sam' ). bopha ( 'ivaliwe' , umsebenzi () {   
  // Yenza into…
})

Malunga

Yenza ngakumbi ngamaqhosha. Iqhosha lokulawula lixela okanye wenze amaqela amaqhosha amalungu amaninzi njengebar yesixhobo.

Umzekelo wokusetyenziswa

Sebenzisa iplagin yamaqhosha eemeko kunye noguqulo.

Ukusebenzisa i-bootstrap-button.js

Vula amaqhosha ngejavascript:

$ ( '.nav-tabs' ). iqhosha ()

IMarkup

Iimpawu zedatha zibalulekile kwiplagi yeqhosha. Jonga umzekelo wekhowudi engezantsi kwiindidi ezahlukeneyo zokuphawula.

<!-- Yongeza i-data-toggle="iqhosha" ukwenza ukucofa kwiqhosha elinye -->
< iklasi yeqhosha = "btn" data-toggle = "iqhosha" > Uguqulo olunye </ iqhosha>  
 
<!-- Yongeza idata-toggle="amaqhosha-checkbox" ukwenzela isimbo sokukhangela kwi-btn-iqela -->
<div class = "btn-group" data-toggle = "amaqhosha-checkbox" >  
  < iklasi yeqhosha = "btn" > Ekhohlo </ iqhosha> 
  < iklasi yeqhosha = "btn" > Embindini </ iqhosha> 
  < iklasi yeqhosha = "btn" > Ekunene </ iqhosha> 
</ div>
 
<!-- Yongeza idata-toggle="buttons-radio" kwisimbo sikanomathotholo ukuguqulela kwi-btn-iqela -->
<div class = "btn-group" data-toggle = "amaqhosha-radio" >  
  < iklasi yeqhosha = "btn" > Ekhohlo </ iqhosha> 
  < iklasi yeqhosha = "btn" > Embindini </ iqhosha> 
  < iklasi yeqhosha = "btn" > Ekunene </ iqhosha> 
</ div>

Iindlela

$().iqhosha('tshintsha')

Itshintsha imeko yokutyhala. Inika iqhosha inkangeleko yokuba livuliwe.

< iklasi yeqhosha = "btn" data-toggle = "iqhosha" > … </iqhosha>   

$().iqhosha('iyalayisha')

Icwangcisa imeko yeqhosha kulayisho - licima iqhosha kwaye utshintshise okubhaliweyo kukulayisha okubhaliweyo. Ukulayisha okubhaliweyo kufuneka kuchazwe kwiqhosha kusetyenziswa uphawu loyelelwano lwedatha data-loading-text.

< iklasi yeqhosha = "btn" data-loading-text = "ilayisha izinto..." > ... </iqhosha>   

$().iqhosha('seta ngokutsha')

Seta kwakhona imeko yeqhosha-tshintshanisa umbhalo ukuya kumbhalo wokuqala.

$().iqhosha(umtya)

Seta kwakhona ubume beqhosha-tshintshanisa okubhaliweyo kuyo nayiphi na idatha echazwe kwimeko yokubhaliweyo.

< iklasi yeqhosha = "btn" data-complete-text = "kugqityiwe!" > ... </ iqhosha>   
<script>
  $ ( '.btn' ). iqhosha ( 'gqiba' )
</script>

Malunga

Fumana izitayile ezisisiseko kunye nenkxaso ebhetyebhetye kumacandelo aqengqelekayo anje ngeaccordion kunye nokuhamba.

* Ifuna iplagin yeTransitions ukuba ibandakanywe.

Umzekelo iaccordion

Sisebenzisa iplagin yokuwa, sakhe iwijethi yesitayile esilula se-accordion:

Ukusebenzisa i-bootstrap-collapse.js

Yenza ngejavascript:

$ ( ".collapse" ). Ukuwa ()

Iinketho

IMarkup

Yongeza nje data-toggle="collapse"kunye ne- data-targetelementi ukunika ngokuzenzekelayo ulawulo lwento eqengqelekayo. Uphawu data-targetloyelelwano lwamkela umkhethi we-css ukuze kufakwe ukutshitshiswa. Qinisekisa ukuba wongeza iklasi collapsekwinto eqengqelekayo. Ukuba ungathanda ukuba ivuleke ngokungagqibekanga, yongeza udidi olongezelelweyo in.

< iklasi yeqhosha = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  elula eqengqelekayo
</ iqhosha>
 
<div id = "idemo" iklasi = "ehla ngaphakathi" > … </div>  

Iindlela

.cotha(iinketho)

Yenza umxholo wakho ube yinto eqengqelekayo. Yamkela iinketho ozikhethelayo object.

$ ( '#myCollapsible' ). ukuwa ({
  guqula : bubuxoki 
})

.thoba('tshintsha')

Iguqulela into eqengqelekayo ukuze iboniswe okanye ifihliwe.

.cotha('bonisa')

Ibonisa into eqengqelekayo.

.coqa('fihla')

Ifihla into eqengqelekayo.

Iziganeko

Iklasi yokuwa yeBootstrap iveza iminyhadala embalwa yokuhuka ekusebenzeni kokuwa.

$ ( '#myCollapsible' ). kwi ( 'ifihliwe' , umsebenzi () {   
  // Yenza into…
})

Malunga

Iplagi yegeneric yokukhwela ibhayisekile kwizinto. Ukujikeleza kokonwaba.

Umzekelo carousel

Jonga umboniso wesilayidi ongezantsi.

Ileyibhile ye-Thumbnail yokuqala

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Ukusebenzisa i-bootstrap-carousel.js

Fowuna ngejavascript:

$ ( '.carousel' ). Icarousel ()

Iinketho

IMarkup

Iimpawu zedatha zisetyenziselwa ukulawulwa kwangaphambili kunye nokulandelayo. Jonga umzekelo ongezantsi.

<div id = "myCarousel" iklasi = "icarousel isilayidi" >  
  <!-- Izinto zeCarousel -->
  <div iklasi = "i-carousel-yangaphakathi" > 
    <div class = "into esebenzayo" > ... </div> 
    <div class = "into" > ... </div> 
    <div class = "into" > ... </div> 
  </ div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"> &lsaquo ; </a>   
  <a class = "right carousel-control" href = "#myCarousel" data-slide = "elandelayo" > › </a>   
</ div>

Iindlela

.carousel(iinketho)

Uqalisa i-carousel ngeendlela ozikhethelayo objectkwaye uqalise ukukhwela ibhayisekile kwizinto.

$ ( '.carousel' ). icarousel ({
  Ikhefu : 2000 
})

.carousel('umjikelo')

Ujikeleza izinto zecarousel ukusuka ekhohlo ukuya ekunene.

.carousel('nqumama')

Imisa ikhareshi ekukhweleni ibhayisekile kwizinto.

.carousel(inombolo)

Ukujikelisa i-carousel kwisakhelo esithile (i-0 esekelwe, efana noluhlu).

.carousel('prev')

Imijikelo ukuya kwinto yangaphambili.

.carousel('elandelayo')

Biyela ukuya kwinto elandelayo.

Iziganeko

Iklasi ye-carousel ye-Bootstrap iveza iminyhadala emibini yokuhuka ekusebenzeni kwecarousel.

Malunga

I-plugin esisiseko, eyandisiweyo ngokulula yokwenza ngokukhawuleza iintloko zokuchwetheza ezintle ngalo naluphi na uhlobo lokufakwa kombhalo.

Umzekelo

Qala ukuchwetheza kwintsimi engezantsi ukubonisa iziphumo zokuchwetheza.

Ukusebenzisa i-bootstrap-typeahead.js

Fowunela i-typeahead nge-javascript:

$ ( '.typeahead' ). umphambili wokuchwetheza ()

Iinketho

IMarkup

Yongeza iimpawu zedatha ukubhalisa into enomsebenzi wokuchwetheza.

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

Iindlela

.chwetheza ngaphambili(iinketho)

Uqalisa igalelo nge-typeahead.