Bootstrap adalah CSS framework yang digunakan untuk memudahkan pembuatan template web atau blog, karena kode CSS telah disediakan oleh Bootstrap sehingga tidak membuat kode CSS dari awal. Pada saat penulisan ini, Bootstrap telah merilis versi 5, namun yang telah saya gunakan disini menggunakan versi 4. Sesuaikan versi yang digunakan, karena pembaruan versi mempengaruhi cara penggunaannya jadi berbeda.
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.
Saat ini kita telah melakukan migrasi blog ini dengan memperbarui framework Bootstrap ke versi 5. Berikut ini adalah tautan mengganti Bootstrap 4 ke Bootstrap 5 pada template Blogger yang digunakan ini.
Fitur dan manfaat dari Bootstrap
Beberapa fitur dan manfaat utama dari Bootstrap meliputi:
- Desain Responsif: Bootstrap memungkinkan pengembang untuk dengan mudah membuat tampilan web yang responsif, yang berarti tampilan halaman akan menyesuaikan dengan ukuran layar pengguna, sehingga dapat digunakan dengan baik baik di perangkat desktop maupun ponsel.
- Kumpulan Komponen UI: Bootstrap menyertakan beragam komponen UI seperti tombol, formulir, jumbotron, navigasi, kartu, dan banyak lagi. Semua ini dapat digunakan dengan sedikit modifikasi, atau bahkan tanpa perlu penyesuaian, untuk mempercepat pengembangan web.
- Grid System: Bootstrap memiliki sistem grid yang kuat yang memudahkan penataan elemen-elemen pada halaman web. Ini berarti pengembang dapat dengan mudah mengatur elemen-elemen mereka ke dalam kolom dan baris yang sesuai.
- Kustomisasi: Anda dapat mengkustomisasi Bootstrap sesuai dengan kebutuhan Anda dengan mengubah variabel CSS atau memilih komponen tertentu untuk dimasukkan atau dihilangkan dari proyek Anda.
- Dukungan Browser: Bootstrap dirancang untuk berfungsi di berbagai browser, termasuk yang lebih tua. Ini memungkinkan pengembang untuk menciptakan pengalaman yang konsisten di seluruh platform.
- Dokumentasi yang Kuat: Bootstrap dilengkapi dengan dokumentasi yang komprehensif dan panduan penggunaan yang memudahkan pengembang untuk memahami cara menggunakannya.
Pasang tautan Bootstrap ke template
Karena web ini menggunakan Blogger, maka untuk memasang Bootstap melalui CDN (Content Delivery Network) dengan menggunakan jsDeliver. Caranya dengan salin kode stylesheet dibawah ini pada tag <head>.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
lalu untuk javascript diletakkan pada bagian akhir tag <body>.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>Menggunakan Bootstrap ke template
Untuk menggunakan komponen yang ada pada Bootstrap, kita bisa mengikuti dokumentasinya sesuai versi Bootstrap yang digunakan sebagai acuan. Dan juga perlu penyesuaian dengan tag pada template Blogger agar bisa digunakan bersama dengan Bootstrap. Sebaiknya perlu memahami beberapa hal berikut ini untuk membantu bagaimana menggunakannya:
- Pengetahuan dasar mengenai HTML, CSS, dan Javascript
- Konsep template dan struktur Blogger
- Framework Bootstrap
Kalian bisa mulai mempelajari template Blogger di blog ini, atau mengikuti perkembangan template ini pada posting modifikasi template blogger.
Penggunaan komponen pada Bootstrap akan dibagi menjadi beberapa bagian dan dibahas pada postingan terkait berikut ini:
- Navbar
- Search bar
- Jumbotron
- Card
- Carousel
- Card Columns
- Icons
- Breadcrumb
- Scrollspy
- Form
Navbar adalah elemen antarmuka yang digunakan untuk menavigasi atau menuju bagian-bagian utama dari situs web atau aplikasi, seperti halaman beranda, halaman produk, kontak, atau halaman lainnya. Ini adalah komponen penting dalam desain web yang membantu pengguna berpindah-pindah di situs dengan mudah.
Search bar adalah elemen antarmuka yang digunakan untuk memungkinkan pengguna mencari dan menemukan informasi atau konten tertentu di dalam situs web, aplikasi, atau sistem komputer.
Jumbotron adalah elemen antarmuka dalam desain web yang digunakan untuk menarik perhatian pengguna dan menyoroti konten utama atau pesan penting di halaman web.
Card adalah elemen antarmuka yang digunakan untuk menggambarkan dan menampilkan konten atau informasi dalam bentuk kotak persegi atau persegi panjang yang kecil.
Carousel adalah elemen antarmuka yang digunakan untuk menampilkan konten atau gambar secara berputar atau bergeser dalam suatu tata letak yang berulang.
Card columns adalah tata letak yang digunakan dalam desain web untuk mengatur sekelompok "cards" (kartu) dalam beberapa kolom sejajar di halaman.
Ikon adalah elemen grafis atau gambar kecil yang digunakan untuk merepresentasikan objek, konsep, atau tindakan secara visual.
Breadcrumb, dalam konteks desain web dan navigasi situs, adalah elemen antarmuka yang digunakan untuk menunjukkan jalur hierarki atau urutan halaman yang diikuti oleh pengguna untuk mencapai halaman yang sedang mereka lihat.
Scrollspy adalah fitur atau teknik dalam desain web yang memungkinkan elemen tampilan berubah atau "mengintip" (spy) saat pengguna menggulir (scroll) halaman.
Form adalah elemen antarmuka yang digunakan untuk mengumpulkan informasi dari pengguna melalui input berbagai jenis, seperti teks, angka, pilihan, atau pilihan ganda.
Bootstrap adalah alat yang populer di kalangan pengembang web karena kemampuannya mempercepat proses pengembangan dan memberikan tampilan yang konsisten dan menarik pada berbagai perangkat. Itulah beberapa penggunaan framework Bootstrap yang telah digunakan untuk membantu mengatur tampilan blog sesuai dengan keperluan dan keinginan, rapih atau tidaknya tampilan tergantung kita yang akan mengaturnya. Namun secara pekerjaan menjadi lebih mudah dan ringkas, dibandingkan membangun styles atau CSS sendiri. Untuk memahami lebih lanjut kalian bisa mempelajari dokumentasi dari Bootstrap 4.
Tidak ada komentar:
Posting Komentar
Terima kasih telah berkunjung dan membaca artikel ini. Silahkan berikan saran dan pertanyaan di kolom berikut ini.