JavaScript
Hidupkan komponen Bootstrap dengan lebih sedozen pemalam jQuery tersuai. Masukkan kesemuanya dengan mudah, atau satu persatu.
Hidupkan komponen Bootstrap dengan lebih sedozen pemalam jQuery tersuai. Masukkan kesemuanya dengan mudah, atau satu persatu.
Pemalam boleh disertakan secara individu (menggunakan *.js
fail individu Bootstrap), atau sekaligus (menggunakan bootstrap.js
atau minified bootstrap.min.js
).
Kedua -duanya bootstrap.js
dan bootstrap.min.js
mengandungi semua pemalam dalam satu fail. Sertakan satu sahaja.
Sesetengah pemalam dan komponen CSS bergantung pada pemalam lain. Jika anda memasukkan pemalam secara individu, pastikan anda menyemak kebergantungan ini dalam dokumen. Juga ambil perhatian bahawa semua pemalam bergantung pada jQuery (ini bermakna jQuery mesti disertakan sebelum fail pemalam). Rujuk kamibower.json
untuk melihat versi jQuery yang disokong.
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 menyahjilid semua peristiwa pada ruang nama dokumen dengan data-api
. Ini kelihatan seperti ini:
Sebagai alternatif, untuk menyasarkan pemalam tertentu, hanya masukkan nama pemalam sebagai ruang nama bersama-sama ruang nama data-api seperti ini:
Jangan gunakan atribut data daripada berbilang pemalam pada elemen yang sama. Contohnya, butang tidak boleh mempunyai petua alat dan togol modal. Untuk mencapai ini, gunakan elemen pembalut.
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.
Semua kaedah harus menerima objek pilihan pilihan, rentetan yang menyasarkan kaedah tertentu, atau tiada apa-apa (yang memulakan pemalam dengan tingkah laku lalai):
Setiap pemalam juga mendedahkan pembina mentahnya pada Constructor
harta: $.fn.popover.Constructor
. Jika anda ingin mendapatkan contoh pemalam tertentu, dapatkannya terus daripada elemen: $('[rel="popover"]').data('popover')
.
Anda boleh menukar tetapan lalai untuk pemalam dengan mengubah suai Constructor.DEFAULTS
objek pemalam:
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 .noConflict
pemalam yang ingin anda kembalikan nilainya.
Bootstrap menyediakan acara tersuai untuk kebanyakan tindakan unik pemalam. Secara amnya, ini datang dalam bentuk infinitif dan participle lepas - di mana infinitif (cth. show
) dicetuskan pada permulaan acara, dan bentuk participle past (cth. shown
) dicetuskan apabila selesai tindakan.
Mulai 3.0.0, semua acara Bootstrap diberi ruang nama.
Semua peristiwa infinitif menyediakan preventDefault
fungsi. Ini memberikan keupayaan untuk menghentikan pelaksanaan tindakan sebelum ia bermula.
Versi setiap pemalam jQuery Bootstrap boleh diakses melalui hak VERSION
milik pembina pemalam. Sebagai contoh, untuk pemalam petua alat:
Pemalam Bootstrap tidak akan kembali dengan sangat anggun apabila JavaScript dilumpuhkan. Jika anda mengambil berat tentang pengalaman pengguna dalam kes ini, gunakan <noscript>
untuk menerangkan situasi (dan cara mendayakan semula JavaScript) kepada pengguna anda dan/atau menambah sandaran tersuai anda sendiri.
Bootstrap tidak secara rasmi menyokong perpustakaan JavaScript pihak ketiga seperti Prototaip atau UI jQuery. Walaupun .noConflict
acara dan ruang nama, mungkin terdapat masalah keserasian yang perlu anda selesaikan sendiri.
Untuk kesan peralihan yang mudah, sertakan transition.js
sekali bersama fail JS yang lain. Jika anda menggunakan compiled (atau miniified) bootstrap.js
, tidak perlu memasukkan ini—ia sudah ada.
Transition.js ialah pembantu asas untuk transitionEnd
acara serta emulator peralihan CSS. Ia digunakan oleh pemalam lain untuk menyemak sokongan peralihan CSS dan untuk menangkap peralihan tergantung.
Peralihan boleh dilumpuhkan secara global menggunakan coretan JavaScript berikut, yang mesti datang selepas transition.js
(atau bootstrap.js
atau bootstrap.min.js
, mengikut mana-mana keadaan) dimuatkan:
Modal diperkemas, tetapi fleksibel, gesaan dialog dengan fungsi minimum yang diperlukan dan lalai pintar.
Pastikan anda tidak membuka modal semasa yang lain masih kelihatan. Menunjukkan lebih daripada satu modal pada satu masa memerlukan kod tersuai.
Sentiasa cuba letakkan kod HTML modal pada kedudukan peringkat atas dalam dokumen anda untuk mengelakkan komponen lain menjejaskan penampilan dan/atau fungsi modal.
Terdapat beberapa kaveat mengenai penggunaan modal pada peranti mudah alih. Lihat dokumen sokongan penyemak imbas kami untuk mendapatkan butiran.
Disebabkan cara HTML5 mentakrifkan semantiknya, autofocus
atribut HTML tidak mempunyai kesan dalam modals Bootstrap. Untuk mencapai kesan yang sama, gunakan beberapa JavaScript tersuai:
Modal yang diberikan dengan pengepala, badan dan set tindakan dalam pengaki.
Togol modal melalui JavaScript dengan mengklik butang di bawah. Ia akan meluncur ke bawah dan pudar masuk dari bahagian atas halaman.
Pastikan anda menambah role="dialog"
dan aria-labelledby="..."
, merujuk tajuk modal, kepada .modal
, dan role="document"
kepada .modal-dialog
dirinya sendiri.
Selain itu, anda boleh memberikan penerangan tentang dialog modal anda dengan aria-describedby
pada .modal
.
Membenamkan video YouTube dalam modal memerlukan JavaScript tambahan yang tiada dalam Bootstrap untuk menghentikan main balik secara automatik dan banyak lagi. Lihat siaran Stack Overflow yang berguna ini untuk mendapatkan maklumat lanjut.
Modal mempunyai dua saiz pilihan, tersedia melalui kelas pengubah suai untuk diletakkan pada .modal-dialog
.
Untuk modal yang hanya muncul dan bukannya pudar untuk dilihat, alih keluar .fade
kelas daripada penanda modal anda.
Untuk memanfaatkan sistem grid Bootstrap dalam modal, hanya sarang .row
s dalam .modal-body
dan kemudian gunakan kelas sistem grid biasa.
Mempunyai sekumpulan butang yang semuanya mencetuskan modal yang sama, hanya dengan kandungan yang sedikit berbeza? Gunakan event.relatedTarget
dan atribut HTMLdata-*
(mungkin melalui jQuery ) untuk mengubah kandungan modal bergantung pada butang yang diklik. Lihat dokumen Modal Events untuk mendapatkan butiran tentang relatedTarget
,
Pemalam modal menogol kandungan tersembunyi anda atas permintaan, melalui atribut data atau JavaScript. Ia juga menambah .modal-open
kepada <body>
untuk mengatasi tingkah laku menatal lalai dan menjana .modal-backdrop
untuk menyediakan kawasan klik untuk mengetepikan modal yang ditunjukkan apabila mengklik di luar modal.
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.
Panggil modal dengan id myModal
dengan satu baris JavaScript:
Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-
, seperti dalam data-backdrop=""
.
Nama | taip | lalai | penerangan |
---|---|---|---|
latar belakang | boolean atau rentetan'static' |
benar | Termasuk unsur tirai latar modal. Sebagai alternatif, tentukan static tirai latar yang tidak menutup modal pada klik. |
papan kekunci | boolean | benar | Menutup modal apabila kekunci escape ditekan |
tunjuk | boolean | benar | Menunjukkan modal apabila dimulakan. |
jauh | laluan | salah | Pilihan ini ditamatkan sejak v3.3.0 dan telah dialih keluar dalam v4. Sebaliknya kami mengesyorkan menggunakan templat sisi klien atau rangka kerja mengikat data, atau memanggil sendiri jQuery.load . Jika URL jauh disediakan, kandungan akan dimuatkan sekali melalui kaedah jQuery |
.modal(options)
Mengaktifkan kandungan anda sebagai modal. Menerima pilihan pilihan object
.
.modal('toggle')
Togol mod secara manual. Kembali kepada pemanggil sebelum modal sebenarnya telah ditunjukkan atau disembunyikan (iaitu sebelum shown.bs.modal
atau hidden.bs.modal
peristiwa berlaku).
.modal('show')
Membuka modal secara manual. Kembali kepada pemanggil sebelum modal sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.modal
peristiwa berlaku).
.modal('hide')
Secara manual menyembunyikan modal. Kembali kepada pemanggil sebelum modal sebenarnya telah disembunyikan (iaitu sebelum hidden.bs.modal
peristiwa berlaku).
.modal('handleUpdate')
Melaraskan semula kedudukan modal untuk menentang bar skrol sekiranya ia muncul, yang akan membuat mod melompat ke kiri.
Hanya diperlukan apabila ketinggian mod berubah semasa ia dibuka.
Kelas modal Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi modal.
Semua peristiwa modal dicetuskan pada modal itu sendiri (iaitu pada <div class="modal">
).
Jenis acara | Penerangan |
---|---|
show.bs.modal | Peristiwa ini menyala serta-merta apabila show kaedah contoh dipanggil. Jika disebabkan oleh klik, elemen yang diklik tersedia sebagai relatedTarget harta acara. |
ditunjukkan.bs.modal | Peristiwa ini dicetuskan apabila modal telah ditunjukkan kepada pengguna (akan menunggu peralihan CSS selesai). Jika disebabkan oleh klik, elemen yang diklik tersedia sebagai relatedTarget harta acara. |
hide.bs.modal | Peristiwa ini dicetuskan serta-merta apabila hide kaedah contoh telah dipanggil. |
hidden.bs.modal | Acara ini dicetuskan apabila modal telah selesai disembunyikan daripada pengguna (akan menunggu peralihan CSS selesai). |
loaded.bs.modal | Peristiwa ini dicetuskan apabila modal telah memuatkan kandungan menggunakan remote pilihan. |
Tambahkan menu lungsur turun pada hampir semua perkara dengan pemalam mudah ini, termasuk bar navigasi, tab dan pil.
Melalui atribut data atau JavaScript, pemalam lungsur turun menogol kandungan tersembunyi (menu lungsur) dengan menogol .open
kelas pada item senarai induk.
Pada peranti mudah alih, membuka menu lungsur menambah .dropdown-backdrop
sebagai kawasan ketik untuk menutup menu lungsur turun apabila mengetik di luar menu, keperluan untuk sokongan iOS yang betul. Ini bermakna menukar daripada menu lungsur terbuka kepada menu lungsur yang berbeza memerlukan ketik tambahan pada mudah alih.
Nota: data-toggle="dropdown"
Atribut ini bergantung kepada untuk menutup menu lungsur pada peringkat aplikasi, jadi adalah idea yang baik untuk sentiasa menggunakannya.
Tambahkan data-toggle="dropdown"
pada pautan atau butang untuk menogol lungsur turun.
Untuk memastikan URL kekal dengan butang pautan, gunakan data-target
atribut dan bukannya href="#"
.
Panggil lungsur turun melalui JavaScript:
data-toggle="dropdown"
masih diperlukanTidak kira sama ada anda memanggil lungsur turun melalui JavaScript atau sebaliknya menggunakan data-api, data-toggle="dropdown"
sentiasa diperlukan untuk hadir pada elemen pencetus lungsur turun.
tiada
$().dropdown('toggle')
Togol menu lungsur turun bar navigasi yang diberikan atau navigasi tab.
Semua acara lungsur turun dicetuskan pada .dropdown-menu
elemen induk '.
Semua acara lungsur turun mempunyai relatedTarget
sifat, yang nilainya ialah elemen sauh togol.
Jenis acara | Penerangan |
---|---|
show.bs.dropdown | Peristiwa ini berlaku serta-merta apabila kaedah contoh tunjukkan dipanggil. |
ditunjukkan.bs.turun turun | Peristiwa ini dicetuskan apabila lungsur turun telah ditunjukkan kepada pengguna (akan menunggu peralihan CSS, untuk diselesaikan). |
hide.bs.dropdown | Peristiwa ini dicetuskan serta-merta apabila kaedah hide instance telah dipanggil. |
hidden.bs.dropdown | Acara ini dicetuskan apabila lungsur turun telah selesai disembunyikan daripada pengguna (akan menunggu peralihan CSS, untuk diselesaikan). |
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.
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.
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.
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.
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.
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.
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>
.
:visible
bukan sasaran diabaikanElemen sasaran yang tidak :visible
mengikut jQuery akan diabaikan dan item nav yang sepadan tidak akan diserlahkan.
Tidak kira kaedah pelaksanaan, scrollspy memerlukan penggunaan position: relative;
pada elemen yang anda intip. Dalam kebanyakan kes ini adalah <body>
. Semasa mengintip elemen selain daripada <body>
, pastikan anda mempunyai height
set dan overflow-y: scroll;
digunakan.
Untuk menambahkan gelagat scrollspy dengan mudah pada navigasi bar atas anda, tambahkan data-spy="scroll"
pada elemen yang anda ingin mengintip (kebiasaannya ini ialah <body>
). Kemudian tambahkan data-target
atribut dengan ID atau kelas elemen induk bagi mana-mana .nav
komponen Bootstrap.
Selepas menambah position: relative;
dalam CSS anda, hubungi scrollspy melalui JavaScript:
.scrollspy('refresh')
Apabila menggunakan scrollspy bersama-sama dengan menambah atau mengalih keluar elemen daripada DOM, anda perlu memanggil kaedah muat semula seperti:
Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-
, seperti dalam data-offset=""
.
Nama | taip | lalai | penerangan |
---|---|---|---|
mengimbangi | nombor | 10 | Piksel untuk mengimbangi dari atas apabila mengira kedudukan tatal. |
Jenis acara | Penerangan |
---|---|
activate.bs.scrollspy | Peristiwa ini berlaku apabila item baharu diaktifkan oleh scrollspy. |
Tambahkan kefungsian tab yang pantas dan dinamik untuk beralih melalui anak tetingkap kandungan tempatan, walaupun melalui menu lungsur. Tab bersarang tidak disokong.
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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Pemalam ini memanjangkan komponen navigasi tab untuk menambah kawasan boleh tab.
Dayakan tab boleh tab melalui JavaScript (setiap tab perlu diaktifkan secara individu):
Anda boleh mengaktifkan tab individu dalam beberapa cara:
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 nav
dan nav-tabs
pada tab akan menggunakan penggayaan tabul
Bootstrap , manakala menambah kelas dan akan menggunakan penggayaan pil .nav
nav-pills
Untuk membuat tab pudar, tambahkan .fade
pada setiap .tab-pane
. Anak tetingkap tab pertama juga mesti perlu .in
membuat kandungan awal kelihatan.
$().tab
Mengaktifkan elemen tab dan bekas kandungan. Tab harus mempunyai sama ada data-target
atau href
menyasarkan nod bekas dalam DOM. Dalam contoh di atas, tab ialah <a>
s dengan data-toggle="tab"
atribut.
.tab('show')
Memilih tab yang diberikan dan menunjukkan kandungan yang berkaitan. Mana-mana tab lain yang sebelum ini dipilih menjadi tidak dipilih dan kandungannya yang berkaitan disembunyikan. Kembali kepada pemanggil sebelum anak tetingkap tab sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.tab
peristiwa berlaku).
Apabila menunjukkan tab baharu, peristiwa berlaku dalam susunan berikut:
hide.bs.tab
(pada tab aktif semasa)show.bs.tab
(pada tab yang akan ditunjukkan)hidden.bs.tab
(pada tab aktif sebelumnya, sama seperti untuk hide.bs.tab
acara)shown.bs.tab
(pada tab yang baru aktif ditunjukkan, sama seperti untuk show.bs.tab
acara itu)Jika tiada tab sudah aktif, maka acara hide.bs.tab
dan hidden.bs.tab
tidak akan dicetuskan.
Jenis acara | Penerangan |
---|---|
show.bs.tab | Peristiwa ini berlaku pada rancangan tab, tetapi sebelum tab baharu dipaparkan. Gunakan event.target dan event.relatedTarget untuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing. |
ditunjukkan.bs.tab | Peristiwa ini berlaku pada rancangan tab selepas tab ditunjukkan. Gunakan event.target dan event.relatedTarget untuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing. |
hide.bs.tab | Peristiwa ini berlaku apabila tab baharu hendak ditunjukkan (dan oleh itu tab aktif sebelumnya akan disembunyikan). Gunakan event.target dan event.relatedTarget untuk menyasarkan tab aktif semasa dan tab baru yang akan aktif, masing-masing. |
hidden.bs.tab | Peristiwa ini berlaku selepas tab baharu ditunjukkan (dan dengan itu tab aktif sebelumnya disembunyikan). Gunakan event.target dan event.relatedTarget untuk menyasarkan tab aktif sebelumnya dan tab aktif baharu, masing-masing. |
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.
Petua alat dengan tajuk panjang sifar tidak pernah dipaparkan.
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.
Empat pilihan tersedia: dijajar atas, kanan, bawah dan kiri.
Atas sebab prestasi, Tooltip dan Popover data-apis adalah ikut serta, bermakna anda mesti memulakannya sendiri .
Satu cara untuk memulakan semua petua alat pada halaman ialah memilihnya mengikut data-toggle
atributnya:
Pemalam petua alat menjana kandungan dan penanda atas permintaan, dan secara lalai meletakkan petua alat selepas elemen pencetusnya.
Cetuskan petua alat melalui JavaScript:
Penanda yang diperlukan untuk petua alat hanyalah data
atribut dan title
pada elemen HTML anda ingin mempunyai petua alat. Penanda yang dijana bagi petua alat agak mudah, walaupun ia memerlukan kedudukan (secara lalai, ditetapkan top
oleh pemalam).
Kadangkala anda ingin menambah petua alat pada hiperpautan yang membungkus berbilang baris. Tingkah laku lalai pemalam petua alat adalah untuk memusatkannya secara mendatar dan menegak. Tambahkan white-space: nowrap;
pada sauh anda untuk mengelakkan ini.
Apabila menggunakan petua alat pada elemen dalam .btn-group
atau .input-group
, atau pada elemen berkaitan jadual ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), anda perlu menentukan pilihan container: 'body'
(didokumentasikan di bawah) untuk mengelakkan kesan sampingan yang tidak diingini (seperti elemen berkembang lebih luas dan/ atau kehilangan sudut bulatnya apabila petua alat dicetuskan).
Bagi pengguna yang menavigasi dengan papan kekunci, dan khususnya pengguna teknologi bantuan, anda hanya perlu menambah petua alat pada elemen boleh fokus papan kekunci seperti pautan, kawalan borang atau mana-mana elemen sewenang-wenangnya dengan tabindex="0"
atribut.
Untuk menambah petua alat pada disabled
atau .disabled
elemen, letakkan elemen di dalam a <div>
dan gunakan petua alat itu <div>
sebaliknya.
Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-
, seperti dalam data-animation=""
.
Nama | taip | Lalai | Penerangan |
---|---|---|---|
animasi | boolean | benar | Gunakan peralihan pudar CSS pada petua alat |
bekas | rentetan | salah | salah | Menambahkan petua alat pada elemen tertentu. Contoh: |
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: |
html | boolean | salah | Masukkan HTML ke dalam petua alat. Jika palsu, text kaedah jQuery akan digunakan untuk memasukkan kandungan ke dalam DOM. Gunakan teks jika anda bimbang tentang serangan XSS. |
penempatan | rentetan | fungsi | 'atas' | Cara meletakkan petua alat - atas | bawah | kiri | betul | auto. Apabila fungsi digunakan untuk menentukan peletakan, ia dipanggil dengan nod DOM petua alat sebagai hujah pertamanya dan nod DOM elemen pencetus sebagai yang kedua. Konteks ditetapkan |
pemilih | tali | salah | Jika pemilih disediakan, objek petua alat akan diwakilkan kepada sasaran yang ditentukan. Dalam amalan, ini digunakan untuk membolehkan kandungan HTML dinamik mempunyai petua alat ditambah. Lihat ini dan contoh bermaklumat . |
templat | tali | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
HTML asas untuk digunakan semasa membuat petua alat. Petua alat
Elemen pembungkus paling luar harus mempunyai |
tajuk | rentetan | fungsi | '' | Nilai tajuk lalai jika Jika fungsi diberikan, ia akan dipanggil dengan |
pencetus | tali | 'legar fokus' | Cara petua alat dicetuskan - klik | tuding | tumpuan | manual. Anda boleh melepasi pelbagai pencetus; pisahkan mereka dengan ruang. manual tidak boleh digabungkan dengan mana-mana pencetus lain. |
tempat pandang | rentetan | objek | fungsi | { pemilih: 'badan', padding: 0 } | Mengekalkan petua alat dalam sempadan elemen ini. Contoh: Jika fungsi diberikan, ia dipanggil dengan nod DOM elemen pencetus sebagai satu-satunya hujahnya. Konteks ditetapkan |
Pilihan untuk petua alat individu boleh ditentukan secara alternatif melalui penggunaan atribut data, seperti yang dijelaskan di atas.
$().tooltip(options)
Melampirkan pengendali petua alat pada koleksi elemen.
.tooltip('show')
Mendedahkan petua alat elemen. Kembali kepada pemanggil sebelum petua alat sebenarnya ditunjukkan (iaitu sebelum shown.bs.tooltip
peristiwa berlaku). Ini dianggap sebagai pencetus "manual" petua alat. Petua alat dengan tajuk panjang sifar tidak pernah dipaparkan.
.tooltip('hide')
Menyembunyikan petua alat elemen. Kembali kepada pemanggil sebelum petua alat sebenarnya disembunyikan (iaitu sebelum hidden.bs.tooltip
peristiwa berlaku). Ini dianggap sebagai pencetus "manual" petua alat.
.tooltip('toggle')
Menogol petua alat elemen. Kembali kepada pemanggil sebelum petua alat benar-benar ditunjukkan atau disembunyikan (iaitu sebelum shown.bs.tooltip
atau hidden.bs.tooltip
peristiwa berlaku). Ini dianggap sebagai pencetus "manual" petua alat.
.tooltip('destroy')
Menyembunyikan dan memusnahkan petua alat elemen. Petua alat yang menggunakan perwakilan (yang dibuat menggunakan pilihan ) tidak selector
boleh dimusnahkan secara individu pada elemen pencetus keturunan.
Jenis acara | Penerangan |
---|---|
show.bs.tooltip | Peristiwa ini menyala serta-merta apabila show kaedah contoh dipanggil. |
ditunjukkan.bs.petua alat | Peristiwa ini dicetuskan apabila petua alat telah dilihat kepada pengguna (akan menunggu peralihan CSS selesai). |
hide.bs.tooltip | Peristiwa ini dicetuskan serta-merta apabila hide kaedah contoh telah dipanggil. |
hidden.bs.tooltip | Peristiwa ini dicetuskan apabila petua alat telah selesai disembunyikan daripada pengguna (akan menunggu peralihan CSS selesai). |
inserted.bs.tooltip | Acara ini dicetuskan selepas show.bs.tooltip acara apabila templat petua alat telah ditambahkan pada DOM. |
Tambahkan tindanan kecil kandungan, seperti yang terdapat pada iPad, pada mana-mana elemen untuk menempatkan maklumat sekunder.
Popover yang kedua-dua tajuk dan kandungannya adalah sifar panjang tidak pernah dipaparkan.
Popovers memerlukan pemalam tooltip untuk disertakan dalam versi Bootstrap anda.
Atas sebab prestasi, Tooltip dan Popover data-apis adalah ikut serta, bermakna anda mesti memulakannya sendiri .
Satu cara untuk memulakan semua popover pada halaman ialah memilihnya mengikut data-toggle
atributnya:
Apabila menggunakan popover pada elemen dalam .btn-group
atau .input-group
, atau pada elemen berkaitan jadual ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), anda perlu menentukan pilihan container: 'body'
(didokumentasikan di bawah) untuk mengelakkan kesan sampingan yang tidak diingini (seperti elemen berkembang lebih luas dan/ atau kehilangan sudut bulatnya apabila popover dicetuskan).
Untuk menambah popover pada disabled
atau .disabled
elemen, letakkan elemen di dalam a <div>
dan gunakan popover itu <div>
sebaliknya.
Kadangkala anda ingin menambah popover pada hiperpautan yang membalut berbilang baris. Tingkah laku lalai pemalam popover adalah untuk memusatkannya secara mendatar dan menegak. Tambahkan white-space: nowrap;
pada sauh anda untuk mengelakkan ini.
Empat pilihan tersedia: dijajar atas, kanan, bawah dan kiri.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Hiasan pellentesque sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Hiasan pellentesque sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Hiasan pellentesque sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Hiasan pellentesque sem lacinia quam venenatis vestibulum.
Gunakan focus
pencetus untuk mengetepikan popover pada klik seterusnya yang dibuat pengguna.
Untuk kelakuan merentas penyemak imbas dan merentas platform yang betul, anda mesti menggunakan <a>
teg, bukan teg<button>
, dan anda juga mesti memasukkan atribut role="button"
dan .tabindex
Dayakan popovers melalui JavaScript:
Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-
, seperti dalam data-animation=""
.
Nama | taip | Lalai | Penerangan |
---|---|---|---|
animasi | boolean | benar | Gunakan peralihan pudar CSS ke popover |
bekas | rentetan | salah | salah | Menambah popover pada elemen tertentu. Contoh: |
kandungan | rentetan | fungsi | '' | Nilai kandungan lalai jika Jika fungsi diberikan, ia akan dipanggil dengan |
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: |
html | boolean | salah | Masukkan HTML ke dalam popover. Jika palsu, text kaedah jQuery akan digunakan untuk memasukkan kandungan ke dalam DOM. Gunakan teks jika anda bimbang tentang serangan XSS. |
penempatan | rentetan | fungsi | 'betul' | Bagaimana untuk meletakkan popover - atas | bawah | kiri | betul | auto. Apabila fungsi digunakan untuk menentukan peletakan, ia dipanggil dengan nod DOM popover sebagai hujah pertamanya dan nod DOM elemen pencetus sebagai yang kedua. Konteks ditetapkan |
pemilih | tali | salah | Jika pemilih disediakan, objek popover akan diwakilkan kepada sasaran yang ditentukan. Dalam amalan, ini digunakan untuk membolehkan kandungan HTML dinamik mempunyai popover ditambah. Lihat ini dan contoh bermaklumat . |
templat | tali | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
HTML asas untuk digunakan semasa membuat popover. Popover Popover
Elemen pembungkus paling luar harus mempunyai |
tajuk | rentetan | fungsi | '' | Nilai tajuk lalai jika Jika fungsi diberikan, ia akan dipanggil dengan |
pencetus | tali | 'klik' | Cara popover dicetuskan - klik | tuding | tumpuan | manual. Anda boleh melepasi pelbagai pencetus; pisahkan mereka dengan ruang. manual tidak boleh digabungkan dengan mana-mana pencetus lain. |
tempat pandang | rentetan | objek | fungsi | { pemilih: 'badan', padding: 0 } | Mengekalkan popover dalam sempadan elemen ini. Contoh: Jika fungsi diberikan, ia dipanggil dengan nod DOM elemen pencetus sebagai satu-satunya hujahnya. Konteks ditetapkan |
Pilihan untuk popover individu boleh ditentukan secara alternatif melalui penggunaan atribut data, seperti yang dijelaskan di atas.
$().popover(options)
Memulakan popover untuk koleksi elemen.
.popover('show')
Mendedahkan popover elemen. Kembali kepada pemanggil sebelum popover sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.popover
peristiwa berlaku). Ini dianggap sebagai "manual" pencetus popover. Popover yang kedua-dua tajuk dan kandungannya adalah sifar panjang tidak pernah dipaparkan.
.popover('hide')
Menyembunyikan popover elemen. Kembali kepada pemanggil sebelum popover sebenarnya telah disembunyikan (iaitu sebelum hidden.bs.popover
peristiwa berlaku). Ini dianggap sebagai "manual" pencetus popover.
.popover('toggle')
Menogol popover elemen. Kembali kepada pemanggil sebelum popover sebenarnya telah ditunjukkan atau disembunyikan (iaitu sebelum shown.bs.popover
atau hidden.bs.popover
peristiwa berlaku). Ini dianggap sebagai "manual" pencetus popover.
.popover('destroy')
Menyembunyikan dan memusnahkan popover elemen. Popover yang menggunakan perwakilan (yang dibuat menggunakan pilihan ) tidak selector
boleh dimusnahkan secara individu pada elemen pencetus keturunan.
Jenis acara | Penerangan |
---|---|
show.bs.popover | Peristiwa ini menyala serta-merta apabila show kaedah contoh dipanggil. |
ditunjukkan.bs.popover | Acara ini dicetuskan apabila popover telah dilihat kepada pengguna (akan menunggu peralihan CSS selesai). |
hide.bs.popover | Peristiwa ini dicetuskan serta-merta apabila hide kaedah contoh telah dipanggil. |
hidden.bs.popover | Acara ini dicetuskan apabila popover telah selesai disembunyikan daripada pengguna (akan menunggu peralihan CSS selesai). |
disisipkan.bs.popover | Acara ini dicetuskan selepas show.bs.popover acara apabila templat popover telah ditambahkan pada DOM. |
Tambahkan fungsi tolak pada semua mesej makluman dengan pemalam ini.
Apabila menggunakan .close
butang, ia mestilah anak pertama .alert-dismissible
dan tiada kandungan teks boleh datang sebelumnya dalam penanda.
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.
Cuma tambah data-dismiss="alert"
pada butang tutup anda untuk memberikan fungsi tutup amaran secara automatik. Menutup makluman mengalih keluarnya daripada DOM.
Untuk membolehkan makluman anda menggunakan animasi semasa menutup, pastikan ia mempunyai .fade
dan.in
telah digunakan padanya.
$().alert()
Membuat amaran mendengar peristiwa klik pada unsur keturunan yang mempunyai data-dismiss="alert"
atribut. (Tidak perlu apabila menggunakan auto-inisialisasi data-api.)
$().alert('close')
Menutup makluman dengan mengalih keluarnya daripada DOM. Jika kelas .fade
dan .in
hadir pada elemen, amaran akan pudar sebelum ia dialih keluar.
Pemalam amaran Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi amaran.
Jenis acara | Penerangan |
---|---|
close.bs.alert | Peristiwa ini menyala serta-merta apabila close kaedah contoh dipanggil. |
amaran ditutup.bs | Acara ini dicetuskan apabila amaran telah ditutup (akan menunggu peralihan CSS selesai). |
Lakukan lebih banyak dengan butang. Butang kawalan menyatakan atau buat kumpulan butang untuk lebih banyak komponen seperti bar alat.
Firefox mengekalkan keadaan kawalan borang (kecacatan dan penyemakan) merentas pemuatan halaman . Penyelesaian untuk ini ialah menggunakan autocomplete="off"
. Lihat pepijat Mozilla #654072 .
Tambah data-loading-text="Loading..."
untuk menggunakan keadaan pemuatan pada butang.
Ciri ini ditamatkan sejak v3.3.5 dan telah dialih keluar dalam v4.
Demi demonstrasi ini, kami menggunakan data-loading-text
dan $().button('loading')
, tetapi itu bukan satu-satunya negeri yang boleh anda gunakan. Lihat lebih lanjut mengenai perkara ini di bawah dalam $().button(string)
dokumentasi .
Tambahkan data-toggle="button"
untuk mengaktifkan togol pada satu butang.
.active
danaria-pressed="true"
Untuk butang pra-togol, anda mesti menambah .active
kelas dan aria-pressed="true"
atribut kepada button
diri anda sendiri.
Tambahkan data-toggle="buttons"
pada .btn-group
kotak pilihan yang mengandungi atau input radio untuk mendayakan togol dalam gaya masing-masing.
.active
Untuk pilihan yang telah dipilih, anda mesti menambah .active
kelas pada input label
anda sendiri.
Jika keadaan butang kotak semak yang ditanda dikemas kini tanpa mencetuskan click
peristiwa pada butang (cth melalui <input type="reset">
atau melalui menetapkan checked
sifat input), anda perlu menogol .active
kelas pada input itu label
sendiri.
$().button('toggle')
Togol keadaan tolak. Memberi butang rupa bahawa ia telah diaktifkan.
$().button('reset')
Menetapkan semula keadaan butang - menukar teks kepada teks asal. Kaedah ini tidak segerak dan kembali sebelum penetapan semula sebenarnya telah selesai.
$().button(string)
Menukar teks kepada mana-mana keadaan teks yang ditentukan data.
Pemalam fleksibel yang menggunakan segelintir kelas untuk tingkah laku togol mudah.
Runtuh memerlukan pemalam peralihan untuk disertakan dalam versi Bootstrap anda.
Klik butang di bawah untuk menunjukkan dan menyembunyikan elemen lain melalui perubahan kelas:
.collapse
menyembunyikan kandungan.collapsing
digunakan semasa peralihan.collapse.in
menunjukkan kandunganAnda boleh menggunakan pautan dengan href
atribut, atau butang dengan data-target
atribut. Dalam kedua-dua kes, data-toggle="collapse"
ia diperlukan.
Lanjutkan kelakuan runtuh lalai untuk mencipta akordion dengan komponen panel.
Anda juga boleh menukar .panel-body
s dengan .list-group
s.
Pastikan anda menambah aria-expanded
pada elemen kawalan. Atribut ini secara eksplisit mentakrifkan keadaan semasa elemen boleh lipat kepada pembaca skrin dan teknologi bantuan yang serupa. Jika elemen boleh lipat ditutup secara lalai, ia sepatutnya mempunyai nilai aria-expanded="false"
. Jika anda telah menetapkan elemen boleh lipat dibuka secara lalai menggunakanin
kelas, tetapkan aria-expanded="true"
pada kawalan. Pemalam akan menogol atribut ini secara automatik berdasarkan sama ada elemen boleh lipat telah dibuka atau ditutup atau tidak.
Selain itu, jika elemen kawalan anda menyasarkan satu elemen boleh lipat – iaitu data-target
atribut menunjuk kepada id
pemilih – anda boleh menambah aria-controls
atribut tambahan pada elemen kawalan, yang mengandungi id
elemen boleh lipat. Pembaca skrin moden dan teknologi bantuan serupa menggunakan atribut ini untuk menyediakan pengguna dengan pintasan tambahan untuk menavigasi terus ke elemen boleh lipat itu sendiri.
Pemalam runtuh menggunakan beberapa kelas untuk mengendalikan pengangkatan berat:
.collapse
menyembunyikan kandungan.collapse.in
menunjukkan kandungan.collapsing
ditambah apabila peralihan bermula, dan dikeluarkan apabila ia selesaiKelas-kelas ini boleh didapati dalam component-animations.less
.
Cuma tambah data-toggle="collapse"
dan a data-target
pada elemen untuk memberikan kawalan secara automatik bagi elemen boleh lipat. Atribut data-target
menerima pemilih CSS untuk menggunakan keruntuhan. Pastikan anda menambah kelas collapse
pada 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.
Dayakan secara manual dengan:
Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-
, seperti dalam data-parent=""
.
Nama | taip | lalai | penerangan |
---|---|---|---|
ibu bapa | pemilih | salah | Jika pemilih disediakan, maka semua elemen boleh lipat di bawah induk yang ditentukan akan ditutup apabila item boleh lipat ini ditunjukkan. (serupa dengan tingkah laku akordion tradisional - ini bergantung pada panel kelas) |
togol | boolean | benar | Menogol elemen boleh lipat pada seruan |
.collapse(options)
Mengaktifkan kandungan anda sebagai elemen boleh lipat. Menerima pilihan pilihan object
.
.collapse('toggle')
Menogol elemen boleh lipat kepada ditunjukkan atau disembunyikan. Kembali kepada pemanggil sebelum elemen boleh lipat sebenarnya telah ditunjukkan atau disembunyikan (iaitu sebelum shown.bs.collapse
atau hidden.bs.collapse
peristiwa berlaku).
.collapse('show')
Menunjukkan elemen boleh lipat. Kembali kepada pemanggil sebelum elemen boleh lipat sebenarnya ditunjukkan (iaitu sebelum shown.bs.collapse
peristiwa berlaku).
.collapse('hide')
Menyembunyikan elemen yang boleh dilipat. Kembali kepada pemanggil sebelum elemen boleh lipat sebenarnya telah disembunyikan (iaitu sebelum hidden.bs.collapse
peristiwa berlaku).
Kelas runtuh Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi runtuh.
Jenis acara | Penerangan |
---|---|
tunjukkan.bs.runtuh | Peristiwa ini menyala serta-merta apabila show kaedah contoh dipanggil. |
ditunjukkan.bs.runtuh | Peristiwa ini dicetuskan apabila elemen runtuh telah dilihat kepada pengguna (akan menunggu peralihan CSS selesai). |
hide.bs.runtuh | Acara ini dipecat serta-merta apabila hide kaedah telah dipanggil. |
tersembunyi.bs.runtuh | Peristiwa ini dicetuskan apabila elemen runtuh telah disembunyikan daripada pengguna (akan menunggu peralihan CSS selesai). |
Komponen tayangan slaid untuk berbasikal melalui elemen, seperti karusel. Karusel bersarang tidak disokong.
Komponen karusel biasanya tidak mematuhi piawaian kebolehaksesan. Jika anda perlu mematuhi, sila pertimbangkan pilihan lain untuk mempersembahkan kandungan anda.
Bootstrap secara eksklusif menggunakan CSS3 untuk animasinya, tetapi Internet Explorer 8 & 9 tidak menyokong sifat CSS yang diperlukan. Oleh itu, tiada animasi peralihan slaid apabila menggunakan pelayar ini. Kami sengaja memutuskan untuk tidak memasukkan sandaran berasaskan jQuery untuk peralihan.
Kelas .active
perlu ditambah pada salah satu slaid. Jika tidak, karusel tidak akan kelihatan.
Kelas .glyphicon .glyphicon-chevron-left
dan .glyphicon .glyphicon-chevron-right
tidak semestinya diperlukan untuk kawalan. Bootstrap menyediakan .icon-prev
dan .icon-next
sebagai alternatif unicode biasa.
Tambahkan kapsyen pada slaid anda dengan mudah dengan .carousel-caption
elemen dalam mana-mana .item
. Letakkan hampir mana-mana HTML pilihan di dalamnya dan ia akan diselaraskan dan diformatkan secara automatik.
Karusel memerlukan penggunaan id
bekas paling luar (the .carousel
) untuk kawalan karusel berfungsi dengan baik. Apabila menambah berbilang karusel, atau apabila menukar karusel id
, pastikan anda mengemas kini kawalan yang berkaitan.
Gunakan atribut data untuk mengawal kedudukan karusel dengan mudah. data-slide
menerima kata kunci prev
atau next
, yang mengubah kedudukan slaid berbanding kedudukan semasanya. Sebagai alternatif, gunakan data-slide-to
untuk menghantar indeks slaid mentah ke karusel data-slide-to="2"
, yang mengalihkan kedudukan slaid kepada indeks tertentu bermula dengan 0
.
Atribut data-ride="carousel"
digunakan untuk menandakan karusel sebagai animasi bermula pada pemuatan halaman. Ia tidak boleh digunakan dalam kombinasi dengan (berlebihan dan tidak perlu) pemula JavaScript eksplisit bagi karusel yang sama.
Panggil karusel secara manual dengan:
Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-
, seperti dalam data-interval=""
.
Nama | taip | lalai | penerangan |
---|---|---|---|
selang waktu | nombor | 5000 | Jumlah masa untuk menangguhkan antara mengayuh item secara automatik. Jika palsu, karusel tidak akan berkitar secara automatik. |
jeda | rentetan | null | "legar" | Jika ditetapkan kepada "hover" , jeda kitaran karusel dihidupkan mouseenter dan sambung semula kitaran karusel dihidupkan mouseleave . Jika ditetapkan kepada null , melayang di atas karusel tidak akan menjedanya. |
bungkus | boolean | benar | Sama ada karusel perlu berkitar secara berterusan atau mempunyai hentian keras. |
papan kekunci | boolean | benar | Sama ada karusel harus bertindak balas terhadap peristiwa papan kekunci. |
.carousel(options)
Memulakan karusel dengan pilihan pilihan object
dan mula berbasikal melalui item.
.carousel('cycle')
Kitaran melalui item karusel dari kiri ke kanan.
.carousel('pause')
Menghentikan karusel daripada berbasikal melalui item.
.carousel(number)
Mengitar karusel ke bingkai tertentu (berasaskan 0, serupa dengan tatasusunan).
.carousel('prev')
Kitaran ke item sebelumnya.
.carousel('next')
Kitaran ke item seterusnya.
Kelas karusel Bootstrap mendedahkan dua acara untuk menyambung ke fungsi karusel.
Kedua-dua acara mempunyai sifat tambahan berikut:
direction
: Arah di mana karusel sedang meluncur (sama ada "left"
atau "right"
).relatedTarget
: Elemen DOM yang sedang meluncur ke tempatnya sebagai item aktif.Semua acara karusel dilepaskan pada karusel itu sendiri (iaitu pada <div class="carousel">
).
Jenis acara | Penerangan |
---|---|
slaid.bs.karusel | Peristiwa ini berlaku serta-merta apabila slide kaedah contoh digunakan. |
slid.bs.carousel | Peristiwa ini dicetuskan apabila karusel telah menyelesaikan peralihan slaidnya. |
Pemalam imbuhan bertukar-tukar position: fixed;
hidup dan mati, meniru kesan yang ditemui dengan position: sticky;
. Subnavigasi di sebelah kanan ialah demo langsung bagi pemalam imbuhan.
Gunakan pemalam imbuhan melalui atribut data atau secara manual dengan JavaScript anda sendiri. Dalam kedua-dua situasi, anda mesti menyediakan CSS untuk kedudukan dan lebar kandungan yang dilekatkan anda.
Nota: Jangan gunakan pemalam imbuhan pada elemen yang terkandung dalam elemen yang agak kedudukannya, seperti lajur yang ditarik atau ditolak, disebabkan oleh pepijat pemaparan Safari .
Pemalam imbuhan bertukar-tukar antara tiga kelas, setiap satu mewakili keadaan tertentu: .affix
, .affix-top
, dan .affix-bottom
. Anda mesti menyediakan gaya, kecuali position: fixed;
pada.affix
, untuk kelas ini sendiri (bebas daripada pemalam ini) untuk mengendalikan kedudukan sebenar.
Begini cara pemalam afiks berfungsi:
.affix-top
untuk menunjukkan elemen berada di kedudukan paling atasnya. Pada ketika ini tiada kedudukan CSS diperlukan..affix
menggantikan .affix-top
dan menetapkan position: fixed;
(disediakan oleh CSS Bootstrap)..affix
dengan .affix-bottom
. Memandangkan offset adalah pilihan, menetapkan satu memerlukan anda menetapkan CSS yang sesuai. Dalam kes ini, tambah position: absolute;
apabila perlu. Pemalam menggunakan atribut data atau pilihan JavaScript untuk menentukan tempat meletakkan elemen dari sana.Ikuti langkah di atas untuk menetapkan CSS anda untuk salah satu daripada pilihan penggunaan di bawah.
Untuk menambahkan gelagat imbuhan dengan mudah pada mana-mana elemen, cuma tambahkan data-spy="affix"
pada elemen yang ingin anda intip. Gunakan offset untuk menentukan masa untuk menogol penyematan elemen.
Panggil pemalam afiks melalui JavaScript:
Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-
, seperti dalam data-offset-top="200"
.
Nama | taip | lalai | penerangan |
---|---|---|---|
mengimbangi | nombor | fungsi | objek | 10 | Piksel untuk mengimbangi daripada skrin apabila mengira kedudukan tatal. Jika satu nombor disediakan, offset akan digunakan dalam kedua-dua arah atas dan bawah. Untuk memberikan offset yang unik, bawah dan atas hanya sediakan objek offset: { top: 10 } atau offset: { top: 10, bottom: 5 } . Gunakan fungsi apabila anda perlu mengira offset secara dinamik. |
sasaran | pemilih | nod | elemen jQuery | window objek itu |
Menentukan unsur sasaran imbuhan. |
.affix(options)
Mengaktifkan kandungan anda sebagai kandungan yang dilekatkan. Menerima pilihan pilihan object
.
.affix('checkPosition')
Mengira semula keadaan imbuhan berdasarkan dimensi, kedudukan dan kedudukan tatal elemen yang berkaitan. Kelas .affix
, .affix-top
, dan .affix-bottom
ditambah atau dialih keluar daripada kandungan yang dilekatkan mengikut keadaan baharu. Kaedah ini perlu dipanggil apabila dimensi kandungan yang dilekatkan atau elemen sasaran diubah, untuk memastikan kedudukan kandungan yang dilekatkan yang betul.
Pemalam imbuhan Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi imbuhan.
Jenis acara | Penerangan |
---|---|
imbuhan.bs.imbuhan | Peristiwa ini berlaku serta-merta sebelum elemen dilekatkan. |
imbuhan.bs.imbuhan | Peristiwa ini dicetuskan selepas elemen telah dilekatkan. |
imbuhan-atas.bs.imbuhan | Peristiwa ini berlaku serta-merta sebelum elemen dilekatkan di atas. |
imbuhan-atas.bs.imbuhan | Peristiwa ini dicetuskan selepas elemen dilekatkan di atas. |
imbuhan-bawah.bs.imbuhan | Peristiwa ini berlaku serta-merta sebelum elemen dilekatkan di bawah. |
imbuhan-bawah.bs.imbuhan | Peristiwa ini dicetuskan selepas elemen telah dilekatkan-bawah. |