Individu atawa disusun

Plugin tiasa dilebetkeun masing-masing (sanaos sababaraha anu peryogi katergantungan), atanapi sadayana sakaligus. Boh bootstrap.js sareng bootstrap.min.js ngandung sadaya plugins dina hiji file.

Atribut data

Anjeun tiasa nganggo sadayana plugins Bootstrap murni ngalangkungan API markup tanpa nyerat hiji baris JavaScript. Ieu mangrupikeun API kelas munggaran Bootstrap sareng kedah janten pertimbangan munggaran anjeun nalika nganggo plugin.

Kitu cenah, dina sababaraha kaayaan, éta pantes pikeun mareuman fungsionalitas ieu. Ku alatan éta, kami ogé nyadiakeun kamampuhan pikeun nganonaktipkeun API atribut data ku unbinding sakabeh kajadian dina awak spasi ngaran kalayan `'data-api'`. Ieu sigana kieu:

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

Alternatipna, pikeun nargétkeun hiji plugin husus, ngan kaasup ngaran plugin urang salaku ngaranspasi babarengan jeung data-api ngaranspasi kawas kieu:

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

Programmatic API

Kami ogé yakin yén anjeun kedah tiasa nganggo sadayana plugins Bootstrap murni ngalangkungan API JavaScript. Kabéh API umum anu tunggal, métode chainable, sarta balik kempelan acted kana.

$ ( ".btn.bahaya" ). tombol ( "toggle" ). addClass ( "gajih" )

Sadaya metode kedah nampi pilihan obyék pilihan, senar anu nargétkeun metodeu khusus, atanapi henteu nanaon (anu ngamimitian plugin kalayan paripolah standar):

$ ( "#MyModal" ). modal () // initialized kalawan standar                       
$ ( "#MyModal" ). modal ({ keyboard : palsu }) // initialized kalawan euweuh keyboard     
$ ( "#MyModal" ). modal ( 'acara' ) // initializes na invokes acara geuwat                

Unggal plugin ogé ngungkabkeun constructor atah na dina sipat `Constructor` $.fn.popover.Constructor:. Upami anjeun hoyong kéngingkeun conto plugin khusus, cokot deui langsung tina unsur: $('[rel=popover]').data('popover').

Taya Konflik

Kadang-kadang perlu ngagunakeun plugins Bootstrap sareng kerangka UI anu sanés. Dina kaayaan ieu, tabrakan ngaranspasi kadang bisa lumangsung. Upami ieu kajantenan, anjeun tiasa nelepon .noConflictkana plugin anu anjeun hoyong balikkeun nilaina.

var bootstrapButton = $ . fn . kancing . noConflict () // balik $ .fn.button kana nilai saméméhna ditugaskeun 
$ . fn . bootstrapBtn = bootstrapButton             // masihan $().bootstrapBtn fungsionalitas bootstrap

Kajadian

Bootstrap nyayogikeun acara khusus pikeun kalolobaan tindakan unik plugin. Sacara umum, ieu datangna dina bentuk participle infinitive jeung kaliwat - dimana infinitive (ex. show) dipicu dina mimiti hiji acara, sarta formulir participle kaliwat na (ex. shown) Micu dina parantosan hiji aksi.

Sadaya kajadian infinitive nyadiakeun pungsi preventDefault. Ieu nyadiakeun kamampuhan pikeun ngeureunkeun palaksanaan hiji aksi saméméh dimimitian.

$ ( '#MyModal' ). on ( 'acara' , fungsi ( e ) {   
    lamun (! data ) balik e . preventDefault () // eureun modal ti ditémbongkeun   
})

Ngeunaan transisi

Pikeun éfék transisi basajan, lebetkeun bootstrap-transition.js sakaligus sareng file JS anu sanés. Upami anjeun nganggo bootstrap.js anu dikompilasi (atanapi minified) , teu kedah kalebet ieu-éta parantos aya.

Paké kasus

Sababaraha conto plugin transisi:

• Ngageser atanapi fading dina modals
• Fading kaluar tab
• Fading kaluar ngabejaan
• Ngageser panel carousel

Contona

Modals anu streamlined, tapi fléksibel, dialog prompts kalawan fungsionalitas diperlukeun minimum jeung standar pinter.

Contona statik

Modal anu disayogikeun sareng lulugu, awak, sareng set tindakan dina footer.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <tombol tipe = "tombol" kelas = "tutup" data-ngaleungitkeun = "modal" aria-disumputkeun = "leres" > & kali; </tombol>    
    <h3> Modal lulugu </h3>
  </div>
  <div class = "modal-body" > 
    <p> Hiji awak alus... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Tutup </a>  
    <a href = "#" class = "btn btn-primary" > Simpen parobahan </a>  
  </div>
