Javascript untuk Bootstrap

Hidupkan komponen Bootstrap—kini dengan 12 pemalam jQuery tersuai.

modal

Selaras, tetapi fleksibel, menggunakan pemalam modal javascript tradisional dengan hanya fungsi minimum yang diperlukan dan lalai pintar.

Jatuh turun

Tambahkan menu lungsur turun pada hampir semua perkara dalam Bootstrap dengan pemalam mudah ini. Bootstrap menampilkan sokongan menu lungsur penuh pada bar navigasi, tab dan pil.

Scrollspy

Gunakan scrollspy untuk mengemas kini pautan secara automatik dalam bar navigasi anda untuk menunjukkan pautan aktif semasa berdasarkan kedudukan tatal.

Tab boleh togol

Gunakan pemalam ini untuk menjadikan tab dan pil lebih berguna dengan membenarkan mereka menogol melalui anak tetingkap boleh tab kandungan tempatan.

Petua alat

Satu pandangan baharu pada pemalam jQuery Tipsy, Petua alat tidak bergantung pada imej—ia menggunakan CSS3 untuk animasi dan atribut data untuk storan tajuk tempatan.

Popovers *

Tambahkan tindanan kecil kandungan, seperti yang terdapat pada iPad, pada mana-mana elemen untuk menempatkan maklumat sekunder.

* Memerlukan Petua Alat untuk disertakan

Mesej amaran

Pemalam amaran ialah kelas kecil untuk menambah kefungsian rapat pada amaran.

Butang

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

Runtuh

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

karusel

Cipta satu riang gembira bagi mana-mana kandungan yang anda ingin sediakan tayangan slaid interaktif kandungan.

Kepala taip

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

Peralihan *

Untuk kesan peralihan yang mudah, sertakan bootstrap-transition.js sekali untuk meluncur dalam mod atau memudar makluman.

* Diperlukan untuk animasi dalam pemalam

Angkat kepala! Semua pemalam javascript memerlukan versi terkini jQuery.

Mengenai modal

Selaras, tetapi fleksibel, menggunakan pemalam modal javascript tradisional dengan hanya fungsi minimum yang diperlukan dan lalai pintar.

Muat turun fail

Contoh statik

Di bawah ialah modal yang diberikan secara statik.

Demo langsung

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

Lancarkan mod demo

Menggunakan bootstrap-modal

Panggil modal melalui javascript:

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

Pilihan

Nama menaip lalai penerangan
latar belakang boolean benar Termasuk unsur tirai latar modal. Sebagai alternatif, tentukan statictirai latar yang tidak menutup modal pada klik.
papan kekunci boolean benar Menutup modal apabila kekunci escape ditekan
tunjuk boolean benar Menunjukkan modal apabila dimulakan.

Penanda

Anda boleh mengaktifkan modals pada halaman anda dengan mudah tanpa perlu menulis satu baris javascript. Hanya tetapkan data-toggle="modal"pada elemen pengawal dengan data-target="#foo"atau href="#foo"yang sepadan dengan id elemen modal, dan apabila diklik, ia akan melancarkan modal anda.

Selain itu, untuk menambah pilihan pada contoh modal anda, hanya masukkannya sebagai atribut data tambahan sama ada pada elemen kawalan atau penanda modal itu sendiri.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Modal Pelancaran </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> Pengepala modal </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Satu badan yang baik... </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>
Angkat kepala! Jika anda mahu modal anda menganimasikan masuk dan keluar, cuma tambahkan .fadekelas pada .modalelemen (rujuk demo untuk melihat tindakan ini) dan sertakan bootstrap-transition.js.

Kaedah

.modal(options)

Mengaktifkan kandungan anda sebagai modal. Menerima pilihan pilihan object.

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

.modal('togol')

Togol mod secara manual.

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

.modal('show')

Membuka modal secara manual.

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

.modal('sembunyi')

Secara manual menyembunyikan modal.

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

Peristiwa

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

Peristiwa Penerangan
tunjuk Peristiwa ini menyala serta-merta apabila showkaedah contoh dipanggil.
ditunjukkan Peristiwa ini dicetuskan apabila modal telah dilihat kepada pengguna (akan menunggu peralihan css selesai).
bersembunyi Peristiwa ini dicetuskan serta-merta apabila hidekaedah contoh telah dipanggil.
tersembunyi Peristiwa ini dicetuskan apabila modal telah selesai disembunyikan daripada pengguna (akan menunggu peralihan css selesai).
  1. $ ( '#myModal' ). pada ( 'tersembunyi' , fungsi () {
  2. // lakukan sesuatu…
  3. })

Pemalam ScrollSpy adalah untuk mengemas kini sasaran navigasi secara automatik berdasarkan kedudukan tatal.

