Javascript untuk Bootstrap

Hidupkan komponen Bootstrap—sekarang dengan 12 plugin jQuery khusus.

Modal

Sebuah ramping, tetapi fleksibel, mengambil plugin modal javascript tradisional dengan hanya fungsi yang diperlukan minimum dan default cerdas.

Dropdown

Tambahkan menu dropdown ke hampir semua hal di Bootstrap dengan plugin sederhana ini. Bootstrap menampilkan dukungan menu dropdown lengkap di navbar, tab, dan pills.

Scrollspy

Gunakan scrollspy untuk secara otomatis memperbarui tautan di bilah navigasi Anda untuk menampilkan tautan aktif saat ini berdasarkan posisi gulir.

Tab yang dapat dialihkan

Gunakan plugin ini untuk membuat tab dan pil lebih berguna dengan memungkinkan mereka untuk beralih melalui panel tabbable konten lokal.

Keterangan alat

Pandangan baru pada plugin jQuery Tipsy, Tooltips tidak bergantung pada gambar—mereka menggunakan CSS3 untuk animasi dan atribut data untuk penyimpanan judul lokal.

Popover *

Tambahkan lapisan konten kecil, seperti yang ada di iPad, ke elemen apa pun untuk menampung informasi sekunder.

* Membutuhkan Tooltips untuk dimasukkan

Pesan peringatan

Plugin alert adalah kelas kecil untuk menambahkan fungsionalitas dekat ke alert.

Tombol

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

Jatuh

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

Korsel

Buat komidi putar konten apa pun yang Anda inginkan untuk menyediakan tayangan slide konten yang interaktif.

Ketik

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

Transisi *

Untuk efek transisi sederhana, sertakan bootstrap-transition.js sekali untuk menggeser di modals atau fade out alert.

* Diperlukan untuk animasi di plugin

Perhatian! Semua plugin javascript memerlukan versi terbaru dari jQuery.

Tentang modal

Sebuah ramping, tetapi fleksibel, mengambil plugin modal javascript tradisional dengan hanya fungsi yang diperlukan minimum dan default cerdas.

Unduh berkas

Contoh statis

Di bawah ini adalah modal yang diberikan secara statis.

Demo langsung

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

Luncurkan modal demo

Menggunakan bootstrap-modal

Panggil modal melalui javascript:

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

Pilihan

Nama Tipe bawaan keterangan
latar belakang boolean BENAR Termasuk elemen modal-backdrop. Atau, tentukan staticuntuk tampilan latar yang tidak menutup modal saat diklik.
papan ketik boolean BENAR Menutup modal saat tombol escape ditekan
menunjukkan boolean BENAR Menampilkan modal saat diinisialisasi.

Markup

Anda dapat mengaktifkan modals di halaman Anda dengan mudah tanpa harus menulis satu baris javascript. Cukup atur data-toggle="modal"pada elemen pengontrol dengan a data-target="#foo"atau href="#foo"yang sesuai dengan id elemen modal, dan ketika diklik, itu akan meluncurkan modal Anda.

Selain itu, untuk menambahkan opsi ke instans modal Anda, cukup sertakan sebagai atribut data tambahan pada elemen kontrol atau markup modal itu sendiri.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal"> Luncurkan Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Judul modal </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Satu tubuh yang bagus… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Tutup </a>
  11. <a href = "#" class = "btn btn-primary"> Simpan perubahan </a>
  12. </div>
  13. </div>
Perhatian! Jika Anda ingin modal Anda bernyawa masuk dan keluar, cukup tambahkan .fadekelas ke .modalelemen (lihat demo untuk melihat ini beraksi) dan sertakan bootstrap-transition.js.

Metode

.modal(opsi)

Mengaktifkan konten Anda sebagai modal. Menerima opsi opsional object.

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

.modal('beralih')

Mengalihkan modal secara manual.

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

.modal('tampilkan')

Secara manual membuka modal.

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

.modal('sembunyikan')

Secara manual menyembunyikan modal.

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

Acara

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

