Bootstrap - Reboot: Panduan Ramah untuk Pemula

Hai teman-teman future web developers! 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 membagikan pengetahuan dan pengalaman saya kepada Anda. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita masuk ke dalamnya!

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 permulaan yang bersih, kan? Itu persis apa yang dilakukan Bootstrap Reboot untuk pengembangan web. Itu seperti memberikan halaman web Anda cat baru, menciptakan dasar yang konsisten bagi Anda untuk membangun.

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

Pendekatan

Pendekatan Bootstrap Reboot sederhana namun kuat. Itu bertujuan untuk:

Menyediakan permulaan bersih untuk 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 keseluruhan halaman. Ini adalah contoh sederhana:

<html lang="id">
<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 meningkatkan keterbacaan
background-color dari body diatur ke putih

Stack font native

Ingat saat kita pernah menentukan font tepat untuk website kita? Bootstrap Reboot memperkenalkan stack font native. Itu seperti memiliki lemari pakaian yang selalu terlihat bagus, tanpa peduli apa pakaian Anda!

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

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

Judul

Judul adalah seperti judul bab dalam buku. Mereka membantu mengatur konten Anda dan membuatnya mudah dibaca. Bootstrap Reboot menyediakan gaya konsisten untuk semua tingkat judul (h1 sampai 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. Perhatikan 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 bergaris bawah. Ketika Anda melayang di atasnya, garis bawah menghilang.

Garis horizontal

Garis horizontal adalah seperti pemisah dalam buku. Mereka membantu memisahkan bagian-bagian berbeda konten Anda.

<hr>

Bootstrap Reboot memastikan bahwa garis horizontal terlihat namun tidak terlalu dominan.

Daftar

Daftar membantu mengatur informasi secara terstruktur. Bootstrap Reboot menyediakan gaya untuk kedua daftar yang diurutkan dan yang tidak diurutkan.

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

<ol>
<liIni adalah item daftar diurut</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 visually appealing.

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

Blok kode

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

<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 untuk menampilkan variabel dalam teks.

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

Input pengguna

Ketika Anda perlu menunjukkan apa yang pengguna harus masukkan, Bootstrap Reboot menyiapkan Anda.

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

Output contoh

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

<sampIni adalah apa output mungkin terlihat seperti.</samp>

Tabel

Tabel adalah bagus untuk menampilkan data 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 untuk 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 melayang di atas tombol, kursor berubah menjadi penunjuk, menandakan itu dapat diklik.

Elemen lainnya

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

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

Blockquote

Blockquote adalah bagus untuk menyorot kutipan atau bagian teks penting.

<blockquote>
<p>Ada atau tidak ada, itu adalah pertanyaannya.</p>
<footer>— William Shakespeare</footer>
</blockquote>

Elemen inline

Bootstrap Reboot memastikan bahwa elemen inline styled konsisten.

<pTeks ini <strong>tebal</strong>, ini <em>italic</em>, dan ini <u>bergaris bawah</u>.</p>

Summary

Elemen <summary> digunakan bersamaan dengan <details> untuk menciptakan seksi yang dapat diperluas/diminimalkan.

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

Atribut HTML5 [hidden]

Bootstrap Reboot menghormati atribut HTML5 hidden, 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 Selanjutnya:

Bootstrap - Tipografi