</div>

Live demo

Toggle a modal via JavaScript ku ngaklik tombol di handap. Bakal ngageser ka handap sareng luntur ti luhur halaman.

<!-- Tombol pikeun memicu modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Jalankeun demo modal </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "leres" >      
  <div class = "modal-header" > 
    <tombol type = "tombol" class = "tutup" data-dismiss = "modal" aria-disumputkeun = "leres" > × </tombol>    
    <h3 id = "myModalLabel" > Modal lulugu </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Hiji awak alus... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Tutup </button>   
    <button class = "btn btn-primary" > Simpen parobahan </button> 
  </div>
</div>

Pamakéan

Via atribut data

Aktipkeun modal tanpa nulis JavaScript. Disetél data-toggle="modal"dina unsur controller, kawas tombol, babarengan jeung data-target="#foo"atawa href="#foo"pikeun nargétkeun modal husus pikeun toggle.

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

Ngaliwatan JavaScript

Nelepon modal sareng id myModalsareng hiji baris JavaScript:

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

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-backdrop="".

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

Métode

.modal(pilihan)

Aktipkeun eusi anjeun salaku modal. Narima hiji pilihan pilihan object.

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

.modal('toggle')

Sacara manual toggles modal.

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

.modal('show')

Sacara manual muka modal.

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

.modal('sumputkeun')

Sacara manual nyumputkeun modal.

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

Kajadian

Kelas modal Bootstrap ngungkabkeun sababaraha acara pikeun nyambungkeun kana fungsionalitas modal.

$ ( '#MyModal' ). on ( 'disumputkeun' , fungsi () {   
  // ngalakukeun hiji hal ...
})

Contona

Tambihkeun ménu lungsur ka ampir naon waé kalayan plugin saderhana ieu, kalebet navbar, tab, sareng pil.

Dina navbar a

Dina tab

Pamakéan

Via atribut data

Tambihkeun data-toggle="dropdown"kana tautan atanapi tombol pikeun ngagentoskeun turunna.

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

Pikeun ngajaga URL gembleng, nganggo data-targetatribut tinimbang href="#".

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

Ngaliwatan JavaScript

Nelepon dropdowns via JavaScript:

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

Pilihan

Euweuh

Métode

$().dropdown('toggle')

A api programmatic pikeun toggling ménu pikeun navbar dibikeun atawa navigasi tab.

Contona dina navbar

ScrollSpy plugin nyaéta pikeun otomatis ngamutahirkeun target nav dumasar kana posisi gulung. Gulung wewengkon handap navbar jeung lalajo robah kelas aktip. Sub item dropdown bakal disorot ogé.

Pamakéan

Via atribut data

Pikeun gampang nambahkeun kabiasaan scrollspy kana navigasi topbar Anjeun, ngan nambahan data-spy="scroll"ka elemen rék nénjo dina (paling ilaharna ieu bakal awak) sarta data-target=".navbar"pikeun milih nu nav ngagunakeun. Anjeun bakal hoyong nganggo scrollspy sareng .navkomponén.

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

Ngaliwatan JavaScript

Nelepon scrollspy via JavaScript:

$ ( '#navbar' ). scrollspy ()

Métode

.scrollspy('refresh')

Nalika nganggo scrollspy sareng nambihan atanapi ngahapus unsur tina DOM, anjeun kedah nyauran metode refresh sapertos kieu:

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

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-offset="".

Kajadian

Conto tab

Tambihkeun fungsionalitas tab anu gancang sareng dinamis pikeun ngaliwat panel eusi lokal, bahkan ngalangkungan ménu turun.

Pamakéan

Aktipkeun tab tabable via JavaScript (unggal tab kudu diaktipkeun individual):

$ ( '#MyTab a' ). klik ( fungsi ( e ) {  
  e . preventDefault ();
  $ ( ieu ). tab ( 'témbongkeun' );
})

Anjeun tiasa ngaktipkeun tab individu ku sababaraha cara:

$ ( '#myTab a[href="#profile"]' ). tab ( 'témbongkeun' ); // Pilih tab ku ngaran 
$ ( '#MyTab a:mimiti' ). tab ( 'témbongkeun' ); // Pilih tab kahiji 
$ ( '#MyTab a:panungtung' ). tab ( 'témbongkeun' ); // Pilih tab panungtungan 
$ ( '#myTab li:eq(2) a' ). tab ( 'témbongkeun' ); // Pilih tab katilu (0-indéks) 

