Tutorial Bootstrap 5 untuk Pemula Level 2
January 12, 2024mimin anggap, sahabat sudah mendownload software Notepad++ untuk Teks Editor. Apabila sahabat belum silahkan Download dulu, sahabat lanjut ke tutorial level 2 ini.
Memulai Bootstrap 5
Silahkan sahabat copy codenya di bawah ini dan salin di apliaksi Notepad++, kemudian simpan dengan nama index.html atau boleh dengan nama apa pun sesuka kalian. Jangan lupa, file type nya menjadi HTML (Hyper Text Markup Language file) dibagia akir ya.
<!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">Hallo, dunia!</h1>
</div>
</header>
<div class="container">
<p class="mt-5">Lorem ipsum dolor kang rizky, Suspendisse varius urna faucibus, ornare neque id, consectetur nunc. Fusce venenatis fermentum sem eget ultrices. Quisque iaculis consequat finibus. Nullam ut vulputate nibh. Praesent ultricies molestie est, sit amet semper enim interdum interdum. Proin luctus euismod dictum. Sed felis enim, pretium id finibus non, hendrerit a est. Nam nunc justo, imperdiet sit amet sem vitae, hendrerit consequat dui. Duis ipsum enim, porttitor vitae orci nec, efficitur posuere nulla. Vestibulum suscipit dolor a est porttitor, id pharetra metus finibus. Aenean consequat odio lectus, eu imperdiet lacus scelerisque vel. Suspendisse tincidunt ullamcorper leo sed pulvinar. Curabitur aliquam ex nec ligula fermentum, ac volutpat mauris sodales..</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 pada Notepad++ silahkan ahabat kelik double click file HTML yang sahabat buat tadi, dan penampakannya akan seperti gambar di bawah ini ya
Penjelasan Kode HTML dan Class
Silahkan sahabat scroll ke atas untuk melihat kode HTML secara utuh. Dibawah ini mimin akan rinci 1 per 1
Komponen Yang Wajib
<!doctype html> <html lang="en"> <head> .......... </head> <body> .......... </body> </html>
Sahabat pada bagian ini adalah komponen yang Wajib yakni sebuah file HTML. Sepertinya mimin tidak usah membahas bagian ini karena sudah faham tentang hal ini.
Meta Tag
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Belajar Bootstrap 5</title>
Ini adalah meta tag yang pokok, tentunya ketika sahabat sudah fiks dan menjadi website perlu ditambahkan meta tag ini lainnya seperti meta content, description, open graph dan lain-lain
CSS Bootstrap 5
<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 CSS Bootstrap, karena sahabat menggunakan platfrom CDN
Penjelasan Tentang Class
<header class="bg-primary py-5">
bg-primary
maknanya adalah Background Primary dengan warna blue
py-5
ini maknanya adalah padding-top: 3rem
and padding-bottom: 3rem
<div class="container">
container
maknanya adalah tempat supaya tidak mepet ke pinggir. Container ini pada nantinya akan berubah-ubah sesuai ukuran yang dikenal dengan istilah Breakpoint's
<h1 class="display-4 text-white text-center">
display-4
maknanya adalah h1 diperbesar lagi
text-white
maknanya adalah teks berwarna putih
text-center
maknanya adalah text ditengah atau biasanya sahabat menggunakan text-align: center
<p class="mt-5">
mt-5
maknanya 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>
sahabat ini adalah JavaScript untuk Bootstrapnya
Selanjutnya....
Pada tutorial selanjutnya, supaya lebih kekinian dan bersemangat yaitu tentang Dark Mode Pada Bootstrap 5 Level 3.
Demikian Tutorial Bootstrap 5 untuk Pemula Level 2 yang dapat kami sampaikan semoga bermanfaat.
Jika informasi ini bermanfaat, Jangan lupa Share ya teman-teman, Terima Kasih