Memulai Bootstrap - Tutorial Bootstrap 5 untuk Pemula (Bagian 2)
Pada Tutorial Bootstrap Bagian 1 dijelaskan ada 3 cara untuk menggunakan Bootstrap. Kali ini kita menggunakan Cara Pertama dengan penggunaan CDN.
Saya anggap, kamu sudah mendownload Notepad++ untuk Teks Editor. Apabila belum silahkan Download dulu, kita lanjut ke tutorial
Memulai Bootstrap
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
Selanjutnya....
Tutorial selanjutnya, supaya lebih kekinian dan bersemangat yaitu tentang Dark Mode Pada Bootstrap 5 (Bagian 3).
image quote pre code