Tutorial Bootstrap 4 #1 : Pengertian dan Pengenalan Bootstrap 4


pengertian dan pengenalan bootstrap 4

Pengertian dan Pengenalan Bootstrap 4 – Selamat datang di tutorial bootstrap 4 lengkap bahsa indonesia bagian pertama di www.malasngoding.com.

Pada kategori tutorial bootstrap 4 ini teman-teman akan belajar segala sesuatu tentang bootstrap, khususnya bootstrap 4. mulai dari pengertian, cara menggunakan bootstrap, cara menggunakan komponen-komponen yang sudah disediakan dalam bootstrap. sampai membuat template sederhana menggunakan bootstrap 4.

Hingga teman-teman akan merasakan bagaimana kemudahan yang diberikan oleh bootstrap saat teman-teman membuat template/tampilan website.

Silahkan kunjungi link berikut jika teman-teman ingin membaca tutorial bootstrap 3 yang sudah dibuat di malasngoding.com.

Tutorial Bootstrap 3

Dan silahkan ikuti kategori tutorial bootstrap 4 ini untuk teman-teman yang baru ingin belajar bootstrap 4, atau teman-teman yang sudah pernah belajar bootstrap 3.

Disarankan untuk teman-teman yang baru belajar bootstrap untuk mempelajari bootstrap 4. dibanding bootstrap versi sebelumnya.

Pengertian dan Pengenalan Bootstrap 4

Sebelum lebih jauh mempelajari bootstrap 4, ada baiknya kita mulai dengan pengertian, pengenalan dan cara menggunakan bootstrap 4.

Pengertian Bootstrap

Bootstrap adalah salah satu framework CSS yang paling populer saat ini (saat artikel ini ditulis). bootstrap berisi kerangka kerja untuk memudahkan kita dalam membuat template atau tampilan website.

Bootstrap telah menyediakan class-class untuk membuat berbagai jenis komponen website. seperti menu navigasi, pesan alert, carousel, tombol, form, table dan lain-lainnya yang akan kita pelajari satu per satu di tutorial bootstrap 4 selanjutnya.

Bahasa sederhananya begini, bootstrap berisi class-class yang tinggal pakai. misalnya kita ingin membuat tombol, kita tinggal menggunakan class yang disediakan bootstrap untuk membuat tombol. tanpa harus menulis coding css lagi dari awal.

Sangat disarankan untuk teman-teman agar paham terlebih dulu tentang HTML dan CSS dasar, agar teman-teman lebih mudah memahami isi dari bootstrap dan cara kerja bootstrap.

Intinya teman-teman jangan pusing, ikuti saja materi ini secara bertahap. Insha Allah teman-teman akan lebih paham pada saat mulai mempraktekkan materi bootsrap 4 ini.

Pengenalan Bootstrap

Hingga saat ini bootstrap telah sampai versi 4. ada banyak perubahan pada versi ini. termasuk tampilan dan warna yang lebih jernih dan modern. jika dibandingkan dengan bootstrap versi sebelumnya.

Situs resmi bootstrap adalah https://getbootstrap.com/.

pengertian dan pengenalan bootstrap 4

pengertian dan pengenalan bootstrap 4

Bootstrap bersifat gratis dan bisa digunakan oleh siapa saja.

Pada website resmi bootstrap, terdapat dokumentasi cara penggunaaan bootstrap (menu Documentation) dan contoh-contoh template website yang dibuat dengan menggunakan bootstrap (menu Examples).

Tentu akan timbul tanda tanya dalam hati teman-teman, “untuk apa sih kita menggunakan bootstrap?“, “Emang apa kegunaannya?“, dan “apa untungnya buat saya?“.

Baik, mari simak penjelasan berikut.

Kelebihan Menggunakan Bootstrap

Ada beberapa kelebihan yang siknifikan dengan menggunakan bootstrap. diantaranya adalah :

  • Menghemat waktu
    Karena kita tidak perlu lagi menulis coding css untuk masing-masing komponen yang kita buat. kecuali kita ingin meng-custom tampilan componen bootstrap. jadi sangat menghemat waktu, apalagi jika teman-teman adalah seorang full stack developer yang menangani bagian front-end dan back-end sendirian.
  • Tampilan Responsive
    Ini keunggulan yang sangat siknifikan pada bootstrap. dengan menggunakan bootstrap, kita bisa membuat halaman website yang responsive dengan mudah. sehingga tampilan halaman website tetap rapi dan menarik saat dibuka di smartphone, tablet, laptop maupun pc.
  • Mudah Digunakan
    Developer seperti dimanjakan dengan menggunakan bootstrap. bayangkan, kita bisa membuat segala jenis komponen webiste dengan cepat. hanya tinggal menuliskan class-class yang sudah disediakan oleh bootstrap untuk membuat komponen tertentu.
  • Lain-lain
    Ada banyak kelebihan lainnya yang akan teman-teman rasakan sendiri pada saat mulai menggunakan bootstrap.

Kelebihan Bootstrap 4

Seperti yang sudah disinggung sebelumnya, saat artikel ini dibuat, pengembangan bootstrap sudah sampai versi 4. tentu ada beberapa perubahan pada bootstrap 4 dengan bootstrap versi sebelumnya, baik itu dari segi tampilan maupun cara penggunaanya.

Apa saja yang baru di bootstrap 4 dibanding bootstrap versi sebelumnya?

Berikut beberapa kelebihan bootstrap 4 dibanding versi sebelumnya :

  • Bootstrap 4 sudah menggunakan Sass, dibanding versi sebelumnya yang menggunakan Less.
  • Komponen panel diganti dengan komponen card.
  • Layout menggunakan css flexbox.
  • Tidak didukung lagi pada IE8 dan IE9.
  • Mengganti unit satuan ukuran pada komponen menggunakan satuan rem.
  • Dan banyak lagi yang bisa teman-teman baca di https://getbootstrap.com/.

Oke teman-teman, sekian dulu tutorial tentang penjelasan bootstrap 4 dasar ini.

Selanjutnya kita akan belajar bootstrap 4 secara bertahap. dengan cara mulai berkenalan dan belajar membuat atau menggunakan komponen-komponen yang sudah disediakan oleh bootstrap.

Sekian tutorial Pengertian dan Pengenalan Bootstrap 4. terima kasih 🙂



Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

TUTORIAL MENARIK LAINNYA

jumbotron bootstrap
dropdown bootstrap 4
Diskusi
4 Komentar
  • Tutorial Bootstrap 4 #2 : Cara Menggunakan Bootstrap 4 – Malas Ngoding 1 month ago

    […] Baca : Tutorial Bootstrap 4 #1 : Pengertian dan Pengenalan Bootstrap 4 […]

  • Tutorial Bootstrap 4 #5 : Heading Bootstrap 4 – Malas Ngoding 1 month ago

    […] Tutorial Bootstrap 4 #1 : Pengenalan Bootstrap 4 […]

  • Tutorial Bootstrap 4 #7 : Membuat List – Malas Ngoding 1 month ago

    […] teman-teman sudah membaca tutorial bootstrap 4  bagian sebelumnya. yaitu tentang pengenalan dan pengertian bootstrap 4 dan cara menggunakan bootstrap […]

  • Tutorial Bootstrap 4 #9 : Membuat Table Dengan Bootstrap 4 – Malas Ngoding 4 weeks ago

    […] Tutorial Bootstrap 4 #1 : Pengenalan Bootstrap 4 […]