Ngamunye noma ihlanganiswe

Ama-plugin angafakwa ngawodwana (yize amanye edinga ukuncika), noma konke ngesikhathi esisodwa. Kokubili i- bootstrap.js ne- bootstrap.min.js iqukethe wonke ama-plugin efayeleni elilodwa.

Izibaluli zedatha

Ungasebenzisa wonke ama-plugin e-Bootstrap ngokusebenzisa i-markup API ngaphandle kokubhala umugqa owodwa we-JavaScript. Lena i-API yekilasi lokuqala le-Bootstrap futhi kufanele kube ukucabangela kwakho kokuqala lapho usebenzisa i-plugin.

Sekushiwo lokho, kwezinye izimo kungase kufiseleke ukucisha lokhu kusebenza. Ngakho-ke, siphinde futhi sinikeze amandla okukhubaza i-API yesibaluli sedatha ngokukhulula yonke imicimbi emzimbeni ofakwe ``idatha-api'`. Lokhu kubukeka kanje:

$('umzimba').off('.data-api')

Okunye, ukuze uqondise i-plugin ethile, vele ufake igama le-plugin njengendawo yegama kanye nendawo yegama yedatha-api kanje:

$('umzimba').off('.alert.data-api')

I-Programmatic API

Sikholelwa futhi ukuthi kufanele ukwazi ukusebenzisa wonke ama-plugin e-Bootstrap nge-JavaScript API. Wonke ama-API asesidlangalaleni ayindlela eyodwa, esebenzisekayo, futhi abuyisela iqoqo osekwenziwe ngalo.

$(".btn.danger").inkinobho("guqula").addClass("amafutha")

Zonke izindlela kufanele zamukele into ongakhetha kuyo, iyunithi yezinhlamvu eqondise indlela ethile, noma lutho (okuqalisa i-plugin ngokuziphatha okuzenzakalelayo):

$("#myModal").modal() // iqaliswe ngokuzenzakalelayo
$("#myModal").modal({ keyboard: false }) // iqaliswe ngaphandle kwekhibhodi
$("#myModal").modal('show') // iqalisa futhi icela ibonakale ngokushesha

I-plugin ngayinye iphinda iveze umakhi wayo ongahluziwe esakhiweni `soMakhi`: $.fn.popover.Constructor. Uma ungathanda ukuthola isibonelo esithile se-plugin, sithole ngokuqondile entweni: $('[rel=popover]').data('popover').

Imicimbi

I-Bootstrap inikeza imicimbi yangokwezifiso yezenzo eziningi ezihlukile ze-plugin. Ngokuvamile, lezi ziza ngendlela engapheli kanye nenkathi edlule - lapho okungapheli (isib. show) kuqalwa ekuqaleni komcimbi, futhi isimo saso sokuhlanganyela esidlule (isib. shown) siyisiqalo lapho kuqedwa isenzo.

Yonke imicimbi engapheli ihlinzeka ngokusebenza kokuvimbelaOkuzenzakalelayo. Lokhu kunikeza amandla okumisa ukwenziwa kwesenzo ngaphambi kokuthi siqale.

$('#MyModal').on('show', function (e) {
    uma (!idatha) ibuyisela i-e.preventDefault() // imisa i-modal ukuthi iboniswe
})

Mayelana noshintsho

Ukuze uthole imiphumela elula yoshintsho, faka i-bootstrap-transition.js kanye eceleni kwamanye amafayela e-JS. Uma usebenzisa i-comiled (noma minified) bootstrap.js, asikho isidingo sokufaka lokhu—sekukhona kakade.

Sebenzisa amacala

Izibonelo ezimbalwa ze-plugin yoshintsho:

• Ukushelela noma ukufiphala kumamodeli
• Ukufiphala kwamathebhu
• Iyafiphala izexwayiso
• Amafasitelana e-carousel ashelelayo

Izibonelo

Ama-modal ayahlelwa, kodwa aguquguqukayo, imiyalo yengxoxo enobuncane bokusebenza obudingekayo kanye nokuzenzakalelayo okuhlakaniphile.

Isibonelo esiqinile

