Bootstrap adalah framework front-end gratis yang dibuat oleh Twitter untuk mempermudah pengembangan website dan aplikasi web. Ini menyediakan koleksi CSS dan JavaScript pracetak yang dapat digunakan untuk membuat desain responsif, mobile-first, dan modern. Bootstrap memudahkan proses pengembangan dengan mempermudah penerapan gaya, mempercepat pengembangan halaman web, dan membuat tampilan visual yang konsisten antar halaman.
Mengganti tautan Bootstrap
Saat ini templat Blogger yang saya pakai menggunakan Bootstrap 4.6, supaya tampilan lebih baru dan penggunaannya lebih mudah, maka disini kita akan membahas bagaimana memperbarui ke Bootstrap yang lebih baru dimana saat ini sudah pada versi 5.3. Karena beberapa waktu yang lalu pembaruan Bootstrap pada v5.3.0-alpha1 terdapat fitur menarik menurut yaitu adanya color modes, yang mendukung mode terang dan gelap.
Sebelumnya sudah menggunakan Bootstrap pada template Blogger, berdasarkan dokumentasi dari Bootstrap untuk menginstalnya melalui CDN (Content Delivery Network), kita perlu menambahkan tautan CSS dan JavaScript Bootstrap ke halaman web kita. Dengan cara yang sama kita perlu mengganti dengan tautan yang baru:
-
Buka template atau file HTML dan ganti tautan CSS Bootstrap di bagian
<head>dengan yang baru: -
Pada skrip JavaScript Bootstrap di bagian footer sebelum tag
</body>, ganti dengan yang baru juga:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"/><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>Berbeda versi Bootstap berarti terdapat pembaruan pada komponen yang disediakan, olah karena itu akan terjadi perubahan juga pada template yang kita gunakan menggunakan framework Bootstrap 4 ke Bootstrap 5.
Merubah Navbar
Sebelumnya menggunakan Navbar Bootstrap 4, perubahan atribut yang ada data-toggle menjadi data-bs-toggle pada bagian berikut ini:
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>Merubah Search Bar
Sebelumnya menggunakan search bar pada komponen Navbar yang dimodifikasi menggnunakan komponen Collapse, perubahan ada di komponen Collapse pada atribut data-toggle menjadi data-bs-toggle seperti berikut ini:
<a class="btn btn-outline-transparent text-secondary" style="box-shadow:none;" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
<i class="bi bi-search"></i>
</a>Merubah Post Index
Sebelumnya menggunakan Card columns Bootstrap 4 dengan layout tersusun Masonry dengan teknik CSS saja, perubahan disini menggunakan plugin karena Masonry tidak termasuk didalam Bootstrap
Kita bisa menggunakan komponen Bootstrap 5 pada halaman web kita, dengan beberapa perubahan agar fitur yang sudah ada tetap bisa seperti sebelumnya dan kedepannya bisa menggunakan fitur baru yang ada pada versi barunya.
Referensi:
Tidak ada komentar:
Posting Komentar
Terima kasih telah berkunjung dan membaca blog ini. Silahkan berikan saran dan pertanyaan di kolom komentar berikut ini.