Select Page

Membuat Web Menggunakan Bootstrap 4

Membuat Web Menggunakan Bootstrap 4

Hello kocerners ,,dah lama nih Kocer ga update maklum lagi sekarang lg masa masa ujian. Nah kali ini Kocer mau ngasih tau kalian cara membuat web menggunakan Bootstrap 4. Sebelum ke tutorial Kocer mau kasih tau, Apasih Bootstrap itu ?

Apa itu Bootstrap ?

Bootstrap adalah salah satu framework front-end yang keren, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device, yang mempermudah dan mempercepat pengembangan sebuah website. Bootstrap menyediakan HTML, CSS dan Javascript yang siap dan mudah digunakan.

Bulma CSS : Modern Framework CSS

Apa fungsi Bootstrap ?

Bootstrap merupakan framework front-end untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat menggunakan Bootstrap akan menyesuaikan diri dengan ukuran layar device yang kita gunakan, baik desktop, tablet ataupun mobile.  Fitur ini bisa kalian aktifkan ataupun dinon-aktifkan sesuai dengan keinginan sabahat kocer. Sehingga, sabahat kocer bisa membuat web untuk tampilan desktop saja, dengan itu apabila dirender/dibuka oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar atau bahkan tidak muncul. Dengan bootstrap kita bisa membangun web statis ataupun dinamis.

Bagaimana cara belajar Bootstrap untuk pemula ?

Untuk membuat web menggunakan Bootstrap, Sahabat Kocer harus mempersiapkan tools pendukung untuk melengkapi kegiatan belajar. Selain itu sahabat Kocer minimal paham cara menggunakan html dan css. oke langsung saja.

Persiapan

  1. Kalian harus memiliki file distribusi Bootstrap 4
    Website Bootstrap
    Untuk membuat web menggunakan Bootstrap 4 kalian harus memiliki file distribusi / resource file Bootstrap 4 itu sendiri. Untuk mendapatkan file distribusi Bootstrap 4 kalian bisa download di website resmi Bootstrap melalui link di atas. Setelah di download, kemudian extract file tersebut menggunakan aplikasi extract zip/rar yang kalian miliki.
  2. Download jQuery untuk bekerja offline
    Download jQuery
    Untuk bisa mengaplikasikan Bootstrap component seperti modal dialog, navigation bar dan lainnya yang membutuhkan Boostrap JS, kita memerlukan juga jQuery karena Bootstrap JS juga membutuhkanlibrary jQuery agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery di dalam file download-nya, untuk itu kita harus mendownloadnya secara terpisah. Hal ini dilakukan agar website sahabat kocer bisa bekerja dan menggunakannya secara tanpa koneksi internet.
  3. Kalian harus memiliki Text Editor
    Text editor sangat penting untuk memanipulasi file yang akan kalian  kembangkan khususnya file HTML, CSS, dan JS sebagaimana yang terdapat pada Bootstrap. Ada banyak sekali text editor yang tersebar di internet yang dapat sahabat kocer gunakan baik gratis maupun berbayar.

Tahap tahap

Setelah semua di siapkan saatnya saatnya kita ber-coding ria. Ok berikut tahap tahapnya :

  1. Buat folder baru dan berinama BelajarBootstrap4.
  2. Copy Seluruh file Bootstrap yang telah kita extract ( folder css dan folder js ) sebelumnya kedalam folder yang telah kita buat.
  3. Copy file jQuery yang telah kita download sebelumnya kedalam folder js.
  4. Buat file HTML menggunakan text editor yang telah disiapkan, kemudian copy code yang telah saya sediakan dibawah ini dan simpan dengan nama index.html di dalam folder BelajatBootstrap4.
  5. Setelah itu buka file index.html tersebut di browser yang kalian biasa gunakan.

Bila tahap-tahap diatas telah dilakukan dengan benar maka dibrowser kalian akan tampil seperti ini.

Ok sekian yang dapat Kocer sampaikan untuk Membuat Web menggunakan Bootstrap 4, bila ingin merequest tutorial kalian bisa request di kolom komentar di bawah atau mengirim email ke chandikanurdiansyah@codecerdas.com.

About The Author

Leave a reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Click For Donate