في هذا الدرس 6تصفّح المواضيع
يمنحك بوتستراب 5 تحكماً جراحياً في إطارات الصناديق عبر عائلتين متقابلتين من كلاسات الحدود: الكلاسات الإضافية التي ترسم إطاراً جديداً بسمك 1px مثل .border للجهات الأربع أو لجهة محددة منطقياً عبر .border-top و.border-bottom و.border-start و.border-end.
وفي المقابل تعمل الكلاسات الطرحية على إزالة حد موجود مسبقاً؛ فيحذف .border-0 الإطار الكامل، بينما يزيل .border-top-0 أو .border-end-0 ضلعاً واحداً فقط عند دمج الصناديق المتلاصقة.
بعد تفعيل الإطار الأساسي بكلاس .border (أو أحد أضلاعه)، يمكنك تلوينه بلوحة الألوان الدلالية مثل .border-primary و.border-success و.border-danger، أو اختيار الدرجات الناعمة الهادئة المضافة في الإصدار 5.3 مثل .border-primary-subtle مع التحكم بشفافية الخط عبر .border-opacity-50 أو .border-opacity-25.
ولضبط سماكة الخط من رفيع إلى عريض، يوفر الإطار خمس درجات رقمية من .border-1 (1px) حتى .border-5 (5px).
<div class="p-3 mb-2 border border-2 border-primary">
Full 2px primary border box
</div>
<div class="p-3 border-start border-4 border-success
bg-success-subtle text-success-emphasis">
4px logical start accent callout
</div>تحدد زوايا العناصر شخصية التصميم بين الطابع الرسمي الحاد والطابع العصري الودود. يقدم بوتستراب 5.3 ست درجات قياسية لاستدارة الحواف تبدأ من .rounded-0 لإلغاء الاستدارة تماماً، ثم تتدرج من .rounded-1 إلى .rounded-5 لإعطاء زوايا كبيرة وناعمة للبطاقات العصرية.
وللأشكال الهندسية الخاصة، يصنع كلاس .rounded-circle دائرة مثالية بشرط تساوي عرض العنصر وارتفاعه (مربع متساوي الأضلاع)، بينما يمنح .rounded-pill أي عنصر مستطيل حواف كبسولة دائرية أنيقة، مع دعم تدوير جهة واحدة مثل .rounded-top أو .rounded-end-4.
<div class="row g-3 align-items-center">
<div class="col-auto">
<img src="/images/examples/studio-desk-3x2.webp"
width="64" height="64" class="rounded-circle"
alt="Square cropped icon">
</div>
<div class="col">
<div class="px-3 py-2 text-bg-primary rounded-pill">
Capsule Pill Banner (.rounded-pill)
</div></div></div>لضبط أبعاد العنصر كنسبة مئوية من أبعاد العنصر الأب المحيط به، يوفر بوتستراب خمس درجات جاهزة للعرض .w-25 و.w-50 و.w-75 و.w-100 و.w-auto، ونظيراتها للارتفاع .h-25 و.h-50 و.h-75 و.h-100 و.h-auto.
بالإضافة إلى ذلك، يمنع كلاس .mw-100 (max-width: 100%) وكلاس .mh-100 (max-height: 100%) تجاوز العنصر لحدود حاويته القصوى. انتبه جيداً إلى أن نسب الارتفاع المئوية مثل .h-50 و.h-100 لا تعمل إلا إذا كان للعنصر الأب ارتفاع صريح محدد مسبقاً!
<div class="p-2 bg-body-tertiary rounded-3">
<div class="w-25 p-2 mb-2 text-bg-secondary">25%</div>
<div class="w-50 p-2 mb-2 text-bg-info">50%</div>
<div class="w-75 p-2 mb-2 text-bg-primary">75%</div>
<div class="w-100 p-2 text-bg-success">100%</div>
</div>عند تصميم شاشة ترحيب كاملة أو واجهة تسجيل دخول تغطي نافذة المتصفح الرأسية مهما قلّ محتواها، يوفر بوتستراب أربع أدوات مرتبطة مباشرة بأبعاد نافذة العرض Viewport: كلاسي .vw-100 و.vh-100 لضبط العرض أو الارتفاع الكامل، وكلاسي الحد الأدنى .min-vw-100 و.min-vh-100.
يُفضل هندسياً في صفحات الويب الحقيقية استخدام .min-vh-100 بدلاً من .vh-100 الصلب؛ لأنه يضمن ملء الشاشة بالكامل عندما يكون المحتوى قصيراً، وفي الوقت ذاته يسمح للصفحة بالتمدد الطبيعي للأسفل دون قصّ النصوص إذا زاد المحتوى على الهواتف الأفقية.
تُعطل الظلال افتراضياً على معظم عناصر بوتستراب لمنح الواجهة مظهراً نظيفاً مسطحاً، لكن يمكنك إبراز البطاقات التفاعلية والقوائم العائمة فوراً بأربع أدوات جاهزة لعمق الظل: .shadow-none لإزالة أي ظل موروث، و.shadow-sm لظل خفيف ناعم حول البطاقات الهادئة، و.shadow للظل القياسي المتوسط، و.shadow-lg للبروز القوي للنوافذ الحوارية والعناصر البارزة:
<div class="p-3 mb-3 bg-body rounded-3 shadow-sm">
Subtle card elevation (.shadow-sm)
</div>
<div class="p-3 mb-3 bg-body rounded-3 shadow">
Standard panel elevation (.shadow)
</div>
<div class="p-3 bg-body rounded-3 shadow-lg">
High modal-like depth (.shadow-lg)
</div>يجمع الجدول المرجعي التالي أدوات الحدود والأبعاد والظلال القياسية في بوتستراب 5.3:
| المجموعة | الكلاسات القياسية | الوظيفة الهندسية |
|---|---|---|
| إضافة وحذف الحدود | .border, .border-start, .border-0 | رسم أو إزالة إطار 1px كلياً أو من جهة منطقية |
| لون وسماكة الإطار | .border-primary, .border-1 .. .border-5 | تلوين الحدود دلالياً وضبط سمكها من 1px إلى 5px |
| استدارة الزوايا | .rounded-0..5, .rounded-pill, .rounded-circle | التحكم بنصف قطر الزوايا وبناء الكبسولات والدوائر |
| الأبعاد النسبية | .w-25..100, .h-25..100, .mw-100 | نسب عرض وارتفاع مئوية مرتبطة بأبعاد الأب |
| أبعاد نافذة العرض | .vw-100, .vh-100, .min-vh-100 | ربط أبعاد القسم بنافذة المتصفح المرئية |
| عمق الظلال | .shadow-none, .shadow-sm, .shadow, .shadow-lg | تدرج البروز البصري من المسطح حتى المرتفع |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس تشكيل العناصر بإضافة وحذف الحدود المنطقية وتلوينها وضبط سماكتها، وتنعيم الزوايا بدرجات rounded والكبسولات والدوائر، والتحكم بنسب العرض والارتفاع وأبعاد النافذة min-vh-100 ودرجات الظلال الأربع.
الخطوة التالية والدرس القادم
انتقل الآن إلى درس «العرض والتموضع والفيضان في بوتستراب 5» للتحكم بظهور العناصر وإحداثيات التموضع الدقيق وتثبيت الأشرطة وترتيب الطبقات.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Additive Border كلاس الإطار الإضافي
- كلاس يضيف إطاراً متصلاً بسمك 1px حول العنصر بالكامل أو على ضلع منطقي محدد.
- للمراجعة
- 02 Subtractive Border كلاس الإطار الطرحي
- كلاس يحذف الإطار بالكامل أو يلغي ضلعاً محدداً من عنصر يمتلك حدوداً مسبقة.
- للمراجعة
- 03 Rounded Pill الحواف الكبسولية المستديرة
- كلاس .rounded-pill الذي يطبق نصف قطر كبير جداً ليمنح العناصر المستطيلة طرفين دائريين كالكبسولة.
- للمراجعة
- 04 Minimum Viewport Height الحد الأدنى لارتفاع النافذة
- كلاس .min-vh-100 الذي يضمن تغطية ارتفاع الشاشة بالكامل مع السماح بالتمدد الطبيعي عند زيادة النص.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 VW VW
- Viewport Width Unit
- وحدة قياس تعادل 100vw فيها كامل عرض نافذة المتصفح وتستخدمها كلاسات vw-100.
- للمراجعة
- 02 VH VH
- Viewport Height Unit
- وحدة قياس تعادل 100vh فيها كامل ارتفاع نافذة العرض وتستخدمها كلاسات min-vh-100.
- للمراجعة
- 03 RTL RTL
- Right-to-Left
- اتجاه الواجهة العربية حيث تستهدف كلاسات border-start وrounded-start الحافة اليمنى تلقائياً.
- للمراجعة
- 04 UI UI
- User Interface
- الطبقة البصرية التي تميز فيها استدارة الحواف والظلال بين الخلفيات الساكنة والبطاقات البارزة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ صندوقاً بحشو p-3 وإطار بداية أزرق سميك border-start border-4 border-primary مع خلفية bg-body واستدارة طرفية rounded-end-3 وظل خفيف shadow-sm.
-
أنشئ مساراً خارجياً بكلاسات p-2 bg-body-tertiary rounded-pill يحتوي بداخله شريطاً بعرض 75% يحمل الكلاسات w-75 px-3 py-1 text-bg-success rounded-pill.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
لماذا لا يظهر إطار أحمر مرئي عند كتابة class="border-danger" بمفرده على عنصر <div> عادي؟
لأن .border-danger يضبط لون الإطار فقط، ويلزم وجود كلاس إضافي مثل .border لتفعيل نمط الإطار المتصل.
أي كلاس يحذف الحد السفلي فقط من عنصر يمتلك إطاراً كاملاً بكلاس .border؟
يزيل الكلاس الطرحي .border-bottom-0 الضلع السفلي فقط مع الإبقاء على بقية الأضلاع.
ما الشرط الهندسي الواجب توفره في العنصر لكي يرسم .rounded-circle دائرة حقيقية وليس شكلاً بيضاوياً؟
يجب أن يتساوى عرض العنصر مع ارتفاعه (نسبة 1:1 مربعة) لتتحول استدارة 50% إلى دائرة تامة.
هل يُعد .min-vh-100 أكثر أماناً من .vh-100 عندما يحتمل زيادة طول المحتوى عن ارتفاع شاشة الهاتف الصغيرة؟
صحيح؛ يضمن .min-vh-100 ملء الشاشة كحد أدنى مع السماح للصفحة بالتمدد الطبيعي دون قص المحتوى الطويل.
ما أعلى درجة سماكة قياسية توفرها كلاسات عرض الإطار الرقمية في بوتستراب 5؟
يوفر بوتستراب 5 خمس درجات للسماكة تبدأ من .border-1 وتصل كحد أقصى إلى .border-5 (5px).
أي كلاس يمنح العنصر أقوى درجة بروز وظل جاهزة في بوتستراب 5؟
يمثل الكلاس .shadow-lg أعلى درجات الظلال الجاهزة بروزاً وعمقاً.
هل يعمل الكلاس .h-100 بفعالية حتى لو لم يكن للعنصر الأب أي ارتفاع محدد؟
خطأ؛ تتطلب نسب الارتفاع المئوية مثل .h-100 وجود ارتفاع محدد للأب حتى يحسب المتصفح النسبة.
أي كلاس يمنع العنصر من تجاوز 100% من عرض أبيه دون إجبار العناصر الأصغر على التمدد؟
يضبط .mw-100 خاصية الحد الأقصى max-width: 100% فلا يتجاوز حدود الأب دون تمطيط العناصر الصغيرة.