Individu atau disusun

Pemalam boleh disertakan secara individu (walaupun sesetengahnya memerlukan kebergantungan), atau sekaligus. Kedua-dua bootstrap.js dan bootstrap.min.js mengandungi semua pemalam dalam satu fail.

Atribut data

Anda boleh menggunakan semua pemalam Bootstrap semata-mata melalui API markup tanpa menulis satu baris JavaScript. Ini ialah API kelas pertama Bootstrap dan harus menjadi pertimbangan pertama anda apabila menggunakan pemalam.

Walau bagaimanapun, dalam beberapa situasi mungkin wajar untuk mematikan fungsi ini. Oleh itu, kami juga menyediakan keupayaan untuk melumpuhkan API atribut data dengan menyahikat semua acara pada ruang nama badan dengan `'data-api'`. Ini kelihatan seperti ini:

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

Sebagai alternatif, untuk menyasarkan pemalam tertentu, hanya masukkan nama pemalam sebagai ruang nama bersama-sama ruang nama data-api seperti ini:

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

API Programmatik

Kami juga percaya anda sepatutnya boleh menggunakan semua pemalam Bootstrap semata-mata melalui API JavaScript. Semua API awam adalah kaedah tunggal, boleh rantai dan mengembalikan koleksi yang telah diambil tindakan.

$ ( ".btn.bahaya" ). butang ( "togol" ). addClass ( "gemuk" )

Semua kaedah harus menerima objek pilihan pilihan, rentetan yang menyasarkan kaedah tertentu, atau tiada apa-apa (yang memulakan pemalam dengan tingkah laku lalai):

$ ( "#myModal" ). modal () // dimulakan dengan lalai                       
$ ( "#myModal" ). modal ({ papan kekunci : palsu }) // dimulakan tanpa papan kekunci     
$ ( "#myModal" ). modal ( 'show' ) // memulakan dan memanggil show serta-merta                

Setiap pemalam juga mendedahkan pembina mentahnya pada sifat `Constructor`: $.fn.popover.Constructor. Jika anda ingin mendapatkan contoh pemalam tertentu, dapatkannya terus daripada elemen: $('[rel=popover]').data('popover').

Tiada Konflik

Kadangkala perlu menggunakan pemalam Bootstrap dengan rangka kerja UI yang lain. Dalam keadaan ini, perlanggaran ruang nama kadangkala boleh berlaku. Jika ini berlaku, anda boleh menghubungi .noConflictpemalam yang ingin anda kembalikan nilainya.

var bootstrapButton = $ . fn . butang . noConflict () // kembalikan $.fn.button kepada nilai yang ditetapkan sebelum ini 
$ . fn . bootstrapBtn = bootstrapButton             // berikan $().bootstrapBtn fungsi bootstrap

Peristiwa

Bootstrap menyediakan acara tersuai untuk kebanyakan tindakan unik pemalam. Secara amnya, ini datang dalam bentuk infinitif dan participle lampau - di mana infinitif (cth. show) dicetuskan pada permulaan acara, dan bentuk participle past (cth. shown) dicetuskan apabila selesai tindakan.

Semua peristiwa infinitif menyediakan fungsi preventDefault. Ini memberikan keupayaan untuk menghentikan pelaksanaan tindakan sebelum ia bermula.

$ ( '#myModal' ). pada ( 'tunjukkan' , fungsi ( e ) {   
    jika (! data ) kembali e . preventDefault () // menghentikan modal daripada ditunjukkan   
})

Mengenai peralihan

Untuk kesan peralihan yang mudah, sertakan bootstrap-transition.js sekali bersama fail JS yang lain. Jika anda menggunakan bootstrap.js yang disusun (atau diperkecilkan) , tidak perlu menyertakan ini—ia sudah ada.

Kes guna

Beberapa contoh pemalam peralihan:

