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>

جربها بنفسك

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات BootStrap Typography Bootstrap