Markup

Anjeun tiasa ngaktipkeun navigasi tab atanapi pil tanpa nyerat JavaScript ku ngan saukur nangtukeun data-toggle="tab"atanapi data-toggle="pill"dina unsur. Nambahkeun navsareng nav-tabskelas kana tab ulbakal nerapkeun gaya tab Bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Propil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Talatah </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Setélan </a></li>  
</ul>

Métode

$().tab

Aktipkeun unsur tab sareng wadah eusi. Tab kedah gaduh data-targetatanapi hrefnargétkeun titik wadah dina DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Propil </a></li> 
  <li><a href = "#messages" > Talatah </a></li> 
  <li><a href = "#settings" > Setélan </a></li> 
</ul>
 
<div class = "eusi tab" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profil" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( fungsi () {  
    $ ( '#MyTab a:panungtung' ). tab ( 'témbongkeun' );
  })
</script>

Kajadian

$ ( 'a[data-toggle="tab"]' ). on ( 'ditémbongkeun' , fungsi ( e ) {   
  e . target // tab diaktipkeun
  e . relatedTarget // tab saméméhna
})

Contona

Diideuan ku jQuery.tipsy plugin unggulan ditulis ku Jason pigura; Tooltips mangrupikeun vérsi anu diropéa, anu henteu ngandelkeun gambar, nganggo CSS3 pikeun animasi, sareng atribut data pikeun neundeun judul lokal.

Kanggo alesan kinerja, tooltip sareng popover data-apis dilebetkeun, hartosna anjeun kedah ngamimitian nyalira .

Hover dina tumbu di handap pikeun ningali tooltips:

Opat arah

Tooltips dina grup input

Nalika nganggo tooltips sareng popovers sareng grup input Bootstrap, anjeun kedah nyetél pilihan container(didokumentasikeun di handap) pikeun nyegah efek samping anu teu dihoyongkeun.

Pamakéan

Micu tooltip via JavaScript:

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

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-animation="".

Markup

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

Métode

$().tooltip(pilihan)

Ngagantelkeun panangan tooltip ka kumpulan unsur.

.tooltip('show')

Nembongkeun tooltip hiji unsur.

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

.tooltip('sumputkeun')

Nyumputkeun tooltip unsur.

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

.tooltip('toggle')

Toggles tooltip hiji unsur.

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

.tooltip('ngancurkeun')

Nyumputkeun sareng ngancurkeun tooltip unsur.

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

Contona

Nambahkeun overlays leutik eusi, kawas nu aya dina iPad, kana elemen naon wae pikeun perumahan informasi sekundér. Hover leuwih tombol pikeun memicu popover nu. Merlukeun Tooltip kaasup.

Popover statik

Opat pilihan sadia: luhur, katuhu, handap, jeung kénca Blok.

Taya markup ditémbongkeun salaku popovers dihasilkeun tina JavaScript jeung eusi dina dataatribut.

Live demo

Opat arah

Pamakéan

Aktipkeun popovers via JavaScript:

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

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-animation="".

Markup

Kanggo alesan kinerja, Tooltip sareng Popover data-apis dilebetkeun. Upami anjeun hoyong nganggo éta, tangtoskeun pilihan pamilih.

Métode

$().popover(pilihan)

Initializes popovers pikeun kumpulan unsur.

.popover('show')

Nembongkeun hiji popover unsur.

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

.popover('sumputkeun')

Nyumputkeun hiji unsur popover.

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

.popover('toggle')

Toggles hiji unsur popover.

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

.popover('ngancurkeun')

Nyumputkeun sareng ngancurkeun popover unsur.

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

Conto béwara

Tambihkeun pungsionalitasna pikeun sadaya pesen waspada nganggo plugin ieu.

Pamakéan

Aktipkeun pamecatan hiji ngageter via JavaScript:

$ ( ". waspada" ). waspada ()

Markup

Ngan tambahkeun data-dismiss="alert"kana tombol nutup anjeun pikeun otomatis masihan hiji fungsi nutup ngageter.

<a class = "nutup" data-ngaleungitkeun = "waspada" href = "#"> & kali; </a>   

Métode

$().siaga()

Bungkus sadaya panggeuing kalayan fungsionalitas anu caket. Pikeun ngahirupkeun panggeuing anjeun nalika ditutup, pastikeun aranjeunna gaduh .fadesareng .inkelas anu parantos dilarapkeun ka aranjeunna.

.alert('deukeut')

