Panduan Lengkap dan Tutorial Bootstrap Pemula

Pendahuluan

Sebelum memulai Tutorial Bootstrap Pemula, mari kita pahami terlebih dahulu “apa itu bootstrap?”. Jadi, bootstrap merupakan sebuah framework front end yang dirancang untuk mempermudah pembuatan website. Dengan Bootstrap, Kamu dapat membuat desain web yang responsif (bisa diakses di desktop dan mobile, red) dan estetis dengan cepat dan mudah. Framework ini menyediakan berbagai komponen, seperti tombol, navbar, dan form, serta utilitas CSS yang siap pakai.

Framework Boostrap terdiri dari dua teknologi, pertama dia menggunaan CSS yang siap pakai dan kedua dia didukung oleh JavaScript. Dengan penggabungan kedua teknologi tersebut pembuatan website yang indah bukan lagi kendala bagi web designer, meskipun dia masih pemula.

Contents

1 Pendahuluan
2 Mengapa Kita Menggunakan Bootstrap?
3 Menambahkan Bootstrap Ke Website Kita
- 3.1 1. Menggunakan CDN
- 3.2 2. Menggunduh Bootstrap
4 Membuat layout dengan sistem grid
- 4.1 Dasar-dasar sistem grid
- 4.2 Breakpoint dan Kelas Kolom
5 Membuat Navbar
- 5.1 Dasar-dasar navbar di bootstrap
- 5.2 Elemen-elemen navbar
6 Kesimpulan
7 Bagikan

Mengapa Kita Menggunakan Bootstrap?

Responsif Secara Otomatis: Bootstrap menggunakan grid system yang fleksibel untuk memastikan situs web Anda tampil baik di berbagai perangkat.
Komponen Siap Pakai: Termasuk berbagai elemen UI seperti tombol, formulir, kartu, dan lainnya yang dapat digunakan langsung.
Dukungan Komunitas: Dengan komunitas yang besar, Anda dapat dengan mudah menemukan dokumentasi, tutorial, dan bantuan.
Kustomisasi Mudah: Mudah disesuaikan sesuai dengan kebutuhan proyek Anda melalui CSS kustom dan variabel SASS (syntactically awesome style sheets).

Menambahkan Bootstrap Ke Website Kita

Setidaknya ada dua pendekatan yang bisa Kamu gunakan untuk menambahkan bootstrap ke website kita. Keduanya sangatlah mudah, dan tidak perlu proses instalasi yang ribet. Pertama dengan menggunakan CDN (Content Delivery Network) dan kedua dengan mengunduh berkas bootstrap-nya. Pendekatan pertama cocok untuk website yang sudah pasti akan dihosting, dan kedua cocok untuk website yang akan tersedia secara offline (tanpa memerlukan koneksi internet)

1. Menggunakan CDN

Cara termudah untuk memulai adalah dengan menggunakan CDN. CDN memungkinkan Anda untuk menghubungkan file CSS dan JavaScript Bootstrap langsung dari internet tanpa perlu mengunduhnya. Namun sekali lagi perlu diingat bahwa cara ini hanya untuk website yang sudah pasti dihosting saja.

Buat sebuah file html baru, kemudian beri nama index.html
Tambahkan tautan CDN Bootstrap ke dalam file HTML tersebut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Bootstrap</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container">
        <h1>Halo, Bootstrap!</h1>
    </div>

    <!-- Bootstrap JS dan dependensi -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Keluaran dari kode program diatas bisa Anda lihat pada gambar berikut

2. Menggunduh Bootstrap

Pendekatan yang kedua adalah, kamu bisa mengunduh file bootstrap. Pendekatan ini cocok buat kamu yang akan menggunakan bootstrap secara offline, atau bagi Kamu yang ingin memiliki kontrol yang lebih terhadap berkas bootstrap.

Kunjungi situs resmi Bootstrap di getbootstrap.com.
Unduh Bootstrap dengan menekan tombol “Download”.
Ekstrak file yang diunduh dan tempatkan di dalam folder proyek Anda.
Link CSS dan JS Bootstrap di file HTML Anda.

Untuk lebih memahaminya, silakan coba kode program berikut. Pastikan kamu sudah mengganti ‘path/to/’ disesuaikan dengan dimana kamu menyimpan berkas bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Bootstrap</title>
    <!-- Bootstrap CSS -->
    <link href="path/to/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container">
        <h1>Halo, Bootstrap!</h1>
    </div>

    <!-- Bootstrap JS dan dependensi -->
    <script src="path/to/jquery/jquery.slim.min.js"></script>
    <script src="path/to/popper.js/popper.min.js"></script>
    <script src="path/to/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Itulah dua langkah yang bisa kamu lakukan untuk instalasi bootstrap. Sebelum melanjutkan tutorial bootstrap pemula, pastikan kamu sudah sukses menginstall bootstrap-nya. Tanda sudah sukses diataranya adalah keluar tulisan “Halo, Bootstrap!” dengan font yang cantik seperti gambar diatas. Jika belum berhasil, silakan coba lagi terlebih dahulu.

Membuat layout dengan sistem grid

Salah satu komponen utama Bootstrap adalah Sistem Grid, yang memudahkan pengembang untuk mengatur tata letak halaman web dengan fleksibel dan responsif. Bootstrap menggunakan sistem grid 12 kolom yang sangat fleksibel untuk membuat layout.

Dasar-dasar sistem grid

Grid Container: Kontainer adalah elemen dasar yang membungkus grid. Bootstrap memiliki dua jenis kontainer:
- .container: Lebar tetap (fixed-width) yang menyesuaikan dengan breakpoint tertentu.
- .container-fluid: Lebar penuh (full-width) yang menyesuaikan dengan lebar layar.
Baris (Rows): Elemen grid diatur dalam baris menggunakan kelas .row. Baris ini digunakan untuk mengelompokkan kolom dan memastikan kolom di dalamnya berada dalam satu baris horizontal.
Kolom (Columns): Di dalam setiap baris, konten diatur dalam kolom menggunakan kelas .col. Sistem grid Bootstrap menggunakan 12 kolom per baris, yang dapat dikombinasikan untuk membuat berbagai tata letak.

Breakpoint dan Kelas Kolom

Bootstrap menggunakan breakpoint untuk membuat desain responsif. Breakpoint ini menentukan kapan tata letak harus berubah berdasarkan lebar viewport. Berikut ini adalah breakpoints yang digunakan:

Extra Small (xs): <576px
Small (sm): ≥576px
Medium (md): ≥768px
Large (lg): ≥992px
Extra Large (xl): ≥1200px
Extra Extra Large (xxl): ≥1400px

Kelas kolom menggunakan notasi col-{breakpoint}-{size}, misalnya:

.col-4 : Mengambil 4 kolom pada semua ukuran layar.
.col-md-6 : Mengambil 6 kolom pada layar dengan lebar medium atau lebih besar.
.col-lg-3 : Mengambil 3 kolom pada layar dengan lebar besar atau lebih besar.

Untuk lebih memahaminya, silakan coba kode program berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Layout Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h2>Kolom 1</h2>
                <p>Konten untuk kolom 1.</p>
            </div>
            <div class="col-md-4">
                <h2>Kolom 2</h2>
                <p>Konten untuk kolom 2.</p>
            </div>
            <div class="col-md-4">
                <h2>Kolom 3</h2>
                <p>Konten untuk kolom 3.</p>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>

Keluaran dari kode program diatas bisa Anda lihat sebagai berikut

Membuat Navbar

Navbar adalah salah satu komponen yang paling sering digunakan dalam pengembangan web untuk membuat navigasi yang responsif dan mudah digunakan. Bootstrap menyediakan berbagai kelas dan komponen untuk membuat navbar yang elegan dan fungsional.

Dasar-dasar navbar di bootstrap

Bootstrap Navbar menggunakan berbagai kelas untuk membangun komponen navigasi. Beberapa kelas utama yang digunakan antara lain:

.navbar: Kelas dasar untuk elemen navbar.
.navbar-expand-{breakpoint}: Membuat navbar bisa diperluas pada breakpoint tertentu (misalnya, navbar-expand-lg).
.navbar-light atau .navbar-dark: Untuk menetapkan warna teks dan ikon berdasarkan warna background.
.bg-{color}: Menetapkan warna background navbar (misalnya, bg-light, bg-dark).

Elemen-elemen navbar

Navbar Brand: Merek atau logo yang biasanya berada di kiri navbar.
Navbar Toggler: Tombol untuk membuka dan menutup menu pada tampilan mobile.
Navbar Collapse: Bagian yang dapat diperluas dan dilipat yang berisi item navigasi.
Navbar Items: Link navigasi, dropdowns, forms, dan komponen lainnya di dalam navbar.

Silakan coba kode program berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Navbar Bootstrap</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
        </ul>
        <form class="form-inline ml-auto">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<!-- Konten Halaman -->
<div class="container mt-5">
    <h1>Selamat datang di halaman contoh Navbar Bootstrap</h1>
    <p>Ini adalah contoh sederhana dari halaman dengan navbar responsif menggunakan Bootstrap.</p>
</div>

<!-- Bootstrap JS, Popper.js, dan jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>

Keluaran dari kode program diatas, bisa Anda lihat sebagai berikut

Penjelasan Kode Program

Header HTML:
- Menambahkan meta tag untuk charset dan viewport.
- Menyertakan CSS Bootstrap dari CDN.
Navbar:
- navbar navbar-expand-lg navbar-light bg-light: Membuat navbar yang diperluas pada breakpoint lg dengan teks yang sesuai untuk background terang.
- navbar-brand: Elemen untuk merek atau logo.
- navbar-toggler: Tombol untuk membuka dan menutup menu pada tampilan mobile.
- collapse navbar-collapse: Kontainer untuk item navbar yang dapat diperluas dan dilipat.
- navbar-nav: Daftar item navigasi.
- nav-item dan nav-link: Elemen-elemen individual dari item navigasi.
- nav-item dropdown: Elemen dropdown dalam navbar.
- nav-link dropdown-toggle: Kelas untuk link dropdown dengan toggle.
- dropdown-menu: Kontainer untuk item-item dropdown.
- dropdown-item: Item individual dalam dropdown.
- dropdown-divider: Garis pemisah dalam dropdown.
Form di Navbar:
- form-inline ml-auto: Form inline yang ditempatkan di sebelah kanan (ml-auto menambahkan margin kiri otomatis untuk mendorong form ke kanan).
- form-control: Kelas untuk input form.
- btn btn-outline-success: Kelas untuk tombol dengan border outline dan warna hijau.
Konten Halaman:
- container mt-5: Kontainer dengan margin top sebesar 5 untuk memberi ruang di atas konten halaman.
Footer HTML:
- Menyertakan JavaScript Bootstrap, Popper.js, dan jQuery dari CDN untuk fungsionalitas navbar, termasuk dropdown.

Kesimpulan

Tutorial Bootstrap Pemula ini merupakan pengantar kamu untuk memahami cara kerja-nya. Untuk selanjutnya kamu bisa belajar lebih banyak tentang bootstrap dan komennya melalui dokumentasi diwebsite resminya.