Muat turun fail

Contoh navbar dengan scrollspy

Tatal kawasan di bawah dan tonton kemas kini navigasi. Subitem lungsur turun akan diserlahkan juga. Cuba ia!

@gemuk

Ad legging keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi sebelum mereka habis dijual. Hak basikal ladang ke meja Tumblr apa pun. Anim keffiyeh carles cardigan. Gerai foto Velit seitan mcsweeney 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui anda mungkin tidak pernah mendengar tentangnya dan cardigan trust fund culpa biodiesel wes anderson estetika. Nihil tatu accusamus, cred ironi biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa misai papan selaju, adipisicing fugiat velit janggut pitchfork. Freegan janggut aliqua cupidatat mcsweeney's vero. Cupidatat empat loko nisi, ea helvetica nulla carles. Trak makanan baju sejuk cosby bertatu, vinil quis non freegan mcsweeney. Lo-fi wes anderson +1 sartorial. Carles senaman bukan estetik quis gentrify. Brooklyn adipisicing kraf bir naib keytar deserunt.

satu

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Hak basikal Lomo adipisicing banh mi, velit ea sunt next level locavore kopi asal tunggal di magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS adalah adipisicing. Consectetur nisi DIY beg messenger minima. Cred ex in, delectus consectetur fanny pack mampan 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 whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironi, thundercats anda mungkin tidak pernah mendengar tentang mereka consequat hoodie tanpa gluten lo-fi fap aliquip. Laboure elit placeat sebelum habis dijual, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Menggunakan bootstrap-scrollspy.js

Panggil scrollspy melalui javascript:

  1. $ ( '#navbar' ). scrollspy ()

Penanda

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

  1. <body data-spy = "scroll" > ... </body>
Angkat kepala! Pautan Navbar mesti mempunyai sasaran id yang boleh diselesaikan. Sebagai contoh, <a href="#home">home</a>mesti sepadan dengan sesuatu dalam dom seperti <div id="home"></div>.

Kaedah

.scrollspy('refresh')

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

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

Pilihan

Nama menaip lalai penerangan
mengimbangi nombor 10 Piksel untuk mengimbangi dari atas apabila mengira kedudukan tatal.

Peristiwa

Peristiwa Penerangan
aktifkan Peristiwa ini berlaku apabila item baharu diaktifkan oleh scrollspy.

Pemalam ini menambah fungsi tab dan pil yang cepat dan dinamik untuk peralihan melalui kandungan tempatan.

Muat turun fail

Contoh tab

Klik tab di bawah untuk menogol antara anak tetingkap tersembunyi, walaupun melalui menu lungsur.

Denim mentah anda mungkin tidak pernah mendengarnya seluar pendek jean Austin. Nesciunt tauhu stumptown aliqua, pembersihan master synth retro. Misai cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex sotong. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan pakaian Amerika, tukang daging 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

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

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

Anda boleh mengaktifkan tab individu dalam beberapa cara:

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

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

Kaedah

$().tab

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

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Home </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Mesej </a></li>
  5. <li><a href = "#settings" > Tetapan </a></li>
  6. </ul>
  7.  
  8. <div class = "kandungan tab" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "message" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <skrip>
  16. $ ( fungsi () {
  17. $ ( '#myTab a:last' ). tab ( 'tunjukkan' );
  18. })
  19. </script>

Peristiwa

Peristiwa Penerangan
tunjuk Peristiwa ini berlaku pada rancangan tab, tetapi sebelum tab baharu dipaparkan. Gunakan event.targetdan event.relatedTargetuntuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing.
ditunjukkan Peristiwa ini berlaku pada rancangan tab selepas tab ditunjukkan. Gunakan event.targetdan event.relatedTargetuntuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing.
  1. $ ( 'a[data-toggle="tab"]' ). pada ( 'ditunjukkan' , fungsi ( e ) {
  2. e . sasaran // tab diaktifkan
  3. e . relatedTarget // tab sebelumnya
  4. })

Mengenai Petua Alat

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.

Muat turun fail

Contoh penggunaan Petua Alat

Tuding pada pautan di bawah untuk melihat petua alat:

Seluar ketat tahap seterusnya keffiyeh anda mungkin tidak pernah mendengarnya. Gerai foto janggut denim mentah letterpress vegan messenger bag stumptown. Seitan dari ladang ke meja, pakaian amerika quinoa 8-bit lestari fixie mcsweeney mempunyai terry richardson vinyl chambray. Beard stumptown, cardigan banh mi lomo thundercats. Tauhu biodiesel williamsburg marfa, empat chambray vegan pembersih loko mcsweeney. Seorang tukang yang sangat ironik apa pun keytar , scenester farm-to-table banksy Austin twitter mengendalikan freegan cred denim mentah kopi asal tunggal yang viral.