Peristiwa Keterangan
menunjukkan Acara ini langsung aktif ketika showmetode instance dipanggil.
ditampilkan Acara ini dipicu ketika modal telah dibuat terlihat oleh pengguna (akan menunggu transisi css selesai).
bersembunyi Acara ini dipecat segera ketika hidemetode instance telah dipanggil.
tersembunyi Acara ini dipicu ketika modal telah selesai disembunyikan dari pengguna (akan menunggu transisi css selesai).
  1. $ ( '#Modalku' ). pada ( 'tersembunyi' , fungsi () {
  2. // lakukan sesuatu…
  3. })

Plugin ScrollSpy adalah untuk memperbarui target navigasi secara otomatis berdasarkan posisi gulir.

Unduh berkas

Contoh navbar dengan scrollspy

Gulir area di bawah ini dan lihat pembaruan navigasi. Sub item dropdown akan disorot juga. Cobalah!

@gemuk

Legging iklan keytar, brunch id art party dolor labore. Pitchfork thn enim lo-fi sebelum mereka terjual habis qui. Hak sepeda pertanian-ke-meja Tumblr apa pun. Kardigan anim keffiyeh carles. velit seitan mcsweeney's photo booth 3 wolf moon irure. Sweater cosby celana pendek lomo jean, hoodie williamsburg minim qui Anda mungkin belum pernah mendengarnya dan cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa kumis skateboard, adipisicing fugiat velit jenggot garpu rumput. Freegan jenggot aliqua cupidatat mcsweeney's vero. Cupidatat empat loko nisi, ea helvetica nulla carles. Truk makanan sweter cosby bertato, vinil quis non freegan mcsweeney. Lo-fi wes anderson +1 busana. Carles latihan non estetika quis gentrify. Brooklyn adipisicing kerajinan bir wakil keytar deserunt.

satu

Occaecat commodo aliqua delectus. Fap kerajinan bir deserunt skateboard ea. Hak sepeda lomo adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Conectetur nisi DIY mini messenger bag. Cred ex in, berkelanjutan delectus conectetur fanny pack iphone.

dua

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa any delectus food truck. Sapiente synth id asumsinda. Locavore sed helvetica klise ironi, thundercats Anda mungkin belum pernah mendengar tentang mereka akibatnya hoodie bebas gluten lo-fi fap aliquip. Labore elit placeat sebelum sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan velit readymade. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Menggunakan bootstrap-scrollspy.js

Panggil scrollspy melalui javascript:

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

Markup

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).

  1. <body data-spy = "scroll" > ... </body>
Perhatian! Tautan Navbar harus memiliki target id yang dapat diselesaikan. Misalnya, a <a href="#home">home</a>harus sesuai dengan sesuatu di dom seperti <div id="home"></div>.

Metode

.scrollspy('segarkan')

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

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

Pilihan

Nama Tipe bawaan keterangan
mengimbangi nomor 10 Piksel untuk mengimbangi dari atas saat menghitung posisi gulir.

Acara

Peristiwa Keterangan
mengaktifkan Acara ini diaktifkan setiap kali item baru diaktifkan oleh scrollspy.

Plugin ini menambahkan fungsionalitas tab dan pil yang cepat dan dinamis untuk transisi melalui konten lokal.

Unduh berkas

Contoh tab

Klik tab di bawah untuk beralih di antara panel tersembunyi, bahkan melalui menu tarik-turun.

Raw denim Anda mungkin belum pernah mendengar tentang celana pendek jean Austin. Nesciunt tofu stumptown aliqua, pembersih master synth retro. Kumis klise tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Sweater Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan pakaian amerika, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Menggunakan bootstrap-tab.js

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

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

Anda dapat mengaktifkan tab individual dengan beberapa cara:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'tampilkan' ); // Pilih tab berdasarkan nama
  2. $ ( '#myTab a:first' ). tab ( 'tampilkan' ); // Pilih tab pertama
  3. $ ( '#myTab a:last' ). tab ( 'tampilkan' ); // Pilih tab terakhir
  4. $ ( '#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.

  1. <ul class = "nav nav-tab" >
  2. <li><a href = "#home" data-toggle = "tab" > Beranda </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Pesan </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Setelan </a></li>
  6. </ul>

Metode

$().tab

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

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "aktif" ><a href = "#home" > Beranda </a></li>
  3. <li><a href = "#profile"> Profil </a> </li>
  4. <li><a href = "#messages"> Pesan </a> </li>
  5. <li><a href = "#settings"> Setelan </a> </li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane aktif" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <skrip>
  16. $ ( fungsi () {
  17. $ ( '#myTab a:last' ). tab ( 'tampilkan' );
  18. })
  19. </skrip>

Acara

Peristiwa Keterangan
menunjukkan Acara ini diaktifkan pada tampilan tab, tetapi sebelum tab baru ditampilkan. Gunakan event.targetdan event.relatedTargetuntuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia).
ditampilkan Acara ini diaktifkan pada tampilan tab setelah tab ditampilkan. Gunakan event.targetdan event.relatedTargetuntuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia).
  1. $ ( 'a[data-toggle="tab"]' ). pada ( 'ditampilkan' , fungsi ( e ) {
  2. e . target // tab yang diaktifkan
  3. e . target terkait // tab sebelumnya
  4. })

Tentang Tooltips

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.

Unduh berkas

Contoh penggunaan Tooltips

Arahkan kursor ke tautan di bawah untuk melihat tooltips:

Celana ketat keffiyeh tingkat berikutnya Anda mungkin belum pernah mendengarnya. Booth foto janggut raw denim letterpress tas kurir vegan stumptown. Seitan pertanian-ke-meja, pakaian amerika quinoa 8-bit mcsweeney's fixie berkelanjutan memiliki chambray vinil terry richardson. Beard stumptown, cardigans banh mi lomo thundercats. Tahu biodiesel williamsburg marfa, empat loko mcsweeney membersihkan chambray vegan. Seorang seniman yang benar-benar ironis keytar apa pun , scenester farm-to-table banky Austin twitter menangani freegan cred raw denim single-origin coffee viral.


Menggunakan bootstrap-tooltip.js

Memicu tooltip melalui javascript:

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

Pilihan

Nama Tipe bawaan keterangan
animasi boolean BENAR terapkan transisi fade css ke tooltip
penempatan string|fungsi 'atas' bagaimana memposisikan tooltip - atas | bawah | kiri | Baik
pemilih rangkaian Salah Jika pemilih disediakan, objek tooltip akan didelegasikan ke target yang ditentukan.
judul string | fungsi '' nilai judul default jika tag `title` tidak ada
pemicu rangkaian 'melayang' bagaimana tooltip dipicu - arahkan kursor | fokus | panduan
menunda nomor | obyek 0

tunda menampilkan dan menyembunyikan tooltip (ms) - tidak berlaku untuk tipe pemicu manual

Jika nomor diberikan, penundaan diterapkan ke sembunyikan/tampilkan

Struktur objek adalah:delay: { show: 500, hide: 100 }

Perhatian! Pilihan untuk tooltips individu alternatif dapat ditentukan melalui penggunaan atribut data.

Markup

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

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > arahkan kursor ke atas saya </a>

Metode

$().tooltip(opsi)

Melampirkan penangan tooltip ke koleksi elemen.

.tooltip('tampilkan')

Mengungkapkan tooltip elemen.

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

.tooltip('sembunyikan')

Menyembunyikan tooltip elemen.

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

.tooltip('beralih')

Mengalihkan tooltip elemen.

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

Tentang popover

Tambahkan lapisan konten kecil, seperti yang ada di iPad, ke elemen apa pun untuk menampung informasi sekunder.

* Membutuhkan Tooltip untuk disertakan

Unduh berkas

Contoh hover popover

Arahkan kursor ke tombol untuk memicu popover.


Menggunakan bootstrap-popover.js

Aktifkan popover melalui javascript:

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

Pilihan

