Bootstrap - Tipografi
Selamat datang, pengembang web masa depan! Hari ini, kita akan melihat dunia yang menakjubkan dari tipografi Bootstrap. Sebagai guru komputer tetangga yang ramah, saya disini untuk memandu Anda dalam 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 penata gaya pribadi untuk situs web Anda!
Ini adalah contoh dasar tentang bagaimana Bootstrap gayakan teks:
<pIni adalah paragraf yang diberikan gaya oleh Bootstrap.</p>Anda mungkin berpikir, "Itu terlihat seperti teks biasa!" Dan Anda benar! Tetapi Bootstrap membuat beberapa peningkatan halus. Itu menetapkan default font-family ( biasanya font sans-serif), ukuran font yang nyaman, dan tinggi baris yang menyenangkan. Itulah hal kecil 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 bobotnya 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 benar-benar menggunakan tag judul? Bootstrap menawarkan Anda penutupan 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 makna semantiknya. Itu seperti memakai kaus tuxedo - formal, tapi tidak terlalu formal.
Judul Tampilan
Saat judul biasa tidak cukup, Bootstrap menawarkan "judul tampilan". 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, meskipun - terlalu banyak dan halaman Anda mungkin mulai menjerit!
Lead
Kelas .lead adalah cara Bootstrap untuk membuat paragraf menonjol. Itu seperti memberikan megaphone kepada teks Anda.
<p class="lead">Ini adalah paragraf lead. Itu menonjol dari paragraf biasa.</p>Gunakan ini untuk teks pengantar atau informasi penting yang Anda ingin sorot.
singkatan
Bootstrap gayakan singkatan dan akronim dengan garis bawah titik. Itu seperti memberikan pembaca Anda cincin dekoder rahasia!
<pThe <abbr title="World Health Organization">WHO</abbr> didirikan pada tahun 1948.</p>Hover di atas singkatan, dan Anda akan melihat kata lengkap muncul.
Blockquote
Blockquote di Bootstrap diberikan gaya untuk menonjol dari teks Anda. Itu seperti anak keren dari 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 yang pantas, tapi dengan gaya!
Penjajaran
Bootstrap memungkinkan Anda menjajaran teks Anda secara mudah dengan kelas. Itu seperti mengajarkan teks Anda untuk menari - kiri, tengah, kanan!
<p class="text-left">Teks rata kiri.</p>
<p class="text-center">Teks rata tengah.</p>
<p class="text-right">Teks rata kanan.</p>Elemen Teks Inline
Bootstrap menyediakan gaya untuk berbagai elemen teks inline. Itu seperti pisau Swiss Army untuk teks Anda!
Berikut adalah tabel elemen teks inline yang umum digunakan:
| Elemen | Deskripsi |
|---|---|
<mark> |
Teks yang diberikan sorotan |
<del> |
Teks yang dihapus |
<s> |
Teks coretan |
<ins> |
Teks yang dimasukkan |
<u> |
Teks yang di garis bawah |
<small> |
Teks yang lebih kecil |
<strong> |
Teks tebal |
<em> |
Teks miring |
Contoh:
<p Anda dapat menggunakan elemen ini untuk <mark>menyorot</mark>, <del>menghapus</del>, <s>coretan</s>, <ins>memasukkan</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 memberikan make over kepada daftar Anda!
<ul>
<li>Item daftar tak berurutan 1</li>
<li>Item daftar tak berurutan 2</li>
</ul>
<ol>
<li>Item daftar berurutan 1</li>
<li>Item daftar berurutan 2</li>
</ol>Penjajaran Daftar Deskripsi
Bootstrap memungkinkan Anda menjajaran istilah dan deskripsi dalam daftar deskripsi. Itu seperti mengatur kamus, tapi lebih keren!
<dl class="row">
<dt class="col-sm-3">Kopi</dt>
<dd class="col-sm-9">Minuman hitam panas</dd>
<dt class="col-sm-3">Susu</dt>
<dd class="col-sm-9">Minuman putih dingin</dd>
</dl>Ini menciptakan tata letak dua kolom untuk daftar deskripsi Anda.
Ukuran Font Responsif
Bootstrap 4 memperkenalkan ukuran font responsif. Itu seperti teks Anda melakukan yoga - itu fleksibel dan menyesuaikan dengan ukuran layar berbeda!
Untuk mengaktifkan ukuran font 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 lah, teman-teman! Panduan lengkap tentang tipografi Bootstrap. Ingat, tipografi adalah suara konten Anda - biarlah itu menyanyi! Semangat coding, dan semoga situs web Anda selalu tampak cantik!
Credits: Image by storyset