Typography

بوت‌استرپ استایل‌های آماده برای متن‌ها (فونت‌ها، تیترها، پاراگراف‌ها و …) داره.
به کمکش می‌تونی متن‌هات رو زیباتر و واکنش‌گرا نمایش بدی.

📌 1. تیترها (Headings)

بوت‌استرپ از <h1> تا <h6> استایل آماده داره:


<h1>تیتر H1</h1>
<h2>تیتر H2</h2>
<h3>تیتر H3</h3>
<h4>تیتر H4</h4>
<h5>تیتر H5</h5>
<h6>تیتر H6</h6>

🔹 همچنین می‌تونی کلاس‌های کمکی مثل .h1 تا .h6 رو روی هر تگی استفاده کنی:


<p class="h1">این یک پاراگرافه اما ظاهر H1 داره</p>

📌 2. نمایش متن (Display headings)

برای تیترهای بزرگ‌تر و برجسته‌تر:


<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

📌 3. پاراگراف‌ها

پاراگراف ساده:


<p>این یک متن نمونه است.</p>

کلاس lead برای پاراگراف‌های مهم:


<p class="lead">این متن با lead برجسته‌تر نشون داده میشه.</p>

📌 4. استایل‌های متن

bold → <strong> یا کلاس .fw-bold
italic → <em> یا کلاس .fst-italic
muted text → متن کم‌رنگ با کلاس .text-muted

مثال:


<p><strong>متن بولد</strong></p>
<p><em>متن ایتالیک</em></p>
<p class="text-muted">متن کم‌رنگ</p>

📌 5. رنگ متن

بوت‌استرپ رنگ‌های آماده برای متن داره:


<p class="text-primary">متن آبی</p>
<p class="text-success">متن سبز</p>
<p class="text-danger">متن قرمز</p>
<p class="text-warning">متن زرد</p>
<p class="text-info">متن فیروزه‌ای</p>
<p class="text-dark">متن تیره</p>
<p class="text-light bg-dark">متن روشن روی پس‌زمینه تیره</p>

📌 6. ترازبندی متن

.text-start → چپ‌چین
.text-center → وسط‌چین
.text-end → راست‌چین


<p class="text-start">متن چپ‌چین</p>
<p class="text-center">متن وسط‌چین</p>
<p class="text-end">متن راست‌چین</p>

📌 7. سایز و ضخامت فونت

.fs-1 تا .fs-6 → اندازه فونت‌ها
.fw-bold, .fw-normal, .fw-light → ضخامت فونت
.fst-italic, .fst-normal → italic یا عادی

مثال:


<p class="fs-1 fw-bold">متن بزرگ و بولد</p>
<p class="fs-4 fst-italic">متن متوسط و ایتالیک</p>

✨ خلاصه

<h1> تا <h6> و .display-* برای تیترها
.lead برای پاراگراف مهم
استایل‌های کمکی مثل .fw-bold, .text-muted
رنگ‌بندی متن‌ها با .text-*
ترازبندی متن با .text-start / center / end