Nama Tipe bawaan keterangan
animasi boolean BENAR terapkan transisi fade css ke tooltip
penempatan string|fungsi 'Baik' bagaimana memposisikan popover - atas | bawah | kiri | Baik
pemilih rangkaian Salah jika pemilih disediakan, objek tooltip akan didelegasikan ke target yang ditentukan
pemicu rangkaian 'melayang' bagaimana tooltip dipicu - arahkan kursor | fokus | panduan
judul string | fungsi '' nilai judul default jika atribut `title` tidak ada
isi string | fungsi '' nilai konten default jika atribut `data-content` tidak ada
menunda nomor | obyek 0

tunda menampilkan dan menyembunyikan popover (ms) - tidak berlaku untuk tipe pemicu manual

Jika nomor diberikan, penundaan diterapkan ke sembunyikan/tampilkan

Struktur objek adalah:delay: { show: 500, hide: 100 }

Perhatian! Opsi untuk popover individual dapat ditentukan secara alternatif melalui penggunaan atribut data.

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.

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

.popover('sembunyikan')

Menyembunyikan popover elemen.

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

.popover('beralih')

Mengalihkan popover elemen.

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

Tentang peringatan

Plugin alert adalah kelas kecil untuk menambahkan fungsionalitas dekat ke alert.

Unduh

Contoh peringatan

Plugin peringatan berfungsi pada pesan peringatan biasa, dan memblokir pesan.

Guacamole suci! Sebaiknya periksa diri Anda sendiri, Anda tidak terlihat terlalu baik.

Oh jepret! Anda mendapat kesalahan!

Ubah ini dan itu dan coba lagi. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Ambil tindakan ini Atau lakukan ini


Menggunakan bootstrap-alert.js

Aktifkan penghentian peringatan melalui javascript:

  1. $ ( ".peringatan" ). waspada ()

Markup

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

  1. <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.

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

Acara

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

Peristiwa Keterangan
menutup Acara ini langsung aktif ketika closemetode instance dipanggil.
tertutup Acara ini dipicu ketika peringatan telah ditutup (akan menunggu transisi css selesai).
  1. $ ( '#peringatan-saya' ). mengikat ( 'tertutup' , fungsi () {
  2. // lakukan sesuatu…
  3. })

Tentang

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

Unduh berkas

Contoh penggunaan

Gunakan plugin tombol untuk status dan matikan.

Stateful
Beralih tunggal
Kotak centang
Radio

Menggunakan bootstrap-button.js

Aktifkan tombol melalui javascript:

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

Markup

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

  1. <!-- Tambahkan data-toggle="button" untuk mengaktifkan toggling pada satu tombol -->
  2. <button class = "btn" data-toggle = "button" > Single Toggle </button>
  3.  
  4. <!-- Tambahkan data-toggle="buttons-checkbox" untuk beralih gaya kotak centang pada btn-group -->
  5. <div class = "btn-group" data-toggle = "tombol-kotak centang" >
  6. <button class = "btn" > Kiri </button>
  7. <button class = "btn" > Tengah </button>
  8. <button class = "btn" > Kanan </button>
  9. </div>
  10.  
  11. <!-- Tambahkan data-toggle="buttons-radio" untuk beralih gaya radio di btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Kiri </button>
  14. <button class = "btn" > Tengah </button>
  15. <button class = "btn" > Kanan </button>
  16. </div>

Metode

$().button('beralih')

Mengalihkan status push. Memberikan tampilan tombol yang telah diaktifkan.

Perhatian! Anda dapat mengaktifkan tombol beralih otomatis dengan menggunakan data-toggleatribut.
  1. <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.

  1. <button class = "btn" data-loading-text = "memuat barang..." > ... </button>
Perhatian! Firefox mempertahankan status dinonaktifkan di seluruh pemuatan halaman . Solusi untuk ini adalah dengan menggunakan autocomplete="off".

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

  1. <button class = "btn" data-complete-text = "selesai!" > ... </tombol>
  2. <skrip>
  3. $ ( '.btn' ). tombol ( 'selesai' )
  4. </skrip>

Tentang

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

Unduh berkas

* Membutuhkan plugin Transitions untuk disertakan.

Contoh akordeon

