Bootstrap

Tutorial cara menggunakan bootstrap 5 dalam membuat website. Perlu di ketahui, sebuah situs 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 bootstrap 5 adalah sebuah pilihan, hal ini berlaku ketika tidak ingin lagi untuk memikirkan kesulitan yang berulang setiap saat. Bayangkan jika setiap projek web berulang membuat sebuah framework, oleh karena itu lebih baik jika menggunakan sebuah framework yang memberikan kemudahan membuat halaman.

Twitter Bootstrap Framework

Twitter Bootstrap adalah sebuah html, css, dan js framework yang di gunakan untuk membuat halaman situs internet. Sebuah framework yang sangat populer saat ini dan banyak di gunakan para web designer.

Pertama kali di buat 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.

Pada versi ke-3 telah menerapkan responsive secara standar dan lebih mengedepankan mobile first atau perangkat mobile terlebih dahulu. Setelah itu, dalam versi ke-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.

Tutorial Bootstrap 5 Versi Terbaru

Pada versi 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 sudah memasuki tahap ke v5.0.1. Dalam versi terbaru ini, jQuery bukan lagi sebagai depedensi yang masuk dalam kebutuhan wajib. Di versi sebelumnya, jQuery di gunakan sebagai kebutuhan wajib untuk menjalankan fungsi script.

Tutorial Bootstrap 5 dalam Website Sederhana

Tutorial ini berguna untuk web designer dan web developer, akan tetapi tidak menutup kemungkinan juga bagi anda yang sekedar ingin belajar membuat halaman web.

1. Menggunakan Editor Halaman

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

2. Instalasi Bootstrap 5

Menggunakan framework ini mengharuskan mengunduh terlebih dahulu bahan-bahan yang akan di gunakan. Unduh bisa langsung dengan mengunjungi halaman web https://getbootstrap.com.

Download Bootstrap 5

Anda di berikan kemudahan dalam download untuk bootstrap 5 dengan pilihan cara menggunakan 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 di download. Ekstrak berkas zip contoh halaman dan gunakan semestinya sebagai acuan pembuatan halaman.

Versi Online menggunakan CDN

Cascading Style Sheet

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.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

Javascript

Untuk JS versi CDN, bisa di 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.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

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

3. Menggunakan Contoh Halaman

Download terlebih dahulu berkas contoh halaman yang di inginkan. Setelah itu, simpan berkas yang akan buat dalam sebuah folder. Selanjutnya bisa melihat contoh konten dengan klik tombol di bawah ini.

Gunakan versi 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 anda disini -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <title>Demo</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 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 anda disini -->
     <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>

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

SELAMAT, anda telah membuat sebuah halaman Bootstrap 5.