Nutup béja.

$ ( ". waspada" ). waspada ( 'deukeut' )

Kajadian

Kelas waspada Bootstrap ngungkabkeun sababaraha acara pikeun ngahubungkeun kana fungsionalitas waspada.

$ ( '#abdi-waspada' ). meungkeut ( 'tutup' , fungsi () {   
  // ngalakukeun hiji hal ...
})

Conto kagunaan

Ngalakukeun leuwih ku tombol. Tombol kontrol nyatakeun atanapi jieun grup tombol pikeun langkung seueur komponén sapertos tulbar.

Stateful

Tambahkeun data-loading-text="Loading..."ka make kaayaan loading on tombol.

<button type = "button" class = "btn btn-primary" data-loading-text = "Ngamuat..." > Kaayaan ngamuat </button>   

Togel tunggal

Tambahkeun data-toggle="button"pikeun ngaktipkeun toggling dina hiji tombol.

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

Kotak centang

Tambahkeun data-toggle="buttons-checkbox"pikeun gaya kotak centang toggling on btn-grup.

<div class = "btn-group" data-toggle = "tombol-kotak centang" >  
  <tombol type = "tombol" class = "btn btn-primary" > Kénca </tombol>  
  <tombol type = "tombol" class = "btn btn-primary" > Tengah </button>  
  <button type = "button" class = "btn btn-primary" > Katuhu </button>  
</div>

Radio

Tambahkeun data-toggle="buttons-radio"pikeun gaya radio toggling on btn-grup.

<div class = "btn-group" data-toggle = "tombol-radio" >  
  <tombol type = "tombol" class = "btn btn-primary" > Kénca </tombol>  
  <tombol type = "tombol" class = "btn btn-primary" > Tengah </button>  
  <button type = "button" class = "btn btn-primary" > Katuhu </button>  
</div>

Pamakéan

Aktipkeun tombol via JavaScript:

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

Markup

Atribut data anu integral kana plugin tombol. Pariksa conto kode di handap pikeun sababaraha jinis markup.

Pilihan

Euweuh

Métode

$().button('toggle')

Toggles kaayaan push. Méré tombol tampilan yén éta geus diaktipkeun.

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

$().button('loading')

Nyetél kaayaan tombol pikeun ngamuat - nganonaktipkeun tombol sareng swap téks kana ngamuat téks. Ngamuat téks kedah ditetepkeun dina unsur tombol nganggo atribut data data-loading-text.

<button type = "button" class = "btn" data-loading-text = "ngamuat barang..." > ... </button>    

$().button('reset')

Reset kaayaan tombol - swaps téks kana téks aslina.

$().tombol(string)

Reset kaayaan tombol - swaps téks kana sagala data ditetepkeun kaayaan téks.

<tombol type = "tombol" class = "btn" data-lengkep-téks = "réngsé!" > ... </tombol>    
<script>
  $ ( '.btn' ). tombol ( 'lengkep' )
</script>

Ngeunaan

Kéngingkeun gaya dasar sareng dukungan anu fleksibel pikeun komponén anu tiasa dilipat sapertos akordion sareng navigasi.

* Merlukeun plugin Transisi pikeun kaasup.

Conto akordion

Ngagunakeun plugin runtuhna, urang ngawangun widget gaya akordion basajan:

<div class = "akordion" id = "akordion2" >  
  <div class = "akordion-grup" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "runtuh" ​​data-parent = "#accordion2" href = "#collapseOne" >    
        Item Grup Collapsible #1
      </a>
    </div>
    <div id = "collapseOne" class = "akordion-awak runtuh" ​​>  
      <div class = "akordion-batin" > 
        Anim pariatur klise...
      </div>
    </div>
  </div>
  <div class = "akordion-grup" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "runtuh" ​​data-parent = "#accordion2" href = "#collapseTwo" >    
        Item Grup Collapsible #2
      </a>
    </div>
    <div id = "collapseTwo" class = "akordion-awak runtuhna" >  
      <div class = "akordion-batin" > 
        Anim pariatur klise...
      </div>
    </div>
  </div>
</div>
...

Anjeun oge bisa make plugin nu tanpa markup akordion. Jieun tombol toggle ngembangna sarta ambruk unsur séjén.

<tombol type = "tombol" class = "btn btn-bahaya" data-toggle = "runtuh" ​​data-target = "#demo" >    
  basajan collapsible
</tombol>
 
<div id = "demo" class = "runtuhkeun" > ... </div>  

Pamakéan

Via atribut data

