Tutorial kali ini adalah membuat website dengan cara menggunakan bootstrap 5. Perlu anda ketahui, sebuah website memerlukan tampilan yang menarik, enak di setiap browser, mobile friendly dan seo friendly. Oleh karena itu, dalam pembuatan halaman harus menggunakan html, css dan js yang mendukung.

Penggunaan framework adalah sebuah pilihan, hal ini berlaku ketika anda tidak ingin lagi untuk memikirkan kesulitan yang berulang setiap saat. Bayangkan jika setiap projek website berulang membuat sebuah framework, oleh karena itu lebih baik jika menggunakan sebuah framework yang memberikan kemudahan membuat halaman website.

Bootstrap 5 adalah versi terbaru dari Framework Twitter Bootstrap.

Apa Itu Bootstrap?

Twitter Bootstrap adalah sebuah html, css, dan js framework yang digunakan untuk membuat halaman website. Sebuah framework yang sangat populer saat ini dan banyak di gunakan para pembuat halaman website.

Pertama kali dibuat oleh designer dan developer di Twitter pada pertengahan tahun 2010 oleh @mdo dan @fat. Dipublikasikan kepada khalayak umum pada 19 Agustus 2011 sampai dengan sekarang sebagai sebuah Open Source Framework.

Bootstrap 3 telah menerapkan responsive secara standar dan lebih mengedepankan mobile first atau perangkat mobile terlebih dahulu. Setelah itu, dalam versi Bootstrap 4 terjadi perubahan dalam penggunaan SASS dan penggunaan Flexbox di CSS. Hal ini di maksudkan untuk mengarahkan komunitas web development menggunakan properti CSS terbaru, mengurangi ketergantungan, dan lebih menerapkan teknologi baru untuk browser modern saat ini.

Versi terbaru Bootstrap

Twitter Bootstrap 5

Pada Bootstrap 5 yang masih dalam pengembangan, fokus dalam meningkatkan basis versi 4. Mengedepankan fitur dan komponen, menghilangkan suport untuk browser lama, tidak menggunakan jQuery, dan menerapkan teknologi CSS Custom Properties yang lebih maju.

Sampai saat tutorial ini di buat, versi terbaru bootstrap sudah memasuki tahap ke v5.0.0-alpha3. Dalam versi terbaru ini, jQuery bukan lagi sebagai depedensi yang masuk dalam kebutuhan wajib bootstrap. Di versi sebelumnya, jQuery digunakan sebagai kebutuhan wajib untuk menjalankan fungsi script dari bootstrap.

Membuat Halaman Website Sederhana dengan Bootstrap 5

Tutorial ini bagi anda yang berprofesi sebagai web designer dan web developer. Tidak menutup kemungkinan juga bagi anda yang sekedar ingin belajar membuat halaman website.

1. Editor Halaman Website

Pastikan anda memiliki editor halaman website yang bisa mengubah berkas html, css, dan js.

2. Instalasi Bootstrap 5

Menggunakan Bootstrap 5 mengharuskan anda terlebih dahulu mengunduh bahan-bahan yang akan berguna. Unduh bisa langsung dengan mengunjungi halaman web https://v5.getbootstrap.com.

Download Bootstrap

Anda di berikan kemudahan dalam download bootstrap dengan pilihan menggunakan bootstrap yang telah di kompres atau tidak.

Compiled CSS & JS

Source Code

Berkas ini memerlukan perangkat untuk membangun halaman menggunakan NPM. Unduh dan instalasi terlebih dahulu Node.js sebelum menggunakan berkas download.

Bonus Contoh Halaman

Framework menyediakan juga berkas contoh untuk anda download. Ekstrak berkas zip contoh halaman dan gunakan semestinya sebagai acuan pembuatan halaman.

Bootstrap 5 versi Online menggunakan CDN

Cascading Style Sheet

Anda bisa menggunakan CSS versi CDN dengan menyisipkan baris kode di bawah ini ke halaman html.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-CuOF+2SnTUfTwSZjCXf01h7uYhfOBuxIhGKPbfEJ3+FqH/s6cIFN9bGr1HmAg4fQ" crossorigin="anonymous">
Javascript

Untuk JS versi CDN, bisa anda sisipkan baris kode di bawah ini dan tempatkan di bagian bawah halaman html. Penempatan javascript disarankan disimpan sebelum kode penutup </body>.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-popRpmFF9JQgExhfw5tZT4I9/CI5e2QcuUZPOVXb1m7qUmeR2b50u+YFEYe1wgzy" crossorigin="anonymous"></script>

Untuk versi Online menggunakan CDN, pastikan komputer anda terhubung dengan internet untuk melihat hasil halaman website yang dibuat.

3. Menggunakan Contoh Halaman Bootstrap

Download terlebih dahulu berkas contoh halaman yang anda inginkan. Simpan berkas yang akan buat dalam sebuah folder. Anda bisa melihat contoh konten dengan klik tombol di bawah ini.

Gunakan versi Bootstrap Compiled CSS & JS dan simpan pada folder vendor. Buat halaman index.html dengan kode html di bawah ini :

<!doctype html>
<html>
   <head>
    <!-- Meta tags diwajibkan -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Masukkan link CSS Bootstrap anda disini -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <title>Demo Bootstrap 5</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ReeZh Design</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto mb-2 mb-md-0">
        <li class="nav-item active">
          <a class="nav-link" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu" aria-labelledby="dropdown01">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<main class="container">

  <div class="starter-template text-center py-5 px-3">
    <h1>Bootstrap 5 Starter Template</h1>
    <p class="lead">Gunakan dokumen ini sebagai cara cepat untuk memulai proyek baru.<br> Dokumen ini adalah contoh dalam menggunakan Bootstrap 5 Framework.</p>
  </div>

</main><!-- /.container -->
<footer>
  <div class="container text-center">
    <a href="https://reezhdesign.com" target="_blank" rel="noopener">ReeZh Design</a> - Jasa Pembuatan Website
  </div>
</footer>
     <!-- Masukkan script JS Bootstrap anda disini -->
     <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Simpan berkas index.html anda. Buka berkas atau file tersebut menggunakan browser internet favorit anda.

SELAMAT, anda telah membuat sebuah halaman website menggunakan Bootstrap 5.

Kesimpulan

Saat ini Bootstrap 5 masih dalam tahap pengembangan, namun hal itu tidak menjadi halangan untuk mengetahui lebih banyak apa yang di tawarkan. Apabila anda menggunakan versi sebelumnya, tentu akan lebih bermanfaat mengetahuinya agar bisa berpindah ke versi terbaru.

Tak ada gading yang tak retak, tentunya apabila ada yang kurang atau perlu diperbaiki silahkan komentar dibawah ya.

Penulis : Arissandi

Web Designer from Bandung, Indonesia.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *