Plugin Bootstrap
1. Plug-in Transisi Bootstrap
Plugin transisi memberikan efek transisi sederhana. Jika Anda ingin merujuk fungsionalitas plugin secara individual, Anda juga perlu referensi transisi.js selain file JS lainnya. Atau, sebagaimana disebutkan dalam bab ikhtisar plugin Bootstrap, Anda dapat merujuk ke bootstrap.js atau versi terkompresi bootstrap.min.js.
Transition.js adalah kelas pembantu dasar untuk acara Transitionend dan simulator efek transisi CSS. Ini digunakan oleh plug-in lain untuk memeriksa dukungan efek transisi CSS dan untuk mendapatkan efek transisi.
Menggunakan kasus
Kasing Penggunaan Plug-In Transisi:
(1) Kotak dialog modal dengan efek slide atau fade. Untuk contoh spesifik, lihat plug-in kotak modal bootstrap (modal).
(2) Halaman tag dengan efek memudar. Untuk contoh spesifik, lihat plug-in halaman Tab Bootstrap (tab).
(3) Kotak peringatan dengan efek memudar. Untuk contoh spesifik, lihat plug-in kotak peringatan bootstrap (peringatan).
(4) Papan korsel dengan efek slide. Untuk contoh spesifik, lihat plug-in Carotstrap Carousel.
2. Plug-in Modal Box Bootstrap (Modal)
Kotak modal (modal) adalah bentuk anak yang dilapisi pada bentuk induk. Biasanya, tujuannya adalah untuk menampilkan konten dari sumber terpisah, yang dapat memiliki beberapa interaksi tanpa meninggalkan bentuk induk. Subformitas dapat memberikan informasi, interaksi, dll.
Jika Anda ingin merujuk fungsionalitas plugin secara terpisah, maka Anda perlu referensi modal.js. Atau, sebagaimana disebutkan dalam bab ikhtisar plugin Bootstrap, Anda dapat merujuk ke bootstrap.js atau versi terkompresi bootstrap.min.js.
(1) Penggunaan
Anda dapat beralih konten tersembunyi dari plugin Modal Box (Modal):
A. Melalui Atribut Data: Atur atribut data-kilat = "modal" pada elemen pengontrol (seperti tombol atau tautan), dan atur data-target = "#identifikasi" atau href = "#identifikasi" untuk menentukan kotak modal spesifik untuk beralih (dengan id = "identifikasi").
B. Melalui JavaScript: Menggunakan teknik ini, Anda dapat memanggil kotak modal dengan ID = "Identifier" melalui garis sederhana JavaScript:
$ ('#Identifier'). Modal (opsi)
<H2> Buat kotak modal (modal) </h2> <!-Tombol memicu kotak modal-> <tombol data-kunyah = "modal" data-target = "#mymodal"> Mulai mendemonstrasikan kotak modal </aton> <!-Modal (Modal)-> <Div ID = "Tabindex ="-------DialoG "ROBAL" TABINDEX = "---dialoG =" dialoG "Tabindex ="-dialog = aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true"> × </button> <h4 id="myModalLabel"> Modal Box (Modal) Title</h4> </div> <div> Add some text here</div> <div> <button type="button" Data-Dismiss = "Modal"> Tutup </button> <tombol type = "Tombol"> Kirim perubahan </button> </div> </div> </div> <!-/.modal-content-> </div> <!-/.modal-> </div>
Penjelasan Kode:
A. Menggunakan Windows Modal, Anda harus memiliki semacam pemicu. Anda dapat menggunakan tombol atau tautan. Di sini kami menggunakan tombol.
B. Jika Anda melihat kode di atas dengan hati-hati, Anda akan menemukannya di tag <buton>, data-target = "#myModal" adalah target kotak modal yang ingin Anda muat pada halaman. Anda dapat membuat beberapa kotak modal di halaman dan kemudian membuat pemicu yang berbeda untuk setiap kotak modal. Sekarang, sudah jelas bahwa Anda tidak dapat memuat beberapa modul secara bersamaan, tetapi Anda dapat membuat banyak di halaman untuk memuat pada waktu yang berbeda.
C. Dua poin yang harus dicatat dalam kotak modal:
Yang pertama adalah .modal, yang digunakan untuk mengenali konten <V> sebagai kotak modal.
Yang kedua adalah kelas. Ketika kotak modal diaktifkan, itu menyebabkan konten memudar.
D. aria-labeledby = "mymodallabel", properti ini mengacu pada judul kotak modal.
E. Properti aria-hidden = "true" digunakan untuk menjaga jendela modal tidak terlihat sampai pemicu dipicu (seperti mengklik tombol yang relevan).
F, <div>, header modal adalah kelas yang mendefinisikan gaya untuk kepala jendela modal.
G, class = "tutup", tutup adalah kelas CSS yang digunakan untuk menata tombol tutup jendela modal.
H, Data-Dismiss = "Modal", adalah atribut data HTML5 khusus. Di sini digunakan untuk menutup jendela modal.
I, Class = "Modal-Body", adalah kelas CSS dari CSS bootstrap, yang digunakan untuk menata tubuh jendela modal.
J, class = "Modal-Footer", adalah kelas CSS dari Bootstrap CSS, yang digunakan untuk menata bagian bawah jendela modal.
K, data-kilat = "modal", html5 atribut data kustom data-kilat digunakan untuk membuka jendela modal.
(2) Opsi
Ada opsi untuk menyesuaikan penampilan dan nuansa jendela modal, yang dilewatkan melalui properti data atau javascript. Tabel berikut mencantumkan opsi ini:
(3) Metode
Berikut adalah beberapa metode berguna yang dapat digunakan dengan modal ().
(4) Acara
Tabel berikut mencantumkan peristiwa yang akan digunakan di kotak modal. Acara ini dapat digunakan sebagai pengait dalam fungsi.
3. Menu drop-down bootstrap (dropdown) Plug-in
Bab menu drop-down Bootstrap menjelaskan menu tarik-turun, tetapi tidak melibatkan bagian interaksi. Bab ini akan menjelaskan interaksi menu drop-down secara detail. Menggunakan plugin dropdown, Anda dapat menambahkan menu dropdown ke komponen apa pun (seperti bilah navigasi, tab, menu navigasi kapsul, tombol, dll.).
Jika Anda ingin merujuk fungsionalitas plugin secara terpisah, maka Anda perlu referensi dropdown.js. Atau, sebagaimana disebutkan dalam bab ikhtisar plugin Bootstrap, Anda dapat merujuk ke bootstrap.js atau versi terkompresi bootstrap.min.js.
(1) Penggunaan
Anda dapat beralih konten tersembunyi dari plugin menu dropdown (dropdown):
Toggle menu tarik-turun melalui atribut data: Tambahkan data-kilat = "dropdown" ke tautan atau tombol.
A. Gunakan atribut data: Tambahkan data-kilat = "dropdown" ke tautan atau tombol untuk mengganti menu tarik-turun, seperti yang ditunjukkan di bawah ini:
<div> <a data-koggle = "dropdown" href = "#"> Pemicu dropdown </a> <uL role = "menu" aria-labeledby = "Dlabel"> </ul> </div>
B. Jika Anda perlu menjaga tautan tetap utuh (berguna saat browser tidak mengaktifkan JavaScript), gunakan properti target data alih-alih href = "#":
<Div> <a id = "Dlabel" Role = "Tombol" data-koggle = "dropdown" data-target = "#" href = "/page.html"> menu dropdown (dropdown) <span> </span> </a> <uL role = "menu" aria-libelledby = "dlabel"> </Ul> </Ul> diver> divelly = "dlabel"> </Ul> </Ul> </Ul> </Ul> </Ul> </Ul> </Ul> </Ul> </Ul> </Ul> </Ul> </Ul> </ULLabel> </ULLLADA> </ULLLADAS> </ULLLABLEDBY = "DLLABEL"> </Ul> </ULLLADA> </ULLLADA> </Ul>
C. Melalui JavaScript: Hubungi menu drop-down melalui JavaScript, silakan gunakan metode berikut: $ ('. Dropdown-boggle'). Dropdown ()
(2) Metode
Ada cara mudah untuk menampilkan atau menyembunyikan menu drop-down. $ (). dropdown ('sakelar')
4. Bootstrap Plug-in Scrollspy
Plug-in pemantauan gulir (scrollspy), yaitu, pembaruan otomatis plug-in navigasi, akan secara otomatis memperbarui target navigasi yang sesuai sesuai dengan posisi bilah gulir. Implementasinya yang mendasar adalah untuk menambahkan kelas aktif ke bilah navigasi berdasarkan posisi scrollbar saat Anda menggulir.
(1) Penggunaan
Anda dapat menambahkan perilaku mendengarkan gulir ke navigasi teratas:
A. Melalui atribut data: Tambahkan data-spy = "gulir" ke elemen yang ingin Anda dengarkan (biasanya tubuh). Kemudian tambahkan target data atribut dengan ID elemen induk dari komponen bootstrap .nav atau properti kelas. Agar dapat bekerja dengan baik, Anda harus memastikan bahwa ada elemen di tubuh halaman yang cocok dengan ID tautan yang ingin Anda dengarkan.
<body data-spy = "scroll" data-target = ". navbar-example"> ... <div> <ul> ... </ul> </div> ... </body>
B. Melalui JavaScript: Anda dapat memanggil pemantauan gulir melalui JavaScript, pilih elemen yang akan didengarkan, dan kemudian panggil fungsi .scrollspy ():
$ ('body'). scrollspy ({target: '.navbar-example'})
(2) Opsi
Melewati atribut data atau javascript. Tabel berikut mencantumkan opsi ini:
(3) Metode
.scrollspy ('Refresh'): Saat memanggil metode scrollspy melalui JavaScript, Anda perlu memanggil metode .refresh untuk memperbarui DOM. Ini berguna ketika setiap elemen DOM diubah (mis., Anda menambahkan atau menghapus beberapa elemen). Berikut adalah sintaks untuk menggunakan metode ini.
$ ('[data-spy = "scroll"]'). masing-masing (fungsi () {var $ spy = $ (this) .scrollspy ('refresh')})(4) Acara
Tabel berikut mencantumkan peristiwa yang akan digunakan dalam mendengarkan dengan scrolling. Acara ini dapat digunakan sebagai pengait dalam fungsi.
5. Bootstrap Tab (tab) Plugin
Tab (tab) diperkenalkan dalam bab Navigasi Bootstrap. Dengan menggabungkan beberapa properti data, Anda dapat dengan mudah membuat antarmuka tab. Dengan plugin ini, Anda dapat menempatkan konten di halaman tab atau halaman tab kapsul atau bahkan halaman tab menu tarik-turun.
(1) Penggunaan
Anda dapat mengaktifkan halaman tab dengan dua cara:
A. Melalui atribut data: Anda perlu menambahkan data-kilat = "tab" atau data-kilat = "pil" ke tautan teks jangkar. Menambahkan kelas NAV dan NAV-tab ke UL akan menerapkan gaya tag bootstrap, menambahkan kelas nav dan nav-pills ke UL akan menerapkan gaya kapsul bootstrap.
<ul>
<li> <a href = "#identifikasi"-data-koggle = "tab"> home </a> </li>
...
</ul>
B. Melalui JavaScript: Anda dapat menggunakan JavaScript untuk mengaktifkan halaman tab, seperti yang ditunjukkan di bawah ini:
$ ('#mytab a'). klik (fungsi (e) {e.preventdefault () $ (this) .tab ('show')})Contoh berikut menunjukkan aktivasi tab individu dengan cara yang berbeda:
// Pilih halaman tab $ ('#mytab a [href = "#profile"]'). Tab ('show') // Pilih tab Tab pertama $ ('#mytab A: pertama'). Tab ('show') // Pilih halaman tab terakhir $ ('#mytab a: last'). Tab ('show') // Pilih halaman tab ketiga ('#mytab a:' my '). a '). tab (' show ')(2) Efek pudar
Jika Anda perlu mengatur efek pudar untuk tab, tambahkan .Fade ke setiap .tab-pane. Tab pertama harus ditambahkan dengan kelas .in untuk memudar untuk menampilkan konten awal, seperti yang ditunjukkan pada contoh berikut:
<dv> <div id = "home"> ... </div> <div id = "svn"> ... </div> </div>
(3) Metode
. $ (). Tab: Metode ini mengaktifkan elemen tab dan kontainer konten. Halaman tab perlu menggunakan target data atau HREF yang menunjuk ke node kontainer di DOM.
<ul id = "mytab"> <li> <a href = "#identifikasi" data-koggle = "tab"> home </a> </li> ..... </ul> <dv> <div id = "home"> ... </div> .... </div> <ript> $ (function () {$ ('#mytab a: last').(4) Acara
Tabel berikut mencantumkan peristiwa yang akan digunakan di plugin tab (tab). Acara ini dapat digunakan sebagai pengait dalam fungsi.
6. Bootstrap Prompt Tool (ToolTip) Plugin
Tooltip sangat berguna saat Anda ingin menggambarkan tautan. Plugin Tooltip terinspirasi oleh jQuery.tipsy yang ditulis oleh Jason Frame. Plug-in Tooltip telah membuat banyak perbaikan, seperti tidak mengandalkan gambar, tetapi menggunakan CSS untuk mencapai efek animasi dan menggunakan atribut data untuk menyimpan informasi judul.
(1) Penggunaan
Plug-in Tooltip menghasilkan konten dan tag berdasarkan kebutuhan. Secara default, tooltip ditempatkan di belakang elemen pemicu mereka. Ada dua cara Anda dapat menambahkan alat prompt (tooltip):
A. Melalui atribut data: Jika Anda perlu menambahkan alat prompt (tooltip), cukup tambahkan data-kilat = "tooltip" ke tag jangkar. Judul jangkar adalah teks alat prompt (tooltip). Secara default, plug-in mengatur tooltip di bagian atas.
<a href = "#" data-koggle = "tooltip" title = "example tooltip"> Harap kurangi </a> saya
A. Melalui JavaScript: Trigger The Prompt Tool (ToolTip) melalui JavaScript: $ ('#Identifier'). Tooltip (Opsi)
Plugin Tooltip tidak seperti menu drop-down dan plug-in lainnya yang dibahas sebelumnya, ini bukan plug-in CSS murni. Untuk menggunakan plugin, Anda harus mengaktifkannya menggunakan jQuery (baca JavaScript). Gunakan skrip berikut untuk mengaktifkan semua alat prompt (tooltips) di halaman:
$ (function () {$ ("[data-koggle = 'tooltip']"). tooltip ();});
<a href = "#" data-koggle = "tooltip" data-placement = "left"> tooltip di sebelah kiri </a>. <a href="#" data-toggle="tooltip" data-placement="top"> Tooltip on the top</a>.<button type="button"data-toggle="tooltip" data-placement="bottom"title="Tooltip"> Tooltip on the bottom</button>
(2) Opsi
Ada beberapa opsi yang ditambahkan melalui bootstrap data API (Bootstrap Data API) atau dipanggil melalui JavaScript. Tabel berikut mencantumkan opsi ini:
(3) Metode
Berikut adalah beberapa metode yang berguna dalam plug-in Tooltip:
(4) Acara
Tabel berikut mencantumkan peristiwa yang akan digunakan dalam plug-in tooltip. Acara ini dapat digunakan sebagai pengait dalam fungsi.
7. Bootstrap Popover Plug-in
Popover mirip dengan tooltip, memberikan tampilan yang diperluas. Untuk mengaktifkan kotak pop-up, pengguna hanya perlu melayang di atas elemen. Isi kotak pop-up dapat sepenuhnya diisi menggunakan data Bootstrap API (Bootstrap Data API). Metode ini bergantung pada tooltips. Jika Anda ingin merujuk fungsionalitas plugin secara terpisah, maka Anda perlu referensi Popover.js, yang bergantung pada plugin Tooltip.
(1) Penggunaan
Plugin Popover menghasilkan konten dan tag berdasarkan kebutuhan. Secara default, popover ditempatkan di belakang elemen pemicu mereka. Anda dapat menambahkan popover dengan dua cara:
A. Melalui atribut data: Jika Anda ingin menambahkan popover, cukup tambahkan data-kilat = "Popover" ke label jangkar/tombol. Judul jangkar adalah teks Popover. Secara default, plugin mengatur popover di bagian atas.
<a href = "#" data-kilat = "popover" title = "contoh popover">
Tolong arahkan ke atas saya
</a>
B. Melalui JavaScript: Aktifkan Popover (Popover) Melalui JavaScript: $ ('#Identifier'). Popover (Opsi)
Plugin Popover tidak seperti menu drop-down dan plug-in lainnya yang dibahas sebelumnya, ini bukan plug-in CSS murni. Untuk menggunakan plugin, Anda harus mengaktifkannya menggunakan jQuery (baca JavaScript). Gunakan skrip berikut untuk mengaktifkan semua popover di halaman:
$ (function () {$ ("[Data-koggle = 'Popover']"). Popover ();});
<type type = "tombol"
Data-container = "body"-data-koggle = "popover" data-penempatan = "kiri" data-content = "Beberapa konten di popover di sebelah kiri" > Popover di sebelah kiri
</tombol>
(2) Opsi
Ada beberapa opsi yang ditambahkan melalui bootstrap data API (Bootstrap Data API) atau dipanggil melalui JavaScript. Tabel berikut mencantumkan opsi ini:
(3) Metode
Berikut adalah beberapa metode yang berguna di plugin popover:
(4) Acara
Tabel berikut mencantumkan acara yang akan digunakan dalam plug-in pop-up (Popover). Acara ini dapat digunakan sebagai pengait dalam fungsi.
8. Plug-in Kotak Peringatan Bootstrap (Peringatan)
Pesan peringatan sebagian besar digunakan untuk menginginkan pengguna akhir untuk menampilkan informasi seperti pesan peringatan atau konfirmasi. Menggunakan plugin peringatan, Anda dapat menambahkan fitur yang dapat dibatalkan ke semua pesan kotak peringatan.
(1) Penggunaan
Anda dapat mengaktifkan fungsi pemecatan kotak peringatan dengan dua cara berikut:
A. Melalui Atribut Data: Tambahkan fungsi yang dapat dibatalkan melalui API Data (API Data). Cukup tambahkan data-dismiss = "waspada" ke tombol tutup, dan fungsi penutupan akan secara otomatis ditambahkan ke kotak peringatan.
<a data-dismiss = "waspada" href = "#" aria-hidden = "true">
×
</a>
B. Melalui JavaScript: Tambahkan fungsi yang dibatalkan melalui JavaScript: $ (". Peringatan"). Peringatan ()
<div> <a href = "#" data-dismiss = "alert"> × </a> <strong> peringatan! </strong> Koneksi jaringan Anda memiliki masalah. </div>
(2) Metode
Berikut adalah beberapa metode yang berguna di plugin peringatan:
(3) Acara
Tabel berikut mencantumkan peristiwa yang akan digunakan di plug-in peringatan. Acara ini dapat digunakan sebagai pengait dalam fungsi.
9. Plugin Tombol Bootstrap
Dengan plugin tombol, Anda dapat menambahkan beberapa interaksi, seperti mengendalikan status tombol, atau membuat grup tombol untuk komponen lain seperti toolbar.
(1) Status pemuatan
Untuk menambahkan status pemuatan ke tombol, cukup tambahkan data-loading-text = "memuat ..." ke elemen tombol sebagai atributnya.
<tombol id = "fat-btn" data-loading-text = "memuat ..." type = "Tombol"> Status memuat </button> <script> $ (function () {$ (".(2) sakelar tunggal
Untuk mengaktifkan sakelar tombol tunggal (mis., Untuk mengubah keadaan normal tombol ke status pers, dan sebaliknya), cukup tambahkan data-kilat = "tombol" ke elemen tombol sebagai atributnya.
<tombol type = "Tombol" data-soggle = "tombol"> sakelar tunggal </button>
(3) Kotak centang
Anda dapat membuat grup kotak centang dan menambahkan sakelar ke grup kotak centang dengan menambahkan atribut data data-kilat = "tombol" ke kelompok BTN.
<DivData-koggle = "Tombol"> <label> <input type = "checkbox"> opsi 1 </label> <label> <input type = "centang kotak"> opsi 3 </label> </div>
(4) Tombol Radio (Radio)
Demikian pula, Anda dapat membuat grup tombol radio dan menambahkan sakelar untuk grup tombol radio dengan menambahkan atribut data data-kilat = "tombol" ke btn-group.
(5) Metode
Berikut adalah beberapa metode yang berguna dalam plugin tombol:
10. Bootstrap Collapse Plug-in
Plugin Collapse memudahkan untuk melipat area halaman. Apakah Anda menggunakannya untuk membuat navigasi yang runtuh atau panel konten, itu memungkinkan banyak opsi konten.
(1) Buat panel pengelompokan atau lipat yang dapat dilipat, seperti yang ditunjukkan di bawah ini:
<Div ID = "Accordion"> <div> <div> <h4> <a data-koggle = "collapse" data-parent = "#Accordion" href = "#collapsone"> klik saya untuk memperluas, klik saya untuk runtuh lagi. Bagian 1 </a> </h4> </div> <div id = "collapsone"> <viv> nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea proident. AD Vegan Excleur Butcher Vice Lomo. </div> </div> </div> </div>
A. data-kilat = "runtuh" Tambahkan ke tautan komponen yang ingin Anda kembangkan atau runtuh.
Properti B, HREF atau target data ditambahkan ke komponen induk, dan nilainya adalah ID komponen anak.
C. Properti orang tua-orang tua menambahkan ID panel yang dilipat ke tautan komponen yang akan diperluas atau dikubur.
(2) Buat komponen yang dapat dilipat sederhana tanpa tag akordeon, seperti yang ditunjukkan di bawah ini:
<typon type = "tombol" data-koggle = "collapse" data-target = "#demo"> komponen lipat sederhana </buton> <div id = "demo"> nihil anim keffiyeh helvetica, kerajinan bir wes anderson cred nesciunt sapiente ea procident. AD Vegan Excleur Butcher Vice Lomo. </Div>
(3) Penggunaan
Tabel berikut mencantumkan plug-in collapse untuk menangani penskalaan berat:
Anda dapat menggunakan plugin Collapse dengan dua cara:
A. Melalui atribut data: Tambahkan data-kilat = "collapse" dan target data ke elemen untuk secara otomatis menetapkan kontrol ke elemen yang dapat dilipat. Properti target data menerima pemilih CSS dan menerapkan efek keruntuhan untuk itu. Pastikan untuk menambahkan kelas .collapse ke elemen yang dapat dilipat. Jika Anda menginginkannya secara default, tambahkan kelas tambahan .in.
Untuk menambahkan manajemen pengelompokan seperti panel yang dilipat ke kontrol yang dapat dilipat, tambahkan data properti data-parent = "#pemilih".
B. Melalui JavaScript: Metode keruntuhan dapat diaktifkan melalui JavaScript, seperti yang ditunjukkan di bawah ini: $ ('. Collapse'). Collapse ()
11. Bootstrap Carousel Plugin
Bootstrap Carousel Plug-in adalah cara yang fleksibel dan responsif untuk menambahkan slider ke situs. Selain itu, kontennya cukup fleksibel untuk menjadi gambar, bingkai tertanam, video, atau jenis konten lain yang ingin Anda tempatkan.
<div id = "mycarousel"> <!-indikator carousel-> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <Li data-target = "#mycarousel" slide-t = "1"> </Li Data-target = "#li-to" <!-Proyek Carousel-> <div> <img src = "/wp-content/unggah/2014/07/slide1.png"> <verv> Judul 1 </Div> </Div> <v div> <img src = "/wp-content/unggah/2014/07/slide2.png"> </WP-Content/Uploads/2014/07/Slide2.png "> </Wp-Content/Uploads/2014/07/Slide2.png"> src = "/wp-content/unggah/2014/07/slide3.png"> <div> Judul 3 </div> </div> </div> <!-navigasi carousel-> <a href = "#mycarousel" data-slide = "prev"> ‹</a> <a href = "#mycarel"#"" prev "> ‹</a> <a href ="#mycarel "#" "#" "DATEDE"> "" DATERED "#"
(1) Penggunaan
A. Melalui atribut data: Menggunakan atribut data, mudah untuk mengontrol posisi carousel.
Slide data properti menerima kata kunci sebelumnya atau di sebelah mengubah posisi slide relatif terhadap posisi saat ini.
Gunakan data-slide-ke untuk indeks geser mentah ke bagian bawah tempat tidur korsel. Data-slide-to = "2" akan memindahkan slider ke indeks tertentu, dan indeks menghitung dari 0.
Properti Data-Ride = "Carousel" digunakan untuk menandai carousel yang memulai pemutaran animasi saat halaman dimuat.
B. Melalui JavaScript: Carousel dapat disebut secara manual melalui JavaScript, seperti yang ditunjukkan di bawah ini: $ ('. Carousel'). Carousel ()
(2) Opsi
Ada beberapa opsi yang dilewatkan melalui properti data atau JavaScript. Tabel berikut mencantumkan opsi ini:
(3) Metode
Berikut adalah beberapa metode yang berguna dalam plug-in carousel:
(4) Acara
Tabel berikut mencantumkan peristiwa yang akan digunakan di plug-in Carousel. Acara ini dapat digunakan sebagai pengait dalam fungsi.
12. Bootstrap Navigasi Tambahan (Affix) Plug-in
Plugin Navigasi Tambahan (Affix) memungkinkan <viv> untuk disematkan di suatu tempat di halaman. Anda juga dapat beralih antara menyalakan atau mematikan menggunakan plugin. Contoh umum adalah ikon sosial. Mereka akan mulai di suatu tempat, tetapi ketika halaman mengklik pada tanda, <div> akan mengunci di suatu tempat dan tidak akan menggulir bersama dengan sisa halaman.
(1) Penggunaan
Anda dapat menggunakan plug-in Navigasi (Affix) terlampir melalui properti data atau melalui JavaScript.
Melalui Atribut Data: Jika Anda perlu menambahkan perilaku navigasi tambahan (imbuhan) ke elemen, Anda hanya perlu menambahkan data-spy = "imbuhan" ke elemen yang perlu Anda dengarkan. Gunakan offset untuk menentukan kapan penguncian dan pergerakan elemen.
(2) Melalui JavaScript: Anda dapat secara manual menambahkan navigasi tambahan (imbuhan) ke elemen melalui JavaScript, seperti yang ditunjukkan di bawah ini:
$ ('#myaffix'). Affix ({offset: {Top: 100, Bottom: function () {return (this.bottom = $ ('.(3) Posisikan melalui CSS
Dalam kedua cara di atas untuk menggunakan plug-in imbuhan, Anda harus menemukan konten melalui CSS. Plug-in Navigasi Tambahan (Affix) beralih antara tiga kelas, yang masing-masing menyajikan keadaan tertentu: .Affix, .Affix-Top, dan .Affix-Bottom. Harap ikuti langkah -langkah di bawah ini untuk mengatur CSS Anda sendiri untuk ketiga negara bagian ini (tidak mengandalkan plugin ini).
A. Pada awalnya, plug-in menambahkan .Affix-top untuk menunjukkan elemen pada posisi paling atas. Tidak diperlukan penentuan posisi CSS saat ini.
B. Saat menggulir elemen yang menambahkan navigasi tambahan (imbuhan) harus dipicu. Saat ini, .Affix akan menggantikan .Affix-Top, dan mengatur posisi: diperbaiki; (Disediakan oleh kode CSS Bootstrap).
C. Jika offset bawah didefinisikan, ketika gulungan mencapai posisi ini, ganti .Affix dengan .Affix-bottom. Karena offset adalah opsional, jika offset diatur, CSS yang sesuai harus diatur pada saat yang sama. Dalam hal ini, tambahkan posisi: absolut; jika perlu.
(4) Opsi
Ada beberapa opsi yang dilewatkan melalui properti data atau JavaScript. Tabel berikut mencantumkan opsi ini:
Artikel ini telah dikompilasi ke dalam "Tutorial Penggunaan Plugin Bootstrap", dan semua orang dipersilakan untuk belajar dan membaca.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.