Tutorial Bootstrap 5 untuk Pemula Level 2

Daftar Isi [Tampil]

Bagi yang belum tahu sejarah Bootstrap dan Persiapan Penggunaan Bootstrap silahkan baca dulu Belajar Bootstrap 5 bagi Pemula Level 1

Halo Sahabat Kang Rizky, berjumpa lagi ya di Blog yang sama ya, dalam kesempatan kali ini mimin akan berbagi Tutorial Bootstrap 5 untuk Pemula Level 2.

Pada artikel sebelumnya Belajar Bootstrap 5 bagi Pemula Level 1 sudah dijelaskan ada 3 cara untuk menggunakan Bootstrap. Kali ini sahabat menggunakan Cara Pertama dengan penggunaan Platfrom CDN.

Bagi yang belum tahu sejarah Bootstrap dan Persiapan Penggunaan Bootstrap silahkan baca dulu Belajar Bootstrap 5 bagi Pemula Level 1

mimin 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

sahabat yang budiman Untuk penjelasan detai dari Class di atas, kedepannya akan mimin jelaskan satu-per-satu lagi ya. Atau sementara sahabat bisa pelajari dulu di getbootstrap.com

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

Donasi

Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.