Mayelana namamodeli

I-plugin ehlelekile, kodwa evumelana nezimo, ithatha i-plugin evamile ye-javascript enobuncane obuncane bokusebenza obudingekayo kanye nokuzenzakalelayo okuhlakaniphile.

Isibonelo esiqinile

Ngezansi kunemodeli enikezwe ngokwezibalo.

Idemo ebukhoma

Guqula i-modal usebenzisa i-javascript ngokuchofoza inkinobho engezansi. Izoshelela phansi bese ifiphala kusukela phezulu kwekhasi.

Ukusebenzisa i-bootstrap-modal

Shayela i-modal nge-javascript:

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

Izinketho

Imakhaphu

Ungavula amamodali ekhasini lakho kalula ngaphandle kokuthi ubhale umugqa owodwa we-javascript. Vele usethe data-toggle="modal"into yesilawuli eno- data-target="#foo"noma href="#foo"ehambisana ne-id ye-modal element, futhi uma uchofozwa, izokwethula i-modal yakho.

Futhi, ukuze ungeze izinketho kusibonelo sakho se-modal, vele uzifake njengezibaluli zedatha eyengeziwe kusici sokulawula noma umaki we-modal ngokwawo.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Yethula Indlela </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Unhlokweni we-Modal </h3>
  </div>
  <div class = "modal-body" > 
    <p> Umzimba owodwa omuhle… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal"> Vala </a> _   
    <a href = "#" class = "btn btn-primary" > Londoloza izinguquko </a>  
  </div>
</div>

Izindlela

.modal(izinketho)

Yenza okuqukethwe kwakho kusebenze njengemodeli. Yamukela izinketho ozikhethela object.

$ ( '#myModal' ). imodeli ({
  ikhibhodi : amanga 
})

.modal('guqula')

Iguqula ngokwenza i-modal.

$ ( '#myModal' ). i-modal ( 'guqula' )

.modal('show')

Ivula mathupha i-modal.

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

.modal('fihla')

Ifihla i-modal ngokwenza.

$ ( '#myModal' ). i-modal ( 'fihla' )

Imicimbi

Ikilasi le-modal ye-Bootstrap lidalula imicimbi embalwa ukuze ixhume ekusebenzeni kwe-modal.

$ ( '#myModal' ). ku ( 'kufihliwe' , umsebenzi () {   
  // enza into…
})

Mayelana nokwehliswayo

Engeza amamenyu okwehlayo cishe kunoma yini ku-Bootstrap ngale plugin elula. I-Bootstrap inokusekelwa okugcwele kwemenyu eyehlayo ku-navbar, amathebhu, namaphilisi.

Izibonelo

Chofoza izixhumanisi ze-nav eyehlayo ku-navbar namaphilisi angezansi ukuze uhlole okwehliswayo.

• Isixhumanisi esijwayelekile
• Okwehlayo
  • Action
  • Another action
  • Something else here
  • Separated link
• Okwehlayo 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Okwehlayo 3
  • Action
  • Another action
  • Something else here
  • Separated link

Isebenzisa i-bootstrap-dropdown.js

Shayela okwehliswayo nge-javascript:

$ ( '.ukuguqula-okwehlayo' ). okwehlayo ()

Imakhaphu

Ukwengeza ngokushesha ukusebenza kokwehla kunoma iyiphi into vele ungeze data-toggle="dropdown"futhi noma yikuphi okwehliswayo kwe-bootstrap okuvumelekile kuzovulwa ngokuzenzakalelayo.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Isixhumanisi esijwayelekile </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Okwehlayo
      <b class = "caret" ></b> 
    </a>
    <ul class = "imenyu eyehlayo" > 
      <li><a href = "#" > Isenzo </a></li> 
      <li><a href = "#" > Esinye isenzo </a></li> 
      <li><a href = "#" > Okunye okunye lapha </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Isixhumanisi esihlukanisiwe </a></li> 
    </ul>
  </li>
  ...
</ul>

Ukuze ugcine ama-URL eqinile, sebenzisa data-targetisibaluli esikhundleni se- href="#".

