Assalamu alaikum Wr. Wb
Salam Pinter Bareng Komputer, ...zero bit...
Pada artikel ini saya ingin menjelaskan bagaimana cara instalasi Bootrstrap 4 ke dalam projek web yang sedang kita bangun.
Silakan kalian buka dokumentasi yang telah diberikan di dalam website resmi dari Bootstrap 4 di alamat : Dokumentasi Bootstrap 4 (getbootstrap.com). Di dalam dokumentasi tersebut bisa kalian baca langkah - langkah untuk melakukan instalasi Bootstrap 4 ke dalam projek web yang sedang kita kerjakan.
Namun bagi kalian yang ogah membaca panduan instalasi dalam bahasa Inggris, berikut ini saya tuliskan langkah - langkah instalasinya :
- Buat sebuah folder projek web baru di dalam drive komputer kalian, beri nama misalkan : websekolah.
- Buat sebuah file html baru dengan nama : index.html. (Catatan : untuk alasan keamanan setiap folder baru di dalam projek web sebaiknya di dalamnya memiliki file dengan nama index.html, walaupun isinya kosong)
- Buka dokumentasi Bootstrap yang alamatnya sudah saya share di atas, kemudian masuk ke menu download. Dijelaskan di sana bahwa untuk dapat menggunakan semua library framework Bootstrap 4 ada 2 cara yang dapat dilakukan, yaitu
- Mendownload semua file library nya kemudian settingkan ke dalam folder projeknya
- Menggunakan Bootstrap CDN, yaitu dengan cukup mengcopy link css dan js miliknya Bootstrap 4 kemudian mempaste di dalam halaman web yang ingin menggunakannya.
Cara 1 : Mendownload Library Framework Bootstrap 4
- Masuk ke dalam dokumentasi bootstrap 4 kemudian silakan download semua file library boostrap dengan mengklik tombol download. Kalian bisa pilih versi download Compiled CSS and JS atau versi download Source File. (Catatan : jika ingin menghemat ukuran file projek, saya sarankan download yang versi Compiled CSS and JS)
- Setelah download selesai kalian akan mendapatkan sebuah file dengan nama : bootstrap-4.4.1-dist.zip.
- Lakukan extraksi file menggunakan aplikasi WinRar atau WinZip dan arahkan ke dalam folder projek yang sudah kalian buat sebelumnya.
- Kalian boleh merename nama folder bootstrap-4.4.1-dist dengan nama baru yang kalian mau, atau tetap dengan nama aslinya. Di sini saya rename dengan nama bootstrap4.
- Jika kalian buka isi folder bootstrap4 ada 2 folder yaitu CSS dan JS yang masing - masing sudah ada isinya. Folder CSS isinya adalah file - file style sedangkan folder JS isinya adalah file - file jquery.
- Isi folder CSS semunya adalah file - file untuk melakukan setting tampilan melalui CSS.
- Isi folder JS adalah file - file jQuery javascript untuk mengendalikan tampilan saat terjadi event tertentu yang mengenai komponen.
- Misalkan kita ingin menggunakan library bootstrap 4 di dalam halaman index.html, maka buka file index.html dengan Sublime kemudian copy paste script berikut yang bisa kalian ambil dari dokumentasi bootstrap 4 pada menu Getting Started dengan mengklik tombol copy yang ada di pojok kanan atas.
- Hasil copy - paste di dalam file index.html:
- Jika dijalankan di dalam browser maka hasilnya seperti berikut :
- Agar script di dalam halaman index.html dapat terhubung ke dengan file library bootstrap 4 yang sudah kita download maka perlu dilakukan penyesuaian pada scriptnya. Bagian - bagian yang akan disesuaikan adalah bagian - bagian yang diberikan tanda cek merah pada poin 9 di atas.
- Demikianlah cara melakukan instalasi Bootstrap 4 dengan melakukan download file librarynya langsung dari situs resmi bootstrap 4. Kelebihan cara ini adalah saat dijalankan di dalam browser semua resource bootstrap 4 tidak perlu dibaca online dari situnya namun bisa langsung diambil dari file2 yang sudah di
Cara 2 : Menggunakan BootstrapCDN
Cara 2 ini sama dengan langkah 8 dan 9 dari Cara 1 di atas. Kelemahan cara ini adalah saat projek web dijalankan maka semua resource bootstrap 4 akan diambilkan online dari repository bootstrap 4, sehingga jika kondisi tidak ada internet maka tampilan hasil design webnya akan berantakan, karena tidak disupport oleh bootstrap 4.
Semoga artikel ini bermanfaat.
Postingan
0 comments:
Posting Komentar