۱. تایپوگرافی: قدرت کلمات

بوت‌استرپ برای تمام تگ‌های متنی (مثل H1 تا H6) استایل‌های پیش‌فرضی دارد. اما گاهی نیاز داریم یک متن ساده را بسیار بزرگتر یا با وزنی متفاوت نمایش دهیم.

الف) کلاس‌های Display:

اگر می‌خواهید عنوانی داشته باشید که از H1 معمولی هم بزرگتر و جذاب‌تر باشد، از کلاس‌های display استفاده می‌کنیم (از ۱ تا ۶):

ب) کلاس‌های کاربردی متن:

• .lead: برای پاراگراف‌های مقدمه که می‌خواهید کمی برجسته‌تر از متن عادی باشند.
• .text-center / .text-end: برای وسط‌چین یا چپ‌چین کردن متون (در فارسی text-end معادل چپ‌چین است).
• .fw-bold / .fw-light: برای ضخیم کردن یا نازک کردن فونت.
• .text-decoration-none: حذف خط زیر لینک‌ها.

۲. سیستم رنگ‌ها: رنگ‌هایی که حرف می‌زنند

در بوت‌استرپ، رنگ‌ها فقط برای زیبایی نیستند؛ آن‌ها حامل پیام هستند. برای اعمال رنگ به متن از پیشوند text- و برای پس‌زمینه از bg- استفاده می‌کنیم.

۳. مهندسی فاصله‌ها (Padding & Margin)

یکی از بزرگترین چالش‌های طراحی، تنظیم فاصله‌هاست. بوت‌استرپ از یک فرمول ساده استفاده می‌کند: {property}{side}-{size}

اجزای فرمول:

• Property: حرف m برای Margin (فاصله بیرونی) و p برای Padding (فاصله داخلی).
• Side:
  t (بالا)، b (پایین)، s (شروع/راست در فارسی)، e (پایان/چپ در فارسی)،
  x (چپ و راست)، y (بالا و پایین).
• Size: اعدادی از ۰ تا ۵ (۰ یعنی حذف فاصله و ۵ بیشترین فاصله).

⚠️ تله‌های استایل‌دهی:

• رنگ‌های متضاد: هرگز متن روشن را روی پس‌زمینه روشن قرار ندهید (مثلاً text-white bg-light). همیشه خوانایی را اولویت قرار دهید.
• زیاده‌روی در Display: کلاس‌های Display بسیار جذاب هستند اما استفاده بیش از حد از آن‌ها در یک صفحه، ساختار بصری سایت را شلوغ و غیرحرفه‌ای می‌کند.
• عدم تقارن در فاصله‌ها: سعی کنید از اعداد ثابت (مثلاً همیشه ۳ یا ۴) برای فاصله‌ها در کل سایت استفاده کنید تا نظم بصری حفظ شود.