Bootstrap

BootStrap Typography
الطباعة في BootStrap

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

التاريخ

15 ديسمبر 2022

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1064

المواضيع

6
الشروحات chevron_left BootStrap Typography chevron_left Bootstrap

BootStrap Typography
الطباعة في BootStrap

</> BootStrap Typography Headings
طباعة العناوين في bootstrap

  • typography الطباعة : هي إحدى ميزات bootstrap التي تتيح لك تنسيق اي محتوى نصي كما تشاء.
  • Usage الاستخدام : تستخدم هذه الخاصية لإنشاء customized headings عناوين مخصصة ،subheadings عناوين فرعية ، lists وقوائم ، paragraphs وفقرات ، وإضافة المزيد من font-styles أنماط الخطوط، وأكثر من ذلك بكثير. 

تستطيع هذه الميزة ان تضيف تنسيقات عناصر headings العناوين الرئيسية (font-size and font-weight only) لاي عنصر HTML يحتوي على text نص بداخله, عن طريق اضافة كلاس من h1-h6.

Typography Headings

استخدام كلاسات h1 to h6 مع عنصر p.

<!-- Headings using normal HTML heading tag -->
<h1>h1. Bootstrap heading</h1>

<!-- Headings using bootstrap h1 to h6 classes -->
<p class="h1">h1. Bootstrap heading</p>

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

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

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

<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>

</> BootStrap Typography other classes
كلاسات طباعة اخرى في bootstrap

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


الجدول التالي يوضح اهم هذه الكلاسات.

الكلاس list-inline & .list-inline-item mark small blockquote
الاستخدام يضع كل عناصر القائم على خط واحد تظليل النص انشاء نص ثانوي صغير عند اقتباس اي نص
الكلاس text-end text-start lead text-center
الاستخدام محاذاة النص الى اليمين محاذاة النص الى اليسار جعل النص بارزا محاذاة النص في المنتصف
الكلاس text-lowercase text-decoration-none text-break text-uppercase
الاستخدام جعل النص بحروف صغيرة ازالة الخط الموجود اسفل عنصر اللينك منع النص الطويل من الاستمرار خارج العنصر جعل النص بحروف كبيرة
الكلاس initialism text-capitalize
الاستخدام abbr يعرض النص داخل عنصر تكبير اول حرف في كل كلمة
Typography other classes examples

امثلة على كلاسات typography في bootstrap.

<div class="container">
          <p class="lead">This paragraph Leads</p>
          <p class="mark">This one is highlighted</p>
          <blockquote class="blockquote"><p class="blockquote-footer">This is a quote</p></blockquote>
          <ul class="list-inline">
            <li class="list-inline-item">HTML</li>
            <li class="list-inline-item">CSS</li>
            <li class="list-inline-item">JavaScript</li>
          </ul>
</div>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.