أساسيات الطباعة

<!-- العناوين القياسية --> <h1>h1. عنوان Bootstrap</h1> <h2>h2. عنوان Bootstrap</h2> <h3>h3. عنوان Bootstrap</h3> <h4>h4. عنوان Bootstrap</h4> <h5>h5. عنوان Bootstrap</h5> <h6>h6. عنوان Bootstrap</h6> <!-- فئات العناوين على عناصر أخرى --> <p class="h1">فقرة منسقة كـ h1</p> <div class="h2">div منسق كـ h2</div>

<!-- عناوين العرض --> <h1 class="display-1">عرض 1</h1> <h1 class="display-2">عرض 2</h1> <h1 class="display-3">عرض 3</h1> <h1 class="display-4">عرض 4</h1> <h1 class="display-5">عرض 5</h1> <h1 class="display-6">عرض 6</h1>

<!-- فقرة تمهيدية --> <p class="lead"> هذه فقرة تمهيدية. تبرز من نص المحتوى العادي ومثالية للمقدمات أو الملخصات المهمة. </p> <!-- فقرة عادية --> <p> هذا نص محتوى عادي. يطبق Bootstrap تنسيقاً متسقاً على جميع الفقرات مع ارتفاع السطر والتباعد المناسبين. </p>

<!-- محاذاة النص --> <p class="text-start">نص محاذ لليسار.</p> <p class="text-center">نص محاذ للوسط.</p> <p class="text-end">نص محاذ لليمين.</p> <!-- محاذاة النص المتجاوبة --> <p class="text-start text-md-center text-lg-end"> يسار على الموبايل، وسط على التابلت، يمين على سطح المكتب </p> <!-- تحويل النص --> <p class="text-lowercase">نص بأحرف صغيرة</p> <p class="text-uppercase">نص بأحرف كبيرة</p> <p class="text-capitalize">نص بأحرف كبيرة في البداية</p>

<!-- أوزان الخط --> <p class="fw-bold">نص عريض</p> <p class="fw-bolder">نص أكثر عرضاً (نسبة للعنصر الأب)</p> <p class="fw-semibold">نص شبه عريض</p> <p class="fw-normal">نص بوزن عادي</p> <p class="fw-light">نص خفيف</p> <p class="fw-lighter">نص أخف</p> <!-- نمط الخط --> <p class="fst-italic">نص مائل</p> <p class="fst-normal">نص عادي (يزيل المائل)</p> <!-- ارتفاع السطر --> <p class="lh-1">ارتفاع سطر ضيق</p> <p class="lh-sm">ارتفاع سطر صغير</p> <p class="lh-base">ارتفاع سطر أساسي</p> <p class="lh-lg">ارتفاع سطر كبير</p>

<!-- ألوان النص السياقية --> <p class="text-primary">لون النص الأساسي</p> <p class="text-secondary">لون النص الثانوي</p> <p class="text-success">لون النص للنجاح</p> <p class="text-danger">لون النص للخطر</p> <p class="text-warning">لون النص للتحذير</p> <p class="text-info">لون النص للمعلومات</p> <p class="text-light bg-dark">لون النص الفاتح</p> <p class="text-dark">لون النص الداكن</p> <p class="text-muted">لون النص الباهت</p> <p class="text-white bg-dark">لون النص الأبيض</p> <!-- نص مع خلفية --> <p class="text-bg-primary">نص مع خلفية أساسية</p> <p class="text-bg-success">نص مع خلفية النجاح</p> <!-- زخرفة النص --> <p class="text-decoration-underline">نص مسطر</p> <p class="text-decoration-line-through">نص مشطوب</p> <a href="#" class="text-decoration-none">رابط بدون تسطير</a>

<!-- التفاف النص والفيض --> <p class="text-wrap">هذا النص سيلتف بشكل طبيعي</p> <p class="text-nowrap">هذا النص لن يلتف</p> <p class="text-break">هذا النص سيكسر الكلمات الطويلة لمنع الفيض</p> <p class="text-truncate" style="max-width: 200px;"> سيتم اقتطاع هذا النص بنقاط الحذف... </p> <!-- أدوات حجم الخط --> <p class="fs-1">حجم الخط 1 (الأكبر)</p> <p class="fs-2">حجم الخط 2</p> <p class="fs-3">حجم الخط 3</p> <p class="fs-4">حجم الخط 4</p> <p class="fs-5">حجم الخط 5</p> <p class="fs-6">حجم الخط 6 (الأصغر)</p> <!-- خط أحادي المسافة --> <p class="font-monospace">هذا بخط أحادي المسافة</p> <!-- إعادة تعيين النص --> <p class="text-reset"> هذا النص <a href="#" class="text-reset">يرث اللون من العنصر الأب</a> </p>

<article class="py-5"> <div class="container"> <!-- شارة الفئة --> <span class="badge text-bg-primary mb-2">تطوير الويب</span> <!-- عنوان المقالة --> <h1 class="display-4 fw-bold mb-3"> البدء مع طباعة Bootstrap 5 </h1> <!-- معلومات المقالة --> <p class="text-muted mb-4"> <span class="fw-semibold">بواسطة أحمد محمد</span> &middot; <time>15 مايو 2024</time> &middot; 5 دقائق قراءة </p> <!-- فقرة تمهيدية --> <p class="lead mb-4"> الطباعة هي أساس التصميم الجيد. يوفر Bootstrap 5 مجموعة شاملة من أدوات الطباعة التي تساعدك على إنشاء محتوى جميل وقابل للقراءة بأقل جهد. </p> <!-- محتوى المقالة --> <p> في هذا الدرس، سنستكشف جميع ميزات الطباعة المتاحة في Bootstrap 5، من العناوين الأساسية إلى أدوات النص المتقدمة. ستتعلم كيفية إنشاء محتوى نصي ذو مظهر احترافي يعمل بشكل مثالي على جميع الأجهزة. </p> </div> </article>