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 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.

Contoh Bootstrap

<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>

Sejarah Bootstrap

Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk open source pada Agustus 2011 di GitHub.

Pada Juni 2014 Bootstrap adalah proyek No.1 di GitHub!

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 3, gaya mobile-first adalah bagian dari kerangka inti
  • Kompatibilitas browser: Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer, Edge, Safari, dan Opera)

Versi Bootstrap

Tutorial ini mengikuti Bootstrap 3 , yang dirilis pada tahun 2013. Namun, kami juga mencakup versi yang lebih baru; Bootstrap 4 (dirilis 2018) dan Bootstrap 5 (dirilis 2021) .

Bootstrap 5 adalah versi terbaru dari Bootstrap ; dengan komponen baru, stylesheet yang lebih cepat, lebih responsif, dll. 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.

Dimana Mendapatkan Bootstrap?

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

Kamu bisa:

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

Mengunduh Bootstrap

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

Bootstrap CDN

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

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

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Salah satu keuntungan menggunakan CDN Bootstrap:
Banyak pengguna yang sudah mengunduh Bootstrap dari MaxCDN 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
Bootstrap menggunakan jQuery untuk plugin JavaScript (seperti modals, tooltips, dll). Namun, jika Anda hanya menggunakan bagian CSS dari Bootstrap, Anda tidak memerlukan jQuery.

Buat Halaman Web Pertama Dengan Bootstrap

1. Tambahkan doctype HTML5

Bootstrap 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 3 adalah mobile-first

Bootstrap 3 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 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 dasar (dengan wadah lebar tetap yang responsif):

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.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 dasar (dengan wadah lebar penuh):

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.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 ❯