Individu utawa kompilasi

Plugin bisa dilebokake kanthi individu (sanajan sawetara mbutuhake dependensi), utawa kabeh bebarengan. Bootstrap.js lan bootstrap.min.js ngemot kabeh plugin ing file siji.

Atribut data

Sampeyan bisa nggunakake kabeh plugin Bootstrap murni liwat API markup tanpa nulis siji baris JavaScript. Iki minangka API kelas pertama Bootstrap lan kudu dadi pertimbangan pisanan nalika nggunakake plugin.

Sing jarene, ing sawetara kahanan bisa uga dikarepake kanggo mateni fungsi iki. Mula, kita uga nyedhiyakake kemampuan kanggo mateni API atribut data kanthi mbatalake kabeh acara ing awak kanthi spasi `'data-api'`. Iki katon kaya iki:

$ ( 'awak' ). mati ( '.data-api' )

Utawa, kanggo ngarahake plugin tartamtu, mung lebokake jeneng plugin kasebut minangka ruang jeneng bebarengan karo ruang jeneng data-api kaya iki:

$ ( 'awak' ). mati ( '.alert.data-api' )

Programmatic API

Kita uga pracaya sampeyan kudu bisa nggunakake kabeh plugin Bootstrap murni liwat JavaScript API. Kabeh API umum iku siji, cara chainable, lan bali koleksi tumindak marang.

$ ( ".btn.bebaya" ). tombol ( "ngalih" ). addClass ( "lemak" )

Kabeh cara kudu nampa obyek opsional, senar sing ngarahake metode tartamtu, utawa ora ana apa-apa (sing miwiti plugin kanthi prilaku standar):

$ ( "#myModal" ). modal () // initialized karo standar                       
$ ( "#myModal" ). modal ({ keyboard : false }) // diinisialisasi tanpa keyboard     
$ ( "#myModal" ). modal ( 'show' ) // initializes lan invokes show langsung                

Saben plugin uga mbukak konstruktor mentah ing properti `Konstruktor`: $.fn.popover.Constructor. Yen sampeyan pengin njaluk conto plugin tartamtu, njupuk langsung saka unsur: $('[rel=popover]').data('popover').

Ora Konflik

Kadhangkala perlu nggunakake plugin Bootstrap karo kerangka UI liyane. Ing kahanan kasebut, tabrakan spasi jeneng kadhangkala bisa kedadeyan. Yen kedadeyan kasebut, sampeyan bisa nelpon .noConflictplugin sing pengin dibalekake regane.

var bootstrapButton = $ . fn . tombol . noConflict () // bali $ .fn.button kanggo nilai sing diutus sadurunge 
$ . fn . bootstrapBtn = bootstrapButton             // menehi $().bootstrapBtn fungsi bootstrap

Acara

Bootstrap nyedhiyakake acara khusus kanggo umume tumindak unik plugin. Umumé, iki teka ing wangun infinitive lan past participle - ngendi infinitive (ex. show) dipicu ing wiwitan acara, lan past participle wangun (ex. shown) Micu ing completion saka tumindak.

Kabeh acara infinitive nyedhiyakake fungsi preventDefault. Iki menehi kemampuan kanggo mungkasi eksekusi tumindak sadurunge diwiwiti.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    yen (! data ) bali e . preventDefault () // mungkasi modal saka ditampilake   
})

Babagan transisi

Kanggo efek transisi prasaja, kalebu bootstrap-transition.js bebarengan karo file JS liyane. Yen sampeyan nggunakake bootstrap.js sing dikompilasi (utawa minified) , ora perlu nglebokake iki-iku wis ana.

Gunakake kasus

Sawetara conto plugin transisi:

• Sliding utawa fading ing modals
• Fading metu tab
• Fading metu tandha
• Panel carousel geser

Tuladha

Modals sing streamlined, nanging fleksibel, dialog pituduh karo fungsi minimal dibutuhake lan standar pinter.

Tuladha statis

A modal render karo header, awak, lan set tumindak ing footer.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    < jinis tombol = "tombol" kelas = "cedhak" data-dismiss = "modal" aria-didhelikake = "bener" > & kaping; </tombol>    
    <h3> Header modal </h3>
  </div>
  <div class = "modal-body" > 
    <p> Sawijining badan alus... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Tutup </a>  
    <a href = "#" class = "btn btn-primary" > Simpen owah-owahan </a>  
  </div>
</div>

demo langsung

Ganti modal liwat JavaScript kanthi ngeklik tombol ing ngisor iki. Bakal geser mudhun lan luntur saka ndhuwur kaca.

<!-- Tombol kanggo pemicu modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Bukak demo modal </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <tombol type = "tombol" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modal header </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Sawijining badan alus... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Tutup </tombol>   
    <button class = "btn btn-primary" > Simpen owah-owahan </tombol> 
  </div>
</div>

Panggunaan

Liwat atribut data

Aktifake modal tanpa nulis JavaScript. Setel data-toggle="modal"ing unsur controller, kaya tombol, bebarengan karo data-target="#foo"utawa href="#foo"kanggo target modal tartamtu kanggo ngalih.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Bukak modal </button>   

Liwat JavaScript

Nelpon modal karo id myModalkaro siji baris JavaScript:

$ ( '#myModal' ). modal ( pilihan )

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-backdrop="".

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

Metode

.modal(pilihan)

Ngaktifake konten sampeyan minangka modal. Nampa opsi opsional object.

$ ( '#myModal' ). modal ({
  keyboard : palsu 
})

.modal('toggle')

Ngalih modal kanthi manual.

$ ( '#myModal' ). modal ( 'toggle' )

.modal('show')

Mbukak modal kanthi manual.

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

.modal('ndhelikake')

Kanthi manual ndhelikake modal.

$ ( '#myModal' ). modal ( 'ndhelikake' )

Acara

Kelas modal Bootstrap nyedhiyakake sawetara acara kanggo nyambung menyang fungsionalitas modal.

$ ( '#myModal' ). on ( 'didhelikake' , function () {   
  // ngelakoni opo...
})

Tuladha

Tambah menu gulung mudhun kanggo meh kabeh karo plugin prasaja iki, kalebu navbar, tab, lan pil.

Ing navbar

Ing tab

Panggunaan

Liwat atribut data

Tambah data-toggle="dropdown"menyang link utawa tombol kanggo ngalih gulung mudhun.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown pemicu </a>   
  <ul class = "menu dropdown" peran = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Supaya URL tetep utuh, gunakake data-targetatribut tinimbang href="#".

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

Liwat JavaScript

Telpon dropdown liwat JavaScript:

$ ( '. dropdown-toggle' ). gulung mudhun ()

Pilihan

ora ana

Metode

$(). dropdown('toggle')

A api programmatic kanggo ngalih menu kanggo navbar tartamtu utawa navigasi tab.

Conto ing navbar

Plugin ScrollSpy kanggo nganyari target nav kanthi otomatis adhedhasar posisi gulung. Gulung area ing ngisor navbar lan nonton owah-owahan kelas aktif. Sub item gulung mudhun uga bakal disorot.

Panggunaan

Liwat atribut data

Kanggo gampang nambah prilaku scrollspy kanggo pandhu arah topbar, mung nambah data-spy="scroll"menyang unsur sing pengin Spy (paling biasane iki bakal awak) lan data-target=".navbar"kanggo pilih kang nav nggunakake. Sampeyan bakal pengin nggunakake scrollspy karo .navkomponèn.

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

Liwat JavaScript

Telpon scrollspy liwat JavaScript:

$ ( '#navbar' ). scrollspy ()

Metode

.scrollspy('refresh')

Nalika nggunakake scrollspy bebarengan karo nambah utawa mbusak unsur saka DOM, sampeyan kudu nelpon cara refresh kaya mangkene:

$ ( '[data-spy="scroll"]' ). masing -masing ( fungsi () {  
  var $spy = $ ( iki ). scrollspy ( 'refresh' )
});

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-offset="".

Acara

Tuladha tab

Tambah cepet, fungsi tab dinamis kanggo transisi liwat panel isi lokal, malah liwat menu gulung mudhun.

Panggunaan

Aktifake tab sing bisa tab liwat JavaScript (saben tab kudu diaktifake kanthi individu):

$ ( '#MyTab a' ). klik ( fungsi ( e ) {  
  e . preventDefault ();
  $ ( iki ). tab ( 'nuduhake' );
})

Sampeyan bisa ngaktifake tab individu kanthi sawetara cara:

$ ( '#myTab a[href="#profile"]' ). tab ( 'nuduhake' ); // Pilih tab miturut jeneng 
$ ( '#myTab a:first' ). tab ( 'nuduhake' ); // Pilih tab pisanan 
$ ( '#MyTab a:last' ). tab ( 'nuduhake' ); // Pilih tab pungkasan 
$ ( '#myTab li:eq(2) a' ). tab ( 'nuduhake' ); // Pilih tab katelu (0-indexed) 

Markup

Sampeyan bisa ngaktifake navigasi tab utawa pil tanpa nulis JavaScript kanthi mung nemtokake data-toggle="tab"utawa data-toggle="pill"ing unsur. Nambahake navlan nav-tabskelas menyang tab ulbakal ngetrapake gaya tab Bootstrap.

<ul class = "nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Ngarep </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Pesen </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Setelan </a></li>  
</ul>

Metode

$().tab

Ngaktifake unsur tab lan wadhah konten. Tab kudu duwe data-targetutawa hrefnargetake simpul wadhah ing DOM.

<ul class = "nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Pesen </a></li> 
  <li><a href = "#settings" > Setelan </a></li> 
</ul>
 
<div class = "konten tab" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profil" > ... </div>  
  <div class = "tab-pane" id = "pesan" > ... </div>  
  <div class = "tab-pane" id = "setelan" > ... </div>  
</div>
 
<script>
  $ ( fungsi () {  
    $ ( '#MyTab a:last' ). tab ( 'nuduhake' );
  })
</script>

Acara

$ ( 'a[data-toggle="tab"]' ). on ( 'dituduhake' , fungsi ( e ) {   
  e . target // tab aktif
  e . relatedTarget // tab sadurungé
})

Tuladha

Inspirasi dening plugin jQuery.tipsy banget sing ditulis dening Jason Frame; Tooltips minangka versi dianyari, sing ora gumantung ing gambar, nggunakake CSS3 kanggo animasi, lan data-atribut kanggo panyimpenan judhul lokal.

Kanggo alasan kinerja, tooltip lan popover data-apis dipilih, tegese sampeyan kudu miwiti dhewe .

Tutul ing pranala ing ngisor iki kanggo ndeleng tooltips:

Papat arah

Tooltips ing kelompok input

Nalika nggunakake tooltips lan popovers karo kelompok input Bootstrap, sampeyan kudu nyetel pilihan container(didokumentasikan ing ngisor iki) kanggo ngindhari efek samping sing ora dikarepake.

Panggunaan

Micu tooltip liwat JavaScript:

$ ( '#conto' ). tooltip ( pilihan )

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-animation="".

Markup

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > hover over me </a>   

Metode

$().tooltip(pilihan)

Nempelake panangan tooltip menyang koleksi unsur.

.tooltip('show')

Nuduhake tooltip unsur.

$ ( '#elemen' ). tooltip ( 'show' )

.tooltip('ndhelikake')

Ndhelikake tooltip unsur.

$ ( '#elemen' ). tooltip ( 'ndhelikake' )

.tooltip('toggle')

Ngalih tooltip unsur.

$ ( '#elemen' ). tooltip ( 'toggle' )

.tooltip('ngrusak')

Ndhelikake lan ngrusak tooltip unsur.

$ ( '#elemen' ). tooltip ( 'ngrusak' )

Tuladha

Tambah isi overlay cilik, kaya sing ana ing iPad, menyang unsur apa wae kanggo ngemot informasi sekunder. Kisaran tombol kanggo micu popover. Mbutuhake Tooltip kanggo kalebu.

Pandhuan statis

Papat opsi kasedhiya: ndhuwur, tengen, ngisor, lan kiwa didadekake siji.

Ora ana markup sing ditampilake minangka popovers sing digawe saka JavaScript lan isi ing dataatribut.

demo langsung

Papat arah

Panggunaan

Aktifake popovers liwat JavaScript:

$ ( '#conto' ). popover ( pilihan )

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-animation="".

Markup

Kanggo alasan kinerja, Tooltip lan Popover data-apis dipilih. Yen sampeyan pengin nggunakake, mung nemtokake pilihan pamilih.

Metode

$().popover(opsi)

Inisialisasi popovers kanggo koleksi unsur.

.popover('show')

Nuduhake unsur popover.

$ ( '#elemen' ). popover ( 'show' )

.popover('ndhelikake')

Ndhelikake popover unsur.

$ ( '#elemen' ). popover ( 'ndhelikake' )

.popover('toggle')

Ngalihake unsur popover.

$ ( '#elemen' ). popover ( 'toggle' )

.popover('ngrusak')

Ndhelikake lan ngrusak popover unsur.

$ ( '#elemen' ). popover ( 'ngrusak' )

Tuladha tandha

Tambah fungsi ngilangi kabeh pesen tandha karo plugin iki.

Panggunaan

Aktifake ngilangi tandha liwat JavaScript:

$ ( ".waspada" ). waspada ()

Markup

Cukup tambahake data-dismiss="alert"tombol cedhak sampeyan kanthi otomatis menehi fungsi cedhak tandha.

