Cara menggunakan komponen bootstrap

Bootstrap merupakan sebuah library framework CSS yang telah dibuat khusus uintuk mengembangkan front end sebuah website. Bootstrap juga dikenal sebagai salah satu framework CSS, HTML, Javascript yang begitu populer di kalangan website developer atau pengembang website, bootstrap digunakan untuk mengembangkan website agar lebih responsive.

Bootstrap adalah framework CSS untuk membuat tampilan web. Bootstrap menyediakan class dan komponen yang siap dipakai, sehingga kita tidak perlu menulis kode CSS dari nol.

Dengan adanya bootstrap membuat halaman website bisa menyesuaikan dengan ukuran monitor device. Baik jika di akses lewat ponsel, tablet ataupun desktop. Awal mulanya, bootstrap sendiri bernama Twitter Blueprint.

Sebagai pengguna kita hanya perlu memanggil setiap kelas yang digunakan, contohnya seperti navigasi, tabel, grind, tombol atau sebagainya. Banyak fungsi bootstrap yang bisa dipakai untuk sebuah website, berikut fungsinya:

1. Bisa mempercepat waktu untuk memproses pembuatan front end sebuah website
2. Menampilkan sisi website yang lebih modern dan juga khas anak jaman sekarang
3. Tampilan dari bootstrap sudah responsive sehingga sangat mendukung untuk segala jenis resolusi, entah itu tablet, smartphone ataupun juga PC dan laptop.
4. Website yang menggunakan bootstrap umumnya lebih ringan karena lebih terstuktur.

Sejarah dan Perkembangan Bootstrap

Bootstrap pertama kali muncul di ajang hackweek. Di awal kemunculannya tadi, komponen bootstrap masih sangat kurang. Namun, berkat adanya sejumlah penyempurnaan akhirnya bootstrap bisa seperti sekarang. Platform ini menggunakan boostrap dan sedikit memakai coding seperti bahasa JavaScript dan juga CSS. Hasilnya bisa membuat website yang sangat powerfull dan juga berkembang dengan mengikuti browser. Tidak heran penggunaan bootstrap menjadi daya tarik tersendiri.

Bootstrap awalnya dibuat dan dikembangkan oleh programmer Twitter, yaitu Mark Octo dan Jacob Thornton sejak tahun 2011. Saat itu memang para programmer di Twitter menggunakan berbagai macam tools dan library yang mereka kuasai dan disukai untuk melakukan pekerjaannya, sehingga tidak ada standarisasi dalam penamaan suatu class. Akibatnya sulit untuk dikelola, maka dari itu keduanya membuat suatu tools ataupun framework yang digunakan bersama dilingkukan internal twitter.

Sejak diluncurkan pada bulan agustus 2011, bootstrap telah berevolusi dari proyek yang hanya basis css menjadi sebuah framework yang lebih lengkap yang juga berisi javascript plugin, icon, Forms, dan button.

Pada januari 2012, Bootstrap merealease Versi 2.0 yang didalamnya sudah memasukan fitur responsive layout, dan sejak itu penggunaan Bootstrap sangat banyak sekali sehingga menjadi proyek Github yang sangat banyak di copy.

Dua tahun setelah itu tepatnya pada bulan agustus 2014 bootstrap kembali mengeluarkan versi terbaru yaitu versi 3.0 yang didalamnya sudah mengakomodasi konsep Mobile first artinya didalam pembuatan dan pengembangan mulai dari layar yang terkecil dahulu (mobile / handphone/ smartphone) dan secara bertahap pada tampilan yang paling besar. Sampai saat ini bootstrap sudah merilis versi 5.0 .

Keunggulan Bootstrap

Keuntungan menggunakan Bootstrap adalah dilengkapi dengan perangkat gratis untuk membuat layout web yang fleksibel dan responsif serta komponen antarmuka yang umum. Selain itu, dengan menggunakan API dari Bootstrap kita dapat membuat komponen antarmuka tingkat lanjut seperti Scrollspy dan Typeaheads tanpa menulis satu baris JavaScript.

Berikut adalah beberapa keuntungan lainnya dari Bootstrap :

• Hemat waktu
  Kita dapat menghemat banyak waktu dan usaha menggunakan template dan komponen Bootstrap yang telah ditentukan dan berkonsentrasi pada pekerjaan pengembangan lainnya.
• Fitur responsif
  Dengan menggunakan Bootstrap,kita dapat dengan mudah membuat desain yang responsif. Fitur responsif Bootstrap membuat halaman web kita tampil lebih baik pada perangkat dan resolusi layar yang berbeda tanpa adanya perubahan markup.
• Desain yang konsisten
  Semua komponen Bootstrap merupakan template dan gaya desain yang sama, sehingga desain dan tata letak halaman web kita konsisten selama kita melakukan pengembangan website.
