Hari 12: Daftar Bootstrap 4
Halo dan selamat datang di hari ke -11 Bootstrap 4 😎 Hari ini kita akan belajar tentang opsi navigasi Bootstrap 4. Harus mengatur daftar tautan adalah situasi yang sangat umum dan mengetahui cara membuat Bootstrap 4 NAV akan membantu Anda menyelesaikannya.
Ada beberapa opsi yang dapat Anda pilih: Navs Basic, tab Nav, dan pil NAV. Kami akan memeriksa setiap opsi dan menjelaskan cara menggunakannya, bersama dengan contoh. Kami juga akan mulai melihat lebih banyak Opsi JavaScript yang disediakan Bootstrap 4. Kedengarannya menyenangkan? Mari belajar menavigasi!
Kredit foto ke Daryl Beaney untuk bidikannya.
Artikel ini disusun menjadi bagian -bagian berikut:
Bootstrap 4 Contoh Dasar Navigasi
Saat Anda mengatur menu navigasi di dalam halaman Anda, ada beberapa opsi yang dapat Anda pilih. Yang pertama dan yang paling sederhana adalah memiliki daftar tautan yang mengarah ke berbagai bagian halaman Anda atau halaman lain.
Wadah dasar untuk tautan harus memiliki .nav kelas. Anda perlu menggunakannya bersama dengan .nav-link kelas diterapkan pada tautan, dan .nav-item Kelas diterapkan pada wadah tautan. Elemen dengan .nav kelas bertindak sebagai wadah bootstrap 4 flex dan menggunakan .nav-itemS Anda akan yakin elemen -elemen itu selaras seperti yang diharapkan.
Menggunakan kelas Bootstrap 4, alih -alih tautan yang biasa menawarkan beberapa titik positif: ia menambahkan padding ke tautan – untuk area hit yang lebih besar, ia menawarkan gaya yang dinonaktifkan dan utilitas fleksibel.
Berikut adalah contoh dasar dari daftar tautan menggunakan .nav kelas:
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Falcon</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Parrot</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Owl</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Stork</a>
</li>
</ul>
Catatan: Saya terutama akan menggunakan spesies burung dan deskripsi dalam contoh berikutnya. Ada begitu banyak spesies yang dapat saya pilih dengan mudah sehingga mereka tampak cocok 🙂
Navigasi dengan utilitas fleksibel
Sejak .nav Elemen adalah wadah fleksibel, Anda dapat menggunakan kelas Bootstrap 4 Flex untuk menyelaraskan elemen di dalamnya. Perilaku default adalah agar elemen ditempatkan pada baris, mulai dari kiri.
Tetapi Anda juga dapat menumpuknya secara vertikal dengan .flex-column kelas:
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Vulture</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hawk</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cuckoo</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Woodpecker</a>
</li>
</ul>
Dan Anda dapat menyelaraskan mereka pada sumbu pertama mereka dengan .justify-content-[position] kelas. Berikut adalah contoh dengan tautan yang ditarik ke kanan dengan .justify-content-end kelas:
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Kingfisher</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hornbill</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cormorant</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Penguin</a>
</li>
</ul>
Dan inilah contoh dengan tautan yang berpusat dengan .justify-content-center kelas:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Flamingo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Albatross</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pigeon</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Crane</a>
</li>
</ul>
Untuk melihat lebih banyak kemampuan fleksibel, Anda dapat kembali ke Tutorial Bootstrap 4 Flex dan menyegarkan ingatan Anda.
Opsi lain untuk navigasi adalah menampilkan dan menyembunyikan konten tergantung pada tautan yang Anda pilih. Juga dikenal sebagai daerah Tabbable, Anda dapat dengan mudah menyelesaikannya dengan plugin JavaScript Tab Bootstrap 4. Plugin termasuk dalam file bootstrap.js. Anda perlu memastikan bahwa Anda sudah memasukkannya. Anda dapat memeriksa Hari 1: Bootstrap 4 CDN dan Template Starter tentang instruksi tentang cara melakukan ini.
Ada dua opsi untuk membuat konten Tabbable: tab navigasi dan pil navigasi. Kami akan membawanya satu per satu.
Bootstrap 4 Tab Navigasi
Tab adalah satu set tautan dengan antarmuka tab. Untuk menggunakannya, Anda juga perlu menambahkan .nav-tabs kelas bersama dengan .nav kelas. Inilah hasilnya:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Duck</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kiwi</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Emu</a>
</li>
</ul>
Perilaku javascript
Untuk menambahkan panel dengan konten, kami membutuhkan tempat mereka dalam wadah dengan kelas .tab-content dan berikan setiap panel .tab-pane kelas. Secara default, visibilitas mereka disembunyikan. Untuk menampilkan salah satu tab, Anda perlu menambahkan kelas .active untuk itu. Harus ada korelasi antara tautan yang aktif di .nav-tabs daftar dan tab yang aktif di .tab-content.
Dalam contoh kami, kami akan ingin menampilkan deskripsi untuk bebek, karena tautan bebek aktif:
<ul class="nav nav-tabs"> ... </ul> <div class="tab-content mt-3"> <div class="tab-pane active" id="duck" role="tabpanel" aria-labelledby="duck-tab">...</div> <div class="tab-pane" id="chicken" role="tabpanel" aria-labelledby="chicken-tab">...</div> <div class="tab-pane" id="kiwi" role="tabpanel" aria-labelledby="kiwi-tab">...</div> <div class="tab-pane" id="emu" role="tabpanel" aria-labelledby="emu-tab">...</div> </div>
Langkah selanjutnya adalah mengikat semua tautan di .nav-tabs ke panel di .tab-content. Perilaku yang kami inginkan adalah bahwa ketika tautan ditekan, panel saat ini disembunyikan dan tab dengan informasi yang terkait dengannya ditampilkan. Kami melakukan ini dalam dua cara: menggunakan atribut data atau melalui panggilan JavaScript. Kami akan memiliki contoh dengan keduanya.
Menggunakan atribut data
Anda dapat membuat tautan di .nav-tabs Toggle panel tanpa menulis sendiri JavaScript. Anda perlu menambahkan atribut data data-toggle=”tab” ke tautan dan memberi tahu setiap tautan apa yang harus ditampilkan melalui jangkar.
Kami akan melakukan ini dengan contoh di atas:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#duck" role="tab" aria-controls="duck" aria-selected="true">Duck</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#chicken" role="tab" aria-controls="chicken" aria-selected="false">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kiwi" role="tab" aria-controls="kiwi" aria-selected="false">Kiwi</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#emu" role="tab" aria-controls="emu" aria-selected="false">Emu</a>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane active" id="duck" role="tabpanel" aria-labelledby="duck-tab">
...
</div>
<div class="tab-pane" id="chicken" role="tabpanel" aria-labelledby="chicken-tab">
...
</div>
<div class="tab-pane" id="kiwi" role="tabpanel" aria-labelledby="kiwi-tab">
...
</div>
<div class="tab-pane" id="emu" role="tabpanel" aria-labelledby="emu-tab">
...
</div>
</div>
Menggunakan panggilan JavaScript
Cara lain untuk membuat panel yang tepat muncul ketika tautan untuk itu ditekan adalah dengan menggunakan JavaScript. Ini berarti Anda tidak akan membutuhkan data-toggle="tab" atribut lagi. Tetapi Anda harus menjaga jangkar ke panel yang sesuai.
//html
<ul class="nav nav-tabs" id="birds" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#duck" role="tab" aria-controls="duck" aria-selected="true">Duck</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#chicken" role="tab" aria-controls="chicken" aria-selected="false">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#kiwi" role="tab" aria-controls="kiwi" aria-selected="false">Kiwi</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#emu" role="tab" aria-controls="emu" aria-selected="false">Emu</a>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane active" id="duck" role="tabpanel" aria-labelledby="duck-tab">
...
</div>
<div class="tab-pane" id="chicken" role="tabpanel" aria-labelledby="chicken-tab">
...
</div>
<div class="tab-pane" id="kiwi" role="tabpanel" aria-labelledby="kiwi-tab">
...
</div>
<div class="tab-pane" id="emu" role="tabpanel" aria-labelledby="emu-tab">
...
</div>
</div>
//js
$('#birds a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})
Jika kasus penggunaan Anda untuk tab adalah apa yang kami ilustrasikan sebelumnya, maka menggunakan atribut data lebih mudah dan saya akan merekomendasikannya. Tetapi jika Anda menginginkan acara lain yang terjadi di Tab Show, maka lebih baik menggunakan metode JavaScript karena menawarkan lebih banyak kemungkinan. Kami akan menjelaskannya di bagian Bootstrap 4 Navigation Advanced JavaScript Perilaku.
Isi dan justifikasi
Ada 2 kelas untuk menata tab navigasi Bootstrap 4 yang dapat membantu Anda. Jika Anda menginginkan tab di .nav-tabs Untuk mengeluarkan seluruh lebar orang tuanya, Anda dapat menggunakan .nav-fill Kelas dan ruang akan dibagi antara tab sesuai dengan lebarnya.
<ul class="nav nav-tabs nav-fill" role="tablist">
...
</ul>
<div class="tab-content">
...
</div>
Atau Anda dapat menggunakan .nav-justified Kelas Jika Anda ingin setiap tab memiliki lebar yang sama.
<ul class="nav nav-tabs nav-justified" role="tablist">
...
</ul>
<div class="tab-content">
...
</div>
Utilitas fleksibel
Anda bisa mendapatkan perilaku yang dijelaskan di atas dengan menggunakan .flex-fill dan dan .flex-grow Kelas yang kami pelajari di tutorial Bootstrap 4 Flex.
Sejak .nav adalah wadah Flexbox, Anda dapat menggunakan salah satu utilitas Flex Bootstrap 4 dan breakpoint responsif. Ini akan memberi Anda lebih banyak kekuatan atas bagaimana barang -barang itu selaras. Berikut adalah contoh tab yang ditarik ke kanan:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#duck" role="tab" aria-controls="duck" aria-selected="true">Duck</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#chicken" role="tab" aria-controls="chicken" aria-selected="false">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kiwi" role="tab" aria-controls="kiwi" aria-selected="false">Kiwi</a>
</li>
<li class="nav-item ml-auto">
<a class="nav-link disabled" data-toggle="tab" href="#emu" role="tab" aria-controls="emu" aria-selected="false">Emu</a>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane active" id="duck" role="tabpanel" aria-labelledby="duck-tab">
...
</div>
<div class="tab-pane" id="chicken" role="tabpanel" aria-labelledby="chicken-tab">
...
</div>
<div class="tab-pane" id="kiwi" role="tabpanel" aria-labelledby="kiwi-tab">
...
</div>
<div class="tab-pane" id="emu" role="tabpanel" aria-labelledby="emu-tab">
...
</div>
</div>
Bootstrap 4 pil navigasi
Untuk mengubah gaya navigasi menjadi pil, Anda perlu menggunakan .nav-pills kelas:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Flamingo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cuckoo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ostrich</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Tropicbird</a>
</li>
</ul>
Sama seperti dengan tab, Anda harus memiliki konten panel yang beralih di dalam a .tab-content induk. Dan setiap panel akan membutuhkan .tab-panel kelas, menggunakannya juga memiliki .active Kelas jadi ditampilkan:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Flamingo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cuckoo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ostrich</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Tropicbird</a>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane active" id="flamingo" role="tabpanel" aria-labelledby="flamingo-tab">
...
</div>
<div class="tab-pane" id="cuckoo" role="tabpanel" aria-labelledby="profile-tab">
...
</div>
<div class="tab-pane" id="ostrich" role="tabpanel" aria-labelledby="ostrich-tab">
...
</div>
<div class="tab-pane" id="tropicbird" role="tabpanel" aria-labelledby="tropicbird-tab">
...
</div>
</div>
Perilaku javascript
Untuk beralih panel saat Anda menekan pil, Anda memiliki dua opsi. Anda dapat menggunakan atribut data atau panggilan JavaScript. Mereka adalah yang sama yang terdaftar untuk tab NAV.
Menggunakan atribut data
Anda dapat menggunakan atribut data dan dengan menambahkan data-toggle="pill" di setiap tautan di bilah navigasi dan jangkar ke panelnya:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#flamingo" role="tab" aria-controls="pills-flamingo" aria-selected="true">Flamingo</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#cuckoo" role="tab" aria-controls="pills-cuckoo" aria-selected="false">Cuckoo</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#ostrich" role="tab" aria-controls="pills-ostrich" aria-selected="false">Ostrich</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="pill" href="#tropicbird" role="tab" aria-controls="pills-tropicbird" aria-selected="false">Tropicbird</a>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane active" id="flamingo" role="tabpanel" aria-labelledby="flamingo-tab">
...
</div>
<div class="tab-pane" id="cuckoo" role="tabpanel" aria-labelledby="profile-tab">
...
</div>
<div class="tab-pane" id="ostrich" role="tabpanel" aria-labelledby="ostrich-tab">
...
</div>
<div class="tab-pane" id="tropicbird" role="tabpanel" aria-labelledby="tropicbird-tab">
...
</div>
</div>
Menggunakan panggilan JavaScript
Atau Anda dapat menggunakan fungsi JavaScript yang memanggil .tab('show') Fungsi setiap kali tautan ditekan:
//html
<ul class="nav nav-pills" id="birds">
<li class="nav-item">
<a class="nav-link active" href="#flamingo" role="tab" aria-controls="pills-flamingo" aria-selected="true">Flamingo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cuckoo" role="tab" aria-controls="pills-cuckoo" aria-selected="false">Cuckoo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ostrich" role="tab" aria-controls="pills-ostrich" aria-selected="false">Ostrich</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#tropicbird" role="tab" aria-controls="pills-tropicbird" aria-selected="false">Tropicbird</a>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane active" id="flamingo" role="tabpanel" aria-labelledby="flamingo-tab">
...
</div>
<div class="tab-pane" id="cuckoo" role="tabpanel" aria-labelledby="profile-tab">
...
</div>
<div class="tab-pane" id="ostrich" role="tabpanel" aria-labelledby="ostrich-tab">
...
</div>
<div class="tab-pane" id="tropicbird" role="tabpanel" aria-labelledby="tropicbird-tab">
...
</div>
</div>
//js
$('#birds a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})
Isi dan justifikasi
Sama seperti tab NAV, Anda dapat menggunakan .nav-fill Dan .nav-justify Kelas Jika Anda ingin daftar pil untuk mengambil seluruh lebar orang tua mereka.
Inilah cara .nav-fill terlihat:
<ul class="nav nav-pills nav-fill">
...
</ul>
<div class="tab-content mt-3">
...
</div>
Dan inilah cara .nav-justified terlihat:
<ul class="nav nav-pills nav-justified">
...
</ul>
<div class="tab-content mt-3">
...
</div>
Utilitas fleksibel
Dan sejak .nav adalah wadah Bootstrap 4 Flex, Anda dapat memanfaatkan beberapa kelas yang ditawarkannya. Kami telah membuat contoh yang menunjukkan bagaimana Anda dapat menempatkan pil secara vertikal di ponsel dan secara horizontal pada perangkat yang dimulai dengan tablet.
<ul class="nav nav-pills flex-column flex-md-row text-center">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#flamingo" role="tab" aria-controls="pills-flamingo" aria-selected="true">Flamingo</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#cuckoo" role="tab" aria-controls="pills-cuckoo" aria-selected="false">Cuckoo</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#ostrich" role="tab" aria-controls="pills-ostrich" aria-selected="false">Ostrich</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="pill" href="#tropicbird" role="tab" aria-controls="pills-tropicbird" aria-selected="false">Tropicbird</a>
</li>
</ul>
<div class="tab-content mt-3">
...
</div>
Perilaku JavaScript Lanjutan
Efek pudar
Anda dapat membuat panel memudar saat muncul jika Anda menambahkan .fade kelas untuk masing -masing .tab-pane. Yang aktif pada beban halaman juga akan membutuhkan .show kelas agar terlihat.
<ul class="nav nav-pills">
...
</ul>
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="flamingo" role="tabpanel" aria-labelledby="flamingo-tab">
...
</div>
<div class="tab-pane fade" id="cuckoo" role="tabpanel" aria-labelledby="profile-tab">
...
</div>
<div class="tab-pane fade" id="ostrich" role="tabpanel" aria-labelledby="ostrich-tab">
...
</div>
<div class="tab-pane fade" id="tropicbird" role="tabpanel" aria-labelledby="tropicbird-tab">
...
</div>
</div>
Metode
.tab (‘show’)
Saat Anda memanggil .tab('show') metode untuk tautan di .nav Tautan akan menjadi aktif dan panel untuk itu akan terlihat. Dalam contoh di atas kami memanggil .tab('show') pada acara klik untuk setiap tautan di .nav (Itu adalah perilaku standar). Tapi kita juga bisa memanggil metode dalam fungsi lain. Misalnya, berikut adalah tombol yang membuka tab kedua di navbar saat diklik:
//html
<ul class="nav nav-pills" id="birds">
<li class="nav-item">
<a class="nav-link active" href="#flamingo" role="tab" aria-controls="pills-flamingo" aria-selected="true">Flamingo</a>
</li>
<li class="nav-item">
<a class="nav-link" id="cuckoo-pill" href="#cuckoo" role="tab" aria-controls="pills-cuckoo" aria-selected="false">Cuckoo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ostrich" role="tab" aria-controls="pills-ostrich" aria-selected="false">Ostrich</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#tropicbird" role="tab" aria-controls="pills-tropicbird" aria-selected="false">Tropicbird</a>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane active" id="flamingo" role="tabpanel" aria-labelledby="flamingo-tab">
...
</div>
<div class="tab-pane" id="cuckoo" role="tabpanel" aria-labelledby="profile-tab">
...
</div>
<div class="tab-pane" id="ostrich" role="tabpanel" aria-labelledby="ostrich-tab">
...
</div>
<div class="tab-pane" id="tropicbird" role="tabpanel" aria-labelledby="tropicbird-tab">
...
</div>
</div>
<button type="button" class="btn btn-success btn-sm mt-3" id="show-cuckoo">Show cuckoo</button>
//js
$('#birds a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
})
$('#show-cuckoo').on('click', function () {
$('#cuckoo-pill').tab('show');
})
Acara
Saat mengubah tab, ada serangkaian acara yang terjadi. Kami akan mengambil setiap peristiwa dan menggambarkan perilakunya dan urutan masuk.
| Memesan | Peristiwa | Target | Keterangan |
| 1 | hide.bs.tab |
tab aktif saat ini | Acara ini menyala ketika tab baru akan ditampilkan (dan dengan demikian tab aktif sebelumnya harus disembunyikan). Menggunakan event.targetDan event.relatedTargetUntuk menargetkan tab aktif saat ini dan tab baru yang akan segera aktif. |
| 2 | show.bs.tab |
Tab yang akan dikeringkan | Acara ini menyala pada acara tab, tetapi sebelum tab baru telah ditampilkan. Menggunakan event.targetDan event.relatedTargetuntuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing -masing. |
| 3 | hidden.bs.tab |
Pada tab aktif sebelumnya, yang sama seperti untuk hide.bs.tabperistiwa |
Acara ini menyala setelah tab baru ditampilkan (dan dengan demikian tab aktif sebelumnya disembunyikan). Menggunakan event.targetDan event.relatedTargetuntuk menargetkan tab aktif sebelumnya dan tab aktif baru, masing -masing. |
| 4 | shown.bs.tab |
Pada tab yang baru saja diaktifkan, yang sama seperti untuk show.bs.tabperistiwa |
Acara ini menyala di Tab Show setelah tab ditampilkan. Menggunakan event.targetDan event.relatedTargetuntuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing -masing. |
Jika Anda tidak memiliki tab yang sudah aktif, maka hide.bs.tab Dan hidden.bs.tab Acara tidak akan dipicu.
Untuk melihat bagaimana Anda dapat menggunakan acara tersebut, kami telah membuat contoh yang memodifikasi warna pil NAV yang telah dikunjungi hingga biru muda. Saat acara yang ditampilkan dipicu, kami membuat target terkait (yang merupakan tab yang disembunyikan) dapatkan .light-blue Kelas yang memodifikasi warna latar belakang.
//html
<ul class="nav nav-pills">
...
</ul>
<div class="tab-content mt-3">
<div class="tab-pane active" id="flamingo" role="tabpanel" aria-labelledby="flamingo-tab">
...
</div>
<div class="tab-pane" id="cuckoo" role="tabpanel" aria-labelledby="profile-tab">
...
</div>
<div class="tab-pane" id="ostrich" role="tabpanel" aria-labelledby="ostrich-tab">
...
</div>
<div class="tab-pane" id="tropicbird" role="tabpanel" aria-labelledby="tropicbird-tab">
...
</div>
</div>
//js
$('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
$(e.target).removeClass( "light-blue" );
$(e.relatedTarget).addClass( "light-blue" );
})
Itu saja untuk hari ini! Anda dapat melihat dan mengedit semua kode yang digunakan dalam artikel ini tentang Codepen. Beri tahu saya jika Anda mengalami kesulitan saat mencoba membuat navigasi Anda. Semoga malam Anda menyenangkan dan pastikan untuk merayakan kemajuan Anda!
Kredit foto untuk Kyle Letendre untuk bidikannya.
Bacaan lebih lanjut
Jika Anda memiliki lebih banyak waktu, berikut adalah beberapa sumber yang berguna:
Kredit foto ke Yuliya untuk bidikannya.
Hari 12: Daftar Bootstrap 4
Berbagi itu peduli!
News
Berita
News Flash
Blog
Technology
Sports
Sport
Football
Tips
Finance
Berita Terkini
Berita Terbaru
Berita Kekinian
News
Berita Terkini
Olahraga
Pasang Internet Myrepublic
Jasa Import China
Jasa Import Door to Door
Gaming center adalah sebuah tempat atau fasilitas yang menyediakan berbagai perangkat dan layanan untuk bermain video game, baik di PC, konsol, maupun mesin arcade. Gaming center ini bisa dikunjungi oleh siapa saja yang ingin bermain game secara individu atau bersama teman-teman. Beberapa gaming center juga sering digunakan sebagai lokasi turnamen game atau esports.
Comments are closed, but trackbacks and pingbacks are open.