Cara Menggunakan Bootstrap – Sering mendengarkan web developer membahas soal bootstrap untuk mengembangkan website? Kamu pasti penasaran mengenai apa itu bootstrap jika baru pertama kali belajar soal website.
Sebelum ngomongin lebih jauh soal cara menggunakan bootstrap sebaiknya kamu ketahui dulu pengertiannya dan manfaatnya.
Apa saja alasan dibalik kepopuleran didunia web developer.
Apa Itu Bootstrap?
Bootstrap adalah jenis framework yang digunakan untuk mengembangkan website. Diciptakan oleh mantan karyawan Twitter yakni Mark Otto dan Jacob Thornton. Yup, bisa dibilang bahwa Twiiter merupakan awal mulanya bootstrap dan terus dikembangkan.
Fungsi utamanya adalah menciptakan desain pada halaman website agar sesuai dengan device yang digunakan seperti layar laptop dan mobile phone. Dulunya bernama Twitter Blueprint dan kamu tentu bisa lihat betapa modern dan simpel tampilan dari Twitter berkat framework ini.
Hasil yang diberikan dari penggunaan bootstrap ini berdampak pada tabel, grind serta navigasi pada sebuah web. Ditambah lagi jika memanfaatkan bootstrap website akan lebih terstruktur dan ringan.
Alasan Bootstrap Banyak Diminati
Melihat banyak fungsi dari bootstrap tentu saja bukan cuma itu alasan mengapa framework yang populer ini banyak digunakan. Alasan banyak yang menggunakan bootstrap adalah sebagai berikut :
1. Kecepatan dalam Pengembangan Website
Alasan pertama yang banyak diungkapkan oleh web developer adalah soal kecepatan penggunaan bootstrap. Tak perlu lagi menciptakan script atau coding yang panjang sendiri, karena semua sudah tersedia dalam library bootstrap.
Programmer dapat mengembangkan halaman depan web dengan lebih cepat dengan adanya fitur ini. Tak ada waktu berjam-jam terbuang untuk menulis script CSS. Kecepatan ini tentunya akan mempengaruhi struktur web yang lebih produktif.
2. Responsif Terhadap Perkembangan
Setiap tahunnya smartphone banyak digunakan oleh orang hampir di seluruh dunia. Alasan inilah yang membuat programmer bekerja keras menyesuaikan tampilan web dengan device baru.
Kini tidak lagi, dengan kemampuan bootstrap yang menyediakan layout grid sesuai dengan smartphone kini membuat web yang mobile friendly jadi lebih mudah. Para penggunanya dapat dengan mudah memilih sistem grid untuk digunakan.
Kamu nantinya bisa menentukan sendiri apakah bentuk kolom muncul secara vertikal yang sesuai dengan layar smartphone.
3. Menyediakan Desain Kustom
Soal desain para programmer akan mendapatkan banyak pilihan untuk menentukan desain sendiri dari template yang telah tersedia. Jika ada beberapa aspek yang tidak diinginkan.
Misalnya dalam desain CSS umum seperti grid, tipografi, tabel, form, komen, dll. Beberapa komponen Jacascript seperti carousel, dropdowns, popobvers, dll. Hasil yang sudah didapatkan nantinya bisa langsung didownload untuk digunakan.
4. Mudah Digunakan dan Konsisten
Mudah dan cepat, kedua hal ini yang bisa menggambarkan cara menggunakan bootstrap. Kemudahannya membuat para pemula dijamin tidak kebingungan dan mudah beradaptasi untuk menggunakannya.
Beberapa karyawan Twitter mengembangkan bootstrap sebagai peningkatan konsistensi untuk seluruh alat interior web.
Namun hal ini disadari oleh Mark Otto dan merilisnya pada Agustus 2011 dengan versi open source.
Mark Otto juga menggambarkan bagaimana bootstrap sebagai konsep inti yang konsisten dalam hal desain dan programer.
Satu hal lagi yang menjadi kelebihan dari framework bootstrap adalah gratis. Sifatnya yang open source membuatnya bisa digunakan tanpa lisensi.
Jadi kamu bisa mengembangkan website tanpa harus membayar lisensi. Asyik kan?
Cara Menggunakan Bootstrap Mulai dari Instalasi
Setelah memahami keuntungannya, pasti kamu sudah tak sabar lagi untuk mengetahui cara menggunakannya.
Mudah kok. Pertama kamu harus menginstal terlebih dahulu bootstrap baik offline atau online.
Bedanya jika diinstal secara offline proses pengembangan akan lebih mudah karena file akan langsung masuk ke penyimpanan utama.
Sedangkan instal secara online dibutuhkan CDN dalam prosesnya dan kecepatan website akan berkurang.
Jadi lebih disarankan untuk menginstalnya secara offline dengan masuk ke situs bootstrap langsung dengan cara berikut ini:
- Buka situs getbootstrap.com dan pilih donwload. Tapi sebelum download kamu bisa memilih versinya. Kalau yang terbaru sekarang versi 4.5.x.
- Buka file hasil download yang sudah berbentuk zip. Di dalamnya ada banyak sekali file dan harus di ekstrak terlebih dahulu.
- Semua file yang sudah diekstrak dapat digunakan dan dipilih untuk diterapkan pada website yang ingin dikembangkan.
Supaya memudahkan kamu untuk menentukan file mana yang digunakan, sebaiknya sebelum di ekstrak buat folder project terlebih dahulu. Sehingga semua script yang muncul akan berkumpul dalam folder tersebut dan kamu mudah menggunakanya.
Selesai menginstal, kini masuk ke cara menggunakan bootstrap. Ada beberapa fungsi yang bisa kamu manfaatkan seperti membuat tabel, tombol, pesan, list, menampilkan gambar, dll. Berikut ini cara penggunaannya berdasarkan masing-masing fungsi.
1. Menggunakan Bootstrap untuk Membuat Tabel
Tak perlu lagi mengetik baris demi baris kode program, kamu bisa mengambil file yang sudah tersedia dalam bootstrap.
Khusus untuk membuat tabel, ada banyak pilihan yang didapatkan seperti code
untuk membuat tabel standar.Ada beberapa pilihan tabel lain juga sepertiuntuk menciptakan border dalam tabel. Kodeuntuk menciptakan tabel zebra. Kodeuntuk membuat efek hover pada baris.
Apabila ingin menambahkan pewarnaan di tabel atau row ada penambahan class yang disematkan pada tag.
Klasifikasinya adalah .danger untuk memberikan warna merah, .success untuk warna hijau, .info untuk warna biru dan .warning untuk warna kuning.2.
2. Menggunakan Bootstrap untuk Membuat Tombol
Ada navigasi lain yang penting untuk digunakan dalam website yaitu tombol. Elemen tombol dalam bootstrap diklasifikasikan dalam class ‘’btn’’.
Namun ada beberapa jenis ukuran dan warna dari tombol yang dibuat dengan kode berikut..btn digunakan untuk membuat tombol standar, .btn -xs untuk tombol ekstra kecil, .btn -sm untuk tombol ukuran kecil, .btn -md untuk ukuran sedang, dan .btn -lg untuk ukuran besar.
Sedangkan klasifikasi berdasarkan warna adalah .btn-danger untuk warna merah, .btn-default untuk warna standar, .btn-warning untuk warna kuning, .btn -primary untuk warna biru.3.
3. Menggunakan Bootstrap untuk Membuat Pesan
AlertBootstrap juga bisa digunakan untuk membuat pesan alert dengan penambahan class alert pada website.
Ada beberapa klasifikasi dari masing-masing kode yaitu :alert-info : untuk membuat pesan dengan warna biru yang fungsinya sebagai informasi.
alert-succes : yang fungsinya untuk membuat pesan warna hijau artinya sukses.
alert-warning : membuat pesan berwarna kuning yang artinya pesan gagal.4. Menggunakan Bootstrap untuk
4. Menggunakan Bootstrap untuk Membuat List
Cara menggunakan bootstrap untuk membuat list dengan menambahkan class ‘’list-group’’ sebagai elemen pembuka.
Jadi kodenya adalah. Bisa juga menambahkan ‘’list-group-item’’ yang fungsinya sebagai anak list.List yang dibuat juga bisa diberikan warna dengan klasifikasi berikut ini:.list-group-item-info : memberikan warna biru.
.list-group-item-success : memberikan warna hijau.
.list-group-item-warning : memberikan warna kuning.
.list-group-item-danger : memberikan warna merah.
5. Menggunakan Bootstrap untuk Membuat Panel
Class panel yang disediakan oleh bootstrap terdiri dari heading, panel body, panel badan dan footer. Masing-masing class terbagi menjadi berikut :
panel-success, panel dengan warna hijau.
panel-default, panel dengan warna standar.
panel-danger, panel dengan warna merah.
panel-warning, panel dengan warna kuning.
panel-info, panel dengan warna biru.Contoh kode yang menggunakan salah satu panel.
6. Menggunakan Bootstrap untuk Membuat Form
Sebelum membuat form, pahami dulu bawa jenis form yang tersedia ada beberapa macam. Pertama adalah model vertikal dan menjadi form default.
Kedua form dengan model inline yang inputnya memiliki letak sebaris. Ketiga model horizontal di mana form memiliki input horizontal.
Untuk pembuatan form perlu menggunakan class ‘’form-control’’ yang diikuti tag ,
7. Menggunakan Bootstrap untuk Menampilkan Gambar
Ada banyak jenis gambar yang bisa dibuat menggunakan bootstrap seperti membentuk melengkung, lingkaran hingga thumbnail.
Ada beberapa klasifikasi jenis gambar yang bisa dipilih yaitu :
.img-rounded, untuk gambar melengkung atau sudut melengkung.
.img-responsive, untuk membuat gambar lebih responsif dari segi bentuk dan ukuran.
.img-circle, untuk gambar lingkarang.
.img-thumbnail, untuk membuat gambar thumbnail.
Caranya tinggal tambahkan salah satu kode class di atas diantara img src dan alt gambar.
Masih ada banyak lagi cara menggunakan bootstrap dalam tampilan website seperti navigasi, modal, sistem hingga icon yang masih bisa Sahabat Tedas.id pelajari. Namun setidaknya ketujuh cara di atas bisa menjadi dasar awal yang dipelajari.