<ul class = "nav nav-pills" > 
  <li class = "okwehlayo" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Okwehlayo
      <b class = "caret" ></b> 
    </a>
    <ul class = "imenyu eyehlayo" > 
      ...
    </ul>
  </li>
</ul>

Izindlela

$().okwehlayo()

I-api ehlelekile yokwenza amamenyu asebenze ku-navbar enikeziwe noma ukuzulazula okunethebhu.

I-plugin ye-ScrollSpy ingeyokuvuselela ngokuzenzakalelayo okuhlosiwe kwe-nav ngokusekelwe endaweni yokuskrola.

Isibonelo se-navbar ene-scrollspy

Skrola indawo engezansi bese ubuka isibuyekezo sokuzulazula. Izinto ezincanyana zokwehla zizogqanyiswa nazo. Izame!

Isebenzisa i-bootstrap-scrollspy.js

Shayela i-scrollspy nge-javascript:

$ ( '#navbar' ). scrollspy ()

Imakhaphu

Ukwengeza kalula impatho ye-scrollspy ekuzulazuleni kwe data-spy="scroll"-topbar yakho, vele wengeze entweni ofuna ukuyihlola (imvamisa lokhu kuzoba umzimba).

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

Izindlela

.scrollspy('refresh')

Uma usebenzisa i-scrollspy ngokuhambisana nokwengeza noma ukususa izakhi ku-DOM, uzodinga ukushayela indlela yokuvuselela kanje:

$ ( '[data-spy="scroll"]' ). ngakunye ( umsebenzi () {  
  var $spy = $ ( lokhu ). scrollspy ( 'refresh' )
});

Izinketho

Imicimbi

Le plugin yengeza ithebhu esheshayo, eguqukayo kanye nokusebenza kwamaphilisi ukuze kudlule okuqukethwe kwasendaweni.

Amathebhu ayisibonelo

Chofoza amathebhu angezansi ukuze uguqule phakathi kwamafasitelana afihliwe, ngisho nangamamenyu okwehlayo.

• Ikhaya
• Iphrofayela
• Okwehlayo
  • @fat
  • @mdo

Isebenzisa i-bootstrap-tab.js

Nika amandla amathebhu aphathekayo nge-javascript (ithebhu ngayinye idinga ukwenziwa isebenze ngayodwana):

$ ( '#myTab a' ). chofoza ( umsebenzi ( e ) {  
  e . vimbelaOkuzenzakalelayo ();
  $ ( lokhu ). ithebhu ( 'show' );
})

Ungavula amathebhu ngamanye ngezindlela ezimbalwa:

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

Imakhaphu

Ungakwazi ukuvula ithebhu noma ukuzulazula kwephilisi ngaphandle kokubhala noma iyiphi i-javascript ngokucacisa data-toggle="tab"noma ngento data-toggle="pill"ethile. Ukwengeza i- navkanye nav-tabsnamakilasi kuthebhu ulkuzosebenzisa isitayela sethebhu ye-bootstrap.

<ul class = "nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab"> Ikhaya </a></li >  
  <li><a href = "#profile" data-toggle = "tab"> Iphrofayili </a></li >  
  <li><a href = "#messages" data-toggle = "tab"> Imilayezo </a></li >  
  <li><a href = "#settings" data-toggle = "tab"> Izilungiselelo </a></li >  
</ul>

Izindlela

$().ithebhu

Yenza i-elementi yethebhu isebenze nesiqukathi sokuqukethwe. Ithebhu kufanele ibe no-a data-targetnoma i href-container node ku-DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home"> Ikhaya </a></li >  
  <li > <a href = "#iphrofayili"> Iphrofayili </a></li> 
  <li><a href = "#imiyalezo" > Imilayezo </a></li> 
  <li > <a href = "#settings"> Izilungiselelo </a></li> 
</ul>
 
<div class = "ithebhu-okuqukethwe" > 
  <div class = "i-tab-pane esebenzayo" id = "ikhaya" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "imiyalezo" > ... </div>  
  <div class = "tab-pane" id = "izilungiselelo" > ... </div>  
