Apa itu Bootsrap?, Kelebihan dan Cara Menggunakannya

Membuat tampilan website dari 0 adalah hal yang sangat melelahkan. Karena banyak sekali code css yang digunakan untuk membuat tampilan yang modern dan responsif. Beruntung bagi kalian yang sangat paham tentang css, tapi jika kalian tidak paham tentang css maka butuh waktu lagi untuk mempelajarinya.

 

Foto Keliatan Pusing

Tapi kalian tidak perlu khawatir, kalian dapat mengembangkan tampilan website yang keren dengan minimal pengetahuan css. Saat ini banyak sekali kerangka kerja yang bisa digunakan untuk membuat tampilan yang keren dan memukau. Salah satu kerangka kerja itu adalah Bootstrap.

🙋Apa itu Bootstrap?

Bootstrap adalah css framework yang sangat popular, dan digunakan oleh banyak website di dunia saat ini. Dengan menggunakan bootstrap, kalian dapat mengembangkan tampilan website secara cepat, responsif, modern dan mudah dikustomisasi. Banyak sekali komponen yang disediakan oleh bootstrap dan bisa kalian pakai dengan mudah, bahkan bisa kalian kustomisasi sesuai dengan keinginan kalian.

Bootstrap Landing Page

Bootstrap sangat cocok untuk pemula bagi yang baru belajar web design dan sangat cocok diimplentasikan di project cepat. Kalian bisa mengunjungi website resminya di 🚀getbootstrap.com untuk melihat dokumentasi cara penggunaan bootstrap.

🔥Kelebihan bootstrap

1. Mempercepat Pengembangan Website

Membuat tampilan website yang cantik tidaklah mudah, apalagi kita tidak hanya membuat tampilan untuk satu atau dua halaman saja. Apalagi setiap halaman memiliki kompnen yang berbeda-beda dari halaman lainnya. Jika hanya menggunakan css, kalian harus benar-benar ahli untuk mengembangkan tampilan website yang cepat dan konsisten.

Hadirnya bootstrap, mengikis waktu pengerjaan itu semua. Kalian tidak perlu mendesain tampilan dengan css dari awal. Gunakan komponen yang sudah ada, kustom sedikit. Dan jadilah tampilan website yang keren dan elegan.

2. Banyak komponen siap pakai

Bootstrap menyediakan banyak sekali komponen keren yang bisa kalain pakai dengan mudah. Tersedia contoh carousel, contoh tabel, contoh off canvas, contoh pop up dialog, contoh card, contoh text, contoh warna-warna pilihan, dan masih banyak lagi komponen lainnya. Cara menggunakan komponen-komponen yang ada juga cukup mudah, tinggal kalian copas dan jalankan.

Lusinan Komponen Siap Pakai 😱😱

3. Mobile friendly

Dengan menggunakan bootstrap kalian tidak perlu membuat desain untuk ukuran layar device yang berbeda. Bootstrap sudah meng-handlenya untuk kalian. Hal ini cukup membantu meringankan beban kalian, dan hal yang paling penting tampilan di seluruh device tetap cantik, elegan dan konsisten. Dan dengan tampilan yang mobile friendly, website yang kalian bangun akan lebih disukai oleh pengguna.

3. Sangat Populer

Bootstrap adalah salah satu framework css yang sangat popluer saat ini. Kepopulerannya membuat banyak dukungan dan referensi yang bisa kita pelajari. Kalian dapat dengan mudah menemukan tutorial bootstrap dalam bahasa indonesia dan inggris, dalam bentuk teks dan video. Jadi kalian tidak perlu khawatir tidak menemukan solusi permasalahan tentang bootstrap.

UI Framework Market Share July 2022

4. Banyak Source Code dan Template

Karena sangat populer, banyak sekali contoh-contih source code atau template yang bisa kalian gunakan ulang untuk keperluan pengembangan website yang kalian kerjakan. Baik template gratis dan berbayar, sangat banyak contohnya dengan berbagai tema yang bisa kalian sesuaikan dengan kebutuhan.

themewagon.com template gratis dan berbayar

Ini adalaha hal yang sangat menyenangkan. Dengan menggunakan template, kalian bisa mengembangkan website jadi semakin cepat. Biasanya template menyediakan contoh-contoh tampilan halaman yang sudah dikustom dan komponen keren lainnya yang bisa kalian poles sedikit saja. Dua contoh referensi link template: 🚀https://www.creative-tim.com dan 🚀 https://themewagon.com

Cara Menggunakan Bootstrap

Kalian bisa menggunakan bootstrap dengan banyak cara, kalian bisa mengunduh bootstrap lewat npm, composer, yarn, gem, CDN atau mengunduh berkasnya langsung dan menautkannya di project yang kalian gunakan.

Tapi saya tahu, jika kalian membaca postingan ini, saya yakin kalian adalah pemula. Dan cara yang cocok digunakan untuk pemula adalah dengan menggunakn CDN. Untuk penjelasan apa itu CDN bisa kalian baca di link berikut ini. 🚀https://www.sahretech.com/2021/05/apa-itu-cdn-pengertian-dan-manfaat-cdn.html

Menggunakan Bootstrap dengan CDN

Biasanya untuk menggunakan bootstrap, kita perlu menginstall atau mengunduh source bootstrap itu sendiri. Tapi saat kalian menggunakan bootstrap versi CDN, kalian tidak perlu mengunduh atau menginstall bootstrap di local computer kalian masing-masing. Kalian hanya perlu menempelkan link css dan javascriptnya saja. Sedangkan bootstrapnya berada di server lain. Karena menggunakan CDN kalian perlu koneksi internet.

1. Buatlah sebuah file baru dengan nama index.html. File bisa kalian letakkan di folder atau direktori yang diingkan. Buka file tersebut dengan web editor yang kalian punya, lalu copas script yang ada di bawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <!-- source css code, imported from outside -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!-- container: to give the distance between the left and right of the screen -->
    <!-- mt-5: to give the top distance as much as 48 pixel  -->
    <div class="container mt-5">
      <!-- alert: to provide an information box, usually used for incoming notifications -->
      <!-- alert-secondary: give gray color to the background  -->
      <div class="alert alert-secondary">
        <h1>Hello World!</h1>
      </div>
    </div>

    <!-- source javascript is needed to make dynamic components work using a javascript language imported from outside -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Buka file tersebut di browser, klik kanan lalu open with google chrome atau browser apapun yang kalian punya. Hasilnya bisa kalian lihat seperti gambar di bawah ini.

Contoh Bootstrap

Itu adalah contoh sederhana cara menggunakan bootstrap dengan CDN. Jika menggunakan css script yang kalian punya akan lebih banyak lagi tentunya. Kunjungi link ini untuk melihat lebih banyak contoh dan komponen bootstrap 🚀https://getbootstrap.com/docs/5.2/getting-started/introduction


Bagaimana, tertarik menggunakan bootstrap?. Sekian penjelasan singkat tentang ap aitu bootstrap, kelebihan bootstrap dan cara menggunakan bootstrap. Semoga bermanfaat. Tinggalkan komentar di bawah ini jika ada pertanyaan. Sekian dan sampai jumpa.