Individu atau dikompilasi

Plugin dapat dimasukkan satu per satu (meskipun beberapa memiliki ketergantungan yang diperlukan), atau sekaligus. Baik bootstrap.js dan bootstrap.min.js berisi semua plugin dalam satu file.

Atribut data

Anda dapat menggunakan semua plugin Bootstrap murni melalui API markup tanpa menulis satu baris JavaScript. Ini adalah API kelas pertama Bootstrap dan harus menjadi pertimbangan pertama Anda saat menggunakan plugin.

Meskipun demikian, dalam beberapa situasi mungkin diinginkan untuk menonaktifkan fungsi ini. Oleh karena itu, kami juga menyediakan kemampuan untuk menonaktifkan API atribut data dengan melepaskan semua peristiwa pada body namespaced dengan `'data-api'`. Ini terlihat seperti ini:

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

Atau, untuk menargetkan plugin tertentu, cukup sertakan nama plugin sebagai namespace bersama dengan namespace data-api seperti ini:

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

API terprogram

Kami juga percaya Anda harus dapat menggunakan semua plugin Bootstrap murni melalui JavaScript API. Semua API publik adalah metode tunggal yang dapat dirantai, dan mengembalikan koleksi yang ditindaklanjuti.

$ ( ".btn.bahaya" ). tombol ( "beralih" ). addClass ( "gemuk" )

Semua metode harus menerima objek opsi opsional, string yang menargetkan metode tertentu, atau tidak sama sekali (yang memulai plugin dengan perilaku default):

$ ( "#Modalsaya" ). modal () // diinisialisasi dengan default                       
$ ( "#Modalsaya" ). modal ({ keyboard : false }) // diinisialisasi tanpa keyboard     
$ ( "#Modalsaya" ). modal ( 'show' ) // menginisialisasi dan memanggil show segera                

Setiap plugin juga mengekspos konstruktor mentahnya pada properti `Constructor`: $.fn.popover.Constructor. Jika Anda ingin mendapatkan instance plugin tertentu, ambil langsung dari elemen: $('[rel=popover]').data('popover').

Tidak Ada Konflik

Terkadang perlu menggunakan plugin Bootstrap dengan kerangka kerja UI lainnya. Dalam keadaan ini, tabrakan namespace kadang-kadang dapat terjadi. Jika ini terjadi, Anda dapat memanggil .noConflictplugin yang ingin Anda kembalikan nilainya.

var bootstrapButton = $ . fn . tombol . noConflict () // mengembalikan $.fn.button ke nilai yang ditetapkan sebelumnya 
$ . fn . bootstrapBtn = bootstrapButton             // berikan $().bootstrapBtn fungsionalitas bootstrap

Acara

Bootstrap menyediakan acara khusus untuk sebagian besar tindakan unik plugin. Umumnya, ini datang dalam bentuk infinitive dan past participle - di mana infinitive (ex. show) dipicu pada awal suatu peristiwa, dan bentuk past participle-nya (ex. shown) dipicu pada penyelesaian suatu tindakan.

Semua kejadian infinitif menyediakan fungsionalitas preventDefault. Ini memberikan kemampuan untuk menghentikan eksekusi suatu tindakan sebelum dimulai.

$ ( '#Modalku' ). pada ( 'tampilkan' , fungsi ( e ) {   
    jika (! data ) kembali e . preventDefault () // menghentikan modal agar tidak ditampilkan   
})

Tentang transisi

Untuk efek transisi sederhana, sertakan bootstrap-transition.js sekali di samping file JS lainnya. Jika Anda menggunakan bootstrap.js yang dikompilasi (atau diperkecil) , tidak perlu menyertakan ini—ini sudah ada di sana.

Gunakan kasus

Beberapa contoh plugin transisi:

• Geser atau memudar di modals
• Memudar tab
• Peringatan memudar
• Panel korsel geser

Contoh

Modals disederhanakan, tetapi fleksibel, permintaan dialog dengan fungsionalitas minimum yang diperlukan dan default cerdas.

Contoh statis

Modal yang dirender dengan header, body, dan set tindakan di footer.

<div class = "modal sembunyikan fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </tombol>    
    <h3> Judul modal </h3>
  </div>
  <div class = "modal-body" > 
    <p> Satu tubuh yang bagus… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Tutup </a>  
    <a href = "#" class = "btn btn-primary"> Simpan perubahan </a>  
  </div>