<a class = "close" data-dismiss = "waspada" href = "#" > & kaping; </a>   

Metode

$().waspada()

Bungkus kabeh tandha kanthi fungsi sing cedhak. Supaya tandha sampeyan bisa urip nalika ditutup, priksa manawa tandha .fadelan .inkelas kasebut wis ditrapake.

.alert('nutup')

Nutup tandha.

$ ( ".waspada" ). waspada ( 'cedhak' )

Acara

Kelas tandha Bootstrap nyedhiyakake sawetara acara kanggo nyambungake fungsi tandha.

$ ( '#my-waspada' ). bind ( 'ditutup' , fungsi () {   
  // ngelakoni opo...
})

Tuladha nggunakake

Apa liyane karo tombol. Tombol kontrol nyatakake utawa nggawe klompok tombol kanggo komponen liyane kaya toolbar.

Stateful

Tambah data-loading-text="Loading..."kanggo nggunakake negara loading ing tombol.

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Status muat </button>   

Ngalih tunggal

Tambah data-toggle="button"kanggo ngaktifake toggling ing tombol siji.

<button type = "tombol" class = "btn btn-primary" data-toggle = "tombol" > Toggle Tunggal </button>   

kothak centhang

Tambahake data-toggle="buttons-checkbox"kanggo gaya kothak centhang ing btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  < tipe tombol = "tombol" class = "btn btn-primary" > Ngiwa </tombol>  
  < tipe tombol = "tombol" class = "btn btn-utama" > Tengah </tombol>  
  <tombol type = "tombol" class = "btn btn-primary" > Kanan </tombol>  
</div>

Radio

Tambah data-toggle="buttons-radio"kanggo gaya radio toggling ing btn-grup.

<div class = "btn-group" data-toggle = "tombol-radio" >  
  < tipe tombol = "tombol" class = "btn btn-primary" > Ngiwa </tombol>  
  < tipe tombol = "tombol" class = "btn btn-utama" > Tengah </tombol>  
  <tombol type = "tombol" class = "btn btn-primary" > Kanan </tombol>  
</div>

Panggunaan

Aktifake tombol liwat JavaScript:

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

Markup

Atribut data minangka integral kanggo plugin tombol. Priksa conto kode ing ngisor iki kanggo macem-macem jinis markup.

Pilihan

ora ana

Metode

$().button('toggle')

Ngalih status push. Menehi tombol katon sing wis diaktifake.

< tipe tombol = "tombol" class = "btn" data-toggle = "tombol" > … </tombol>    

$().button('loading')

Nyetel status tombol kanggo loading - mateni tombol lan ngganti teks menyang loading teks. Isi teks kudu ditetepake ing unsur tombol nggunakake atribut data data-loading-text.

<tombol type = "tombol" class = "btn" data-loading-text = "muat barang..." > ... </tombol>    

$().button('reset')

Reset status tombol - ngganti teks menyang teks asli.

$().tombol(string)

Reset status tombol - swap teks menyang sembarang data ditetepake negara teks.

<tombol type = "tombol" class = "btn" data-complete-text = "rampung!" > ... </tombol>    
<script>
  $ ( '.btn' ). tombol ( 'lengkap' )
</script>

Babagan

Entuk gaya dhasar lan dhukungan fleksibel kanggo komponen sing bisa dilipat kaya akordeon lan navigasi.

* Mbutuhake plugin Transisi kanggo dilebokake.

Tuladha akordion

Nggunakake plugin ambruk, kita nggawe widget gaya akordion sing prasaja:

<div class = "akordion" id = "akordion2" >  
  <div class = "grup akordion" > 
    <div class = "akordeon-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Item Grup sing bisa dilipat #1
      </a>
    </div>
    <div id = "collapseOne" class = "akordeon-awak ambruk ing" >  
      <div class = "akordion-inner" > 
        Anim pariatur klise...
      </div>
    </div>
  </div>
  <div class = "grup akordion" > 
    <div class = "akordeon-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Item Grup Collapsible #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "akordion-inner" > 
        Anim pariatur klise...
      </div>
    </div>
  </div>
</div>
...

Sampeyan uga bisa nggunakake plugin tanpa markup akordeon. Nggawe tombol kanggo ngganti ngembangaken lan ambruk saka unsur liyane.

< tipe tombol = "tombol" class = "btn btn-bahaya"    data-toggle = "ambruk" data-target = "#demo" > 
  prasaja collapsible
</tombol>
 
<div id = "demo" kelas   = "collapse in" > … </div>

Panggunaan

Liwat atribut data

