Cara Membuat Scrollspy pada Bootstrap 4

Cara Membuat Scrollspy pada Bootstrap 4 – Hai ketemu lagi dengan saya. Setelah sebelumnya saya sudah membahas tentang Cara Membuat Corousel/Slider Image Responsive Menggunakan Bootstrap 4, sekarang saya akan membahas tentang scrollspy. Pernahkah sobat melihat template atau sebuah website yang biasanya One Page Website, saat kita scroll maka pada bagian navigasi menu akan aktif sesuai sectionnya. Itu yang akan saya bahas disini.

Karena untuk keperluan demo jadi saya mencontohkan menggunakan librari online, namun jika sobat ingin menggunakan untuk keperluan development tentunya sobat harus mendownloadnya terlebih dahulu atau sobat bisa mendownloadnya bersama dengan project ini diakhir postingan.

 

1. Navigasi diatas

Contoh penggunaannya adalah sebagai berikut :

Penjelasan :

Pada body kita perlu menambahkan kode dibawah

Dan pada href kita tuliskan seperti ini href=”#section1″ yang menandakan jika diklik skan menuju section dengan id=”section1″.

Tampilannya :

 

2. Navigasi disamping

Sebenarnya sama seperti contoh diatas namun kali ini kita akan menampilkan navigasinya di samping. Berikut adalah cara penggunaannya :

 

Tampilannya :

 

Sekian postingan saya tentang Cara Membuat Scrollspy pada Bootstrap 4. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah. Kunjungi juga postingan saya lainnya untuk menambah ilmu sobat.

 

Artikel Tentang Bootstrap Lainnya :

Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah

Macam-macam Form Input pada HTML dan Bootstrap

Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

Membuat Bootstrap Modal dan Animasinya pada PHP

Membuat Badges Menggunakan Bootstrap 4

Membuat Alert pada HTML menggunakan Bootstrap 4

Mengenal Bootstrap Typography pada HTML dan Bootstrap 4

Menggunakan Tooltip pada HTML dan Bootstrap 4

Membuat Nested Media Object pada Bootstrap 4

Membuat Navbar dengan Bootstrap 4 dengan Mudah

Membuat Border Menggunakan Bootstrap 4

Membuat Progress Bar dengan Bootstrap 4

Simple Pagination Pada Bootstrap 4

Cara Membuat Corousel/Slider Image Responsive Menggunakan Bootstrap 4

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

 

Leave a Reply

Your email address will not be published. Required fields are marked *

nineteen − 12 =