Apa dan Bagaimana Memulai Belajar Bootstrap?

share on:

Apa itu bootstrap?

Bootstrap adalah front-end framework yang bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.

Untuk apa bootstrap itu?

Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan atau dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Bagaimana belajar bootstrap.

Untuk memulai belajar Bootstrap, Anda harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar tersebut.

Straight to…

Persiapan bahan dan tools adalah :

  1. Anda harus memiliki file distribusi Bootstrap

Untuk menggunakan bootstrap, terlebih dahulu Anda harus mendownload resource file atau file distribusi yang disediakan oleh bootstrap di situs resminya getbootstrap.com. Pada halaman tersebut, terdapat tombol Download Bootstrap sebagaimana terlihat pada gambar dibawah ini, klik tombol Download Bootstrap. Kemudian pilih lagi Download Bootstrap.


Setelah didownload, kemudian extract menggunakan program seperti 7zip  atau WinRAR. Sebetulnya, Anda juga bisa membuka file tersebut dengan aplikasi bawaan windows dengan cara membuka file tersebut, kemudian copy seluruh file dan paste-kan ke folder yang Anda siapkan. Anda juga bisa copy file download lalu paste-kan ke folder htdocs terdapat pada C:\xampp\htdocs.

 

Misalnya : C:\xampp\htdocs\Belajar_Bootstrap.

  1. Download jQuery Library untuk bekerja Offline.

Untuk bisa mengaplikasikan bootstrap component seperti modal dialog, navigation bar dan lainnya yang membutuhkan boostrap JS, Bootstrap JS juga membutuhkan jQuery library agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery di dalam file download-nya untuk itu, kita harus mendownloadnya secara terpisah. Hal ini dilakukan agar kita bisa bekerja dan menggunakannya secara offline (tanpa koneksi internet). Silahkan download jQuery library dengan menuju situs resmi jQuery Download, pilih jQuery 1.x kemudian, download dengan mengklik link Download the compressed, production jQuery 1.12.0

  1. Anda harus memiliki code editor.

Code editor penting sekali untuk memanipulasi file yang akan kita kembangkan khususnya file HTML, CSS dan Javascript sebagaimana file tersebut terdapat pada bootstrap. Anda juga bisa menggunakan Code Editor dari kami yang dibuat untuk tes atau uji coba kode. Jangan pernah menggunakan Microsoft Word, dll) ataupun notepad untuk memanipulasi file-file tersebut. Karena aplikasi tersebut tidak cocok dan terdapat banyak kekurangan yang akan membingungkan kita sendiri nantinya.

Ada banyak sekali code editor yang tersebar di internet yang dapat kita gunakan baik yang gratis maupun yang berbayar. Anda memanupilasi file-file tersebut, mungkin kita bisa memulai dengan menggunakan Sublime Text dan Notepad++. Aplikasi ini gratis dan banyak digunakan oleh developer.

 

 

 

 

 

 

Mulailah Belajar Bootstrap…

 

Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Sekarang, ikuti langkah-lakah berikut ini :

  1. Buat Folder baru

Butlah folder baru, beri nama misilnya “Balajar_Bootstrap.

  1. Copy file jQuery ke dalam folder js

Copy dan gabungkan file jquery-3.2.1.min.js yang telah kita downloaf kedalam folder js punya bootstrap tadi, hal ini dilakukan untuk mempermudah proses pembelajaran bootstrap.

  1. Buatlah file html

Buat file baru dengan Sublime Text atau Notepad++ kemuan tiliskan kode yang anda inginkan, lalu save dan barilah nama file seperti : index.html kemudian simpanlah file tersebut ke folder “Belajar_Bootstrap” yang telah dibuat diatas.

Berikut ini contah code editornya :

Saatnya untuk uji coba

Buka file html yang telah Anda dibuat, buka dengan browser terbaru misalnya Firefox atau Google Chrome. Jika file style.css berhasil diload maka menu navbar dan lain-lainya akan memiliki style tampilannya seperti ini :

Selanjutnya kita coba lagi apakah script.js berhasil di load dengan cara mengklik menu navbar portfolio, maka di portfolio tidak ada gambar tetapi pada saat 2 detik gambar-gambar tersebut akan tempil secara satu persatu dengan aminasinya. Jika berhasil di load Anda siap digunakan web Anda.

Langkah selanjutnya Apa?

Langkah selanjutnya mungkin Anda harus sering-sering mengunjungi situs bootstrap di getbootstrap.com dan mempelajari dokumentasi yang telah disediakan di sini.Jika Anda sering-sering kunjungi situs bootstrap maka Anda semaking memahami apa itu bootstap.

Belajar Bootstrap itu mudah

Belajar bootstrap itu mudah, tapi memang dibutuhkan pengetahuan dasar-dasar tentang HTML, CSS dan Javascript. Itu semua bisa Anda pelajari langkah demi langkah yang akan dibahas dalam bootstrap tesebut.

Bootstrap saat ini telah memiliki versi baru yaitu : Bootstrap 4 (Versi 4). Setelah versi final-Nya release. Untuk info selengkapnya silahkan kunjungi situs resminya di getbootstrap.com

 

Oleh : Michael Petege

Mahasiswa STMIK AKAKOM, Yogyakarta, Jurusan Teknik Informatika

Print Friendly, PDF & Email
share on:
Michael Petege

Michael Petege

Saya sedang belajar di STMIK AKAKOM, Yogyakarta, Jurusan Teknik Informatika. Konsentrasi belajar Web Developer dan Android Developer.

Leave a Response

share on: