Bootstrap: الخطوط
آخر تحديث: 2026-08-26
1. نظرة عامة على الدرس
(1) المتطلبات المسبقة
- إتقان الفروق والاختيار بين أنواع الحاويات الثلاثة (من الدرس الثاني).
- فهم تغيرات العرض المتجاوبة لـ
.container.
(2) 🎯 ما ستتعلمه
- إتقان نظام عناوين Bootstrap (
h1~h6) وعناوين العرض. - تعلم استخدام
.leadللفقرات الإرشادية وعناصر النص المضمّن. - إتقان أدوات ألوان النص
.text-*والتحكم في الشفافية. - استخدام بارع لأصناف أدوات محاذاة النص وتحويله وحجم الخط.
- إنشاء تخطيط مقال مدونة كامل بشكل مستقل.
(3) المشكلة
تولّى تشارلي للتو مشروع مدونة يتطلب أنماط عناوين متسقة ومسافات فقرات موحدة عبر صفحات مختلفة. عند استخدام CSS الخالص، سيحتاج إلى كتابة محددات لكل صفحة والقلق بشأن تعارضات الأولوية.
(4) الحل
تُبسّط أصناف خطوط Bootstrap هذا الأمر. يوفر Bootstrap مجموعة كاملة من أنماط الخطوط — من أحجام الخطوط إلى ارتفاع السطر، من ألوان النص إلى المسافات — كلها مُعدة مسبقًا؛ فقط استخدم الأصناف المناسبة.
لفهم الفكرة: خطوط Bootstrap تشبه لوحة الأنماط في Word — اختر "عنوان 1"، ويصبح النص تلقائيًا عريضًا وأكبر دون ضبط حجم الخط أو تباعد الأسطر يدويًا.
(5) الفوائد
بإضافة أصناف الخطوط المناسبة في HTML، يمكن لتشارلي الحفاظ على أنماط عناوين متسقة ومسافات فقرات موحدة عبر جميع صفحات المدونة دون كتابة أي كود CSS مخصص.
2. العناوين
▶ مثال: العناوين وعناوين العرض
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Typography</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<!-- Standard headings -->
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<hr>
<!-- Heading classes on any element -->
<p class="h1">This paragraph looks like an h1</p>
<p class="h2">This paragraph looks like an h2</p>
<p class="h3">This paragraph looks like an h3</p>
<hr>
<!-- Display headings (extra-large) -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
</div>
</body>
</html>
النتيجة: مكوّنات Bootstrap 5.3 منسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي) مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.
(1) أحجام الخطوط الافتراضية
| المستوى | وسم/صنف | حجم الخط | الوزن |
|---|---|---|---|
h1 |
<h1> |
2.5rem (40px) | 500 |
h2 |
<h2> |
2rem (32px) | 500 |
h3 |
<h3> |
1.75rem (28px) | 500 |
h4 |
<h4> |
1.5rem (24px) | 500 |
h5 |
<h5> |
1.25rem (20px) | 500 |
h6 |
<h6> |
1rem (16px) | 500 |
3. عناوين العرض
display-1 ~ display-6 أكبر وأرق (font-weight: 300) من العناوين القياسية، مناسبة لعناوين الصفحة الرئيسية وشعارات العلامة التجارية وغيرها من المناطق التي تتطلب تأثيرًا بصريًا:
<h1 class="display-3">Build <span class="text-primary">fast</span> with Bootstrap</h1>
<p class="lead">A powerful, feature-packed frontend toolkit.</p>
النتيجة: مكوّنات Bootstrap 5.3 منسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي) مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.
| الصنف | حجم الخط | الوزن | سيناريو التطبيق |
|---|---|---|---|
display-1 |
5rem | 300 | عنوان البطل في الصفحة الرئيسية |
display-3 |
4rem | 300 | عنوان الصفحة الرئيسية |
display-6 |
2.5rem | 300 | لافتة الصفحة الداخلية |
(2) مقارنة جميع عناوين العرض
| الصنف | حجم الخط | ارتفاع السطر | الوزن | سيناريو التطبيق |
|---|---|---|---|---|
display-1 |
5rem (80px) | 1.2 | 300 (خفيف) | عنوان البطل في الصفحة الرئيسية |
display-2 |
4.5rem (72px) | 1.2 | 300 (خفيف) | العنوان الرئيسي للصفحة |
display-3 |
4rem (64px) | 1.2 | 300 (خفيف) | شعار العلامة التجارية |
display-4 |
3.5rem (56px) | 1.2 | 300 (خفيف) | عنوان صفحة حدث |
display-5 |
3rem (48px) | 1.2 | 300 (خفيف) | لافتة الصفحة الداخلية |
display-6 |
2.5rem (40px) | 1.2 | 300 (خفيف) | عنوان قسم |
graph TD
A[Bootstrap Typography System] --> B[Headings h1~h6]
A --> C[Display Headings display-1~6]
A --> D[Lead Paragraphs .lead]
A --> E[Inline Elements]
A --> F[Utility Classes]
B --> G[Standard Heading Tags]
B --> H[class h1 Simulating Headings]
E --> I[mark / del / ins / small]
E --> J[strong / em / u / s]
F --> K[Text Colors text-*]
F --> L[Text Alignment text-start/center/end]
F --> M[Text Transformation uppercase/lowercase/capitalize]
F --> N[Font Size fs-1~fs-6]
النتيجة: مكوّنات Bootstrap 5.3 منسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي) مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.
4. الفقرات الإرشادية
يجعل .lead الفقرات أكبر وأبرز، مناسب لمقدمات المقالات أو النص الم emphasizzato:
<p>This is a normal paragraph with default font size (1rem).</p>
<p class="lead">This is a lead paragraph. It stands out from regular content with larger font and lighter weight.</p>
النتيجة: مكوّنات Bootstrap 5.3 منسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي) مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.
5. عناصر النص المضمّنة
يعيد Bootstrap ضبط أنماط وسوم HTML المضمّنة الشائعة، جاهزة للاستخدام مباشرة:
<p>You can <mark>highlight</mark> text with the mark tag.</p>
<p><del>This line is deleted text.</del></p>
<p><s>This line is no longer accurate.</s></p>
<p><ins>This line is newly inserted.</ins></p>
<p><u>This line is underlined.</u></p>
<p><small>This line is small text.</small></p>
<p><strong>This line is bold.</strong></p>
<p><em>This line is italic.</em></p>
النتيجة: مكوّنات Bootstrap 5.3 منسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي) مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.
| الوسم | التأثير | الاستخدام |
|---|---|---|
<mark> |
تمييز بخلفية صفراء | كلمات مفتاحية / نتائج البحث |
<del> |
خط في المنتصف | محتوى محذوف |
<ins> |
تسطير (عادة أخضر) | محتوى جديد |
<small> |
نص صغير 0.875em | تعليقات / حواشي |
<strong> |
عريض | تأثير على كلمات مفتاحية |
6. ألوان النص
▶ مثال: ألوان النص
<p class="text-primary">.text-primary - Primary blue</p>
<p class="text-success">.text-success - Success green</p>
<p class="text-danger">.text-danger - Danger red</p>
<p class="text-warning bg-dark p-2">.text-warning - Warning amber</p>
<p class="text-info bg-dark p-2">.text-info - Info cyan</p>
<p class="text-muted">.text-muted - Muted gray</p>
<p class="text-dark">.text-dark - Dark text</p>
<p class="text-body">.text-body - Default body color</p>
النتيجة: مكوّنات Bootstrap 5.3 منسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي) مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.
شفافية النص (Bootstrap 5.3):
<p class="text-primary">100% opacity</p>
<p class="text-primary text-opacity-75">75% opacity</p>
<p class="text-primary text-opacity-50">50% opacity</p>
<p class="text-primary text-opacity-25">25% opacity</p>
النتيجة: مكوّنات Bootstrap 5.3 منسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي) مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.
7. محاذاة النص
<p class="text-start">Left aligned on all viewports.</p>
<p class="text-center">Center aligned on all viewports.</p>
<p class="text-end">Right aligned on all viewpoints.</p>
<p class="text-sm-end">Right aligned on sm+ viewports.</p>
<p class="text-md-center">Center aligned on md+ viewports.</p>
النتيجة: مكوّنات Bootstrap 5.3 منسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي) مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.
لاحقات نقاط التوقف sm/md/lg/xl/xxl فعالة بنفس القدر في محاذاة النص.
8. تحويل النص وحجم الخط
<p class="text-lowercase">Lowercased Text</p>
<p class="text-uppercase">Uppercased Text</p>
<p class="text-capitalize">capitalized text</p>
<p class="fs-1">fs-1 - font-size: 2.5rem</p>
<p class="fs-2">fs-2 - font-size: 2rem</p>
<p class="fs-3">fs-3 - font-size: 1.75rem</p>
<p class="fs-4">fs-4 - font-size: 1.5rem</p>
<p class="fs-5">fs-5 - font-size: 1.25rem</p>
<p class="fs-6">fs-6 - font-size: 1rem</p>
النتيجة: مكوّنات Bootstrap 5.3 منسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي) مع استخدام الصفحة للسمة الافتراضية لـ Bootstrap (الوضع الفاتح) ونظام الشبكة المتجاوب.
| الصنف | خاصية CSS | المكافئ |
|---|---|---|
text-lowercase |
text-transform: lowercase |
جميع الحروف صغيرة |
text-uppercase |
text-transform: uppercase |
جميع الحروف كبيرة |
text-capitalize |
text-transform: capitalize |
أول حرف من كل كلمة كبير |
9. القوائم والاقتباسات
يعيد Bootstrap تنسيق القوائم والاقتباسات بحيث يبدو HTML الدلالي نظيفًا دون CSS مخصص.
▶ مثال: القوائم والاقتباسات
<ul class="list-unstyled">
<li>Unstyled item one</li>
<li>Unstyled item two</li>
</ul>
<ol class="list-group list-group-numbered">
<li class="list-group-item">Step one</li>
<li class="list-group-item">Step two</li>
</ol>
<blockquote class="blockquote">
<p>Bootstrap makes typography effortless.</p>
<footer class="blockquote-footer">A happy developer</footer>
</blockquote>
النتيجة: القائمة غير المنسقة تزيل النقاط؛ قائمة list-group المرقمة تُعرض كقائمة بطاقات مرقمة بحدود؛ الاقتباس يحصل على نمط اقتباس كبير بمحاذاة يسارية.
❓ أسئلة شائعة
display-1 إلى display-6) تكبر حجم الخط فقط وتجعله أخف؛ يمكنك استخدامها على أي مستوى عنوان دون تغيير مخطط المستند.text-muted أو text-danger تُطبّق على عقد النص. إذا كان العنصر متجاوزًا بقاعدة CSS أكثر تحديدًا، أضف صنف الأداة إلى عنصر النص الدقيق بدلاً من الحاوية الأم.text-capitalize كل كلمة بحرف كبير؟📖 ملخص
- تغطي خطوط Bootstrap العناوين، عناوين العرض، الفقرات، النص المضمّن، المحاذاة، التحويل، حجم الخط، القوائم، والاقتباسات.
- أصناف الأدوات (
text-*،fs-*،display-*،list-*،blockquote) تنسّق النص دون كتابة CSS مخصص. - لاحقات نقاط التوقف (
sm/md/lg/xl/xxl) تعمل على أدوات المحاذاة والتحويل للنص المتجاوب.
📝 تمارين
- أنشئ صفحة بعنوان
<h1 class="display-1">وعنوان فرعي عادي<h3>، وقارن وزنهما البصري. - استخدم
text-uppercaseوtext-mutedوtext-centerعلى ثلاث فقرات ولاحظ التأثير المركب. - ابنِ قائمة
list-group-numberedتضم ثلاثة أطر عمل مفضلة لديك، ولفّ اقتباسًا حول أحدها فيblockquote.
