Masuk ke Bootstrap 5

Rekomendasi Kursus:

  • Apa itu Bootstrap?
  • Bootstrap termasuk template desain berdasarkan HTML dan CSS untuk penataan, formulir, tombol, tabel, navigasi, modal, slider gambar, dan lainnya
  • Bootstrap menyediakan berbagai plugin JavaScript
  • Bootstrap memungkinkan Anda dengan mudah menciptakan desain responsif

Apa itu desain laman web responsif?

Desain laman web responsif bertujuan untuk menciptakan situs web yang dapat otomatis menyesuaikan diri, untuk meningkatkan pengalaman pengguna di semua perangkat, keduanya ponsel atau desktop besar.

Contoh Bootstrap 5

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Halaman Bootstrap Pertama Saya</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Baris 1: Musim Semi</h3>
      <p>Pada hari bersahabat mencari bunga di pantai sungai Sishui, keindahan tak terbatas menjadi baru dalam satu saat.</p>
      <p>Menyadari wajah angin lembut, berbagai warna dan warna selalu musim semi.</p>
    </div>
    <div class="col-sm-4">
      <h3>Baris 2: Puisi Musim Panas</h3>
      <p>Warna merah dan ungu sudah menjadi serupa dengan debu, musim panas baru di dalam suara bulu-bulu.</p>
      <p>Salju dan serupa berlarut-larut di jalan, baru tahu bahwa saya adalah warga太平.</p>
    </div>
    <div class="col-sm-4">
      <h3>Baris 3: Perjalanan Gunung</h3>
      <p>Dari jauh ke gunung dingin, jalannya batu menurun, di tempat tempat tinggi ada rumah-rumah.</p>
      <p>Tempat duduk untuk mencinta pohon kayu jepit malam, daun es berwarna merah di atas bunga bulan February.</p>
    </div>
  </div>
</div>

Coba Sendiri

Versi Bootstrap

Bootstrap 5 (diterbitkan tahun 2021) adalah versi terbaru Bootstrap (diterbitkan tahun 2013); menggunakan komponen baru, table faster, dan memberikan responsivitas yang lebih cepat.

Bootstrap 5 mendukung versi stabil terbaru dari semua browser dan platform utama. Namun, tidak mendukung Internet Explorer 11 dan versi yang lebih lama.

Perbedaan utama antara Bootstrap 5 dan Bootstrap 3 & 4 adalah Bootstrap 5 telah berubah ke Vanilla JavaScript bukannya jQuery.

Catatan:Timnya masih mendukung perbaikan kesalahan penting dan perubahan dokumentasi Bootstrap 3 dan Bootstrap 4, tetapi tetap aman untuk melanjutkan penggunaannya. Tetapi tidak akan ditambahkan fitur baru apapun ke dalamnya.

Mengapa menggunakan Bootstrap?

Keunggulan Bootstrap:

  • Mudah digunakan:Siapapun yang mempunyai pemahaman dasar tentang HTML dan CSS dapat segera mulai menggunakan Bootstrap
  • Kemampuan responsif:CSS responsif Bootstrap dapat disesuaikan untuk ponsel, tablet dan desktop
  • Metode pertama yang diutamakan:Dalam Bootstrap, gaya pertama yang diutamakan adalah bagian dari kerangka kerja utamanya
  • Kemampuan kompatibilitas browser:Bootstrap 5 kompatibel dengan semua browser modern (Chrome, Firefox, Edge, Safari dan Opera).

Perhatian:Jika Anda memerlukan dukungan IE11 dan versi yang lebih kecil, Anda harus menggunakan BS4 atau BS3.

Dari mana memperoleh Bootstrap 5?

Terdapat 2 metode untuk menggunakan Bootstrap 5 di situs Anda sendiri.

Anda dapat:

  • Termasuk Bootstrap 5 dari CDN
  • Unduh Bootstrap 5 dari getbootstrap.com

Bootstrap 5 CDN

Jika Anda tidak ingin mengunduh dan menghost Bootstrap 5 sendiri, Anda dapat mengutipnya dari CDN (Content Delivery Network).

CodeW3C.com menyediakan dukungan CDN untuk CSS dan JavaScript Bootstrap:

MaxCDN:

<!-- CSS yang disusun dan disempurnakan terbaru -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- JavaScript yang disusun terbaru -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

Salah satu kelebihan Bootstrap 5 CDN:

Banyak pengguna yang telah mengunduh Bootstrap 5 dari jsDelivr saat mengakses situs lain. Jadi, saat mereka mengakses situs Anda, itu akan di-load dari cache, sehingga mengurangi waktu pemuatannya. Selain itu, sebagian besar CDN akan memastikan bahwa sekali pengguna meminta file, itu akan disediakan dari server terdekat, yang juga mengakibatkan waktu pemuatan yang lebih cepat.

JavaScript?

Bootstrap 5 menggunakan JavaScript untuk komponen yang berbeda (seperti modal, tooltip, pop-up, dll). Tetapi, jika Anda hanya menggunakan bagian CSS Bootstrap, maka Anda tidak memerlukannya.

Unduh Bootstrap 5

Jika Anda ingin mengunduh dan menghost Bootstrap 5 sendiri, kunjungi https://getbootstrap.com/kemudian ikuti petunjuk di sana.

Buat halaman pertama Anda menggunakan Bootstrap 5

1. Tambahkan doctype HTML5

Bootstrap 5 menggunakan elemen HTML dan atribut CSS yang memerlukan doctype HTML5.

Selalu termasuk HTML5 doctype di awal halaman, serta atribut lang dan judul, serta charset yang benar:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Contoh Bootstrap 5</title>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 5 pertama yang bergerak

Tujuan desain Bootstrap 5 adalah ber��应 perangkat bergerak. Gaya pertama yang dipilih adalah bagian dari kerangka kerja utama.

Untuk memastikan render yang benar dan penyesuaian tangan, silakan <head> Tambahkan berikut ke dalam elemen <meta> Tanda:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width Ditetapkan lebar halaman untuk mengikuti screen-width perangkat (yang akan berbeda untuk setiap perangkat).

initial-scale=1 Ditetapkan tingkat skala awal saat halaman di-load untuk pertama kalinya di browser.

3. Kontainer

Bootstrap 5 masih memerlukan elemen untuk melingkapi konten situs.

Ada dua kelas kontainer yang dapat dipilih:

  1. .container Kelas menyediakan kontainer lebar tetap yang responsif
  2. .container-fluid Kelas menyediakan kontainer lebar penuh, melintasi lebar tampilan seluruhnya

Dua halaman dasar Bootstrap 5

Contoh Container

Berikut adalah contoh kode halaman dasar Bootstrap 5 (dengan kontainer lebar tetap yang responsif):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Contoh Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>Halaman Bootstrap Pertama Saya</h1>
  <p>Bagian ini berada di dalam .container.</p>
  <p>.container menyediakan kontainer lebar tetap yang responsif.</p>
</div>
</body>
</html>

Coba Sendiri

Contoh Container Fluid

Berikut adalah contoh kode halaman dasar Bootstrap 5 (dengan kontainer lebar penuh):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Contoh Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>Halaman Bootstrap Pertama Saya</h1>
  <p>Bagian ini berada di dalam .container-fluid.</p>
  <p>.container-fluid mengmemberikan kontainer lebar penuh, melintasi lebar tampilan seluruhnya.</p>
</div>
</body>
</html>

Coba Sendiri