Memulai Bootstrap

Pada Tutorial Bootstrap Bagian 1 dijelaskan ada 3 cara untuk menggunakan Bootstrap. Kali ini kita menggunakan Cara Pertama dengan penggunaan CDN.

Bagi yang belum tahu sejarah Bootstrap dan Persiapan Penggunaan Bootstrap silahkan baca dulu Tutorial Bootstrap Bagian 1

Saya anggap, kamu sudah mendownload Notepad++ untuk Teks Editor. Apabila belum silahkan Download dulu, kita lanjut ke tutorial

Silahkan copy kode di bawah ini dan salin di Notepad++, kemudian save as dengan nama index.html atau boleh dengan nama apa pun. Jangan lupa, file type-nya HTML (Hyper Text Markup Language file)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Belajar Bootstrapo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
  <header class="bg-primary py-5">
	<div class="container">
		<h1 class="display-4 text-white text-center">Hello, world!</h1>
	</div>
  </header>
  
  <div class="container">
    <p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam sem et. Duis at consectetur lorem donec massa sapien faucibus. Elit ut aliquam purus sit amet luctus venenatis lectus. Commodo nulla facilisi nullam vehicula. Habitasse platea dictumst quisque sagittis. Urna neque viverra justo nec ultrices dui sapien eget mi. Pretium aenean pharetra magna ac placerat vestibulum lectus. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Lacinia at quis risus sed vulputate. Aliquet nibh praesent tristique magna. Risus viverra adipiscing at in tellus integer. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Eu non diam phasellus vestibulum lorem sed risus. Elementum nibh tellus molestie nunc non.</p>
  </div>
  
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>

Setelah disimpan (save) silahkan double click file HTML yang kamu buat, dan penampakannya akan seperti gambar di bawah ini

Penjelasan Kode HTML dan Class

Silahkan scroll ke atas untuk melihat kode HTML utuh. Dibawah ini saya rinci 1 per 1

Komponen Wajib

<!doctype html>
<html lang="en">
<head>
 ..........
</head>

<body>
 ..........
</body>
</html>

Ini adalah komponen Wajib sebuah file HTML. Sepertinya tidak usah dibahas karena sudah faham tentang hal ini

Meta Tag

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar Bootstrapo</title>

Ini adalah meta tag pokok, yang tentunya ketika sudah fiks dan menjadi web perlu ditambahkan meta tag lainnya seperti meta content, description, open graph dll

CSS Bootstrap

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

Ini adalah CSS Bootstrap, karena kita menggunakan CDN

Penjelasan Class

<header class="bg-primary py-5">

bg-primary artinya adalah Background Primary dengan warna Biru
py-5 artinya adalah padding-top: 3rem dan padding-bottom: 3rem

<div class="container">

container artinya adalah wadah supaya tidak mepet ke pinggir. Container ini nantinya akan berubah-ubah sesuai ukuran yang dikenal dengan istilah Breakpoints

<h1 class="display-4 text-white text-center">

display-4 artinya adalah h1 diperbesar lagi
text-white artinya adalah teks berwarna putih
text-center artinya adalah text ditengah atau biasanya kita menggunakan text-align: center

<p class="mt-5">

mt-5 artinya adalah margin top sebesar 3rem

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

Ini adalah JavaScript untuk Bootstrap

Untuk penjelasan detai dari Class di atas, kedepannya akan saya jelaskan satu-per-satu. Atau sementara kamu bisa pelajari di getbootstrap.com

Selanjutnya....

Tutorial selanjutnya, supaya lebih kekinian dan bersemangat yaitu tentang Dark Mode Pada Bootstrap 5 (Bagian 3).

Memulai Bootstrap - Tutorial Bootstrap 5 untuk Pemula (Bagian 2)