Halo Teman-teman dari Pengunjung setia Blog Kampus Informatika . Perkenalkan Saya Bayu Afrizatul Rizki admin dari blog ini . Disini kita akan belajar Framework Bootstrap dari 0 ke master (insyaallah) . dan ini adalah bagian 1 yaitu Panduan Instalasi Bootstrap. ikuti terus tutorial blog ini sampai selesai ya. selamat belajar ^_^ .
Bagian-bagian yang akan kita pelajari di bagian 1 ini adalah :
- Pengertian Bootstrap
- Cara Instalasi Bootstrap
- Cara menggunakan Bootstrap
Apa itu Bootstrap?
Bootstrap adalah front-end framework yang solek, 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 itu bootstrap?
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 ataupun 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 pemula?
Untuk memulai belajar Bootstrap, Anda harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar tersebut. Baiklah, langsung saja kita mulai dengan mengikuti langkah-langkah sebagai berikut.
Persiapan (Step-by-Step):
1. Anda Harus memiliki file distribusi Bootstrap
Download Bootstrap 3
Jika link download tersebut tidak tersedia, kunjungi situs resminya di getbootstrap.com kemudian pilih link atau klik tombol Download Bootstrap.
Untuk menggunakan bootstrap, terlebih dahulu Anda harus mendownload resource file atau file distribusi yang disediakan oleh bootstrap di situs resminya getbootstrap.com. Karena pada tutorial ini kita akan menggunakan bootstrap 3 maka kita menuju halaman download untuk bootstrap 3 dari link pada tomblo diatas.
Setelah didownload, kemudian extract menggunakan program seperti 7zip (Gratis) atau winRAR (shareware). 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 lain.
2. Download jQuery Library Untuk Bekerja Offline
Download Jquery 3
Jika link download tersebut tidak tersedia, kunjungi situs resminya di jquery.com kemudian pilih link Download the compressed, production jQuery 3.2.1.
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).
3. Anda harus memiliki code editor.
Download Notepad ++
Jika link download tersebut tidak tersedia, kunjungi situs resminya di notepad-plus-plus.org kemudian pilih link atau klik Download yang ada di panel kiri halaman paling bawah.
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 Bootstrap Play dari kami yang dibuat untuk tes atau uji coba kode, baik Bootstrap, HTML, CSS dan Javascript langsung dalam satu editor. Jangan pernah menggunakan Word processor (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. Sebagai pemula, mungkin kita bisa memulai dengan menggunakan Notepad++. Aplikasi ini gratis dan banyak digunakan oleh developer.
Cara Instalasi Bootstrap
Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:
1. Buat Folder Baru
Buatlah folder baru, beri nama "Belajar_Bootstrap".
2. Copy seluruh file Bootstrap ke dalam Folder Baru Tersebut
Copy folder css, fonts dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder baru tersebut (Belajar_Bootstrap)
3. Copy file jQuery ke dalam folder js
Copy dan Gabungkan file jquery-1.12.0.min.js yang telah kita download kedalam folder js punya bootstrap tadi, hal ini dilakukan untuk mempermudah proses pembelajaran.
4. Buat file HTML
Buat file baru di notepadd++ (atau code editor kesayangan Anda) kemudian copy code snippet yang saya sediakan dibawah ini, kemudian save dan berilah nama: index.html dan simpanlah file tersebut ke folder "Belajar_Bootstrap" yang telah dibuat diatas.
Komentar
Posting Komentar