Bootstrap - Reboot: Panduan Mesra untuk Pemula

Hai daar, bakal pengembang web! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia Bootstrap Reboot. Sebagai seseorang yang telah mengajar ilmu komputer selama tahun tahun, saya tidak sabar untuk berbagi pengetahuan dan pengalaman saya kepada Anda. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita masuk ke dalam!

Bootstrap - Reboot

Apa Itu Bootstrap Reboot?

Sebelum kita mulai, biarkan saya ceritakan sedikit cerita. Bayangkan Anda pindah ke rumah baru. Sebelum Anda mulai menghias, Anda pasti ingin memiliki lembaran kosong, kan? Itu persis apa yang Bootstrap Reboot lakukan bagi pengembangan web. Itu seperti memberikan halaman web Anda lapisan cat baru, menciptakan dasar konsisten bagi Anda untuk membangun.

Bootstrap Reboot adalah kumpulan gaya CSS yang normalisasi elemen HTML default di berbagai browser. Itu seperti bahasa universal bagi browser web, memastikan bahwa website Anda terlihat konsisten tanpa menghiraukan tempat itu dilihat.

Pendekatan

Pendekatan Bootstrap Reboot sederhana tapi kuat. Itu bertujuan untuk:

Menyediakan lembaran kosong bagi pengembangan web
Memastikan konsistensi cross-browser
Mengimprovisasi ketergunaan dan aksesibilitas

Sekarang, mari kita masuk ke khususannya!

Default halaman

Bootstrap Reboot menetapkan beberapa gaya default untuk seluruh halaman. Ini adalah contoh sederhana:

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Saya yang Menakjubkan</title>
</head>
<body>
<h1>Selamat datang di website saya!</h1>
</body>
</html>

Dalam contoh ini, Bootstrap Reboot memastikan bahwa:

box-sizing diatur ke border-box untuk semua elemen
font-family diatur ke stack font native (lebih lanjut tentang ini nanti!)
line-height diatur ke 1.5 untuk peningkatan keterbacaan
background-color bagi body diatur ke putih

Stack font native

Ingat ketika kita pernah menentukan font eksak bagi website kita? Bootstrap Reboot memperkenalkan stack font native. Itu seperti memiliki lemari pakaian yang selalu terlihat bagus, tanpa menghiraukan apa yang Anda pakai!

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Stack font ini memastikan bahwa teks Anda terlihat bagus pada semua perangkat, menggunakan font default sistem.

Judul

Judul seperti judul bab dalam buku. Mereka membantu mengatur konten Anda dan membuatnya mudah dibaca. Bootstrap Reboot menyediakan gaya konsisten bagi semua tingkat judul (h1 hingga h6).

<h1Ini adalah judul utama</h1>
<h2Ini adalah subjudul</h2>
<h3Ini adalah sub-subjudul</h3>

Paragraf

Paragraf adalah roti dan mentega konten Anda. Bootstrap Reboot memastikan bahwa mereka mudah dibaca dan teratur.

<pIni adalah paragraf. Itu mudah dibaca karena gaya default Bootstrap Reboot.</p>
<pIni adalah paragraf lain. Catatlah jarak yang bagus antara paragraf.</p>

Tautan

Tautan adalah jalan raya internet, menghubungkan bagian-bagian berbeda dari website Anda dan menuju ke website lain. Bootstrap Reboot memastikan mereka mudah dikenali.

<a href="https://example.com">Ini adalah tautan</a>

Secara default, tautan berwarna biru dan di garis bawah. Ketika Anda melayangkan mouse di atasnya, garis bawah menghilang.

Garis horizontal

Garis horizontal seperti pemisah dalam buku. Mereka membantu memisahkan section berbeda dari konten Anda.

<hr>

Bootstrap Reboot memastikan bahwa garis horizontal terlihat tapi tidak terlalu keras.

Daftar

Daftar membantu mengatur informasi dalam cara yang terstruktur. Bootstrap Reboot menyediakan gaya bagi kedua daftar terurut dan tak terurut.

<ul>
<liIni adalah item daftar tak terurut</li>
<liIni adalah item lain</li>
</ul>

<ol>
<liIni adalah item daftar terurut</li>
<liIni adalah item kedua</li>
</ol>

Kode inline

kadang-kadang, Anda perlu menyorot bagian kode dalam teks Anda. Bootstrap Reboot membuat ini mudah dan menarik secara visual.

<pGunakan fungsi <code>console.log()</code> untuk mencetak ke konsol.</p>

Blok kode

Untuk bagian yang lebih besar dari kode, Anda dapat menggunakan blok kode. Bootstrap Reboot memastikan mereka mudah dibaca dan visually distinct dari konten Anda.

<pre><code>
function greet(name) {
console.log(`Hello, ${name}!`);
}
</code></pre>

Variabel

Dalam pemrograman, variabel adalah seperti wadah yang menyimpan data. Bootstrap Reboot menyediakan gaya bagi menampilkan variabel dalam teks Anda.

<pVariabel <var>x</var> merepresentasikan koordinat x.</p>

Input pengguna

Ketika Anda perlu menunjukkan apa yang seharusnya dimasukkan oleh pengguna, Bootstrap Reboot menawarkan solusi untuk Anda.

<pUntuk menyimpan pekerjaan Anda, tekan <kbd>Ctrl + S</kbd>.</p>

Output contoh

Kadang-kadang, Anda perlu menunjukkan apa yang output program Anda mungkin terlihat seperti. Bootstrap Reboot menyediakan gaya untuk ini juga.

<sampIni adalah apa outputnya mungkin tampak seperti ini.</samp>

Tabel

Tabel adalah bagus untuk menampilkan data yang terstruktur. Bootstrap Reboot memastikan mereka bersih dan mudah dibaca.

<table>
<thead>
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</tbody>
</table>

Formulir

Formulir adalah bagaimana pengguna berinteraksi dengan website Anda. Bootstrap Reboot menyediakan gaya konsisten bagi elemen formulir.

<form>
<label for="name">Nama:</label>
<input type="text" id="name" name="name">

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<button type="submit">Kirim</button>
</form>

Penunjuk tombol

Tombol adalah elemen interaktif, dan Bootstrap Reboot memastikan mereka terlihat seperti itu.

<button>Klik saya!</button>

Ketika Anda melayangkan mouse di atas tombol, kursor berubah menjadi penunjuk, menandakan itu dapat diklik.

Elemen Misc

Bootstrap Reboot juga menyediakan gaya bagi berbagai elemen HTML lainnya. Ini adalah contoh cepat:

<abbr title="HyperText Markup Language">HTML</abbr> adalah markup standar untuk halaman web.

Blockquote

Blockquote adalah bagus untuk menyorot kutipan atau bagian teks penting.

<blockquote>
<p>Adakah ataukah bukan, itu adalah pertanyaannya.</p>
<footer>— William Shakespeare</footer>
</blockquote>

Elemen inline

Bootstrap Reboot memastikan bahwa elemen inline diatur konsisten.

<p>Teks ini <strong>tebal</strong>, ini <em>italic</em>, dan ini <u>di garis bawah</u>.</p>

Summary

Elemen <summary> digunakan bersamaan dengan <details> untuk membuat section yang dapat diperluas atau disembunyikan.

<details>
<summary>Klik untuk diperluas</summary>
<pIni adalah konten yang diperluas.</p>
</details>

Atribut [hidden] HTML5

Bootstrap Reboot menghormati atribut hidden HTML5, yang dapat digunakan untuk menyembunyikan elemen.

<div hidden>Konten ini disembunyikan.</div>

Dan itu adalah semua, teman-teman! Kita telah melihat aspek utama Bootstrap Reboot. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba elemen ini dalam proyek Anda sendiri. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

Bootstrap - Grid CSS

Tutorial Seterusnya:

Bootstrap - Tipografi