Mung nambah data-toggle="collapse"lan data-targetmenyang unsur kanggo otomatis nemtokake kontrol saka unsur collapsible. Atribut data-targetnampa pamilih css kanggo aplikasi ambruk kanggo. Dadi manawa kanggo nambah kelas collapsemenyang unsur collapsible. Yen sampeyan pengin mbukak standar, tambahake kelas tambahan in.

Kanggo nambah manajemen grup kaya akordion menyang kontrol sing bisa dilipat, tambahake atribut data data-parent="#selector". Deleng demo kanggo ndeleng iki ing tumindak.

Liwat JavaScript

Aktifake kanthi manual kanthi:

$ ( ".ambruk" ). ambruk ()

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-parent="".

Metode

.collapse(pilihan)

Ngaktifake konten sampeyan minangka unsur sing bisa dilipat. Nampa opsi opsional object.

$ ( '#myCollapsible' ). ambruk ({
  ngalih : palsu 
})

.collapse('toggle')

Ngalih unsur sing bisa dilipat dadi ditampilake utawa didhelikake.

.collapse('show')

Nuduhake unsur collapsible.

.collapse('ndhelikake')

Ndhelikake unsur collapsible.

Acara

Kelas ambruk Bootstrap nyedhiyakake sawetara acara kanggo nyambungake fungsi ambruk.

$ ( '#myCollapsible' ). on ( 'didhelikake' , function () {   
  // ngelakoni opo...
})

Tuladha carousel

Slideshow ing ngisor iki nuduhake plugin lan komponen umum kanggo muter liwat unsur kaya carousel.

Label Gambar cilik pisanan

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida lan 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.

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <ol class = "indikator carousel" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Item carousel -->
  <div class = "carousel-inner" > 
    <div class = "item aktif" > ... </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"> & lsaquo ; </a>   
  <a class = "carousel-kontrol tengen" href = "#myCarousel" data-slide = "sabanjure"> & rsaquo ; </a>   
</div>

Panggunaan

Liwat atribut data

Gunakake atribut data kanggo gampang ngontrol posisi carousel. data-slidenampa tembung kunci prevutawa next, sing ngowahi posisi geser relatif menyang posisi saiki. Utawa, gunakake data-slide-tokanggo ngirim indeks geser mentah menyang carousel data-slide-to="2", sing mlumpat posisi geser menyang indeks tartamtu sing diwiwiti karo0 .

Liwat JavaScript

Telpon carousel kanthi manual nganggo:

$ ( '.carousel' ). carousel ()

Pilihan

Pilihan bisa liwati liwat atribut data utawa JavaScriptz. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-interval="".

Metode

.carousel(pilihan)

Miwiti carousel kanthi opsi opsional objectlan miwiti muter item.

$ ( '.carousel' ). korsel ({
  interval : 2000 
})

.carousel('siklus')

Siklus liwat item carousel saka kiwa menyang tengen.

.carousel('pause')

Mungkasi carousel saka muter liwat item.

.carousel(nomer)

Siklus carousel menyang pigura tartamtu (basis 0, padha karo array).

.carousel('sadurunge')

Siklus menyang item sadurunge.

.carousel('sabanjure')

Siklus menyang item sabanjure.

Acara

Kelas carousel Bootstrap nyedhiyakake rong acara kanggo nyambungake karo fungsi carousel.

Tuladha

Plugin dhasar sing gampang ditambahake kanggo nggawe headahead sing elegan kanthi cepet kanthi input teks apa wae.

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

Sampeyan bakal pengin nyetel autocomplete="off"kanggo nyegah menu browser gawan saka katon liwat Bootstrap typeahead dropdown.

Panggunaan

Liwat atribut data

Tambah atribut data kanggo ndhaptar unsur kanthi fungsi typeahead kaya sing ditampilake ing conto ing ndhuwur.

Liwat JavaScript

Nelpon headahead kanthi manual:

$ ( '.typeahead' ). aksara jawa ()

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-source="".

Metode

.typeahead(pilihan)

Miwiti input kanthi headahead.

Tuladha

Subnavigasi ing sisih kiwa minangka demo langsung saka plugin affix.

Panggunaan

Liwat atribut data

Kanggo gampang nambah prilaku afiks kanggo unsur sembarang, mung nambah data-spy="affix"menyang unsur sing pengin Spy. Banjur gunakake offset kanggo nemtokake kapan kanggo nguripake lan mateni pinning unsur.

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

Liwat JavaScript

Nelpon plugin affix liwat JavaScript:

$ ( '#navbar' ). afiks ()

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-offset-top="200".