</div>

Demo langsung

Alihkan modal melalui JavaScript dengan mengklik tombol di bawah ini. Ini akan meluncur ke bawah dan memudar dari bagian atas halaman.

<!-- Tombol untuk memicu modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Luncurkan modal demo </a>    
 
<!-- Modal -->
<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" > Modal header </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Satu tubuh yang bagus… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Tutup </button>   
    <button class = "btn btn-primary" > Simpan perubahan </button> 
  </div>
</div>

Penggunaan

Melalui atribut data

Aktifkan modal tanpa menulis JavaScript. Setel data-toggle="modal"pada elemen pengontrol, seperti tombol, bersama dengan a data-target="#foo"atau href="#foo"untuk menargetkan modal tertentu untuk beralih.

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

Melalui JavaScript

Panggil modal dengan id myModaldengan satu baris JavaScript:

$ ( '#Modalku' ). modal ( opsi )

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-backdrop="".

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

Metode

.modal(opsi)

Mengaktifkan konten Anda sebagai modal. Menerima opsi opsional object.

$ ( '#Modalku' ). modal ({
  keyboard : salah 
})

.modal('beralih')

Mengalihkan modal secara manual.

$ ( '#Modalku' ). modal ( 'beralih' )

.modal('tampilkan')

Secara manual membuka modal.

$ ( '#Modalku' ). modal ( 'tampilkan' )

.modal('sembunyikan')

Secara manual menyembunyikan modal.

$ ( '#Modalku' ). modal ( 'sembunyikan' )

Acara

Kelas modal Bootstrap memperlihatkan beberapa peristiwa untuk menghubungkan ke fungsionalitas modal.

$ ( '#Modalku' ). pada ( 'tersembunyi' , fungsi () {   
  // lakukan sesuatu…
})

Contoh

Tambahkan menu dropdown ke hampir semua hal dengan plugin sederhana ini, termasuk navbar, tab, dan pills.

Dalam navbar

Dalam tab

Penggunaan

Melalui atribut data

Tambahkan data-toggle="dropdown"ke tautan atau tombol untuk mengaktifkan tarik-turun.

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

Agar URL tetap utuh, gunakan data-targetatribut alih-alih href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html"> _      
    tarik-turun
    <b class = "tanda sisipan" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Melalui JavaScript

Panggil dropdown melalui JavaScript:

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

Pilihan

Tidak ada

Metode

$().dropdown('beralih')

Api terprogram untuk beralih menu untuk navbar atau navigasi tab tertentu.

Contoh di navbar

Plugin ScrollSpy adalah untuk memperbarui target navigasi secara otomatis berdasarkan posisi gulir. Gulir area di bawah bilah navigasi dan perhatikan perubahan kelas yang aktif. Sub item dropdown akan disorot juga.

Penggunaan

Melalui atribut data

Untuk dengan mudah menambahkan perilaku scrollspy ke navigasi bilah atas Anda, cukup tambahkan data-spy="scroll"ke elemen yang ingin Anda mata-matai (biasanya ini adalah badan) dan data-target=".navbar"untuk memilih navigasi mana yang akan digunakan. Anda ingin menggunakan scrollspy dengan sebuah .navkomponen.

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

Melalui JavaScript

Panggil scrollspy melalui JavaScript:

$ ( '#bar' ). mata -mata ()

Metode

.scrollspy('segarkan')

Saat menggunakan scrollspy bersamaan dengan menambahkan atau menghapus elemen dari DOM, Anda harus memanggil metode penyegaran seperti:

$ ( '[data-spy="gulir"]' ). masing-masing ( fungsi () {  
  var $spy = $ ( ini ). scrollspy ( 'segarkan' )
});

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-offset="".

Acara

Contoh tab

Tambahkan fungsionalitas tab yang cepat dan dinamis untuk transisi melalui panel konten lokal, bahkan melalui menu tarik-turun.

Penggunaan

Aktifkan tab yang dapat ditabulasi melalui JavaScript (setiap tab harus diaktifkan satu per satu):

$ ( '#myTab a' ). klik ( fungsi ( e ) {  
  e . preventDefault ();
  $ ( ini ). tab ( 'tampilkan' );
})

Anda dapat mengaktifkan tab individual dengan beberapa cara:

$ ( '#myTab a[href="#profile"]' ). tab ( 'tampilkan' ); // Pilih tab berdasarkan nama 
$ ( '#myTab a:first' ). tab ( 'tampilkan' ); // Pilih tab pertama 
$ ( '#myTab a:last' ). tab ( 'tampilkan' ); // Pilih tab terakhir 
$ ( '#myTab li:eq(2) a' ). tab ( 'tampilkan' ); // Pilih tab ketiga (0-diindeks) 

Markup

Anda dapat mengaktifkan navigasi tab atau pil tanpa menulis JavaScript apa pun hanya dengan menentukan data-toggle="tab"atau data-toggle="pill"pada suatu elemen. Menambahkan navdan nav-tabskelas ke tab ulakan menerapkan gaya tab Bootstrap.

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

Metode

$().tab

Mengaktifkan elemen tab dan wadah konten. Tab harus memiliki a data-targetatau hrefpenargetan simpul penampung di DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "aktif" ><a href = "#home" > Beranda </a></li>  
  <li><a href = "#profile"> Profil </a> </li> 
  <li><a href = "#messages"> Pesan </a> </li> 
  <li><a href = "#settings"> Setelan </a> </li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane aktif" 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>
 
<skrip>
  $ ( fungsi () {  
    $ ( '#myTab a:last' ). tab ( 'tampilkan' );
  })
</skrip>

Acara

$ ( 'a[data-toggle="tab"]' ). pada ( 'ditampilkan' , fungsi ( e ) {   
  e . target // tab yang diaktifkan
  e . target terkait // tab sebelumnya
})

Contoh

Terinspirasi oleh plugin jQuery.tipsy yang luar biasa yang ditulis oleh Jason Frame; Tooltips adalah versi terbaru, yang tidak bergantung pada gambar, menggunakan CSS3 untuk animasi, dan atribut data untuk penyimpanan judul lokal.

Untuk alasan kinerja, tooltip dan popover data-apis disertakan, artinya Anda harus menginisialisasinya sendiri .

Arahkan kursor ke tautan di bawah untuk melihat tooltips:

Empat arah

Tooltips di grup input

Saat menggunakan tooltips dan popover dengan grup input Bootstrap, Anda harus mengatur opsi container(didokumentasikan di bawah) untuk menghindari efek samping yang tidak diinginkan.

Penggunaan

Picu tooltip melalui JavaScript:

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

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-animation="".

Markup

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > arahkan kursor ke atas saya </a>   

Metode

$().tooltip(opsi)

Melampirkan penangan tooltip ke koleksi elemen.

.tooltip('tampilkan')

Mengungkapkan tooltip elemen.

$ ( '#elemen' ). keterangan alat ( 'tampilkan' )

.tooltip('sembunyikan')

Menyembunyikan tooltip elemen.

$ ( '#elemen' ). keterangan alat ( 'sembunyikan' )

.tooltip('beralih')

Mengalihkan tooltip elemen.

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

.tooltip('hancurkan')

Menyembunyikan dan menghancurkan tooltip elemen.

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

Contoh

Tambahkan lapisan konten kecil, seperti yang ada di iPad, ke elemen apa pun untuk menampung informasi sekunder. Arahkan kursor ke tombol untuk memicu popover. Membutuhkan Tooltip untuk disertakan.

Popover statis

Tersedia empat opsi: rata atas, kanan, bawah, dan kiri.

Tidak ada markup yang ditampilkan sebagai popover yang dihasilkan dari JavaScript dan konten dalam dataatribut.

Demo langsung

Empat arah

Penggunaan

Aktifkan popover melalui JavaScript:

$ ( '#contoh' ). popover ( opsi )

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-animation="".

Markup

Untuk alasan kinerja, Tooltip dan Popover data-apis diikutsertakan. Jika Anda ingin menggunakannya cukup tentukan opsi pemilih.

Metode

$().popover(opsi)

Menginisialisasi popover untuk koleksi elemen.

.popover('tampilkan')

Mengungkapkan popover elemen.

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

.popover('sembunyikan')

Menyembunyikan popover elemen.

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

.popover('beralih')

Mengalihkan popover elemen.

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

.popover('hancurkan')

Menyembunyikan dan menghancurkan popover elemen.

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

Contoh peringatan

Tambahkan fungsionalitas abaikan ke semua pesan peringatan dengan plugin ini.

Penggunaan

Aktifkan penghentian lansiran melalui JavaScript:

