Bootrap 5 Dasar

什么是 Bootstrap？

  • Bootstrap 是一个免费的前端框架，用于更快、更轻松地进行 Web 开发
  • Bootstrap 包括基于 HTML 和 CSS 的设计模板，用于排版、表单、按钮、表格、导航、模态、图像轮播等
  • Bootstrap 提供了丰富的 JavaScript 插件
  • Bootstrap 可使您能够轻松地创建响应式设计

什么是响应式网页设计？

响应式网页设计旨在创建能够自动调整的网站，以便增强所有设备上的使用体验，不论是手机还是大型台式机。

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>Hari yang indah mencari bunga di pantai sungai Sishui, pemandangan tak terbatas menjadi baru sekali.</p>
      <p>Lebih mudah mengenali wajah angin lembut, ribuan warna dan bunga selalu musim semi.</p>
    </div>
    <div class="col-sm-4">
      <h3>Baris 2: Puisi musim semi</h3>
      <p>Merah dan biru sudah menjadi serupa dengan serupa, musim panas baru mulai di suara kawanan burung.</p>
      <p>Jalan kembang dan daun kayu yang berlawanan tak terbatas, baru tahu diri saya adalah warga太平.</p>
    </div>
    <div class="col-sm-4">
      <h3>Baris 3: Perjalanan ke Gunung</h3>
      <p>Dari tinggi gunung dingin jalannya batu menurun, di tempat di mana awan terbentuk ada rumah.</p>
      <p>Tempat duduk untuk menikmati malam kembang jambu, daun es putih merah lebih cerah daripada bunga bulan Februari.</p>
    </div>
  </div>
</div>

Coba Sendiri

Versi Bootstrap

Bootstrap 5 (diterbitkan tahun 2021) adalah versi terbaru Bootstrap (diterbitkan tahun 2013); menggunakan komponen baru, tablet yang lebih cepat, dan menyediakan kecepatan tanggap yang lebih tinggi.

Bootstrap 5 mendukung versi stabil terbaru dari semua pelayar dan platform utama. Tetapi, tidak mendukung Internet Explorer 11 dan versi yang lebih awal.

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

Keterangan:Timnya masih mendukung pembaikan kesalahan kunci dan perubahan dokumen untuk Bootstrap 3 dan Bootstrap 4, jadi tetap menggunakan mereka adalah sepenuhnya aman. Tetapi tidak akan ditambahkan fitur baru ke dalamnya.

Mengapa harus menggunakan Bootstrap?

Kelebihan Bootstrap:

  • Dapat digunakan dengan mudah: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 komputer meja.
  • Cara mobile-first:Dalam Bootstrap, gaya mobile-first adalah bagian utama dari kerangka kerja.
  • Kemampuan kompatibiliti pelayar:Bootstrap 5 kompatibel dengan semua pelayar modern (Chrome, Firefox, Edge, Safari dan Opera).

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

Dari mana dapatkan Bootstrap 5?

Ada dua cara untuk menggunakan Bootstrap 5 di laman web anda sendiri.

Buat apa:

  • 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 mengambilnya dari CDN (Content Delivery Network).

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

MaxCDN:

<!-- CSS yang dienkompresi dan di compile yang paling baru -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- JavaScript yang dienkompresi yang paling baru -->
<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, dia akan dimuat dari cache, sehingga mengurangi waktu pemuatannya. Selain itu, sebagian besar CDN akan memastikan bahwa sekali pengguna meminta file, dia akan disediakan dari server yang paling dekat dengan mereka, yang juga mengakibatkan waktu pemuatan yang lebih cepat.

JavaScript?

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

Unduh Bootstrap 5

Jika Anda ingin mengunduh dan menghost Bootstrap 5 sendiri, silakan 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.

Pertahankan selalu HTML5 doctype di awal halaman, serta atribut lang dan judul yang benar, serta charset:

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

2. Bootstrap 5 pertama mengutamakan ponsel

Tujuan desain Bootstrap 5 adalah responsif untuk perangkat ponsel. gaya pertama adalah bagian dari kerangka kerja.

Untuk memastikan penggantian yang benar dan penyesuaian ukuran sentuh, silakan <head> Tambahkan berikut ke dalam elemen <meta> Tanda:

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

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

initial-scale=1 Menetapkan tingkat skala awal saat halaman di muat untuk pertama kalinya oleh peramban.

3. Kontainer

Bootstrap 5 masih memerlukan elemen untuk menggabungkan konten situs.

Ada dua kelas keranjang yang dapat dipilih:

  1. .container Kelas menyediakan keranjang lebar tetap yang ber响应
  2. .container-fluid Kelas menyediakan keranjang lebar penuh, melintasi lebar layar sepenuhnya

Dua halaman Bootstrap 5 dasar

Contoh Keranjang

Berikut adalah contoh kode halaman Bootstrap 5 dasar (dengan keranjang lebar tetap yang ber响应):

<!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 dalam kelas .container.</p>
  <p>.container menyediakan keranjang lebar tetap yang ber响应.</p>
</div>
</body>
</html>

Coba Sendiri

Contoh Keranjang Lekat

Berikut adalah contoh kode halaman Bootstrap 5 dasar (dengan keranjang 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 dalam kelas .container-fluid.</p>
  <p>.container-fluid menyediakan keranjang penuh lebar, melintasi lebar layar sepenuhnya.</p>
</div>
</body>
</html>

Coba Sendiri