Tutorial Cara Menggunakan Framework Bootstrap Untuk Pemula

Cara menggunakan framework bootstrap cukup mudah sehingga memudahkan kerja dari web developer untuk mengembangkan website dari sisi front end.

Tutorial Cara Menggunakan Framework Bootstrap Untuk Pemula

Biasanya bootstrap digunakan untuk mengimplementasikan berbagai pilihan font, warna, ukuran, dan layout ke dalam website Anda. Cara menggunakan framework bootstrap terdiri dari HTML, CSS, dan JavaScript yang berfokus untuk menyederhanakan halaman website.

Bootstrap sebagai sebuah framework menyediakan template untuk mendefinisikan style dasar seluruh elemen HTML dalam sebuah website. Sehingga mempermudah dalam pembuatan website dengan keseragaman visual tanpa harus berulang-ulang mendefinisikan style attribute HTML.

Apa sih Bootstrap Itu?

Bootstrap adalah sebuah framework CSS open source yang digunakan untuk pembuatan tampilan desain visual untuk aplikasi web atau situs web. Framework yang digunakan adalah berupa template desain berbasis HTML dan CSS.

Selain HTML dan CSS, Bootstrap juga menawarkan plugin jQuery yang berisi beberapa komponen javascript. Dengan adanya jQuery ini memungkinkan Anda untuk menggunakan fitur carousel, dialog box, tooltips, dan lain-lain. Jadi, komponen Bootstrap terdiri dari:

  • Struktur HTML
  • Deklarasi CSS
  • Kode JavaScript

Apa Saja Kelebihan Bootstrap?

Dengan cara menggunakan framework Bootstrap untuk pengembangan sebuah website, apa saja kelebihan dari framework tersebut? 

  • Pembuatan Website Jadi Lebih Cepat

Keuntungan pertama menggunakan Bootstrap adalah sifatnya yang fleksibel dan mudah bagi Anda untuk mengembangkan dengan menggunakan sebuah frame. Cara membuat website dengan Bootstrap jadi lebih mudah, lebih cepat, dan lebih efisien.

  • Desain Responsive dan Mobile Friendly

Sistem grid Bootstrap memudahkan Anda untuk membangun situs web yang responsive dan mobile friendly yang bekerja dengan baik di berbagai ukuran layar. Bootstrap memiliki sistem grid yang memudahkan untuk menempatkan elemen website berdasarkan ukuran layar yang ditampilkan.

  • Framework Bersifat Open Source

Bootstrap adalah kerangka kerja yang bersifat terbuka atau open source. Ini berarti bahwa semua pengembang, termasuk Anda, dapat melakukan perubahan sesuai kebutuhan tanpa harus membayar lisensi. 

  • Bug Antar Browser Dapat Diminimalisir

Salah satu masalah terbesar dalam pengembangan situs web adalah kinerja yang tidak konsisten di seluruh browser. Bootstrap membantu meminimalkan terjadinya kesalahan atau bug yang disebabkan oleh faktor kompatibilitas browser yang digunakan oleh pengunjung.

  • Fitur Custom yang Berlimpah

Jika Anda tidak puas dengan template yang disediakan oleh Bootstrap, Anda dapat memodifikasi file CSS sesuai keinginan Anda. Ini memungkinkan Anda untuk membuat situs web yang unik, tetapi harus menulis kode CSS kustom dari awal.

  • Desain yang Konsisten Antara Front-end dan Back-end

Inkonsistensi antara desain front-end dan back-end adalah salah satu masalah yang sangat umum saat development situs web. Kerangka kerja Bootstrap memungkinkan tim front-end dan back-end untuk menunjuk ke referensi yang sama, sehingga dapat menciptakan keselarasan.

Cara Menggunakan Framework Bootstrap Untuk Pemula

Untuk download Bootstrap versi terbaru, kunjungi situs web https://getbootstrap.com/ kemudian klik “Unduh” atau “Download”. Sejauh ini framework Bootstrap sering melakukan pembaruan sistemnya. 

Tentu saja, sebelum mempelajari cara menggunakan framework Bootstrap, Anda harus menginstal file yang dibutuhkan melalui Composer, Bower, atau npm. Setelah unduhan selesai, langkah selanjutnya adalah instalasi file yang baru saja Anda unduh. 

Berikut ini cara install  Bootstrap pada perangkat Anda:

  • File yang diunduh tadi berupa file.zip. Pindahkan file tersebut ke folder “project” lalu ekstrak file
  • Masukan baris kode sesuai kebutuhan pada teks editor di komputer Anda
  • Buat file index.html untuk menyimpan perubahan
  • Panggil file Bootstrap dan Library lainnya untuk memakai kode yang Anda butuhkan

1. Cara Membuat Tabel

Salah satu cara menggunakan framework Bootstrap untuk mengembangkan struktur tabel dengan membuat kode program yang lebih jelas, lebih cepat, dan lebih mudah untuk ditulis. Panggil saja “class” yang Anda butuhkan yang ada file bootstrap itu sendiri. 