Menggunakan plugin collapse, kami membuat widget gaya akordeon sederhana:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Truk makanan quinoa nesciunt laborum eiusmod. Brunch 3 serigala bulan tempor, sunt aliqua menaruh burung di atasnya cumi-cumi kopi single-origin nulla asumsinda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Iklan vegan kecuali tukang daging wakil lomo. Legging occaecat craft beer farm-to-table, raw denim estetik synth nesciunt Anda mungkin belum pernah mendengarnya accusamus labore VHS berkelanjutan.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Truk makanan quinoa nesciunt laborum eiusmod. Brunch 3 serigala bulan tempor, sunt aliqua menaruh burung di atasnya cumi-cumi kopi single-origin nulla asumsinda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Iklan vegan kecuali tukang daging wakil lomo. Legging occaecat craft beer farm-to-table, raw denim estetik synth nesciunt Anda mungkin belum pernah mendengarnya accusamus labore VHS berkelanjutan.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Truk makanan quinoa nesciunt laborum eiusmod. Brunch 3 serigala bulan tempor, sunt aliqua menaruh burung di atasnya cumi-cumi kopi single-origin nulla asumsinda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Iklan vegan kecuali tukang daging wakil lomo. Legging occaecat craft beer farm-to-table, raw denim estetik synth nesciunt Anda mungkin belum pernah mendengarnya accusamus labore VHS berkelanjutan.

Menggunakan bootstrap-collapse.js

Aktifkan melalui javascript:

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

Pilihan

Nama Tipe bawaan keterangan
induk pemilih Salah Jika pemilih maka semua elemen yang dapat dilipat di bawah induk yang ditentukan akan ditutup ketika item yang dapat dilipat ini ditampilkan. (mirip dengan perilaku akordeon tradisional)
beralih boolean BENAR Mengaktifkan elemen yang dapat diciutkan pada doa

Markup

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.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. sederhana yang bisa dilipat
  3. </tombol>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Perhatian! Untuk menambahkan manajemen grup seperti akordeon ke kontrol yang dapat diciutkan, tambahkan atribut data data-parent="#selector". Lihat demo untuk melihat ini beraksi.

Metode

.collapse(opsi)

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

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

.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.

Peristiwa Keterangan
menunjukkan Acara ini langsung aktif ketika showmetode instance dipanggil.
ditampilkan Peristiwa ini dipicu ketika elemen penciutan telah dibuat terlihat oleh pengguna (akan menunggu transisi css selesai).
bersembunyi Acara ini dipecat segera ketika hidemetode telah dipanggil.
tersembunyi Peristiwa ini dipicu ketika elemen runtuh telah disembunyikan dari pengguna (akan menunggu transisi css selesai).
  1. $ ( '#myCollapsible' ). pada ( 'tersembunyi' , fungsi () {
  2. // lakukan sesuatu…
  3. })

Tentang

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

Unduh berkas

Contoh

Mulailah mengetik di bidang di bawah ini untuk menampilkan hasil typeahead.


Menggunakan bootstrap-typeahead.js

Panggil typeahead melalui javascript:

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

Pilihan

Nama Tipe bawaan keterangan
sumber Himpunan [ ] Sumber data untuk kueri.
item nomor 8 Jumlah maksimum item yang akan ditampilkan di dropdown.
korek api fungsi peka huruf besar/kecil Metode yang digunakan untuk menentukan apakah kueri cocok dengan item. Menerima satu argumen, itemyang digunakan untuk menguji kueri. Akses kueri saat ini dengan this.query. Kembalikan boolean truejika kueri cocok.
tukang sortir fungsi pencocokan tepat,
peka huruf besar/kecil,
tidak peka huruf besar -kecil
Metode yang digunakan untuk mengurutkan hasil pelengkapan otomatis. Menerima satu argumen itemsdan memiliki cakupan instance typeahead. Referensi kueri saat ini dengan this.query.
stabilo fungsi menyoroti semua pertandingan default Metode yang digunakan untuk menyorot hasil pelengkapan otomatis. Menerima satu argumen itemdan memiliki cakupan instance typeahead. Harus mengembalikan html.

Markup

Tambahkan atribut data untuk mendaftarkan elemen dengan fungsionalitas typeahead.

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

Metode

.typeahead(opsi)

Menginisialisasi input dengan typeahead.