Menggunakan bootstrap-tooltip.js

Cetuskan petua alat melalui javascript:

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

Pilihan

Nama menaip lalai penerangan
animasi boolean benar gunakan peralihan pudar css pada petua alat
penempatan rentetan|fungsi 'atas' cara meletakkan petua alat - atas | bawah | kiri | betul
pemilih tali salah Jika pemilih disediakan, objek petua alat akan diwakilkan kepada sasaran yang ditentukan.
tajuk rentetan | fungsi '' nilai tajuk lalai jika teg `title` tiada
pencetus tali 'legar' cara petua alat dicetuskan - tuding | tumpuan | manual
kelewatan nombor | objek 0

kelewatan menunjukkan dan menyembunyikan petua alat (ms) - tidak digunakan untuk jenis pencetus manual

Jika nombor dibekalkan, kelewatan dikenakan pada kedua-dua sembunyi/tunjukkan

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

Angkat kepala! Pilihan untuk petua alat individu boleh ditentukan secara alternatif melalui penggunaan atribut data.

Penanda

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

  1. <a href = "#" rel = "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.

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

.tooltip('sembunyikan')

Menyembunyikan petua alat elemen.

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

.tooltip('togol')

Menogol petua alat elemen.

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

Mengenai popovers

Tambahkan tindanan kecil kandungan, seperti yang terdapat pada iPad, pada mana-mana elemen untuk menempatkan maklumat sekunder.

* Memerlukan Petua Alat untuk disertakan

Muat turun fail

Contoh hover popover

Tuding pada butang untuk mencetuskan popover.


Menggunakan bootstrap-popover.js

Dayakan popovers melalui javascript:

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

Pilihan

Nama menaip lalai penerangan
animasi boolean benar gunakan peralihan pudar css pada petua alat
penempatan rentetan|fungsi 'betul' bagaimana untuk meletakkan popover - atas | bawah | kiri | betul
pemilih tali salah jika pemilih disediakan, objek petua alat akan diwakilkan kepada sasaran yang ditentukan
pencetus tali 'legar' cara petua alat dicetuskan - tuding | tumpuan | manual
tajuk rentetan | fungsi '' nilai tajuk lalai jika atribut `title` tidak ada
kandungan rentetan | fungsi '' nilai kandungan lalai jika atribut `data-content` tidak ada
kelewatan nombor | objek 0

kelewatan menunjukkan dan menyembunyikan popover (ms) - tidak digunakan untuk jenis pencetus manual

Jika nombor dibekalkan, kelewatan dikenakan pada kedua-dua sembunyi/tunjukkan

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

Angkat kepala! Pilihan untuk popover individu boleh ditentukan secara alternatif melalui penggunaan atribut data.

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.

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

.popover('sembunyi')

Menyembunyikan unsur popover.

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

.popover('togol')

Menogol unsur popover.

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

Mengenai makluman

Pemalam amaran ialah kelas kecil untuk menambah kefungsian rapat pada amaran.

Muat turun

Contoh makluman

Pemalam makluman berfungsi pada mesej makluman biasa dan menyekat mesej.

Guacamole suci! Best semak diri anda, anda tidak kelihatan terlalu bagus.

Oh kejap! Anda mendapat ralat!

Tukar ini dan itu dan cuba 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

Dayakan penolakan makluman melalui javascript:

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

Penanda

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

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

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

Peristiwa

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

Peristiwa Penerangan
dekat Peristiwa ini menyala serta-merta apabila closekaedah contoh dipanggil.
tertutup Peristiwa ini dicetuskan apabila amaran telah ditutup (akan menunggu peralihan css selesai).
  1. $ ( '#my-alert' ). ikat ( 'tertutup' , fungsi () {
  2. // lakukan sesuatu…
  3. })

Tentang

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

Muat turun fail

Contoh kegunaan

Gunakan pemalam butang untuk keadaan dan togol.

Stateful
Togol tunggal
Kotak semak
Radio

Menggunakan bootstrap-button.js

Dayakan butang melalui javascript:

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

Penanda

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

  1. <!-- Tambah data-toggle="button" untuk mengaktifkan togol pada satu butang -->
  2. <button class = "btn" data-toggle = "button" > Togol Tunggal </button>
  3.  
  4. <!-- Tambah data-toggle="buttons-checkbox" untuk togol gaya kotak pilihan pada btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Kiri </button>
  7. <button class = "btn" > Tengah </button>
  8. <button class = "btn" > Kanan </button>
  9. </div>
  10.  
  11. <!-- Tambah data-toggle="buttons-radio" untuk togol gaya radio pada 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>

