Bootstrap - Tipografi
Selamat datang, para pengembang web masa depan! Hari ini, kita akan melihat dunia yang menakjubkan dari Bootstrap tipografi. Sebagai guru komputer tetangga yang ramah, saya di sini untuk menghidahkan Anda melalui perjalanan ini dengan banyak contoh, penjelasan, dan mungkin beberapa dad joke. Jadi, mari kita mulai!
Pengaturan Default / Global Bootstrap
Bootstrap datang dengan beberapa pengaturan tipografi default yang membuat teks Anda terlihat bagus sejak saat pertama. Itu seperti memiliki stylist pribadi untuk situs Anda!
Ini adalah contoh dasar bagaimana Bootstrap gayakan teks:
<p Ini adalah paragraf yang dibiarkan oleh Bootstrap.</p>Anda mungkin berpikir, "Itu terlihat seperti teks biasa!" Dan Anda benar! Tetapi Bootstrap membuat beberapa peningkatan halus. Itu mengatur default font-family ( biasanya font sans-serif), ukuran font yang nyaman, dan tinggi baris yang menyenangkan. Itu adalah hal kecil ini yang membuat Bootstrap sangat kuat.
Judul
Judul di Bootstrap seperti ukuran berbeda kopi di kedai kopi favorit Anda - mereka datang dalam enam rasa, dari h1 ke h6.
<h1Ini adalah judul 1</h1>
<h2Ini adalah judul 2</h2>
<h3Ini adalah judul 3</h3>
<h4Ini adalah judul 4</h4>
<h5Ini adalah judul 5</h5>
<h6Ini adalah judul 6</h6>Setiap judul memiliki ukuran dan beratnya sendiri, menciptakan hierarki yang jelas dalam konten Anda. Itu seperti mengatur lemari - semua hal memiliki tempatnya!
Menyesuaikan Judul
Tapi apa kalau Anda ingin menggunakan gaya judul tanpa menggunakan tag judul? Bootstrap menutupi Anda dengan kelas .h1 hingga .h6.
<p class="h1">Paragraf ini terlihat seperti judul 1</p>
<span class="h3">Span ini terlihat seperti judul 3</span>Ini sangat baik saat Anda ingin gaya judul tanpa arti semantik. Itu seperti memakai kemeja tuxedo - formal, tapi tidak terlalu formal.
Judul Tampilan
Saat judul biasa tidak cukup, Bootstrap menawarkan "tampilan" judul. Ini seperti supermodel judul - besar, tebal, dan menarik perhatian.
<h1 class="display-1">Tampilan 1</h1>
<h1 class="display-2">Tampilan 2</h1>
<h1 class="display-3">Tampilan 3</h1>
<h1 class="display-4">Tampilan 4</h1>Judul tampilan ini sangat cocok untuk saat Anda perlu membuat pernyataan besar. Gunakan mereka bijaksana, tapi - terlalu banyak dan halaman Anda mungkin mulai menjerit!
Lead
Kelas .lead adalah cara Bootstrap membuat paragraf menonjol. Itu seperti memberi teks Anda sebuah megaphone.
<p class="lead">Ini adalah paragraf lead. Itu menonjol dari paragraf biasa.</p>Gunakan ini untuk teks pengantar atau informasi penting yang Anda ingin menyoroti.
Singkatan
Bootstrap gayakan singkatan dan akronim dengan garis bawah titik. Itu seperti memberi pembaca Anda sebuah decoder rahasia!
<p>The <abbr title="World Health Organization">WHO</abbr> didirikan pada tahun 1948.</p>Hover di atas singkatan, dan Anda akan melihat kata lengkap muncul.
Blockquote
Blockquotes di Bootstrap dibiaskan untuk menonjol dari teks Anda. Itu seperti anak keren di dunia paragraf.
<blockquote class="blockquote">
<p>Dua hal yang tak terbatas: alam semesta dan kebodohan manusia; dan saya tidak yakin tentang alam semesta.</p>
</blockquote>Menamakan Sumber
Anda dapat menambahkan sumber ke blockquote Anda menggunakan tag <footer> dengan kelas blockquote-footer.
<blockquote class="blockquote">
<p>Dua hal yang tak terbatas: alam semesta dan kebodohan manusia; dan saya tidak yakin tentang alam semesta.</p>
<footer class="blockquote-footer">Albert Einstein</footer>
</blockquote>Itu seperti memberikan kredit di mana kredit itu berharga, tapi dengan gaya!
Penjajaran
Bootstrap memungkinkan Anda menjajaran teks Anda dengan mudah menggunakan kelas. Itu seperti mengajarkan teks Anda untuk menari - kiri, tengah, kanan!
<p class="text-left">Teks penjajaran kiri.</p>
<p class="text-center">Teks penjajaran tengah.</p>
<p class="text-right">Teks penjajaran kanan.</p>Elemen Teks Inline
Bootstrap menyediakan gaya untuk berbagai elemen teks inline. Itu seperti Swiss Army knife untuk teks Anda!
Berikut adalah tabel elemen teks inline yang umum digunakan:
| Elemen | Deskripsi |
|---|---|
<mark> |
Teks yang ditekankan |
<del> |
Teks yang dihapus |
<s> |
Teks coretan |
<ins> |
Teks yang dimasukkan |
<u> |
Teks yang di garis bawah |
<small> |
Teks yang kecil |
<strong> |
Teks tebal |
<em> |
Teks miring |
Contoh:
<p Anda dapat menggunakan elemen ini untuk <mark>tekan</mark>, <del>hapus</del>, <s>coretan</s>, <ins>masukkan</ins>, <u>garis bawah</u>, membuat teks <small>kecil</small>, <strong>tebal</strong>, atau <em>miring</em>.</p>Daftar
Bootstrap gayakan daftar untuk membuatnya lebih menarik secara visual. Itu seperti memberi daftar Anda sebuah make over!
<ul>
<li>Item daftar tak terurut 1</li>
<li>Item daftar tak terurut 2</li>
</ul>
<ol>
<li>Item daftar terurut 1</li>
<li>Item daftar terurut 2</li>
</ol>Penjajaran Daftar Deskripsi
Bootstrap memungkinkan Anda menjajaran istilah dan deskripsi dalam daftar deskripsi. Itu seperti mengatur kamus, tapi cooler!
<dl class="row">
<dt class="col-sm-3">Kopi</dt>
<dd class="col-sm-9">Minuman panas hitam</dd>
<dt class="col-sm-3">Susu</dt>
<dd class="col-sm-9">Minuman dingin putih</dd>
</dl>Ini menciptakan tata letak dua kolom untuk daftar deskripsi Anda.
Ukuran Font Responif
Bootstrap 4 memperkenalkan ukuran font yang responsif. Itu seperti teks Anda melakukan yoga - itu fleksibel dan menyesuaikan dengan ukuran layar berbeda!
Untuk mengaktifkan ukuran font yang responsif, tambahkan baris ini ke CSS Anda:
html {
font-size: 1rem;
}Lalu, gunakan kelas .font-size-responsive pada elemen Anda:
<p class="font-size-responsive">Teks ini akan menyesuaikan ukurannya pada perangkat berbeda.</p>Dan itu saja, teman-teman! Panduan komprehensif tentang Bootstrap tipografi. Ingat, tipografi adalah suara konten Anda - biarkan itu menyanyi! Selamat coding, dan semoga situs Anda selalu terlihat indah!
Credits: Image by storyset