Metodenya sangat sederhana, cukup tambahkan kode ke attribute “class” yang ada. Atribut “class” yang ada di file Bootstrap sendiri jumlahnya cukup banyak, berikut cara membuat kotak di Bootstrap dengan beberapa class:

  • “.table” = class untuk membuat tabel standar yang hanya menambahkan lapisan kecil dan pembatas horizontal. Cara penulisan kodenya <table class=”table”>
  • “.table-striped” = untuk membuat tabel dengan warna selang seling tiap baris. Cara penulisannya <table class=”table table-striped”>
  • “.table-bordered” = class ini digunakan untuk menampilkan border di dalam semua table. Penulisan kodenya <table class=”table table-bordered”>
  • “.table-hover” = untuk memberikan efek hover pada sebuah row dan akan berjalan ketika mouse diletakkan pada row yang diberikan class ini

2. Membuat Fitur Button

Cara menggunakan framework Bootstrap untuk membuat fitur button atau tombol pada website, Anda hanya perlu memanggil attribute class “.btn”. Untuk memberikan variasi tombol pada website, Anda bisa menambahkan class lain pada attribute tersebut.

Berikut beberapa variasi tombol yang tersedia di Bootstrap:

  • .btn-default = Untuk membuat tombol default warna abu-abu
  • .btn-info = Membuat tombol warna biru muda untuk menampilkan informasi
  • .btn-success = Untuk membuat tombol yang menyatakan sukses
  • .btn-primary =  Membuat tombol warna biru yang biasanya untuk tombol login
  • .btn-warning = Membuat tombol warna kuning yang menyampaikan peringatan
  • .btn-danger = Membuat tombol merah
  • .btn-secondary = Membuat tombol abu-abu

3. Membuat Pesan Notifikasi

Cara menggunakan framework Bootstrap untuk membuat pesan notifikasi adalah dengan menuliskan kode yang hampir sama seperti kode untuk button di atas. Yang perlu Anda ubah adalah “.btn” menjadi “alert”. 

Fitur alert adalah untuk memberikan informasi bahwa ada pesan penting atau proses yang berjalan tidak semestinya. Ada beberapa pilihan untuk Anda menampilkan pesan peringatan di Bootstrap dengan menuliskan berikut ini:

  • “.alert-info” = Digunakan untuk memberikan informasi tambahan untuk pengguna seperti informasi fungsi tombol dan cara pemakaiannya
  • “.alert-success” = Digunakan untuk mengindikasikan sebuah aksi sukses, seperti pengguna selesai mengisi data dan sukses terkirim
  • “.alert-warning” = Dipakai untuk menandakan pesan warning atau memerlukan perbaikan seperti pesan error ketika ada kesalahan pengaturan atau salah pengisian data
  • “.alert-danger” = Dipakai untuk mengindikasikan suatu pesan penting dan mungkin berefek buruk seperti Ketika terjadi kesalahan pada server atau pengaturan keamanan yang gagal, dan lain-lain  

4. Menampilkan Gambar

Cara menggunakan framework Bootstrap untuk menampilkan gambar adalah dengan menambahkan perintah dengan kode “img class”. Contoh penulisan kodenya adalah <img class=”img-responsive”> atau <img class=”img-thumbnail”> atau <img class=”img-rounded”>.

Kode class di atas merupakan class yang dipakai untuk memanipulasi gambar pada framework Bootstrap. Berikut penjelasan dari class untuk menampilkan gambar:

  • “.img-responsive” = Untuk membuat gambar yang bisa dibuka di berbagai resolusi layar dan menyesuaikan ukuran elemen inti dari perangkat Anda
  • “.img-rounded” = Untuk membuat gambar dengan lengkungan pada bagian sisinya
  • “.img-circle” = Untuk membuat gambar dengan bentuk lingkaran
  • “.img-thumbnail” = Class ini untuk membuat gambar thumbnail 

5. Membuat Panel

Cara menggunakan framework Bootstrap untuk membuat panel cukup merubah susunan penulisan kode sesuai perintah. Caranya hampir sama seperti penulisan kode di atas. Contohnya “.btn” menjadi “panel”. Contoh penggunaannya:

<div class= “panel panel-default”> atau <div class=”panel panel-primary”>

Kesimpulan

Demikianlah tutorial cara menggunakan framework Bootstrap dari download hingga contoh pemakaian beberapa fungsi class. Framework Bootstrap membuat kemudahan bagi Anda untuk membuat panel, tombol, alert, dan yang lainnya hanya dengan satu perintah.

Cara di atas merupakan secara online, Anda juga bisa mempelajari cara menggunakan Bootstrap di xampp. Dan pada intinya, Bootstrap ini merupakan framework gratis yang dibuat untuk memudahkan pekerjaan front-end dan back-end. Baca juga Cara Membuat Website dengan Cepat dan Mudah