في هذا الدرس 3تصفّح المواضيع
- 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.
HTML
<!-- 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>- يستخدم كلاس 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>هناك العديد من الكلاسات الاخرى التي يمكن استخدامها للتحكم في صيغة اي 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.
HTML
<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>رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.