</div>
 
<script>
  $ ( umsebenzi () {  
    $ ( '#myTab a:last' ). ithebhu ( 'show' );
  })
</script>

Imicimbi

$ ( 'a[data-toggle="tab"]' ). ku ( 'kubonisiwe' , umsebenzi ( e ) {   
  e . target // ithebhu evuliwe
  e . relatedTarget // ithebhu yangaphambilini
})

Mayelana namathiphu

Igqugquzelwe i-plugin enhle kakhulu ye-jQuery.tipsy ebhalwe ngu-Jason Frame; Amathuluzi ayinguqulo ebuyekeziwe, engancikile ezithombeni, sebenzisa i-css3 ukuze uthole ukugqwayiza, kanye nezibaluli zedatha zokulondoloza isihloko sendawo.

Isibonelo sokusebenzisa Amathiphu

Hambisa phezulu kwezixhumanisi ezingezansi ukuze ubone amathuluzi:

Ukusebenzisa i-bootstrap-tooltip.js

Qalisa ithiphu yamathuluzi nge-javascript:

$ ( '#isibonelo' ). ithiphu ( izinketho )

Izinketho

Imakhaphu

Ngenxa yezizathu zokusebenza, Ithulithiphu kanye ne-Popover data-apis zingena. Uma ungathanda ukuzisebenzisa vele ucacise inketho yesikhethi.

<a href = "#" rel = "tooltip" title = "ithulusi lokuqala"> hambisa phezu kwami ​​</a>   

Izindlela

$().ithulusi(izinketho)

Inamathisela isibambi sethulithiphu eqoqweni lesici.

.ithiphu yethuluzi('show')

Iveza ithulithiphu yento ethile.

$ ( '#element' ). ithiphu yamathuluzi ( 'show' )

.ithiphu yethuluzi('fihla')

Ifihla ithiphu yento ethile.

$ ( '#element' ). ithiphu yamathuluzi ( 'fihla' )

.ithiphu yethuluzi('guqula')

Iguqula ithiphu lethuluzi le-elementi.

$ ( '#element' ). ithiphu yamathuluzi ( 'guqula' )

Mayelana nama-popovers

Engeza izimbondela ezincane zokuqukethwe, njengalezo eziku-iPad, kunoma iyiphi into ukuze uthole ulwazi lwesibili lwezindlu.

* Idinga ithiphu yamathuluzi ukuthi ifakwe

Isibonelo hambisa i-popover

Hambisa phezulu kwenkinobho ukuze uqalise i-popover.

Isebenzisa i-bootstrap-popover.js

Nika amandla ama-popovers nge-javascript:

$ ( '#isibonelo' ). i- popover ( izinketho )

Izinketho

Imakhaphu

Ngenxa yezizathu zokusebenza, Ithulithiphu kanye ne-Popover data-apis zingena. Uma ungathanda ukuzisebenzisa vele ucacise inketho yesikhethi.

Izindlela

$().i-popover(izinketho)

Iqalisa ama-popover eqoqo le-elementi.

.popover('show')

Iveza i-popover yama-elementi.

$ ( '#element' ). i- popover ( 'show' )

.popover('fihla')

Ifihla i-popover yama-elementi.

$ ( '#element' ). i- popover ( 'fihla' )

.popover('guqula')

Iguqula i-popover yezinto.

$ ( '#element' ). i- popover ( 'guqula' )

Mayelana nezixwayiso

I-plugin yesixwayiso iyikilasi elincane lokwengeza ukusebenza okuseduze kuzaziso.

Izexwayiso eziyisibonelo

I-plugin yezaziso isebenza emilayezweni eyisixwayiso evamile, futhi ivimbe imilayezo.

Isebenzisa i-bootstrap-alert.js

Nika amandla ukuchithwa kwesexwayiso nge-javascript:

$ ( ".isaziso" ). qaphela ()

Imakhaphu

Vele ungeze data-dismiss="alert"enkinobheni yakho yokuvala ukuze unikeze ngokuzenzakalelayo ukusebenza kwesexwayiso sokuvala.

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