Kaedah

$().button('togol')

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

Angkat kepala! Anda boleh mendayakan auto togol butang dengan menggunakan data-toggleatribut.
  1. <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.

  1. <button class = "btn" data-loading-text = "loading stuff..." > ... </button>
Angkat kepala! Firefox mengekalkan keadaan dilumpuhkan merentas pemuatan halaman . Penyelesaian untuk ini ialah menggunakan autocomplete="off".

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

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

Tentang

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

Muat turun fail

* Memerlukan pemalam Transitions untuk disertakan.

Contoh akordion

Menggunakan pemalam runtuh, kami membina widget gaya akordion ringkas:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, bukan cupidatat skateboard dolor brunch. Trak makanan quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua meletakkan seekor burung di atasnya sotong kopi asal tunggal nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Bingkap kaki occaecat craft beer farm-to-table, raw denim estetic synth synth nesciunt anda mungkin tidak pernah mendengarnya accusamus labore mampan VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, bukan cupidatat skateboard dolor brunch. Trak makanan quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua meletakkan seekor burung di atasnya sotong kopi asal tunggal nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Bingkap kaki occaecat craft beer farm-to-table, raw denim estetic synth synth nesciunt anda mungkin tidak pernah mendengarnya accusamus labore mampan VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, bukan cupidatat skateboard dolor brunch. Trak makanan quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua meletakkan seekor burung di atasnya sotong kopi asal tunggal nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Bingkap kaki occaecat craft beer farm-to-table, raw denim estetic synth synth nesciunt anda mungkin tidak pernah mendengarnya accusamus labore mampan VHS.

Menggunakan bootstrap-collapse.js

Dayakan melalui javascript:

  1. $ ( ".collapse" ). runtuh ()

Pilihan

Nama menaip lalai penerangan
ibu bapa pemilih salah Jika pemilih maka semua elemen boleh lipat di bawah induk yang ditentukan akan ditutup apabila item boleh lipat ini ditunjukkan. (serupa dengan tingkah laku akordion tradisional)
togol boolean benar Menogol elemen boleh lipat pada seruan

Penanda

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.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. mudah dilipat
  3. </butang>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Angkat kepala! Untuk menambah pengurusan kumpulan seperti akordion pada kawalan boleh lipat, tambahkan atribut data data-parent="#selector". Rujuk demo untuk melihat tindakan ini.

Kaedah

.collapse(options)

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

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

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

Peristiwa Penerangan
tunjuk Peristiwa ini menyala serta-merta apabila showkaedah contoh dipanggil.
ditunjukkan Peristiwa ini dicetuskan apabila elemen runtuh telah dilihat kepada pengguna (akan menunggu peralihan css selesai).
bersembunyi Acara ini dipecat serta-merta apabila hidekaedah telah dipanggil.
tersembunyi Peristiwa ini dicetuskan apabila elemen runtuh telah disembunyikan daripada pengguna (akan menunggu peralihan css selesai).
  1. $ ( '#myCollapsible' ). pada ( 'tersembunyi' , fungsi () {
  2. // lakukan sesuatu…
  3. })

Tentang

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

Muat turun fail

Contoh

Mula menaip dalam medan di bawah untuk menunjukkan hasil kepala taip.


Menggunakan bootstrap-typeahead.js

Panggil kepala taip melalui javascript:

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

Pilihan

Nama menaip lalai penerangan
sumber tatasusunan [ ] Sumber data untuk membuat pertanyaan.
barang nombor 8 Bilangan maksimum item untuk dipaparkan dalam menu lungsur.
penjodoh fungsi kes tidak sensitif Kaedah yang digunakan untuk menentukan sama ada pertanyaan sepadan dengan item. Menerima satu hujah, yang itemmenentangnya untuk menguji pertanyaan. Akses pertanyaan semasa dengan this.query. Kembalikan boolean truejika pertanyaan adalah padanan.
penyusun fungsi padanan tepat,
sensitif
huruf besar, tidak sensitif huruf besar
Kaedah yang digunakan untuk mengisih hasil autolengkap. Menerima satu hujah itemsdan mempunyai skop contoh kepala taip. Rujuk pertanyaan semasa dengan this.query.
penyerlah fungsi menyerlahkan semua padanan lalai Kaedah yang digunakan untuk menyerlahkan hasil autolengkap. Menerima satu hujah itemdan mempunyai skop contoh kepala taip. Harus mengembalikan html.

Penanda

Tambahkan atribut data untuk mendaftarkan elemen dengan fungsi kepala taip.

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

Kaedah

.typeahead(pilihan)

Memulakan input dengan kepala taip.