I-modal enikeziwe enesihloko, umzimba, nesethi yezenzo kunyaweni.

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&izikhathi;</button>
    <h3>Iheda yemodeli</h3>
  </div>
  <div class="modal-body">
    <p>Umzimba owodwa omuhle…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Vala</a>
    <a href="#" class="btn btn-primary">Londoloza izinguquko</a>
  </div>
</div>

Idemo ebukhoma

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

<!-- Inkinobho yokuqalisa i-modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Yethula imodeli yedemo</a>

<!-- Imodeli -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Inhlokweni yemodeli</h3>
  </div>
  <div class="modal-body">
    <p>Umzimba owodwa omuhle…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Vala</inkinobho>
    <button class="btn btn-primary">Londoloza izinguquko</inkinobho>
  </div>
</div>

Ukusetshenziswa

Ngezibaluli zedatha

Yenza kusebenze i-modal ngaphandle kokubhala i-JavaScript. Misa data-toggle="modal"into yesilawuli, njengenkinobho, kanye ne-a data-target="#foo"noma href="#foo"ukuze uqondise i-modal ethile ukuze uyiguqule.

<button type="button" data-toggle="modal" data-target="#myModal">Yethula indlela</inkinobho>

Nge-JavaScript

Shayela i-modal ene-id myModalenomugqa owodwa we-JavaScript:

$('#MyModal').modal(izinketho)

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-backdrop="".

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

Izindlela

.modal(izinketho)

Yenza okuqukethwe kwakho kusebenze njengemodeli. Yamukela izinketho ozikhethela object.

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

.modal('guqula')

Iguqula ngokwenza i-modal.

$('#MyModal').modal('guqula')

.modal('show')

Ivula mathupha i-modal.

$('#MyModal').modal('show')

.modal('fihla')

Ifihla i-modal ngokwenza.

$('#MyModal').modal('fihla')

Imicimbi

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

$('#MyModal').on('kufihliwe', umsebenzi () {
  // enza into…
})

Izibonelo

Engeza amamenyu okwehlayo cishe kunoma yini enale plugin elula, okuhlanganisa i-navbar, amathebhu, namaphilisi.

Ngaphakathi kwe-navbar

Ngaphakathi kwamathebhu

Ukusetshenziswa

Ngezibaluli zedatha

Engeza data-toggle="dropdown"kusixhumanisi noma inkinobho ukuze uguqule okwehliswayo.

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">I-trigger yokwehlisa</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Okwehlayo
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Nge-JavaScript

Shayela okwehliswayo nge-JavaScript:

$('.ukuguqula-ukuguqula').ukwehliswa()

Izinketho

Lutho

Izindlela

$().okwehlayo('guqula')

I-api ehleliwe yokuguqula amamenyu ku-navbar enikeziwe noma ukuzulazula okunethebhu.

Isibonelo ku-navbar

I-plugin ye-ScrollSpy ingeyokuvuselela ngokuzenzakalelayo okuhlosiwe kwe-nav ngokusekelwe endaweni yokuskrola. Skrola indawo engezansi kwe-navbar bese ubuka ukuguquka kwekilasi elisebenzayo. Izinto ezincanyana zokwehla zizogqanyiswa nazo.

Ukusetshenziswa

Ngezibaluli zedatha

Ukwengeza kalula ukuziphatha kwe-scrollspy ekuzulazuleni kwe data-spy="scroll"-topbar yakho, vele ungeze entweni ofuna ukuyihlola (imvamisa lokhu kuzoba umzimba) data-target=".navbar"nokukhetha ukuthi iyiphi i-nav ongayisebenzisa. Uzofuna ukusebenzisa i-scrollspy nengxenye .nav.

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

Nge-JavaScript

Shayela i-scrollspy nge-JavaScript:

$('#i-navbar').scrollspy()

Izindlela

.scrollspy('refresh')

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

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-offset="".

Imicimbi

Amathebhu ayisibonelo

Engeza ukusebenza kwethebhu esheshayo, eguqukayo ku-transiton ngokusebenzisa amafasitelana okuqukethwe kwasendaweni, ngisho namamenyu okwehlayo.

Ukusetshenziswa

Nika amandla amathebhu aphathekayo nge-JavaScript (ithebhu ngayinye idinga ukwenziwa isebenze ngayodwa):

$('#myTab a').chofoza(umsebenzi (e) {
  e.preventDefault();
  $(this).tab('show');
})

Ungavula amathebhu ngamanye ngezindlela ezimbalwa:

$('#myTab a[href="#profile"]').tab('show'); // Khetha ithebhu ngegama
$('#MyTab a:first').tab('show'); // Khetha ithebhu yokuqala
$('#MyTab a:last').tab('show'); // Khetha ithebhu yokugcina
$('#myTab li:eq(2) a').tab('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 nav-tabs">
  <li><a href="#home" data-toggle="tab">Ekhaya</a></li>
  <li><a href="#profile" data-toggle="tab">Iphrofayela</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">Ekhaya</a></li>
  <li><a href="#profile">Iphrofayela</a></li>
  <li><a href="#imiyalezo">Imilayezo</a></li>
  <li><a href="#settings">Izilungiselelo</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<script>
  $(umsebenzi () {
    $('#MyTab a:last').tab('show');
  })
</script>

Imicimbi

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

Izibonelo

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.

Hambisa phezulu kwezixhumanisi ezingezansi ukuze ubone amathuluzi:

Izikhombisi-ndlela ezine

Ukusetshenziswa

Qalisa ithiphu yamathuluzi nge-JavaScript:

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-animation="".

Imakhaphu

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

<a href="#" rel="tooltip" title="first tooltip">hamba phezu kwami</a>

Izindlela

$().ithulusi(izinketho)

Inamathisela isibambi sethulithiphu eqoqweni lesici.

.ithiphu yethuluzi('show')

Iveza ithulithiphu yento ethile.

$('#element').ithulusi('show')

.ithiphu yethuluzi('fihla')

Ifihla ithiphu yento ethile.

$('#element').ithulusi('fihla')

.ithiphu yethuluzi('guqula')

Iguqula ithiphu lethuluzi le-elementi.

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

.tooltip('destroy')

Ifihla futhi ibhubhise ithiphu yento ethile.

$('#element').ithulusi('destroy')

Izibonelo

Engeza izimbondela ezincane zokuqukethwe, njengalezo eziku-iPad, kunoma iyiphi into ukuze uthole ulwazi lwesibili lwezindlu. Hambisa phezulu kwenkinobho ukuze uqalise i-popover. Idinga ithiphu yamathuluzi ukuthi ifakwe.

I-popover emile

Kunezinketho ezine ezitholakalayo: kuqondaniswe phezulu, kwesokudla, phansi, nesobunxele.

Awekho umaki oboniswa njengama-popover akhiqizwa ku-JavaScript nokuqukethwe ngaphakathi datakwesibaluli.

Idemo ebukhoma

Izikhombisi-ndlela ezine

Ukusetshenziswa

Nika amandla ama-popovers nge-JavaScript:

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-animation="".

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').popover('show')

.popover('fihla')

Ifihla i-popover yama-elementi.

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

.popover('guqula')

Iguqula i-popover yezinto.

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

.popover('destroy')

Ifihla futhi icekele phansi i-popover yento.

$('#element').popover('destroy')

Izexwayiso eziyisibonelo

Engeza umsebenzi wokucashisa kuyo yonke imilayezo yesixwayiso enale plugin.

Ukusetshenziswa

Nika amandla ukuchithwa kwesexwayiso nge-JavaScript:

$(".alert").isaziso()

Imakhaphu

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

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

Izindlela

$().isaziso()

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

.sexwayiso('vala')

Ivala isexwayiso.

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

Imicimbi

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

$('#my-alert').bind('ivaliwe', umsebenzi () {
  // enza into…
})

Isibonelo sokusetshenziswa

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

Okushoyo

Engeza idatha-loading-text="Iyalayisha..." ukuze usebenzise isimo sokulayisha enkinobho.

<button type="button" class="btn btn-primary" data-loading-text="Iyalayisha...">Isimo sokulayisha</button>

Ukuguqula okukodwa

Engeza idatha-toggle="inkinobho" ukuze uvule ukushintsha inkinobho eyodwa.

<button type="button" class="btn" data-toggle="button">Ukuguqula Okukodwa</inkinobho>

Ibhokisi lokuhlola

Engeza i-data-toggle="buttons-checkbox" ukuze uguqule isitayela sebhokisi lokuhlola ku-btn-group.

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn">Kwesobunxele</inkinobho>
  <button type="button" class="btn">Phakathi</inkinobho>
  <button type="button" class="btn">Kwesokudla</inkinobho>
</div>

Umsakazo

Engeza idatha-toggle="buttons-radio" ukuze uguqule isitayela somsakazo ku-btn-group.

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn">Kwesobunxele</inkinobho>
  <button type="button" class="btn">Phakathi</inkinobho>
  <button type="button" class="btn">Kwesokudla</inkinobho>
</div>

Ukusetshenziswa

Nika amandla izinkinobho nge-JavaScript:

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

Imakhaphu

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

Izinketho

Lutho

Izindlela

$().inkinobho('guqula')

Iguqula isimo sohlelo. Inikeza inkinobho ukubonakala sengathi yenziwe yasebenza.

<button type="button" class="btn" data-toggle="button" >…</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 type="button" class="btn" data-loading-text="loading stuff..." >...</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 type="button" class="btn" data-complete-text="finished!" >...</ 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:

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Into Yeqembu Egoqekayo #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Into Yeqembu Egoqekayo #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Ungasebenzisa futhi i-plugin ngaphandle kwemakhaphu ye-accordion. Yenza inkinobho iguqule ukunwetshwa nokugoqa kwenye i-elementi.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  elula egoqekayo
</inkinobho>

<div id="demo" class="collapse in"> … </div>

Ukusetshenziswa

Ngezibaluli zedatha

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.

Ukuze ungeze ukuphathwa kweqembu okufana ne-accordion kusilawuli esigoqekayo, engeza isibaluli sedatha data-parent="#selector". Bheka idemo ukuze ubone lokhu kusebenza.

Nge-JavaScript

Nika amandla ngokwenza nge:

$(".goqa").goqa()

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-parent="".

Izindlela

.goqa(izinketho)

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

$('#myCollapsible').goqa({
  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').on('kufihliwe', umsebenzi () {
  // enza into…
})

Isibonelo se-carousel

Umbukiso wesilayidi ongezansi ubonisa i-plugin evamile kanye nengxenye yokuhamba ngebhayisikili ezintweni ezifana ne-carousel.

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.

‹ ›

<div id="myCarousel" class="carousel slide">
  <!-- Izinto ze-carousel -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</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>

Ukusetshenziswa

Ngezibaluli zedatha

...

Nge-JavaScript

Shayela i-carousel ngokwenza:

$('.carousel').carousel()

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-interval="".

Izindlela

.i-carousel(izinketho)

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

$('.carousel').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.

Isibonelo

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

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

Ukusetshenziswa

Ngezibaluli zedatha

Engeza izibaluli zedatha ukuze ubhalise i-elementi ngokusebenza kwe-typeahead njengoba kuboniswe kusibonelo esingenhla.

Nge-JavaScript

Shayela i-typeahead mathupha ngokuthi:

$('.typeahead').typeahead()

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-source="".

Izindlela

.typeahead(izinketho)

Iqalisa okokufaka nge-typeahead.

Isibonelo

Ukuzulazula okungaphansi kwesokunxele kuyidemo ebukhoma ye-plugin ye-affix.

Ukusetshenziswa

Ngezibaluli zedatha

Ukwengeza kalula ukuziphatha kokunamathisela kunoma iyiphi i-elementi, vele ungeze data-spy="affix"ku-elementi ofuna ukuyihlola. Bese usebenzisa ama-offsets ukuchaza ukuthi ushintsha nini ukuphina kwe-elementi uvule futhi ukuvale.

<div data-spy="affix" data-offset-top="200">...</div>

Nge-JavaScript

Shayela i-plugin ye-affix nge-JavaScript:

$('#navbar').affix()

Izindlela

.namathisela('vuselela')

Uma usebenzisa i-affix ngokuhambisana nokwengeza noma ukukhipha izakhi ku-DOM, uzofuna ukushayela indlela yokuvuselela:

$('[data-spy="affix"]').ngalinye(umsebenzi () {
  $(lokhu).namathisela('vuselela')
});

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-offset-top="200".