• Gelongsor atau pudar dalam modal
• Memudar tab
• Makluman pudar
• Anak tetingkap karusel gelongsor

Contoh

Modal diperkemas, tetapi fleksibel, gesaan dialog dengan fungsi minimum yang diperlukan dan lalai pintar.

Contoh statik

Modal yang diberikan dengan pengepala, badan dan set tindakan dalam pengaki.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </butang>    
    <h3> Pengepala modal </h3>
  </div>
  <div class = "modal-body" > 
    <p> Satu badan yang baik... </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

Togol modal melalui JavaScript dengan mengklik butang di bawah. Ia akan meluncur ke bawah dan pudar masuk dari bahagian atas halaman.

<!-- Butang untuk mencetuskan modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Lancarkan mod 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" > Pengepala modal </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Satu badan yang baik... </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. Tetapkan data-toggle="modal"pada elemen pengawal, seperti butang, bersama-sama dengan data-target="#foo"atau href="#foo"untuk menyasarkan mod tertentu untuk menogol.

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

Melalui JavaScript

Panggil modal dengan id myModaldengan satu baris JavaScript:

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

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-backdrop="".

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

Kaedah

.modal(options)

Mengaktifkan kandungan anda sebagai modal. Menerima pilihan pilihan object.

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

.modal('togol')

Togol mod secara manual.

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

.modal('show')

Membuka modal secara manual.

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

.modal('sembunyi')

Secara manual menyembunyikan modal.

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

Peristiwa

Kelas modal Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi modal.

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

Contoh

Tambahkan menu lungsur turun pada hampir semua perkara dengan pemalam mudah ini, termasuk bar navigasi, tab dan pil.

Dalam navbar

Dalam tab

Penggunaan

Melalui atribut data

Tambahkan data-toggle="dropdown"pada pautan atau butang untuk menogol lungsur turun.

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

Untuk memastikan URL tetap utuh, gunakan data-targetatribut dan bukannya href="#".

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

Melalui JavaScript

Panggil lungsur turun melalui JavaScript:

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

Pilihan

tiada

Kaedah

$().dropdown('togol')

Api terprogram untuk menogol menu untuk bar navigasi tertentu atau navigasi tab.

Contoh dalam navbar

Pemalam ScrollSpy adalah untuk mengemas kini sasaran navigasi secara automatik berdasarkan kedudukan tatal. Tatal kawasan di bawah bar navigasi dan lihat perubahan kelas aktif. Subitem lungsur turun akan diserlahkan juga.

Penggunaan

Melalui atribut data

Untuk menambahkan gelagat scrollspy dengan mudah pada navigasi bar atas anda, cuma tambahkan data-spy="scroll"pada elemen yang anda ingin mengintip (kebiasaannya ini ialah badan) dan data-target=".navbar"untuk memilih nav yang hendak digunakan. Anda akan mahu menggunakan scrollspy dengan .navkomponen.

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

Melalui JavaScript

Panggil scrollspy melalui JavaScript:

$ ( '#navbar' ). scrollspy ()

Kaedah

.scrollspy('refresh')

Apabila menggunakan scrollspy bersama-sama dengan menambah atau mengalih keluar elemen daripada DOM, anda perlu memanggil kaedah muat semula seperti:

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

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-offset="".

Peristiwa

Contoh tab

Tambahkan kefungsian tab yang pantas dan dinamik untuk beralih melalui anak tetingkap kandungan tempatan, walaupun melalui menu lungsur.

Penggunaan

Dayakan tab boleh tab melalui JavaScript (setiap tab perlu diaktifkan secara individu):

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

Anda boleh mengaktifkan tab individu dalam beberapa cara:

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

Penanda

Anda boleh mengaktifkan navigasi tab atau pil tanpa menulis sebarang JavaScript dengan hanya menyatakan data-toggle="tab"atau data-toggle="pill"pada elemen. Menambah kelas navdan nav-tabspada tab ulakan menggunakan penggayaan tab Bootstrap.