Ngan tambahkeun data-toggle="collapse"na a data-targetka elemen pikeun otomatis napelkeun kadali unsur collapsible. Atribut data-targetnampi pamilih css pikeun nerapkeun runtuhna. Pastikeun pikeun nambahkeun kelas collapseka elemen collapsible. Upami anjeun hoyong kabuka sacara standar, tambahkeun kelas tambahan in.

Pikeun nambahkeun manajemén grup kawas akordion ka kontrol collapsible, tambahkeun atribut data data-parent="#selector". Tingali kana demo pikeun ningali ieu aksi.

Ngaliwatan JavaScript

Aktipkeun sacara manual nganggo:

$ ( ". runtuhna" ). ambruk ()

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-parent="".

Métode

.collapse(pilihan)

Aktipkeun eusi anjeun salaku unsur collapsible. Narima hiji pilihan pilihan object.

$ ( '#myCollapsible' ). ambruk ({
  togél : palsu 
})

.collapse('toggle')

Toggles unsur collapsible mun ditémbongkeun atawa disumputkeun.

.collapse('show')

Némbongkeun unsur collapsible.

.collapse('sumputkeun')

Nyumputkeun unsur anu tiasa dilipat.

Kajadian

Kelas runtuh Bootstrap ngungkabkeun sababaraha acara pikeun ngaitkeun kana fungsionalitas runtuh.

$ ( '#myCollapsible' ). on ( 'disumputkeun' , fungsi () {   
  // ngalakukeun hiji hal ...
})

Contona carousel

Slideshow di handap ieu nunjukkeun plugin sareng komponén umum pikeun ngurilingan elemen sapertos carousel.

Label Gambar leutik munggaran

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

Label Gambar leutik kadua

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

Label Gambar leutik katilu

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

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <ol class = "carousel-indikator" > 
    <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-batin" > 
    <div class = "item aktip" > ... </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-control katuhu" href = "#myCarousel" data-slide = "salajengna"> & rsaquo ; </a>   
</div>

Pamakéan

Via atribut data

Paké atribut data pikeun gampang ngadalikeun posisi carousel nu. data-slidenarima kecap konci prevatawa next, nu ngarobah posisi slide relatif ka posisi ayeuna. Alternatipna, pake data-slide-topikeun ngirimkeun indéks slide atah ka carousel data-slide-to="2", anu ngaluncat posisi slide ka indéks tinangtu dimimitian ku 0.

Ngaliwatan JavaScript

Telepon carousel sacara manual nganggo:

$ ( '.carousel' ). carousel ()

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScriptz. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-interval="".

Métode

.carousel(pilihan)

Initializes carousel kalawan pilihan pilihan objecttur mimitian Ngabuburit ngaliwatan item.

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

.carousel('siklus')

Siklus ngaliwatan item carousel ti kénca ka katuhu.

.carousel('pause')

Ngeureunkeun carousel tina ngurilingan barang.

.carousel(nomer)

Siklus carousel kana pigura nu tangtu (0 dumasar, sarupa hiji Asép Sunandar Sunarya).

.carousel('saméméhna')

Siklus ka item saméméhna.

.carousel('salajengna')

Siklus ka item salajengna.

Kajadian

Kelas carousel Bootstrap ngungkabkeun dua acara pikeun ngaitkeun kana fungsionalitas carousel.

Contona

Dasar, gampang diperpanjang plugin pikeun gancang nyieun typeaheads elegan jeung sagala formulir input téks.

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

Anjeun bakal hoyong nyetél autocomplete="off"pikeun nyegah ménu browser standar tina muncul dina dropdown bootstrap typeahead.

Pamakéan

Via atribut data

Tambihkeun atribut data pikeun ngadaptar unsur sareng fungsionalitas typeahead sapertos anu dipidangkeun dina conto di luhur.

Ngaliwatan JavaScript

Nelepon headahead sacara manual nganggo:

$ ( '.typeahead' ). hurup ()

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-source="".

Métode

.typeahead(pilihan)

Initializes input kalawan typeahead a.

Contona

Subnavigasi di kénca nyaéta demo langsung tina plugin afiks.

Pamakéan

Via atribut data

Pikeun gampang nambihan paripolah afiks kana unsur naon waé, tambahkeun data-spy="affix"kana unsur anu anjeun hoyong nénjo. Teras nganggo offsets pikeun nangtukeun iraha bade nganonaktipkeun sareng mareuman pinning unsur.

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

Ngaliwatan JavaScript

Nelepon plugin afiks via JavaScript:

$ ( '#navbar' ). afiks ()

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-offset-top="200".