Bootstrap termasuk materi ajar yang saya lihat pada tutorial desain web kemarin. Framework CSS (Cascading Style Sheet) lainnya yang juga diajarkan yaitu Tailwind CSS. Bagi pemula yang belajar desain web otodidak seperti saya mungkin sedikit bimbang.
Belum lagi dengan hadirnya framework PHP yang juga diajarkan di sana. Apakah ingin mempelajari Laravel atau CodeIgniter? Tidak ketinggalan juga dengan framework JavaScript yang juga beragam. Lagi-lagi pemula bingung memilih AngularJS? Vanilla JavaScript? Adonis? React? Vue?
Kira-kira, framework apakah yang cocok untuk saya pelajari? Dan ketika saya memilih framework CSS kemudian pilih yang mana? Apakah akan menggunakan Bootstrap? Tailwind? Materialize CSS?
Setelah melihat beberapa video tutorial di sana akhirnya sedikit bisa mengambil kesimpulan. Alhamdulillah, patut disyukuri mendapatkan banyak manfaat meskipun belum mengikuti kelas premium. Salah satunya yaitu pengetahuan dasar tentang cara install Bootstrap secara offline.
Cara Install Bootstrap Offline di Laptop
Install Bootstrap ke dalam project kita memiliki beberapa cara. Ada install melalui package manager, download source code atau melalui tautan via CDN (Content Delivery Network). Dan kali ini kita coba download hanya file CSS dan JavaScript bawaan Bootstrapnya saja. Setelah itu kita coba melihatnya dengan menggunakan Visual Studio Code.
1. Kunjungi link getbootstrap.com/.
2. Klik "Download".
3. Klik "Download" pada bagian "Compiled CSS and JS".
4. Ekstrak hasil download yang masih berbentuk file .zip.
5. Hasil ekstrak akan terlihat berupa folder dengan nama "bootstrap" diikuti angka yang merupakan versi framework css tersebut.
6. Adapun isi folder hasil ekstrak terdiri atas dua folder; yaitu folder dengan nama css dan folder dengan nama js.
7. Tempatkan folder bootstrap tersebut pada lokasi yang diinginkan.
8. Buka Visual Studio Code.
Catatan: Bagi yang belum memasangnya silahkan install VSCode terlebih dahulu. Untuk pemasangannya bisa melalui Microsoft Store atau installer. Pengguna sistem operasi GNU/Linux juga bisa install Visual Studio Code.
9. Klik File > Open Folder atau dengan menekan tombol shortcut: Ctrl + K Ctrl + O.
10. Bisa juga dengan menekan "Open folder" pada bagian side bar kiri (Primary Side Bar) atau yang nampak pada menu Get started (Ini biasanya baru muncul ketika vscode baru pertama kali dibuka).
10. Pilih folder bootstrap tadi kemudian klik "Select Folder".
11. Cara menempatkan folder bisa juga dengan cara langsung. Silahkan drag and drop folder tersebut dari Explorer ke Visual Studio Code.
12. Ceklis dan klik tulisan:"Trust the authors of all files in the parent folder dst" kemudian klik tulisan "Yes, I trust the authors. Trust folder and enable all features."
13. Install Bootstrap secara offline dengan VSCode sudah selesai. Pada kali ini kita contohkan dengan menggunakan Visual Studio Code. Mudah-mudahan kedepan bisa menggunakan contoh lain, misalnya dengan Xampp, Wamp atau Laragon.
14. Sedangkan untuk penggunaan Bootstrap sendiri dilakukan melalui dua langkah. Pertama; tempatkan tag <link "rel=stylesheet" dengan "ahref" menuju ke file css dan js yang sudah didownload tadi. Dan kode ini tepat diletakan di bagian tag <head> dan sebelum </head>. Kedua; Kode-kode Bootstrap siap digunakan secara offline pada project Anda.
Kesimpulan
Uraian diatas telah berhasil mengunduh Boostrtap agar bisa diakses dari komputer lokal. Tool yang digunakan yaitu Visual Studio Code dengan extension live server. Hal ini ditunjukan sebagaimana terlihat pada tangkapan layar paling awal di atas. Adapun browser bisa pilih secara bebas; Chrome, Edge, Firefox atau lainnya.
Lalu bagaimana cara menggunakan kode-kode booststrap ini kedalam file html kita? Pada poin terakhir telah dijelaskan langkah-langkahnya secara sederhana (lihat nomor 14). Namun untuk detailnya, bisa disimak artikel selanjutnya tentang cara input kode bootstrap secara offline.
Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar