Belajar Menggunakan Bootstrap 4 Offline

Ad Blocker Detected

Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Bootstrap merupakan sebuah library fremework yang dirancang untuk pengembangan front-end website agar lebih cepat dan mudah. boostrap adalah salah satu template desain berbasis html, css, dan plugins javascript, yang saat ini sangat populer digunakan oleh para developer web.

Apa Keuntungan Menggunakan Bootstrap Untuk Desain Web ?

Banyak sekali, kita tahu bahwa untuk membuat halaman web saat ini tidak cukup dengan pengetahuan dasar css, belum lagi dengan responsifitas perangkat yang digunakan, misalnya tampilan web jika diakses dari gadget, tablet, maupun desktop itu sendiri. belum lagi dukungan responsifitas browser yang digunakan oleh user yang mengakses web kita, dan masih banyak lagi hal-hal yang perlu diperhatikan dalam pembuatan desain halaman web.

Oleh karena itu, dengan menggunakan bootstrap akan sangat membantu sekali dalam proses pengerjaan project website kita agar lebih efisien dan menghemat waktu, ditambah dengan bootstrap yang membolehkan kita untuk mengcustom dari tampilan element bootstrap itu sendiri, maksudnya kita bisa membuat desain css kita sendiri.

Apa Kelebihan Bootstrap ?

  • Dokumentasi penggunaan bootstrap lengkap, untuk memudahkan kita dalam menggunakan framework bootstrap.
  • Dapat menghemat waktu dalam proses pembuatan web.
  • Responsive atau mobile friendly dengan berbagai perangkat seperti gadget, smartphone, maupun tablet.
  • Boostrap dapat di custom sesuai keinginan kita.
  • Resource kecil dan ringan digunakan dalam project web.
  • Dan masih banyak lagi kelebihan lainnya.

Bagaimana Cara Menginstal Bootstrap 4?

Ada banyak cara untuk menginstall bootstrap, diantaranya menggunakan CDN (Content Delivery Network), package manager seperti RubyGems, Composer, nuGet, NPM, atau bisa juga dengan cara mendownloadnya langsung dan di install pada direktori web kita. untuk lebih lengkapnya silahkan kunjungi dokumentasi bootstrap ini.

Menurut hemat saya, installasi bootstrap lebih mudah dilakukan dengan kita mendownload langsung dari situsnya, keuntungannya adalah kita dapat menggunakan bootstrap tanpa perlu terhubung ke internet, karena resource bootstrap sudah kita sertakan pada direktori website kita.

Untuk menggunakan Bootstrap secara offline ini, silahkan download terlebih dahulu bootstrap di situs resminya dan pilih Compiled CSS & JS.

Extract hasil download tersebut, dan sekarang kita mempunyai direktori CSS dan JS dari bootstrap. lalu copy file tersebut pada direktori website kita sehingga tampak hasilnya seperti gambar berikut :

belajar bootstrap untuk pemula
Struktur direktori learn bootstrap

Seperti terlihat pada gambar diatas, direktori website saya bernama learn-bootstrap, lalu direktori css dan js bootstrap, saya letakan pada direktori asset agar file-file ini terlihat rapi dan tertata.

Perlu diketahui bahwa, supaya bootstrap dapat berjalan dengan baik, kita perlu untuk menambahkan jquery pada website kita, silahkan download jquery-nya, dan letakan pada direktori JS. kita akan menggunakan jquery ini dengan cara offline juga, (perhatikan kembali gambar diatas).

Anda mungkin perlu membaca ini :

Selanjutnya buatlah sebuah file index.html pada direktori utama web kita, dan isi dari file tersebut seperti code dibawah ini.

Selanjutnya, kita akan coba belajar membuat template sederhana menggunakan bootstrap. Sekian postingan kali ini, semoga bermanfaat.

Leave a Reply