Cara Mudah Belajar Bootstrap Offline Lengkap

Sobat blogger, seperti yang kita ketahui bersama, saat ini sudah jamannya website yang responsive. Ada banyak cara untuk membuat desain web yang responsive. Bagi yang pintar coding hal ini tidak menjadi masalah, tapi bagi yang awam (seperti saya) tentu bisa membuat kepala jadi cenut-cenut :).. Tapi sekarang kita tidak perlu susah-susah untuk membuatnya, karena sekarang kita dimanjakan dengan hadirnya CSS Framework yang dapat digunakan untuk membuat desain web yang responsive. Beberapa contoh CSS Framework itu adalah Bootstrap, Foundation, Gumby, Pure CSS, Skeleton dan masih banyak lagi. Oleh karena itu, kali ini saya akan share cara menggunakan salah satu CSS Framework tersebut, yaitu Bootstrap. Kenapa Bootstrap? jawabannya simple, karena yang saya pelajari baru Bootstrap, yang lain belum :).
Sebelum kita belajar menggunakan Bootstrap, ada baiknya kita lebih dulu mengenal apa, kenapa dan bagaimana Bootstrap itu. Selain itu, kita juga perlu mempelajari beberapa perintah pada Bootstrap sebagai pendukung pembuatan deain web. Baiklah, kita mulai saja belajar Bootstrap secara mudah dan lengkap;

Apa itu Bootstrap?

Bootstrap adalah front-end framework yang dapat digunakan untuk pembuatan desain web yang responsive secara cepat dan mudah. Dan yang pasti GRATIS. Bootstrap sudah dilengkapi dengan desain template HTML dan CSS dasar untuk typography, forms, buttons, tables, navigation, modals, image carousels dan masih banyak lagi, serta optional JavaScript plugins.

Desain web Responsive adalah desain web yang tampilannya secara otomatis dapat mengikuti layar browser yang digunakan pada semua device, dari HandPhone kecil sampai desktops dengan layar besar.

Keuntungan Menggunakan Bootstrap

• Mudah digunakan: Semua orang, walaupun hanya memiliki kemampuan dasar HTML and CSS dapat menggunakan Bootstrap
• Fitur yang Responsive: Dengan Bootstrap, kita dapat membuat desain web yang dapat mengikuti layar browser yang digunakan pada semua device, seperti HandPhone, Tablet dan desktop
• Browser compatibility: Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, UC Brrowser, Internet Explorer, Safari, dan Opera)
• Mobile-first approach: Di Bootstrap, mobile-first styles adalah termasuk bagian dari inti framework

  Mobile-first disini maksudnya adalah pembuatan desain web dengan menggunakan Bootstrap, mengutamakan tampilan yang bagus pada mobile device seperti Handphone, Iphone, Ipad dan Tablet.

Dimana kita bisa mendapatkan Bootstrap?

Ada 2 cara untuk dapat menggunakan Bootstrap dalam pembuatan desain web

1. Download Bootstrap dari getbootstrap.com
2. Menautkan Bootstrap dari a CDN

Saya rasa uraian diatas sudah cukup untuk memahami Bootstrap. Selanjutnya kita belajar cara menggunakannya.
Karena kita akan belajar Bootstrap secara offline, maka kita perlu menyiapkan amunisi file-file pendukungnya. Berikut ini beberapa file yang kita butuhkan:

1. File Distribusi Bootstrap. Download aja di situs resminya, disini. (saat artikel ini ditulis, versinya 3.3.6)
   Pilih yang saya lingkari merah (Download Bootstrap)
   
   
2. JQuery Library. Dowonload di situs resminya, disini.
   Pilih versi 1.xx.xx yang sudah di kompres (lingkaran merah). Saat ini versinya 1.12.0
   
   
3. Code Editor. Ada banyak code editor yang bisa kita gunakan baik yang gratis maupun yang berbayar. Contoh code editor yang gratis adalah notepad++ dan Microsoft Visual Studio Tools for Aplications (VSTA). Untuk contoh yang berbayar adalah UltraEdit dan Sublime Text. Silahkan anda pilih sendiri yang anda sukai.

Setelah semua file yang dibutuhkan tersedia, selanjutnya kita mulai belajarnya...

1. Ekstrak file Bootstrap tadi. Jika sudah, agar kita mudah mengingatnya, sebaiknya ganti saja nama folder hasil ekstrak tadi (bootstrap-3.3.6-dist) dengan nama [latihan]
2. Selanjutnya pindahkan file JQuery yang sudah kita download tadi kedalam folder [js] yang ada di dalam folder [latihan]
3. Sekarang kita buat sebuah file html yang berisi dasar dari template Bootstrap. Buka code editor kalian. Copy code snippet dibawah ini. Jika sudah, simpanlah file tersebut ke dalam folder [latihan] yang sudah kita buat sebelumnya. Simpan saja dengan nama 'dasar.html'
   

   
   <html lang="en">
   <head>
   <title>Bootstrap 3.3.6 Template dasar - by www.papawardi.com</title>
         <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet"></link>
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
         <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
         <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
         <![endif]-->
   </head>
   <body>
      <div class="container">
         <!-- AWAL KONTEN -->
         <h2>Selamat, anda berhasil!!</h2>
         <!-- AKHIR KONTEN -->
      </div>
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="js/jquery-1.12.0.min.js"></script>
         <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="js/bootstrap.min.js"></script>
   </body>
   </html>
   

4. Sekarang coba buka file yang sudah kalian buat barusan di browser. Bisa dengan cara klik 2 kali pada file tersebut atau klik kanan, arahkan kursor ke Open With, lalu pilih browser yang kan digunakan.
5. Jika muncul tulisan 'Selamat..bla..bla..bla..' berarti anda sudah berhasil.

Template dasar ini akan kita gunakan untuk setiap materi pembelajaran Bootstrap. Kalian cukup menghapus tulisan dari '<!-- AWAL KONTEN -->' sampai '<!-- AKHIR KONTEN -->'. Sementara ini dulu yang bisa saya share. Selanjutnya kita akan mempelajari sistem grid pada Bootstrap. Silahkan baca artikelnya disini.

Update 22 Februari 2016
Penambahan kelas .container dibawah body. Jika ingin menggunakan kelas .container-fluid, anda tinggal merubahnya sendiri. Bagi yang sudah terlanjur membuat template dasar yang lama, tinggal menambahkan kelasnya

Semoga sukses.