$ ( ".peringatan" ). waspada ()

Markup

Cukup tambahkan data-dismiss="alert"ke tombol tutup Anda untuk secara otomatis memberikan fungsi tutup peringatan.

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

Metode

$().peringatan()

Membungkus semua peringatan dengan fungsionalitas yang dekat. Agar lansiran Anda bernyawa saat ditutup, pastikan lansiran .fadedan .inkelas sudah diterapkan padanya.

.alert('tutup')

Menutup peringatan.

$ ( ".peringatan" ). waspada ( 'tutup' )

Acara

Kelas peringatan Bootstrap memperlihatkan beberapa peristiwa untuk menghubungkan ke fungsi peringatan.

$ ( '#peringatan-saya' ). mengikat ( 'tertutup' , fungsi () {   
  // lakukan sesuatu…
})

Contoh penggunaan

Lakukan lebih banyak dengan tombol. Kontrol status tombol atau buat grup tombol untuk lebih banyak komponen seperti bilah alat.

Stateful

Tambahkan data-loading-text="Loading..."untuk menggunakan status pemuatan pada tombol.

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

Beralih tunggal

Tambahkan data-toggle="button"untuk mengaktifkan toggling pada satu tombol.

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

Kotak centang

Tambahkan data-toggle="buttons-checkbox"untuk beralih gaya kotak centang pada btn-group.

<div class = "btn-group" data-toggle = "tombol-kotak centang" >  
  <button type = "button" class = "btn btn-primary" > Kiri </button>  
  <button type = "button" class = "btn btn-primary" > Tengah </button>  
  <button type = "button" class = "btn btn-primary" > Kanan </button>  
</div>

Radio

Tambahkan data-toggle="buttons-radio"untuk beralih gaya radio di btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Kiri </button>  
  <button type = "button" class = "btn btn-primary" > Tengah </button>  
  <button type = "button" class = "btn btn-primary" > Kanan </button>  
</div>

Penggunaan

Aktifkan tombol melalui JavaScript:

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

Markup

Atribut data merupakan bagian integral dari plugin tombol. Lihat contoh kode di bawah ini untuk berbagai jenis markup.

Pilihan

Tidak ada

Metode

$().button('beralih')

Mengalihkan status push. Memberikan tampilan tombol yang telah diaktifkan.

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

$().button('memuat')

Mengatur status tombol untuk memuat - menonaktifkan tombol dan menukar teks untuk memuat teks. Memuat teks harus ditentukan pada elemen tombol menggunakan atribut data data-loading-text.

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

$().button('setel ulang')

Mengatur ulang status tombol - menukar teks ke teks asli.

$().button(string)

Mereset status tombol - menukar teks ke status teks yang ditentukan data.

< jenis tombol = "tombol"   class = "btn" data-complete-text = "selesai!" > ... </tombol>  
<skrip>
  $ ( '.btn' ). tombol ( 'selesai' )
</skrip>

Tentang

Dapatkan gaya dasar dan dukungan fleksibel untuk komponen yang dapat dilipat seperti akordeon dan navigasi.

* Membutuhkan plugin Transitions untuk disertakan.

Contoh akordeon

Menggunakan plugin collapse, kami membuat widget gaya akordeon sederhana:

<div class = "akordeon" id = "akordeon2" >  
  <div class = "grup akordeon" > 
    <div class = "tajuk akordeon" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Item Grup yang Dapat Dilipat #1
      </a>
    </div>
    <div id = "collapseOne" class = "tubuh akordeon runtuh" ​​>  
      <div class = "akordeon-dalam" > 
        Anim pariatur klise...
      </div>
    </div>
  </div>
  <div class = "grup akordeon" > 
    <div class = "tajuk akordeon" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href =     "#collapseTwo" >
        Item Grup yang Dapat Dilipat #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "akordeon-dalam" >
        Anim pariatur klise...
      </div>
    </div>
  </div>
</div>
...

Anda juga dapat menggunakan plugin tanpa markup akordeon. Buat tombol untuk mengaktifkan perluasan dan penciutan elemen lain.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  sederhana yang bisa dilipat
</tombol>
 
<div id = "demo" class = "collapse in" > … </div>  

Penggunaan

Melalui atribut data

Cukup tambahkan data-toggle="collapse"dan a data-targetke elemen untuk secara otomatis menetapkan kontrol elemen yang dapat dilipat. Atribut data-targetmenerima pemilih css untuk menerapkan penciutan. Pastikan untuk menambahkan kelas collapseke elemen yang dapat diciutkan. Jika Anda ingin default terbuka, tambahkan kelas tambahan in.

Untuk menambahkan manajemen grup seperti akordeon ke kontrol yang dapat diciutkan, tambahkan atribut data data-parent="#selector". Lihat demo untuk melihat ini beraksi.

Melalui JavaScript

Aktifkan secara manual dengan:

$ ( ".runtuh" ​​). runtuh ()

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-parent="".

Metode

.collapse(opsi)

Mengaktifkan konten Anda sebagai elemen yang dapat diciutkan. Menerima opsi opsional object.

$ ( '#myCollapsible' ). runtuh ({
  beralih : salah 
})

.collapse('beralih')

Mengalihkan elemen yang dapat diciutkan ke ditampilkan atau disembunyikan.

.collapse('tampilkan')

Menampilkan elemen yang dapat dilipat.

.collapse('sembunyikan')

Menyembunyikan elemen yang dapat dilipat.

Acara

Kelas keruntuhan Bootstrap memperlihatkan beberapa peristiwa untuk menghubungkan ke fungsionalitas keruntuhan.

$ ( '#myCollapsible' ). pada ( 'tersembunyi' , fungsi () {   
  // lakukan sesuatu…
})

Contoh korsel

Tampilan slide di bawah ini menunjukkan plugin dan komponen generik untuk bersepeda melalui elemen seperti korsel.

Label gambar mini pertama

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

kan kan

<div id = "myCarousel" class = "slide carousel" >  
  <ol class = "indikator carousel" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "aktif" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Item korsel -->
  <div class = "carousel-inner" > 
    <div class = "item aktif" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Navigasi korsel -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Penggunaan

Melalui atribut data

Gunakan atribut data untuk mengontrol posisi carousel dengan mudah. data-slidemenerima kata kunci prevatau next, yang mengubah posisi slide relatif terhadap posisinya saat ini. Atau, gunakan data-slide-tountuk meneruskan indeks slide mentah ke carousel data-slide-to="2", yang melompati posisi slide ke indeks tertentu yang dimulai dengan0 .

Melalui JavaScript

Panggil carousel secara manual dengan:

$ ( '.korsel' ). korsel ()

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScriptz. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-interval="".

Metode

.carousel(opsi)

Menginisialisasi korsel dengan opsi opsional objectdan mulai menelusuri item.

$ ( '.korsel' ). korsel ({
  selang waktu : 2000 
})

.carousel('siklus')

Siklus melalui item korsel dari kiri ke kanan.

.carousel('jeda')

Menghentikan korsel dari bersepeda melalui item.

.carousel(angka)

Menggerakkan korsel ke bingkai tertentu (berbasis 0, mirip dengan larik).

.carousel('sebelumnya')

Siklus ke item sebelumnya.

.carousel('berikutnya')

Siklus ke item berikutnya.

Acara

Kelas carousel Bootstrap memperlihatkan dua peristiwa untuk menghubungkan ke fungsionalitas carousel.

Contoh

Plugin dasar yang mudah diperluas untuk membuat tipografi elegan dengan cepat dengan input teks formulir apa pun.

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

Anda ingin mengatur autocomplete="off"untuk mencegah menu browser default muncul di dropdown Bootstrap typeahead.

Penggunaan

Melalui atribut data

Tambahkan atribut data untuk mendaftarkan elemen dengan fungsionalitas typeahead seperti yang ditunjukkan pada contoh di atas.

Melalui JavaScript

Panggil typeahead secara manual dengan:

$ ( '.typeahead' ). jenis huruf ()

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-source="".

Metode

.typeahead(opsi)

Menginisialisasi input dengan typeahead.

Contoh

Subnavigasi di sebelah kiri adalah demo langsung dari plugin affix.

Penggunaan

Melalui atribut data

Untuk menambahkan perilaku afiks dengan mudah ke elemen apa pun, cukup tambahkan data-spy="affix"ke elemen yang ingin Anda intai. Kemudian gunakan offset untuk menentukan kapan harus mengaktifkan dan menonaktifkan penyematan elemen.

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

Melalui JavaScript

Panggil plugin affix melalui JavaScript:

$ ( '#bar' ). afiks ()

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-offset-top="200".