Cara menggunakan apa itu file bootstrap?

| December 1, 2021 | Web |

Bootstrap merupakan salah satu framework yang berasal dari CSS. Dari waktu ke waktu, pengguna bootstrap semakin meningkat. Bootstrap pertama kali dikembangkan oleh Mark Otto dan Jacob Thornton di twitter. Twitter Blueprint adalah nama sebelum terbentuknya Bootstrap. Boostrap di ciptakan untuk mengatasi ketidak konsistenan tampilan pada Twitter kala itu yang menyebabkan kode menjadi sulit untuk di maintenance. Sekarang ini bootstrap sudah mencapai versi yang ke 5 nya pada 7 Desember 2020. Beberapa perubahan pada Bootstrap 5 :

  • Menghapus jQuery
  • Penulisan ulang pada sistem grid
  • Migrasi dari Jekyll ke Hugo untuk web web dokumentasi Bootstrap
  • Menghapus dukungan untuk IE10 dan IE11
  • Menambahkan sekumpulan SVG icons

Ada 3 cara dalam menggunakan Boostrap untuk website kita, yaitu :

  1. Download Manual
  2. Menggunakan Template Bawaan Bootstrap

1. Download Manual

Bootstrap dapat kita download untuk kita gunakan secara berulang, jadi hanya sekali download saja. Kita bisa mendownload nya di situs resmi milik bootstrap yaitu getbootstrap.com. Klik Download.

Cara menggunakan apa itu file bootstrap?

Dan akan terdapat 2 folder di dalamnya yang berisi file CSS dan JS.

Cara menggunakan apa itu file bootstrap?

Jika sudah, ekstrak folder hasil download tersebut kemudian tempatkan pada folder atau directory yang akan digunakan untuk membuat website. Dan jangan lupa siapkan satu file index.html juga. Hasilnya akan terlihat seperti gambar di bawah ini.

Cara menggunakan apa itu file bootstrap?

Cara menggunakan nya pun juga sangat mudah. Pertama buat tag html, yang kemudian di dalamnya berisi link yang menuju ke file css dan js milik bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <h2>Halaman Home</h2>
    
    <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

Dan jika kita buka pada browser akan tampil

Cara menggunakan apa itu file bootstrap?

Sekarang kita sudah berhasil menghubungkan file index.html kita ke file bootstrap.

2. Menggunakan Template Bawaan dari Boostrap

Langkah pertama dengan langkah sebelumnya, yaitu kita membuat file index.html pada direktori kita. Lalu biarkan kosong seperti ini, karena selanjutnya kita akan mengambil “starter template” atau template yang sudah disediakan oleh bootstrap. Template tersebut berisi link yang memanggil file CSS dan Javascript bawaan milik bootstrap.

Cara menggunakan apa itu file bootstrap?

Selanjutnya kita buka website milik bootstrap dan masuk ke get started. Selanjutnya kita copy bagian starter template nya dengan meng-klik tombol copyseperti gambar dibawah ini.

Cara menggunakan apa itu file bootstrap?
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs//dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Dan ketika kita jalankan di browser akan menampilkan seperti ini.

Cara menggunakan apa itu file bootstrap?

Selamat, kita sudah bisa menggunakan file bootstrap secara manual atau pun menggunakan starter template dari bootstrap. Diharapkan tutorial kali ini dapat membuat kita mengerti dan paham akan penggunaan Bootstrap. Sekian tutorial kali ini semoga bermanfaat. Sampai ketemu di lain tutorial.

About The Author

arduindo

Bootstrap digunakan untuk apa?

Tujuan dan fungsi Bootstrap adalah untuk membuat website responsive dan mobile-first. Jadi, semua elemen antarmuka website dipastikan bisa bekerja secara optimal di semua ukuran layar, baik desktop maupun perangkat seluler.

Apakah bootstrap harus di download?

Untuk dapat menggunakan bootstrap hal yang harus dilakukan yaitu mendownloadnya terbih dahulu. Bootstrap dapat di download dalam bentuk standar di halaman website bootsrap, selain itu download bootstrap dapat juga dalam bentuk template bootsrap yang telah di modifikasi.

Bagaimana cara mendownload bootstrap?

Pada saat tutorial ini saya tulis, Bootstrap baru saja merilis update ke versi 5.1. Untuk mendownload file Bootstrap, silahkan buka web resmi Bootstrap di getbootstrap.com, lalu klik tombol Download yang ada di tengah halaman.

Jelaskan apa yang anda ketahui tentang bootstrap dan apa fungsi dari bootstrap?

Bootstrap adalah sebuah framework HTML, CSS, dan JavaScript yang berfokus untuk menyederhanakan pengembangan halaman web atau website. Pada umumnya, Bootstrap digunakan untuk mengimplementasikan berbagai pilihan warna, ukuran, font, dan layout yang ada dalam framework tersebut ke dalam sebuah website.