<ul class = "nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Mesej </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Tetapan </a></li>  
</ul>

Kaedah

$().tab

Mengaktifkan elemen tab dan bekas kandungan. Tab harus mempunyai sama ada data-targetatau hrefmenyasarkan nod bekas dalam DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Mesej </a></li> 
  <li><a href = "#settings" > Tetapan </a></li> 
</ul>
 
<div class = "kandungan tab" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "message" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<skrip>
  $ ( fungsi () {  
    $ ( '#myTab a:last' ). tab ( 'tunjukkan' );
  })
</script>

Peristiwa

$ ( 'a[data-toggle="tab"]' ). pada ( 'ditunjukkan' , fungsi ( e ) {   
  e . sasaran // tab diaktifkan
  e . relatedTarget // tab sebelumnya
})

Contoh

Diilhamkan oleh plugin jQuery.tipsy yang sangat baik yang ditulis oleh Jason Frame; Petua alat ialah versi yang dikemas kini, yang tidak bergantung pada imej, menggunakan CSS3 untuk animasi dan atribut data untuk storan tajuk tempatan.

Atas sebab prestasi, petua alat dan apis data popover ikut serta, bermakna anda mesti memulakannya sendiri .

Tuding pada pautan di bawah untuk melihat petua alat:

Empat arah

Petua alat dalam kumpulan input

Apabila menggunakan petua alat dan popover dengan kumpulan input Bootstrap, anda perlu menetapkan pilihan container(didokumenkan di bawah) untuk mengelakkan kesan sampingan yang tidak diingini.

Penggunaan

Cetuskan petua alat melalui JavaScript:

$ ( '#contoh' ). petua alat ( pilihan )

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-animation="".

Penanda

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > tuding di atas saya </a>   

Kaedah

$().petua alat(pilihan)

Melampirkan pengendali petua alat pada koleksi elemen.

.tooltip('show')

Mendedahkan petua alat elemen.

$ ( '#elemen' ). petua alat ( 'tunjukkan' )

.tooltip('sembunyikan')

Menyembunyikan petua alat elemen.

$ ( '#elemen' ). petua alat ( 'sembunyi' )

.tooltip('togol')

Menogol petua alat elemen.

$ ( '#elemen' ). petua alat ( 'togol' )

.tooltip('musnahkan')

Menyembunyikan dan memusnahkan petua alat elemen.

$ ( '#elemen' ). petua alat ( 'musnahkan' )

Contoh

Tambahkan tindanan kecil kandungan, seperti yang terdapat pada iPad, pada mana-mana elemen untuk menempatkan maklumat sekunder. Tuding pada butang untuk mencetuskan popover. Memerlukan Petua Alat untuk disertakan.

popover statik

Empat pilihan tersedia: dijajar atas, kanan, bawah dan kiri.

Tiada penanda ditunjukkan sebagai popover dijana daripada JavaScript dan kandungan dalam dataatribut.

Demo langsung

Empat arah

Penggunaan

Dayakan popovers melalui JavaScript:

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

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-animation="".

Penanda

Atas sebab prestasi, Tooltip dan Popover data-apis ikut serta. Jika anda ingin menggunakannya hanya tentukan pilihan pemilih.

Kaedah

$().popover(pilihan)

Memulakan popover untuk koleksi elemen.

.popover('show')

Mendedahkan unsur popover.

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

.popover('sembunyi')

Menyembunyikan unsur popover.

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

.popover('togol')

Menogol unsur popover.

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

.popover('musnahkan')

Menyembunyikan dan memusnahkan popover elemen.

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

Contoh makluman

Tambahkan fungsi tolak pada semua mesej makluman dengan pemalam ini.

Penggunaan

Dayakan penolakan makluman melalui JavaScript:

$ ( ".alert" ). berjaga- jaga ()

Penanda

