الدرس الثاني عشر: الأدوات (Utilities) في Bootstrap
Bootstrap يحتوي على مجموعة واسعة من الأدوات المدمجة التي تسهل التحكم في مظهر وترتيب العناصر داخل صفحة الويب. هذه الأدوات تجعل العمل مع تنسيق العناصر أكثر مرونة وفعالية، حيث توفر طرقًا سريعة لتخصيص المسافات، والمحاذاة، والظلال، والعديد من الخصائص الأخرى. في هذا الدرس، سنتناول الأدوات المدمجة الأكثر استخدامًا مثل m-, p-, d-, align-items، بالإضافة إلى التحكم في المسافات بين العناصر باستخدام الأدوات مثل margin و padding. سنتعرف أيضًا على كيفية تحسين ترتيب العناصر باستخدام الأدوات float و position.
1. أدوات التحكم في المسافات (Spacing Utilities)
أدوات المسافات (Spacing Utilities) في Bootstrap تساعد في ضبط الهوامش (margin) والحشوات (padding) بسهولة. هذه الأدوات تمكّنك من تحديد المسافة بين العناصر بشكل سريع ودقيق دون الحاجة إلى كتابة CSS إضافي.
أ. أدوات الهوامش (Margin Utilities)
الفئة m- تستخدم لضبط الهوامش لجميع الجوانب (أعلى، أسفل، يسار، ويمين) للعناصر. يمكن إضافة أرقام لتمثيل القيم المختلفة للهوامش.
أمثلة على أدوات الهوامش:
.m-0: إزالة الهوامش تمامًا..m-1: إضافة هامش صغير جدًا (نسبة صغيرة من المسافة المحددة)..m-2,.m-3,.m-4,.m-5: استخدام قيم أكبر للهوامش. كلما زادت القيمة، زادت المسافة.
مثال عملي:
<div class="m-3">
<p>هذا النص يحتوي على هامش من جميع الجوانب.</p>
</div>
ب. أدوات الحشوة (Padding Utilities)
الفئة p- تُستخدم لضبط الحشوة لجميع الجوانب (أعلى، أسفل، يسار، ويمين) داخل العناصر. كما هو الحال مع m-، يمكن أيضًا إضافة أرقام لتحديد حجم الحشوة.
أمثلة على أدوات الحشوة:
.p-0: إزالة الحشوة..p-1: إضافة حشوة صغيرة جدًا..p-2,.p-3,.p-4,.p-5: قيم أكبر للحشوة.
مثال عملي:
<div class="p-4">
<p>هذا النص يحتوي على حشوة داخلية من جميع الجوانب.</p>
</div>
ج. أدوات المسافات الموجهة (Directional Spacing Utilities)
يمكنك تخصيص المسافات للأعلى (mt-)، الأسفل (mb-)، اليمين (mr-)، أو اليسار (ml-) بشكل منفصل:
.mt-2: إضافة هامش صغير في الأعلى..mb-3: إضافة هامش صغير في الأسفل..ml-1: إضافة هامش صغير على اليسار..mr-4: إضافة هامش كبير على اليمين.
مثال عملي:
<div class="mt-3 mb-2">
<p>هذا النص يحتوي على هامش علوي وسفلي فقط.</p>
</div>
2. أدوات التحكم في العرض والظهور (Display Utilities)
أدوات العرض (Display Utilities) توفر لك طرقًا سهلة لإخفاء أو إظهار العناصر أو تحديد كيفية ظهورها على الشاشات المختلفة.
أ. استخدام d-
الفئة d- تُستخدم لضبط خصائص العرض (display) للعناصر. بعض القيم الشائعة التي يمكن استخدامها تشمل:
.d-block: جعل العنصر يعرض ككتلة (block)..d-inline: جعل العنصر يعرض كعنصر داخل السطر (inline)..d-inline-block: جعل العنصر يعرض كعنصر داخل السطر ولكن مع بعض خصائص الكتلة..d-none: إخفاء العنصر تمامًا.
ب. أدوات العرض المتجاوبة (Responsive Display Utilities)
Bootstrap يسمح لك بتحديد خصائص العرض بناءً على حجم الشاشة باستخدام مجموعة من الأدوات التي تبدأ بـ d- وتستهدف شاشات مختلفة مثل d-sm-, d-md-, d-lg-, و d-xl-.
أمثلة:
.d-sm-block: يعرض العنصر ككتلة فقط على الشاشات الصغيرة وما بعدها..d-md-none: يخفي العنصر فقط على الشاشات المتوسطة وما فوقها.
مثال عملي:
<div class="d-none d-md-block">
<p>سيتم عرض هذا النص فقط على الشاشات المتوسطة أو الأكبر.</p>
</div>
3. أدوات المحاذاة (Alignment Utilities)
أدوات المحاذاة في Bootstrap تساعد في محاذاة العناصر داخل الحاوية. يمكن استخدام align-items, justify-content, و text-align لضبط المحاذاة على المحاور الرأسية والأفقية.
أ. align-items
تستخدم فئة align-items لضبط المحاذاة الرأسية (المحور Y) للعناصر داخل الحاوية.
.align-items-start: محاذاة العناصر إلى أعلى الحاوية..align-items-center: محاذاة العناصر في منتصف الحاوية..align-items-end: محاذاة العناصر إلى أسفل الحاوية.
مثال عملي:
<div class="d-flex align-items-center" style="height: 200px;">
<p>هذا النص محاذي عموديًا في المنتصف.</p>
</div>
ب. text-align
تُستخدم فئة text-align لضبط محاذاة النصوص داخل الحاوية.
.text-left: محاذاة النص لليسار..text-center: محاذاة النص في الوسط..text-right: محاذاة النص لليمين.
مثال عملي:
<div class="text-center">
<p>هذا النص في المنتصف.</p>
</div>
ج. justify-content
تستخدم فئة justify-content لضبط توزيع العناصر على المحور الأفقي (المحور X).
.justify-content-start: توزيع العناصر إلى اليسار..justify-content-center: توزيع العناصر في المنتصف..justify-content-end: توزيع العناصر إلى اليمين.
مثال عملي:
<div class="d-flex justify-content-center">
<p>هذا النص موزع في منتصف الحاوية.</p>
</div>
4. أدوات الترتيب (Positioning and Float Utilities)
أ. أدوات الترتيب باستخدام float
تسمح فئة float بتحديد كيفية تحويم العناصر بالنسبة للعناصر الأخرى. وهي مفيدة عندما تحتاج إلى تحويم النصوص أو الصور حول العناصر.
.float-left: يجعل العنصر يطفو على اليسار..float-right: يجعل العنصر يطفو على اليمين..float-none: إزالة التحويم من العنصر.
مثال عملي:
<div class="float-left">
<img src="image.jpg" alt="صورة">
</div>
ب. أدوات الترتيب باستخدام position
الفئة position تساعد في تحديد كيفية وضع العناصر في الصفحة.
.position-static: الوضع الافتراضي للعنصر (ليس موضعًا خاصًا)..position-relative: وضع العنصر بشكل نسبي..position-absolute: وضع العنصر بشكل مطلق..position-fixed: تثبيت العنصر في مكانه داخل نافذة المتصفح..position-sticky: وضع العنصر بشكل لزج، حيث يظل ثابتًا أثناء التمرير.
مثال عملي:
<div class="position-relative">
<p>هذا النص في وضع نسبي.</p>
</div>
الخاتمة
في هذا الدرس، تعلمنا كيفية استخدام الأدوات المدمجة في Bootstrap لتحسين مظهر وتنظيم العناصر داخل صفحات الويب. من خلال أدوات المسافات مثل m- و p-، إلى أدوات التحكم في العرض مثل d-، وأدوات المحاذاة مثل align-items و justify-content، بالإضافة إلى أدوات الترتيب باستخدام float و position. كل هذه الأدوات توفر طريقة سريعة ومرنة لتنسيق العناصر وضبط ترتيبها على الصفحات المتجاوبة.
