Pada tahun 2011, Twitter memperkenalkan kerangka Bootstrap. Sejak itu, kerangka kerja CSS ini telah mengalami dua penulisan ulang utama, dengan yang terbaru (Bootstrap 3) dirilis pada tahun 2013. Bootstrap 3 mengubah library CSS dengan menerapkan pendekatan mobile-first yang membuat framework sepenuhnya responsif.
Pada 2022, Bootstrap berada di versi lima dan merupakan salah satu kerangka kerja frontend paling populer. Ini memiliki daftar lengkap komponen prebuilt dan koleksi plugin JavaScript yang mengesankan. Dalam artikel ini, Anda akan mempelajari cara menggunakan Bootstrap dan memanfaatkan fitur-fiturnya secara maksimal.
Memasang Bootstrap di Proyek Anda
Ada tiga cara untuk gunakan Bootstrap di proyek Anda. Anda dapat mengunduh dan menghosting file CSS dan JavaScript, menginstalnya di proyek Anda menggunakan npm, atau menyalin dan menempelkan tautan cdn yang sesuai di proyek Anda.
Dengan pendekatan cdn, Anda harus ingat untuk menempatkan tautan Bootstrap sebelum tautan CSS lainnya di tag kepala file HTML Anda.
Beberapa komponen Bootstrap memiliki aktivitas fungsional, seperti tombol toggling dan positioning yang memerlukan impor JavaScript dan skrip Popper. Jadi, jika Anda ingin menggunakan komponen fungsional apa pun, Anda juga perlu menambahkan tag skrip ke file HTML Anda.
Hal terakhir yang Anda perlukan untuk mulai menggunakan Bootstrap adalah area pandang menandai.
Karena Bootstrap adalah teknologi mobile-first, the area pandang menandai akan membantu dalam desain responsif. Cara sederhana untuk menggunakan bootstrap di proyek Anda adalah dengan menyalin Template starter bootstrap.
Membuat Website Dengan Bootstrap
Saat Anda membuat situs web baru, salah satu hal pertama yang perlu Anda pertimbangkan adalah tata letak. Setelah itu, Anda dapat pindah ke komponen lain seperti tombol dan tipografi.
Bootstrap memiliki kumpulan komponen struktural yang dapat Anda gunakan untuk mengatur elemen pada halaman web. Struktur tata letak ini meliputi:
- Wadah
- kisi-kisi
- kolom
- Talang
- Breakpoint
Menggunakan versi template starter Bootstrap yang sedikit diubah, Anda dapat mulai menguraikan struktur halaman web Anda dan menambahkan komponen baru.
File index.html
Tag meta yang diperlukanCSS bootstrap
Bootstrap
Pisahkan Popper dan Bootstrap JS
Kelas Kontainer Bootstrap
Bootstrap wadah class pads, berisi, dan menyelaraskan elemen di halaman web Anda. Jika Anda berencana untuk menggunakan Bootstrap kisi default, maka Anda juga harus menggunakan Bootstrap wadah kelas. Ada tiga jenis wadah kelas; wadah, wadah-cairan, dan wadah-{breakpoint}. Kelas kontainer adalah kontainer default; itu responsif dan memiliki lebar tetap di masing-masing dari enam breakpoint Bootstraps.
Enam breakpoint default Bootstrap meliputi:
- Ekstra kecil: Kurang dari 576 piksel.
- Kecil: Lebih besar dari atau sama dengan 576 piksel.
- Sedang: Lebih besar dari atau sama dengan 768 piksel.
- Besar: Lebih besar dari atau sama dengan 992px.
- X-Besar: Lebih besar dari atau sama dengan 1200px.
- XX-Besar: Lebih besar dari atau sama dengan 1400 piksel.
Untuk menggunakan Bootstrap wadah di proyek Anda, Anda cukup menambahkan kelas wadah yang diinginkan ke eksternal div di halaman web Anda.
Menggunakan Kontainer Bootstrap
tempatkan elemen situs web di sini Memasukkan kode di atas ke dalam badan file HTML yang ada akan membuat halaman web Anda responsif, dan juga akan membuat padding di setiap sisi halaman web Anda.
Sistem Grid Bootstrap
Kisi Bootstrap menggunakan sistem dua belas kolom yang bergantung pada baris dan col kelas grid, serta kelas kontainer. Setiap baris memiliki dua belas kolom, dan elemen apa pun dapat menjangkau satu atau lebih kolom ini. Kelas kolom akan menunjukkan berapa banyak kolom yang harus ditempati oleh suatu elemen. Misalnya, elemen menggunakan col-2 kelas akan menjangkau dua kolom, elemen menggunakan col-3 kelas akan menjangkau tiga kolom, dan seterusnya.
Sistem grid Bootstrap didasarkan pada modul flexbox. Jika hanya dua kolom yang menempati satu baris, mereka akan membagi ruang secara merata di antara mereka sendiri. Itu selokan class adalah salah satu elemen struktural Bootstrap, dan mengontrol jarak antara setiap kolom di sistem jaringan. Setiap kisi-kisi kolom memiliki bantalan 12px di kedua sisinya.
Menggunakan Sistem Grid Bootstrap
konten utama di halaman web
Artikel
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, differentio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
Memasukkan kode di atas ke dalam wadah div akan membuat sistem grid Bootstrap dari tiga baris dan dua kolom. Baris pertama di atas akan menampung navbar, baris ketiga di bawah akan menampung footer situs web, dan baris kedua di tengah akan menampung konten halaman web. Baris kedua memiliki dua kolom—artikel utama dan kolom samping.
Membuat file CSS lokal dan menambahkan batas ke setiap bagian kisi akan memungkinkan Anda melihatnya dengan lebih jelas.
File style.css
.baris{
perbatasan: 2px biru solid;
}
.col, .col-sm-4{
perbatasan: 2px merah solid;
}
Menautkan ke file CSS di atas akan membuat output berikut di browser Anda:
Perbedaan yang jelas pada gambar di atas adalah ukuran kolom. Biasanya, dua (atau lebih) kolom dalam satu baris menempati jumlah ruang yang sama kecuali jika Anda secara eksplisit menyatakan sebaliknya. Itu col-sm-4 class dalam kode HTML di atas memastikan bahwa kolom kedua hanya mencakup empat dari dua belas kolom di baris. Itu sm dalam col-sm-4 class mewakili breakpoint kecil, jadi, bagian samping hanya akan menempati empat kolom dari breakpoint kecil ke atas.
Komponen Bootstrap
Setelah Anda memutuskan tata letak halaman web Anda, langkah selanjutnya adalah menambahkan elemen pembuatan situs web, yang disebut Bootstrap sebagai komponen. Daftar komponen Bootstrap meliputi:
- navigasi
- tombol
- Grup tombol
- Daftar grup
- Kartu-kartu
- Runtuh
- Dropdown
Kelas Bootstrap Navbar
Setiap bilah navigasi Bootstrap memerlukan bilah navigasi kelas. Mereka juga membutuhkan penggunaan atau menetapkan kata kunci "navigasi" ke Bootstrap wewenang atribut di induk navbar div. Untuk membuat navbar responsif, Anda harus menggunakan runtuhkan plugin JavaScript.
Bootstrap bilah navigasi kelas menggunakan aria-arus atribut yang mengambil nilai "halaman" untuk menunjukkan halaman saat ini, atau "benar" untuk menunjukkan bagian halaman saat ini. Nilai yang Anda tetapkan akan bergantung pada struktur situs web Anda (satu halaman atau beberapa halaman). Anda juga harus menggunakan kelas aktif untuk menunjukkan halaman atau bagian saat ini.
Menggunakan Navbar Bootstrap
Mengganti navigasi baris dari bootstrap kisi-kisi dengan kode di atas akan membuat output berikut di browser Anda:
Ada beberapa class dan atribut Bootstrap penting lainnya pada kode di atas, seperti: navbar-merek kelas, yang menargetkan bagian logo Anda bilah navigasi. Itu bilah navigasi juga sepenuhnya responsif berkat runtuhkan plugin JavaScript.
Navbar Responsif
Anda mungkin ingat bahwa Bootstrap memiliki enam default titik putus dan salah satu breakpoint itu besar (lg). Itu navbar-expand-lg kelas di di atas berkembang menjadi daftar horizontal item navigasi di breakpoint besar dan di atasnya, dan daftar itu kembali ke tombol di breakpoint mana pun di bawah besar.
Jika Anda ingin mempelajari lebih lanjut tentang membuat situs web responsif, kami telah menyusun bagian yang menguraikan bagaimana melakukan ini dengan kueri media dalam HTML dan CSS.
Komponen Tombol Bootstrap
Bootstrap tombol komponen menggunakan dan mengharuskan Anda mengatur Tipe atribut ke "tombol".
Bootstrap memiliki beberapa jenis tombol. Untuk membuat tombol yang lebih konvensional, Anda akan menggunakan btn class, tetapi untuk membuat tombol hamburger seperti pada kode di atas, Anda akan menggunakan navbar-toggle kelas.
Kapan Anda Harus Menggunakan Bootstrap?
Bootstrap dikenal sebagai salah satu framework CSS yang lebih populer karena merupakan pelopor. Jauh sebelum desain responsif menjadi hal yang biasa dalam pengembangan perangkat lunak, Bootstrap mengubah dirinya menjadi kerangka kerja yang sepenuhnya responsif.
Selama bertahun-tahun, Bootstrap terus maju dan berkembang, menjadikannya pilihan nomor satu bagi perusahaan papan atas, seperti Twitter dan Spotify. Namun, itu tidak akan selalu menjadi pilihan terbaik untuk kebutuhan pengembangan perangkat lunak Anda. Misalnya, jika Anda membuat aplikasi React, ada sistem desain yang disebut MUI yang disesuaikan untuk aplikasi React.
Material-UI memiliki nama baru dan bertujuan untuk membuat alternatif sistem desain baru untuk Desain Material. Inilah cara Anda dapat menggunakan MUI dalam proyek ReactJS.
Baca Selanjutnya
- Pemrograman
- Indonesia
- Kiat Pengkodean
- Pemrograman
- Alat Pemrograman
Kadeisha Kean adalah Pengembang Perangkat Lunak Full-Stack dan Penulis Teknis/Teknologi. Dia memiliki kemampuan yang berbeda untuk menyederhanakan beberapa konsep teknologi yang paling kompleks; menghasilkan materi yang dapat dengan mudah dipahami oleh setiap pemula teknologi. Dia bersemangat menulis, mengembangkan perangkat lunak yang menarik, dan berkeliling dunia (melalui film dokumenter).
Berlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan
