Pengenalan Bootstrap

Pengertian Bootstrap

Bootstrap adalah framework web development berbasis HTML, CSS, dan JavaScript yang dirancang untuk mempercepat proses pengembangan web responsive dan mobile-first (memprioritaskan perangkat seluler).

Selain bisa digunakan untuk mengembangkan website dengan lebih cepat, Bootstrap juga merupakan framework gratis yang bersifat open-source. Skrip dan syntax yang disediakan Bootstrap bisa diterapkan untuk berbagai komponen dalam desain web.

Fungsi Bootstrap

Bootstrap adalah framework yang memiliki tujuan dan fungsi untuk membuat sebuah website responsif dan juga mobile first. Semua elemen antarmuka dari website ini sudah bisa dipastikan dapat bekerja dengan optimal pada semua ukuran layar baik itu untuk desktop ataupun untuk perangkat seluler.

Intalasi atau Cara Penggunaan Bootstrap

Cara menggunakan bootstrap ada 2 yaitu dengan donwload atau instal di web bootstrap atau melalui cdn, berikut langkah-langkahnya :

1. Menggunakan file atau manual

Download filenya di bootstrap lalu setelah ter-donwload ekstrak filenya di folder yang sama dengan file html lalu buat seperti gambar dibawah ini

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pengenalan Bootstrap || Muhammad Fahmi 'Ainunnajib</title>
    <link rel="stylesheet" href="bootstrap-5.3.3-dist/css/bootstrap.min.css">
</head>
<body>
    <h1>Hello World</h1>
    <script src="bootstrap-5.3.3-dist/js/bootstrap.min.js"></script>
</body>
</html>

Hasilnya :

2. Menggunakan CDN

Kunjungi web bootsrap lalu copy yang nomor 2

Lalu paste di html nya seperti dibawah ini

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pengenalan Bootstrap || Muhammad Fahmi 'Ainunnajib</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <h1>Hello World</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

</body>

</html>

Hasilnya :

Perbedaan HTML dengan Bootstrap atau tidak

HTML dengan Bootstrap
Code :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pengenalan Bootstrap || Muhammad Fahmi 'Ainunnajib</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
<h1>Hello World</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>

</body>

</html>

Hasil :

HTML tanpa Bootstrap
Code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pengenalan Bootstrap || Muhammad Fahmi 'Ainunnajib</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

Hasil :

Mencoba class container Bootstrap

Class container dalam Bootstrap adalah elemen dasar yang berfungsi untuk memuat, melapisi, dan menyelaraskan konten pada perangkat atau area pandang tertentu. Class container memiliki lebar tetap yang responsif, artinya lebar maksimumnya akan berubah pada setiap titik henti.

Ada beberapa jenis class container dalam Bootstrap, yaitu:

Default Container: Class container yang memiliki sifat responsif dan fixed-width.

Code :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pengenalan Bootstrap || Muhammad Fahmi 'Ainunnajib</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>Hello World</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

</body>

</html>

Hasil :

Fluid Container: Class container-fluid yang memiliki lebar yang sama dengan viewport.

Code :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pengenalan Bootstrap || Muhammad Fahmi 'Ainunnajib</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="container-fluid">
        <h1>Hello World</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

</body>

</html>

Hasil :

Mencoba component yang ada di dalam Bootstrap

Kali ini saya akan mencoba beberapa component yang ada di dalam dokumentasi Bootsrap, dengan refensi berikut : https://getbootstrap.com/docs/5.3/components/ atau yang ada di tab component :