Izindlela

$().isaziso()

Igoqa zonke izexwayiso ngokusebenza okuseduze. Ukuze izexwayiso zakho zigqwayize uma zivaliwe, qiniseka ukuthi sezisetshenzisiwe .fadefuthi .innekilasi kuzo.

.sexwayiso('vala')

Ivala isexwayiso.

$ ( ".isaziso" ). isixwayiso ( 'vala' )

Imicimbi

Ikilasi lesexwayiso le-Bootstrap lidalula imicimbi embalwa ukuze ixhumeke ekusebenzeni kwesixwayiso.

$ ( '#isaziso sami' ). bopha ( 'kuvaliwe' , umsebenzi () {   
  // enza into…
})

Mayelana

Yenza okwengeziwe ngezinkinobho. Inkinobho yokulawula ithi noma dala amaqembu ezinkinobho zezingxenye ezengeziwe njengamabha wamathuluzi.

Isibonelo sokusetshenziswa

Sebenzisa i-plugin yezinkinobho zezifunda kanye nama-toggles.

Ukusebenzisa i-bootstrap-button.js

Nika amandla izinkinobho nge-javascript:

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

Imakhaphu

Izibaluli zedatha ziyingxenye ye-plugin yenkinobho. Bheka ikhodi yesibonelo engezansi ngezinhlobo ezahlukene zokumaka.

<!-- Engeza idatha-toggle="inkinobho" ukuze uvule ukushintsha inkinobho eyodwa -->
<button class = "btn" data-toggle = "inkinobho" > Ukuguqula Okukodwa </inkinobho>  
 
<!-- Engeza idatha-toggle="buttons-checkbox" ukuze uguqule isitayela sebhokisi lokuhlola ku-btn-group -->
<div class = "btn-group" data-toggle = "ibhokisi lokuhlola lezinkinobho" >  
  < ikilasi lenkinobho = "btn" > Kwesobunxele </inkinobho> 
  <inkinobho yekilasi = "btn" > Phakathi </inkinobho> 
  <inkinobho yekilasi = "btn" > Kwesokudla </inkinobho> 
</div>
 
<!-- Add data-toggle="buttons-radio" ukuze uguqule isitayela somsakazo ku-btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  < ikilasi lenkinobho = "btn" > Kwesobunxele </inkinobho> 
  <inkinobho yekilasi = "btn" > Phakathi </inkinobho> 
  <inkinobho yekilasi = "btn" > Kwesokudla </inkinobho> 
</div>

Izindlela

$().inkinobho('guqula')

Iguqula isimo sohlelo. Inikeza inkinobho ukubonakala sengathi yenziwe yasebenza.

<button class = "btn" data-toggle = "inkinobho" > … </button>   

$().inkinobho('iyalayisha')

Imisa isimo senkinobho ekulayisheni - inkinobho ikhubaza futhi ishintshanisa umbhalo ukuze ulayishe umbhalo. Ukulayisha umbhalo kufanele kuchazwe engxenyeni yenkinobho kusetshenziswa isibaluli sedatha data-loading-text.

<button class = "btn" data-loading-text = "ilayisha izinto..." > ... </button>   

$().inkinobho('setha kabusha')

Isetha kabusha isimo senkinobho - ishintsha umbhalo ube umbhalo wokuqala.

$().inkinobho(uchungechunge)

Isetha kabusha isimo senkinobho - ishintsha umbhalo uye kunoma yisiphi isimo sombhalo esichazwe idatha.

<button class = "btn" data-complete-text = "kuqediwe!" > ... </inkinobho>   
<script>
  $ ( '.btn' ). inkinobho ( 'qedile' )
</script>

Mayelana

Thola izitayela eziyisisekelo nosekelo oluguquguqukayo lwezingxenye ezigoqekayo njengama-accordion nokuzulazula.

* Idinga i-plugin ye-Transitions ukuthi ifakwe.

Isibonelo se-accordion

Sisebenzisa i-plugin yokugoqa, sakhe iwijethi yesitayela se-accordion elula:

Isebenzisa i-bootstrap-collapse.js