• Mudah digunakan
  Bootstrap sangat mudah digunakan, siapa saja yang memiliki pengetahuan dasar tentang HTML dan CSS dapat memulai pengembangan dengan Bootstrap.
• Kompatibel dengan semua browser
  Bootstrap dibuat dengan browser modern dan kompatibel dengan semua browser populer seperti Mozilla Firefox, Google Chrome, Safari, Internet Explorer, dan Opera.
• Open Source
  Gratis untuk diunduh dan digunakan.
• Dokumentasi yang lengkap
  Bootstrap tidak hanya menawarkan styling untuk hampir setiap elemen yang dibutuhkan aplikasi situs web atau web biasa, namun juga menyediakan dokumentasi yang sangat lengkap dengan contoh dan demo yang membuatnya lebih mudah bagi pengguna baru sekalipun.

Selain itu, Bootstrap membutuhkan jQuery untuk berbagai komponennya, jQuery adalah perpustakaan (library) JavaScript yang sangat populer dan banyak digunakan, yang menyederhanakan dan menambahkan kompatibilitas ke semua browser.

Cara Menggunakan Bootstrap

Ada banyak pilihan untuk menggunakn framework bootstrap untuk keperluan website kita. Caranya dengan melakukan penginstalan lewat Bower, NPM, Composer atau bisa juga memakai Bootstrap CDN supaya nantinya bisa lebih mudah, sampai sekarang ada banyak versi Bootstrap dengan keunggulan dan kegunaan yang berbeda.

Untuk menggunakan bootstrap yang pertama kali harus dipersiapkan adalah data atau framework bootstrap itu sendiri yang bisa dapatkan di sini.

Pada tutorial ini versi bootstrap yang digunakan yaitu versi 4.6.0. Berikut adalah data struktur file yang ada di bootstrap.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Cara menginstal bootstrap

Cara menginstall bootstrap ada beberapa cara, kita bisa mengunakan beberapa cara seperti menggunakan composer, bower, menggunakan npm, secara offline dan online. Pada tutorial ini cara yang akan dipraktekan dengan cara offline.

Cara menginstall secara offline ini adalah cara yang paling banyak digunakan oleh para developer karena semua file bootstrap sudah ada dalam komputer mereka sehingga tidak tergantung pada koneksi internet dalam pemakaiannya. Lain dengan penggunaan / installasi secara online yang ditunjukan kepada server luar, pada penginstallan offline ditujukan pada server sendiri atau secara lokal pada perangkat masing-masing developer.

Setelah mendownload framwork css bootstrap kemudian ekstrak pada project kita, di sini saya meletakkannya pada localhost saya dengan alamat http://localhost/belajarbootstrap/ yang berisi folder css, fonts dan js . Kemudian untuk menghubungkan atau menginstall bootstrap buat sebuah file HTML atau PHP yang akan kita hubungkan dengan bootstrap. di sini saya membuat sebuah file dengan nama index.php.

Bootstrap juga memerlukan jquery, karena untuk bagian javascript nya bootstrap menggunakan jquery, jadi jangan lupa untuk menambahkan juga file jquery pada folder js bootstrap atau letakkan sesuai keinginan kita asalkan direktori saat menghubungkan file css dan js nanti sesuai. Untuk jquery bisa didownload disini.

index.php

<!DOCTYPE html>
<html>
    <head>
        <title>Cara Menggunakan Bootstrap</title>
        <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
        <script type="text/javascript" src="assets/js/jquery.js"></script>
        <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    </head>
    
    <body>
        <h2>Cara Menggunakan Bootstrap</h2>
        <button class="btn btn-danger">TOMBOL MERAH</button>
        <button class="btn btn-primary">TOMBOL BIRU</button>
    </body>
</html>

Perhatikan pada contoh cara menghubungkan file bootstrap di atas, untuk menghubungkan file html atau php dengan bootstrap.css .

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">

Kemudian hubungkan file html atau php dengan bootstrap.js dan jquery.js. ingat letakkan jquery.js pada bagian atas karena bootstrap bekerja menggunakan bantuan jquery bukan jquery menggunakan bantuan bootstrap.

<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>

Kemudian class “btn” pada element <button> di atas merupakan class bootstrap yang bisa di gunakan untuk membuat tombol, dan “btn-danger” dan “btn-primary” untuk menentukan warna dari tombol yang ingin kita buat, dan jika di jalankan pada browser maka hasilnya :

Perhatikan letak direktori file css dan js bootstrap dan jquery pada saat kita menghubungkannya, kita juga tidak perlu menghubungkan seluruh isi bootstrap, yang hanya perlu di hubungkan adalah file bootstrap.css dan bootstrap.js.

Framework Bootstrap terdiri dari file apa saja?

Bagian script utama apa saja yang terdapat pada Bootstrap?

Apa itu Bootstrap 5?

Apa itu file Bootstrap?