BS5 Typography

15 دقیقه Article

تایپوگرافی (Typography) ✍️

بوت‌استرپ استایل‌های پیش‌فرض مرورگر را برای تیترها، پاراگراف‌ها و لیست‌ها بهبود می‌بخشد و کلاس‌های کاربردی زیادی برای متون ارائه می‌دهد.

کلاس‌های نمایشی (Display Classes)

گاهی می‌خواهید متنی بزرگتر از h1 داشته باشید. برای این کار از کلاس‌های display-1 تا display-6 استفاده کنید.

متن‌های کم‌رنگ

کلاس .text-muted (در نسخه‌های جدیدتر .text-secondary) برای متون توضیحی و کم‌اهمیت استفاده می‌شود.

تمرین کنید: بوت‌استرپ ابزاری است که با استفاده مداوم در ذهن می‌نشیند. سعی کنید کامپوننت‌ها را ترکیب کنید و طرح‌های خلاقانه بسازید.

نکته حرفه‌ای: تفکر واکنش‌گرا (Responsive Mindset) 📱💻

بوت‌استرپ فقط مجموعه‌ای از کلاس‌ها نیست؛ یک فلسفه طراحی است ("Mobile-First"). در دنیای مدرن وب، شما سایت را برای موبایل می‌سازید و سپس آن را برای صفحات بزرگتر گسترش می‌دهید.

Best Practice: همیشه از کلاس‌های کاربردی (Utility Classes) برای تنظیم فاصله (Margin/Padding) استفاده کنید و از نوشتن CSS سفارشی برای کارهای ساده بپرهیزید. این کار حجم فایل CSS نهایی را کاهش می‌دهد.

تمرین‌های عملی

برای تثبیت یادگیری این درس تمرین‌های زیر را حل کنید

تایپوگرافی جذاب Medium

سوال تمرین

یک پاراگراف با کلاس lead و یک تیتر با کلاس display-1 بسازید.

پاسخ تمرین

<body>
  <h1 class="display-1">Big Title</h1>
  <p class="lead">Intro text</p>
</body>

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید

ParsRepo