Nika amandla nge-javascript:

$ ( ".goqa" ). bhidliza ()

Izinketho

Imakhaphu

Vele ungeze data-toggle="collapse"futhi u-a data-targetku-elementi ukuze unikeze ngokuzenzakalelayo ukulawula kwento egoqekayo. Isibaluli data-targetsamukela isikhethi se-css ongafaka kuso ukugoqa. Qiniseka ukuthi ungeza ikilasi collapseku-elementi egoqekayo. Uma ungathanda ukuthi ivuleke ngokuzenzakalelayo, engeza iklasi elengeziwe in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  elula egoqekayo
</inkinobho>
 
<div id = "demo" class = "goqa phakathi" > … </div>  

Izindlela

.goqa(izinketho)

Yenza okuqukethwe kwakho kusebenze njengento egoqekayo. Yamukela izinketho ozikhethela object.

$ ( '#myCollapsible' ). bhidlika ({
  guqula : amanga 
})

.goqa('guqula')

Iguqula into egoqekayo ukuze iboniswe noma ifihlwe.

.goqa('show')

Ibonisa into egoqekayo.

.goqa('fihla')

Ifihla into egoqekayo.

Imicimbi

Ikilasi lokugoqa le-Bootstrap lidalula imicimbi embalwa ukuze ixhumeke ekusebenzeni kokugoqa.

$ ( '#myCollapsible' ). ku ( 'kufihliwe' , umsebenzi () {   
  // enza into…
})

Mayelana

I-plugin evamile yokuhamba ngebhayisikili ngokusebenzisa izici. I-merry-go-round.

Isibonelo se-carousel

Buka umbukiso wesilayidi ngezansi.

Ilebula lesithonjana sokuqala

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.

Ilebula lesithonjana sesibili

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.

Ilebula Lesithonjana Sesithathu

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.

‹ ›

Isebenzisa i-bootstrap-carousel.js

Shaya nge-javascript:

$ ( '.carousel' ). i- carousel ()

Izinketho

Imakhaphu

Izibaluli zedatha zisetshenziselwa ukulawulwa kwangaphambilini nokulandelayo. Bheka umaka oyisibonelo ngezansi.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Izinto ze-carousel -->
  <div class = "i-carousel-inner" > 
    <div class = "into esebenzayo" > … </div> 
    <div class = "into" > … </div> 
    <div class = "into" > … </div> 
  </div>
  <!-- I-Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Izindlela

.i-carousel(izinketho)

Iqalisa i-carousel ngezinketho zokuzithandela objectfuthi iqala ukuhamba ngebhayisikili ezintweni.

$ ( '.carousel' ). i- carousel ({
  Isikhathi : 2000 
})

.carousel('umjikelezo')

Izungeza izinto ze-carousel ukusuka kwesokunxele kuye kwesokudla.

.carousel('ikhefu')

Imisa i-carousel ekuhambeni ngebhayisikili ezintweni.

.carousel(inombolo)

Ibiyela i-carousel kuhlaka oluthile (okusekelwe ngo-0, okufana namalungu afanayo).

.carousel('prev')

Imijikelezo eya entweni edlule.

.carousel('okulandelayo')

Imijikelezo eya entweni elandelayo.

Imicimbi

Ikilasi le-carousel le-Bootstrap lidalula imicimbi emibili yokuxhunywa ekusebenzeni kwe-carousel.

Mayelana

I-plugin eyisisekelo, enwetshwe kalula yokudala ngokushesha ama-typehead amahle nganoma iyiphi indlela yokufaka umbhalo.

Isibonelo

Qala ukuthayipha kunkambu engezansi ukuze ubonise imiphumela ye-typeahead.

Isebenzisa i-bootstrap-typeahead.js

Shayela i-typeahead nge-javascript:

$ ( '.typeahead' ). i-typehead ()

Izinketho

Imakhaphu

Engeza izibaluli zedatha ukuze ubhalise i-elementi ngokusebenza kwe-typeahead.

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

Izindlela

.typeahead(izinketho)

Iqalisa okokufaka nge-typeahead.