انتقل إلى محتوى الدرس

BootStrap Typography Headings Display عرض العناوين في bootstrap

سنتعلم في هذا الدرس كيف نتحكم في تنسيق وصيغة اي text content محتوى نصي داخل اي عنصر في صفحة HTML.

1 صفوف تعليمية
Bootstrap
2,680 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
  • يستخدم كلاس display-x لاضافة تنسيقات تجعل headings العناوين الرئيسة الخاصة بك اكثر بروزا ووضوح, فتكون ذات حجم خط اكبر وايضا lighter font-weight وزن خط اخف.
  • تتراوح قيمة x من 1 الى 6.
  • يمكن استخدام هذا الكلاس مع اي عنصر وليس عناصر headings فقط.
  • هذا الكلاس قادر على تعديل حجم الخط ووزنه فقط ليبدو مثل العناوين الرئيسية.

Typography Headings Display

مثال على استخدام كلاس display-x.

HTML
<div class="container-fluid">
   <h1 class="display-1">Display 1</h1>
   <h1 class="display-2">Display 2</h1>
</div>

<!-- display class can be added to any element to change font-size and font-weight only -->
<div class="container-fluid">
   <span class="display-1">Display 1</span>
   <span class="display-2">Display 2</span>
</div>