Cuma tambah data-dismiss="alert"pada butang tutup anda untuk memberikan fungsi tutup amaran secara automatik.

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

Kaedah

$().alert()

Membungkus semua makluman dengan kefungsian rapat. Untuk membolehkan makluman anda dianimasikan apabila ditutup, pastikan makluman tersebut mempunyai .fadedan .inkelas telah digunakan padanya.

.alert('close')

Menutup makluman.

$ ( ".alert" ). makluman ( 'tutup' )

Peristiwa

Kelas amaran Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi amaran.

$ ( '#my-alert' ). ikat ( 'tertutup' , fungsi () {   
  // lakukan sesuatu…
})

Contoh kegunaan

Lakukan lebih banyak dengan butang. Butang kawalan menyatakan atau buat kumpulan butang untuk lebih banyak komponen seperti bar alat.

Stateful

Tambah data-loading-text="Loading..."untuk menggunakan keadaan pemuatan pada butang.

<button type = "button" class = "btn btn-primary" data-loading-text = "Memuatkan..." > Keadaan memuatkan </button>   

Togol tunggal

Tambah data-toggle="button"untuk mengaktifkan togol pada satu butang.

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

Kotak semak

Tambahkan data-toggle="buttons-checkbox"untuk menogol gaya kotak pilihan pada btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <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

Tambah data-toggle="buttons-radio"untuk togol gaya radio pada 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

Dayakan butang melalui JavaScript:

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

Penanda

Atribut data adalah penting kepada pemalam butang. Semak contoh kod di bawah untuk pelbagai jenis markup.

Pilihan

tiada

Kaedah

$().button('togol')

Togol keadaan tolak. Memberi butang rupa bahawa ia telah diaktifkan.

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

$().button('loading')

Menetapkan keadaan butang kepada memuatkan - melumpuhkan butang dan menukar teks kepada memuatkan teks. Memuatkan teks hendaklah ditakrifkan pada elemen butang menggunakan atribut data data-loading-text.

<button type = "button" class = "btn" data-loading-text = "memuatkan bahan..." > ... </button>    

$().button('reset')

Menetapkan semula keadaan butang - menukar teks kepada teks asal.

$().butang(rentetan)

Menetapkan semula keadaan butang - menukar teks kepada mana-mana keadaan teks yang ditentukan data.

<button type = "button" class = "btn" data-complete-text = "selesai!" > ... </butang>    
<skrip>
  $ ( '.btn' ). butang ( 'lengkap' )
</script>

Tentang

Dapatkan gaya asas dan sokongan fleksibel untuk komponen boleh lipat seperti akordion dan navigasi.

* Memerlukan pemalam Transitions untuk disertakan.

Contoh akordion

Menggunakan pemalam runtuh, kami membina widget gaya akordion ringkas:

<div class = "akordion" id = "akordion2" >  
  <div class = "kumpulan akordion" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Item Kumpulan Boleh Dilipat #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body collapse in" >  
      <div class = "akordion-dalaman" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "kumpulan akordion" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Item Kumpulan Boleh Dilipat #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "akordion-dalaman" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Anda juga boleh menggunakan pemalam tanpa tanda akordion. Buat butang togol untuk mengembang dan meruntuhkan elemen lain.

< jenis butang = "butang" kelas = "btn btn-bahaya" data-toggle = "runtuhkan" data-target = "#demo" >    
  mudah dilipat
</butang>
 
<div id = "demo" class = "collapse in" > … </div>  

Penggunaan

Melalui atribut data

Hanya tambah data-toggle="collapse"dan data-targetkepada elemen untuk memberikan kawalan secara automatik bagi elemen boleh lipat. Atribut data-targetmenerima pemilih css untuk menggunakan keruntuhan. Pastikan anda menambah kelas collapsepada elemen boleh lipat. Jika anda mahu ia dibuka secara lalai, tambahkan kelas tambahan in.

