Asslmkm. Hello netizen Microtrafh blog. Bertemu lagi dengan Saya di tutorial Bootstrap versi 3. Pada hari yang lalu saya sudah memberikan tutorial Bootstrap v3 yakni tentang pengenalan singkat apa itu Bootstrap.
Tapi, jika kalian belum menyimak dan membaca artikel nya. Bisa disimak lagi di Tutorial Bootstrap v3 part 1 : Yukkk Kenalan...!! . Kali ini saya akan melanjutkan pembahasan mengenai Bootstrap. Dan pembahasan yang dibahas kali ini adalah "Mari Mengonfigurasi..!!". Waduh sudah mulai praktek? Ya, Kalian harus siap praktek. Karena seorang yang berkecimpung di dunia teknologi harus sering berpraktek - praktek ria. Pertama, Kalian harus mendownload Bootstrap di : http://getbootstrap.com/ Ok. masalah proses download akan dijelaskan secara rinci ! So, mari kita bahas satu persatu.
A. Saatnya Mendapatkan !
[1] Kalian akan mendapatkan satu paket bundle / package saat mendownload Bootstrap, yang pasti, dapatkan versi 3 pembaruan dari pihak Bootstrap agar kalian dapat mengetahui apa saja yang terbaru dari versi terbaru. Pada saat saya menulis ini, Bootstrap yang dipilih adalah versi 3.3.1 .
[2] Setelah di klik, kalian akan dibawa ke halaman Getting Started. Dan pilih "Download Bootstrap", nanti akan muncul proses download sesuai dengan browser yang kalian pakai.
[3] Setelah proses download selesai, Kalian akan melihat sebuah package yang bernama bootstrap-3.3.1-dist . Lihat gambar berikut :
[4] Lalu extract dengan program RAR atau ZIP . Kalian bisa memilih "Extract Here" atau "Extract File". Terserah Kalian.
[5] Setelah diekstrak, kalian akan melihat sebuah folder "dist", yaitu isi dari package bootstrap. Seperti pada gambar berikut :
[6] Pilih dan klik folder berikut untuk melihat apa saja yang ada didalam folder "dist". Setelah dibuka folder tersebut maka kalian akan melihat subfolder yang terdiri dari css, fonts, js. Seperti pada gambar berikut :
[7] Seperti janji saya tadi, saya akan menjelaskan satu persatu. Dimulai dari sub folder css, didalamnya terdapat beberapa file yaitu : bootstrap.css, bootstrap.css.map, bootstrap.min.css, bootstrap-theme.css, bootstrap-theme.css.map, dan bootstrap-theme.min.css . Pada versi terbaru terdapat file baru yaitu bootstrap-theme dan bootstrap.css.map .
[8] Berikutnya, kalian buka subfolder fonts, terdapat 4 file fonts. Tidak ada pembaruan didalam subfolder fonts.
[9] Lalu buka subfolder js, kalian akan melihat 3 folder. Di subfolder ini terdapat pembaruan yakni file : npm.js . Lihat Gambar !
Ok, mengapa saya sampai menjelaskannya satu persatu ? karena agar kalian dapat memahami bagaimana struktur file yang ada di bootstrap. Jika kalian langsung memakainya tapi tidak memahami struktur file. Maka pemanggilan class atau id yang ada di Bootstrap tidak akan berhasil. Setelah ini, mari kita membahas topik utama yaitu mengonfigurasi serta mengimplementasikan bootstrap.
B. Saatnya Mengonfigurasi !
[1] Silakan kalian membuat satu folder, disini saya membuat satu folder dengan nama "latihan_bootstrap".
[2] Buka folder tersebut dan buatlah satu file HTML dengan nama "index". Disini saya menggunakan Notepad++ untuk membuat file HTML. Tapi kalian bisa menggunakan Text Editor lain seperti Sublime Text, Brackets, atau yang lainnya asalkan jangan memakai Notepad bawaan Windows untuk menghindari kesalahan pembuatan sintaks. h_h Ini tampilan screenshot saat membuat file "index".
[3] Kemudian buatlah subfolder dengan nama "assets". Fungsinya adalah untuk menampung semua subfolder dari bootstrap yakni subfolder css, fonts, dan js. Copy-kan semuanya ke subfolder "assets".
[4] Setelah selesai menyimpan subfolder css dan js di subfolder "assets", kalian buka kembali text editor nya dan buka file index.html untuk memulai mengonfigurasi bootstrap agar dapat digunakan di dalam projek pembuatan website kita.
[5] Pada gambar, kalian harus mengetik sintaks berikut agar bootstrap dapat digunakan dalam pembuatan web. Sehingga ketika kita akan menggunakan style dan efek dari Bootstrap, kita tinggal panggil nama Class atau nama ID nya.
[6] Simpan sintaks pemanggilan file Bootstrap diantara tag <head> dan </head> . Coba amati lagi gambar diatas !
Bagaimana ? Apakah sudah dapat dipahami ? Jika belum, coba ulangi langkah - langkah diatas agar kalian bisa paham, bukan sekedar ingat !
By the way, Untuk konfigurasi cukup sampai disini. Setelah proses konfigurasi, saya akan membahas bagaimana menggunakan class dan id yang terdapat dalam Bootstrap. Kita harus mengetahui kamus yang diberikan oleh Bootstrap, Di tutorial bootstrap part 3, kita akan jalan - jalan untuk mengamati situs Bootstrap sampai ke detail-nya. So, tetap selalu update !
Sampai Jumpa. Wassalam.
