Bootstrap merupakan salah satu library CSS yang banyak digunakan para profesional untuk membuat tampilan web dengan cara yang lebih mudah. Bootstrap tidak hanya digunakan untuk web yang ditampilkan di layar berukuran desktop saja, tetapi juga untuk perangkat mobile seperti smartphone dan tablet. Dengan menggunakan bootstrap maka tampilan website dapat menyesuaikan media perangkat dengan baik.
Banyak sekali tampilan website yang saat ini mengadobsi bootstrap. Saya sendiri juga menggunakan Bootstrap untuk membuat theme beberapa website saya. Bahkan beberapa aplikasi mobile yang saya bangun, tampilan User Interface (UI) basisnya juga menggunakan Bootstrap.
Bootstrap sebenarnya berfungsi untuk membantu menata layout tampilan agar bisa responsive untuk berbagai ukuran layar dengan tehnik grid 12. Selain itu bootstrap juga membantu pembuatan tampilan elemen sehingga lebih dapat distandarisasi dan terkontrol. Sehingga ketika anda membuat tampilan website dan aplikasi sendirian atau bersama dengan tim, semua anggota tim dapat dengan mudah mengetahui maksud dari kode yang anda buat. Bila digabungkan dengan Javascript maka bootstrap dapat menampilkan animasi menarik yang saat ini banyak dibutuhkan pada web dan aplikasi dengan cara yang sederhana.
Yang tidak kalah menarik, bootstrap juga menyediakan Glyph yang dapat menampilkan simbol ikon agar mempermudah anda dalam memberikan informasi pada elemen. Sehingga pengguna lebih mudah memahami apa fungsi elemen yang anda buat. Bila anda kurang puas dengan glyph yang disertakan Bootstrap, anda juga bisa menggunakan icon font seperti awesome font dan atau yang lain.
Cara Menggunakan Bootstrap
Untuk menggunakan Bootstrap ada beberapa tahapan yang perlu dilalui. Bila anda sudah pernah melakukan tahapan tersebut, anda bisa menggunakan Bootstrap dengan cara mereplikasi atau copy paste berkas yang anda buat sebelumnya kemudian mengembangkannya. Sebenarnya ada beberapa cara menggunakan bootstrap, anda bisa memulai dengan mendownload file dasarnya dari website resmi atau bila anda sudah mahir Javascript bisa juga melalui bantuan node js melalui perintah npm.
1. Download File Bootstrap
Untuk memulai yang anda perlukan utamanya adalah file bootstrap.css. Anda bisa mendapatkan file tersebut dengan cara download Bootstrap dari situs resminya yaitu:
http://getbootstrap.com/getting-strated/
Pada website tersebut anda akan diberikan opsi untuk mendownload file utamanya saja beserta beberapa file pendukung atau file utama beserta pendukung dan dilengkapi dengan contoh.
Pada saat ini versi Bootstrap sudah mencapai versi yang ke 4. Anda bisa menggunakan versi terbaru atau juga versi sebelumnya dengan menelusuri link yang telah disediakan. Tentu saja semakin baru versi yang anda pilih maka fitur yang ditambahkan juga semakin lengkap.
2. Ekstrak File Bootstrap
Setelah anda mendonwload anda bisa mengekstrak file yang telah anda dapatkan. Menurut pengalaman pribadi saya, Untuk bootstrap versi 4 akan berjalan lebih baik bila anda meletakkan dan menjalankannya di server. Sedangkan versi bootstrap sebelumnya anda bebas meletakkanya di server ataupun client. Sebab apabila anda meletakan bootstrap 4 diclient akan tampil beberapa notivikasi di bagian console browser.
3. Menggunakan Bootstrap di Script
Untuk memulai anda tinggal membuat file html seperti biasa yang kemudian memanggil file css bootstrap. Pemanggilan css bisa anda pilih menggunakan bootstrap.css atau bootstrap.min.css yang berukuran lebih kecil karena sudah dikompress.
Contoh:<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body></body>
</html>
Pemanggilan file css memang sebaiknya diletakkan didalam <head></head> agar file segera dibaca sebelum membaca halaman.
Supaya dapat menyesuaikan berbagai ukuran tampilan layar maka anda perlu menambahkan tag meta yaitu:
Contoh:<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- bisa juga ditambah lagi dengan shrink-to-fit=no -->
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body></body>
</html>
4. Mulai Menggunakan Bootstrap Pada Element
Bootstrap mudah dipelajari, anda tinggal mengikuti panduan di website resminya. Atau juga bisa mengikuti panduan dari website W3C. Pemanggilan CSS Bootstrap untuk masing-masing elemen mengandalkan class bukan id. Anda tinggal menuliskan tag script elemen HTML dengan tambahan class yang sudah disiapkan bootstrap dan meletakkan elemen tersebut di dalam <body></body>
Contoh:<button class="btn btn-primary">Klik Saya</button>
Ada banyak class elemen yang disediakan antara lain seperti form, tombol, tabel, navigasi, input, list dan masih banyak lagi. Anda tinggal menggunakan class yang sudah disediakan oleh bootstrap.
Dengan bootstrap, anda dapat membuat berbagai tampilan User Interface. Mulai dari tampilan homepage website, admin page, blog, mobile app dan banyak lagi yang lainnya. Untuk belajar diawal anda bisa membuat tampilan sederhana seperti login-form.
Tidak ada komentar:
Posting Komentar