Untuk menambah pengurusan kumpulan seperti akordion pada kawalan boleh lipat, tambahkan atribut data data-parent="#selector". Rujuk demo untuk melihat tindakan ini.

Melalui JavaScript

Dayakan secara manual dengan:

$ ( ".collapse" ). runtuh ()

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-parent="".

Kaedah

.collapse(options)

Mengaktifkan kandungan anda sebagai elemen boleh lipat. Menerima pilihan pilihan object.

$ ( '#myCollapsible' ). runtuh ({
  togol : palsu 
})

.collapse('togol')

Menogol elemen boleh lipat kepada ditunjukkan atau disembunyikan.

.collapse('show')

Menunjukkan elemen boleh lipat.

.collapse('hide')

Menyembunyikan elemen yang boleh dilipat.

Peristiwa

Kelas runtuh Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi runtuh.

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

Contoh karusel

Tayangan slaid di bawah menunjukkan pemalam dan komponen generik untuk berbasikal melalui elemen seperti karusel.

Label lakaran kecil pertama

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 Thumbnail Kedua

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 lakaran kecil ketiga

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 slaid" >  
  <ol class = "penunjuk karusel" > 
    <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 karusel -->
  <div class = "karousel-inner" > 
    <div class = "item aktif" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Nav karusel -->
  <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 mengawal kedudukan karusel dengan mudah. data-slidemenerima kata kunci prevatau next, yang mengubah kedudukan slaid berbanding kedudukan semasanya. Sebagai alternatif, gunakan data-slide-tountuk menghantar indeks slaid mentah ke karusel data-slide-to="2", yang melonjakkan kedudukan slaid ke indeks tertentu bermula dengan 0.

Melalui JavaScript

Panggil karusel secara manual dengan:

$ ( '.carousel' ). karusel ()

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScriptz. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-interval="".

Kaedah

.carousel(pilihan)

Memulakan karusel dengan pilihan pilihan objectdan mula berbasikal melalui item.

$ ( '.carousel' ). karusel ({
  selang : 2000 
})

.carousel('cycle')

Kitaran melalui item karusel dari kiri ke kanan.

.carousel('jeda')

Menghentikan karusel daripada berbasikal melalui item.

.carousel(nombor)

Mengitar karusel ke bingkai tertentu (berasaskan 0, serupa dengan tatasusunan).

.carousel('prev')

Kitaran ke item sebelumnya.

.carousel('next')

Kitaran ke item seterusnya.

Peristiwa

Kelas karusel Bootstrap mendedahkan dua acara untuk menyambung ke fungsi karusel.

Contoh

Pemalam asas yang mudah diperluaskan untuk mencipta kepala taip elegan dengan cepat dengan sebarang input teks bentuk.

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

Anda perlu menetapkan autocomplete="off"untuk menghalang menu penyemak imbas lalai daripada muncul di atas menu lungsur kepala taip Bootstrap.

Penggunaan

Melalui atribut data

Tambahkan atribut data untuk mendaftarkan elemen dengan fungsi kepala taip seperti yang ditunjukkan dalam contoh di atas.

Melalui JavaScript

Panggil kepala taip secara manual dengan:

$ ( '.typeahead' ). kepala taip ()

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-source="".

Kaedah

.typeahead(pilihan)

Memulakan input dengan kepala taip.

Contoh

Subnavigasi di sebelah kiri ialah demo langsung bagi pemalam imbuhan.

Penggunaan

Melalui atribut data

Untuk menambahkan gelagat imbuhan dengan mudah pada mana-mana elemen, cuma tambahkan data-spy="affix"pada elemen yang ingin anda intip. Kemudian gunakan offset untuk menentukan masa untuk menghidupkan dan mematikan penyematan elemen.

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

Melalui JavaScript

Panggil pemalam afiks melalui JavaScript:

$ ( '#navbar' ). imbuhan ()

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-offset-top="200".