Cara Mudah Belajar Bootsrap Untuk Pemula
Bootsrap adalah front-end framework yang digunakan untuk pembuatan desain website yang responsive dengan cepat, mudah dan disediakan secara gratis.
Bootsrap dibuat khusus untuk pengembang front-end website, serta paling populer dikalangan web developer, sehingga juga membuat tampilan front-end yang ringan dan simpel.
Bootsrap juga dilengkapi class-class tertentu sesuai kebutuhan dengan desain template HTML, CSS untuk typography, form, button, table, navigation, javascrip plugin dan masih banyak lagi.
Salah satu elemen penting saat ini didalam membuat desain sebuah website adalah tampilan yang responsive yang dapat desain web yang secara otomatis mengikuti layar browser yang digunakan pada device dari smartphone tampilan layar yang kecil sampai dengan tampilan layar dekstop yang besar.
Adapun kelebihan dari Bootsrap sehingga banyak pengembang yang menggunakanya adalah :
- Tampilan desain dari bootsrap modern dan ringan
- Mempercepat bagi developer didalam membuat desain interface khususnya front end sehingga menghemat waktu
- Tampilan responsive dan mobile friendly dimana mendukung segala bentuk resolusi layar baik dari smartphone, laptop, pc, tablet.
Cara menggunakan Boootsrap.
Langkah awal didalam menggunakan bootsrap adalah melakukan instalasi , saat ini boostrap telah memasuki versi 4, anda dapat mendownload Bootsrap di web resmi : https://getbootstrap.com, untuk tutorial ini saya menggunakan versi 3.3, anda dapat mendownloadnya di https://getbootstrap.com/docs/3.3/getting-started/ adapun struktur dari bootsrap ini adalah sebagai berikut :
Ada dua cara menginstal bootsrap yakni secara online dan offlline, pada tutorial ini kita menggunakan cara install offline.
Cara instal atau menggunakan Bootsrap secara offline adalah pertama kita ekstrak file bootsrap yang telah kita download tadi. Kemudian masukan ke folder localhost
Buatlah sebuah file index.php dan ketikan kode berikut :
<!DOCTYPE html> <html> <head> <title>Belajar Bootsrap Untuk Pemula</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <h3>Belajar Cara Menggunakan Bootstrap | http://ilmuweb.net</h3> <button class="btn btn-info">Tombol Biru</button> <button class="btn btn-warning">Tombol Kuning</button> <button class="btn btn-success">Tombol Hijau</button> <button class="btn btn-primary">Tombol Biru</button> </body> </html>
Dapat dilihat bahwa untuk menggunakan bootsrap dengan file index.php di bootsrap.css.
Selanjutnya anda perhatikan pada bagian penting dimana untuk kode dalam menghubungkan dengan bootsrap kita buat file index.php adalah sebagai berikut :
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script>
Kemudian pada latihan pertama ini kita mencoba belajar membuat tombol, dimana kita perhatikan pada kode index.php yang pertama kita buat pada tag html, disini kita perhatikan class ”btn” pada elemen <button> merupakan class dari bootsrap yang digunakan dalam membuat eleman tombol, maka hasilnya adalah seperti berikut :
Pada tag class=”btn btn-info” disinilah elemen tombol pada bootsrap yang kita masukan, pada tag (btn-info) maka tombol akan menjadi warna merah, (btn-warning) tombol warna kuning, (btn-success) tombol warna hijau (btn-primary) tombol warna biru.
Untuk sebagai bahan latihan anda dapat melihat komponen – komponen boostrap lainya yang lebih lengkap sehingga anda dapat latihan membuat berbagai komponen, anda dapat melihatnya di : https://getbootstrap.com/docs/3.3/components/
Sekian tutorial Belajar Bootsrap Untuk Pemula sebagai pengantar dasar-dasar bootsrap, tutorial bootsrap selanjutnya akan dibahas pada tulisan berikutnya semoga bermanfaat.
