HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap 4 Memulai

❮ Sebelumnya Berikutnya ❯

Apa itu Bootstrap?

  • Bootstrap adalah kerangka kerja front-end gratis untuk pengembangan web yang lebih cepat dan lebih mudah
  • Bootstrap menyertakan template desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, tabel, navigasi, modal, carousel gambar, dan banyak lainnya, serta plugin JavaScript opsional
  • Bootstrap juga memberi Anda kemampuan untuk membuat desain responsif dengan mudah

Apa itu Desain Web Responsif?

Desain web responsif adalah tentang membuat situs web yang secara otomatis menyesuaikan diri agar terlihat bagus di semua perangkat, dari ponsel kecil hingga desktop besar.

Bootstrap 4 Contoh

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

Versi Bootstrap

Tutorial ini mengikuti Bootstrap 4 , yang dirilis pada tahun 2018, sebagai peningkatan ke Bootstrap 3 , dengan komponen baru, stylesheetc yang lebih cepat, lebih responsif, dll.

Bootstrap 5 (dirilis 2021) adalah versi terbaru dari Bootstrap ; Ini mendukung rilis terbaru dan stabil dari semua browser dan platform utama. Namun, Internet Explorer 11 dan yang lebih rendah tidak didukung.

Perbedaan utama antara Bootstrap 5 dan Bootstrap 3 & 4, adalah bahwa Bootstrap 5 telah beralih ke JavaScript alih-alih jQuery .

Catatan: Bootstrap 3 dan Bootstrap 4 masih didukung oleh tim untuk perbaikan bug kritis dan perubahan dokumentasi, dan sangat aman untuk terus menggunakannya. Namun, fitur baru TIDAK akan ditambahkan ke dalamnya.

Mengapa Menggunakan Bootstrap?

Kelebihan Bootstrap:

  • Mudah digunakan: Siapa saja yang hanya memiliki pengetahuan dasar tentang HTML dan CSS dapat mulai menggunakan Bootstrap
  • Fitur responsif: CSS responsif Bootstrap menyesuaikan dengan ponsel, tablet, dan desktop
  • Pendekatan mobile-first: Dalam Bootstrap, gaya mobile-first adalah bagian dari kerangka inti
  • Kompatibilitas browser: Bootstrap 4 kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer 10+, Edge, Safari, dan Opera)

Dimana Mendapatkan Bootstrap 4?

Ada dua cara untuk mulai menggunakan Bootstrap 4 di situs web Anda sendiri.

Kamu bisa:

  • Sertakan Bootstrap 4 dari CDN
  • Unduh Bootstrap 4 dari getbootstrap.com

Bootstrap 4 CDN

Jika Anda tidak ingin mengunduh dan menghosting Bootstrap 4 sendiri, Anda dapat memasukkannya dari CDN (Content Delivery Network).

jsDelivr menyediakan dukungan CDN untuk CSS dan JavaScript Bootstrap. Anda juga harus menyertakan jQuery:

jsDeliverr:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Salah satu keuntungan menggunakan Bootstrap 4 CDN:
Banyak pengguna yang sudah mengunduh Bootstrap 4 dari jsDelivr saat mengunjungi situs lain. Akibatnya, itu akan dimuat dari cache ketika mereka mengunjungi situs Anda, yang mengarah ke waktu pemuatan yang lebih cepat. Juga, sebagian besar CDN akan memastikan bahwa begitu pengguna meminta file darinya, itu akan dilayani dari server terdekat dengan mereka, yang juga mengarah pada waktu pemuatan yang lebih cepat.

jQuery dan Popper?
Bootstrap 4 menggunakan jQuery dan Popper.js untuk komponen JavaScript (seperti modals, tooltips, popovers dll). Namun, jika Anda hanya menggunakan bagian CSS dari Bootstrap, Anda tidak membutuhkannya.

  • Peringatan yang dapat ditutup
  • Tombol dan kotak centang/tombol radio untuk beralih status
  • Korsel untuk slide, kontrol, dan indikator
  • Ciutkan untuk beralih konten
  • Dropdowns (also requires Popper.js for perfect positioning)
  • Modals (open and close)
  • Navbar (for collapsible menus)
  • Tooltips and popovers (also requires Popper.js for perfect positioning)
  • Scrollspy for scroll behavior and navigation updates

Mengunduh Bootstrap 4

Jika Anda ingin mengunduh dan menghosting Bootstrap 4 sendiri, buka https://getbootstrap.com/ , dan ikuti petunjuk di sana.

Buat Halaman Web Pertama Dengan Bootstrap 4

1. Tambahkan doctype HTML5

Bootstrap 4 menggunakan elemen HTML dan properti CSS yang membutuhkan doctype HTML5.

Selalu sertakan doctype HTML5 di awal halaman, bersama dengan atribut lang dan set karakter yang benar:

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

2. Bootstrap 4 adalah mobile-first

Bootstrap 4 dirancang untuk responsif terhadap perangkat seluler. Gaya yang mengutamakan seluler adalah bagian dari kerangka inti.

Untuk memastikan rendering yang tepat dan zoom sentuh, tambahkan <meta>tag berikut di dalam <head>elemen:

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

Bagian width=device-widthmengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).

Bagian initial-scale=1ini mengatur tingkat zoom awal saat halaman pertama kali dimuat oleh browser.

3. Wadah

Bootstrap 4 juga membutuhkan elemen yang mengandung untuk membungkus konten situs.

Ada dua kelas kontainer untuk dipilih:

  1. Kelas menyediakan wadah lebar tetap.container yang responsif
  2. Kelas .container-fluidmenyediakan wadah lebar penuh , yang mencakup seluruh lebar viewport
.wadah
.container-fluid

Dua Halaman Bootstrap Dasar

Contoh berikut menunjukkan kode untuk halaman Bootstrap 4 dasar (dengan wadah lebar tetap yang responsif):

Contoh Kontainer

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

Contoh berikut menunjukkan kode untuk halaman Bootstrap 4 dasar (dengan wadah lebar penuh):

Contoh Cairan Kontainer

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

❮ Sebelumnya Berikutnya ❯