14 May 2016

Mari Berkenalan Dengan Bootstrap - Apa Itu Boostrap

Bootstrap ? Apa Itu Bootstrap ?.

Itu kira-kira pertanyaan yang terlintas pertama Kali di kepala saya saat membaca kata "Bootstrap" ini. pasalnya Beberapa tahun terakhir kata "Bootstrap" sering kali saya baca di beberapa Forum-Forum dan Group-grup Facebook yang membahas tentang Pemrograman Berbasis WEB. Rasa penasaran saya pun terjawab setelah mengetahui Apa Itu Bootstrap.
Bootstrap sendiri adalah Sebuah Framework yang digunakan untuk mempermudah developer web untuk membuat sebuah Interface dengan design yang responsif untuk Mobile Device (Handphone/SmartPhone).


Mengapa Harus Bootstrap ?
Bukan Rahasia lagi setelah Smartphone Booming, Akses user ke Internet (browsing,Chatting, Dll) lebih sering melalui device mobile (Smartphone) yang menyebabkan Menurunnya penggunaan PC Desktop/Laptop untuk Berseluncur didunia maya. Hal ini tentunya menjadi suatu problem untuk para developer web, karena pada dasarnya Programmer/developer Web membuat sebuah aplikasi yang di Fokuskan kepada Pengguna yang menggunakan Desktop PC/ Laptop saja. dan hasilnya tampilan Web yang sudah dibuat dan diukur agar muat di Layar Monitor akan menjadi Kurang enak dilihat jika diakses dari Smartphone. Denga Rilisnya Bootstrap maka masalah tersebut bisa teratasi, Seperti yang sudah saya jelaskan di awal bahwa bootstrap hadir untuk membuat interface Design web yang Responsive Namun tetap Cocok untuk di akses dari PC/Laptop.

Apa yang Harus dilakukan untuk Menggunakan Bootstrap ?
Untuk memulai Menggunakan Bootstrap, tentunya anda harus memiliki paling tidak sedikit pengetahuan seputar HTML,CSS dan Javascript karena inti dari Bootstrap adalah ketiga bahasa pemrograman tersebut. Setelah anda memiliki "Sedikit" pengetahuan tentang Bootstrap anda bisa langsung mendownload File Bootstrap dari Web Resminya yang beralamatkan di www.getbootstrap.com . disaat Artikel ini ditulis Bootsrap tersedia pada Versi 3.3.6.

Bagaiman Cara Memulainya ?
Sebelumnya sudah saya informasikan bahwa Bootstrap terdiri dari HTML,CSS, dan javascript, maka untuk memulai anda harus membuat sebuah Code sederhana dari HTML lalu memanggil CSS dan Javascript Bootstrap didalamnya. dan menempatkan atribut CSS Bootstrap pada Tag-tag HTML anda
sebagai Contoh 

Dibawah ini Code Sederhana untuk membuat sebuah tombol tanpa CSS Bootstrap
<input type="submit" name="tombol" value="Tombol"/>

Dibawah ini code yang sudah di beri Atribut pada Class menggunakan CSS Bootstrap
<input class="btn btnsuccess" type="submit" name="tombol" value="Tombol"/>


Terlihat Jelas perbedaanya Kan, Selain Responsive tampilan Button menjadi cantik dengan menggunakan Class "btn btn-success" milik CSS Bootstrap.


Berikut beberapa Style yang bisa anda Coba


Fungsi utama Bootstrap yaitu "Responsive" bisa anda lihat dengan Mengecilkan ukuran Browser anda saat Membuka blog ini (Blog Ini Menggunakan Bootstrap).
Tampilan Blog Ini Jika diakses dari PC/Laptop

Tampilan Blog ini Jika diakses dari Smartphone

Bagaimana ? keren bukan ? layout Web kita akan mengikuti Ukuran Layar sesuai device yang kita gunakan. inilah yang dinamakan Responsive. Silahkan memulai Project Web anda menggunakan Bootstrap agar terlihat cantik dan dinamis :D.

Sekian Terima Kasih :)



EmoticonEmoticon