Cara Membuat Web Sederhana Dengan Bootstrap

Cara Membuat Web Sederhana Dengan Bootstrap

*Pengertian

Bootstrap adalah sebuah Library Framework CSS yang dibuat khusus untuk bagian front-end website. Bootstrap merupakan salah satu Framework HTML, CSS dan Javascript yang paling popular di kalangan web developer.

Bootstrap menyediakan kumpulan komponen-komponen  antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk dapat digunakan bersama-sama. Selain itu, Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangan senada dengan komponen-komponen lainnya. Bootstrap dibuat untuk membangun website sederhana yang mudah tetapi tetap menarik dan bisa digunakan untuk siapa saja.

Salah Satu contoh website besar yang menggunakan  framework bootstrap  adalah twitter,  karena  sebenarnya bootstrap dikembangkan  oleh developer twitter sendiri sehingga bootstrap sering juga disebut twitter bootstrap. Bootstrap berisi kumpulan class yang siap dipakai dengan kata lain kita hanya tinggal copy-paste dan sedikit modifikasi.

*Kelebihan Bootstrap

Berikut kegunaan  yang menjadi kelebihan Bootstrap:

1.Tampilan Bootstrap yang cukup modern.

2.Tampilan Bootstrap yang sudah responsive, sehingga mendukung segala jenis resolusi (PC, Smartphone dan juga tablet).

3.Dapat mempercepat waktu proses pembuatannya.

4.Website menjadi ringan saat diakses, karena Bootstrap dibuat secara terstruktur.

5.Framework/ kerangka kerja yang efisien. Dan masih banyak lagi.

*Cara Menginstall Bootstrap

Sebelum anda membuat website dengan Bootsrap, tentunya anda harus menginstall terlebih dahulu file Bootstrap, ingat ya bootstrap bukan berbentuk aplikasi tapi berbentuk file yang didalamnya terdapat tiga folder yaitu(CSS, FONT, dan JS) ada juga yang didalamnya terdapat folder  (CSS, IMG, dan JS). Anda dapat menginstall nya digetbootstrap pilih install bootstrap. Selanjutnya anda tinggal menginstall file Jquery lalu  tambahkan file tersebut ke dalam folder JS.

*Cara Menggunakan Bootstrap

1. Seperti yang sudah dibahas tadi kita harus menginstall file bootstrap terlebih dahulu sebelum menggunakan bootstrap, setelah file tersebut kita install lalu extract filenya dengan menggunakan program seperti winrar atau 7zip.

2. Setelah itu seperti yang sudah dibahas juga kita harus menginstall Jquery, dan kita dapat menginstall nya di JQuery . Fungsi Jquery sendiri  yaitu agar bootstrap komponen seperti dialog modal, navigation dan komponen yang menggunakan bootstrap.Js dapat berjalan.

3.  Gunakan code editor seperti , Notepad++, Sublime, untuk mempermudah dalam membuat code html,  css, maupun Javascript.

Itu adalah tahap persiapan, sekarang kita mulai menggunakan bootstrap dengan tahap-tahap berikut:

1.Buat folder baru, beri nama yang sesuai dengan anda, misalkan ‘Belajar_Bootstrap’.

2. Copy Semua file bootstrap yang sudah diextract tadi kedalam folder baru yang sudah dibuat tadi.

3.  Seperti yang dibahas diatas copy file JQuery kedalam folder Js.

4.  Buka code editor anda lalu buat file html baru misalkan beri nama index.html. untuk mempermudah dalam pembuatan anda harus selalu membuka web getbootstrap disitu anda akan mendapatkan banyak materi-materi. Nah, untuk tahap awal scroll kebawah dan anda akan menemukan kata kunci “Basic Template” copy saja codingan tersebut kedalam  file index.html.

Itulah tahap awal pembuatan bootstrap, selanjutnya  anda hanya tinggal menambahkan class class dan memodifikasi codingan tersebut.

Semoga bermanfaat:)