هل يحتوي Bootstrap على جميع الأوامر للتنسيق أم فقط الهيكلة الأساسية؟

نعم هذا ممكن بالتأكيد وهنالك طريقتين للتعامل مه ذلك وهما كالتالي :

في بعض الأحيان، قد تحتاج إلى قيم حشو أكبر من المقاسات الافتراضية المتاحة في Bootstrap وتريد ان تستخدمها مرة واحدة ولا تريد إضافتها لكل الحشوات والهوامش. في هذه الحالة، يمكنك إضافة حشو  عن طريق إنشاء فئة مخصصة في ملف CSS الخاص بك وتعيين قيمة الحشو المطلوبة. على سبيل المثال، يمكنك إنشاء فئة باسم `.custom-padding` وتعيين قيمة الحشو كالتالي:

.custom-padding {
    padding: 100px;
}

بعد ذلك، يمكنك إضافة هذه الفئة إلى العنصر الذي ترغب في تطبيق الحشو عليه.

إذا كنت ترغب في إضافة المزيد من المقاسات للحشوات والهوامش، يمكنك القيام بذلك عن طريق إضافة مدخلات إلى متغير خريطة Sass `$spacers`. و يمكنك القيام بذلك عن طريق تعديل ملف Sass الخاص بـ Bootstrap وإضافة المدخلات الجديدة إلى الخريطة `$spacers` قبل استيراد Bootstrap.

على سبيل المثال، يمكنك إضافة مقاس جديد `6` بقيمة `4rem` كالتالي:

$spacers: (
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3),
  6: 4rem
);

@import "bootstrap";

بعد ذلك، يمكنك استخدام الفئات الجديدة في ملف HTML الخاص بك، مثل `.p-6` لإضافة حشو بقيمة `4rem`.

يمكنك الوصول إلى ملفات Sass الخاصة بـ Bootstrap عن طريق تنزيل الحزمة الكاملة من الموقع الرسمي لـ Bootstrap أو عن طريق استخدام مدير حزم مثل npm. و بعد تنزيل الحزمة، يمكنك العثور على ملفات Sass في المجلد /scss.

بعد الوصول إلى ملفات Sass، يجب عليك تحويلها إلى CSS قبل استخدامها في موقع الويب الخاص بك. يمكنك القيام بذلك يدويًا عن طريق تشغيل مترجم Sass على ملفات المصدر الخاصة بك، أو يمكنك استخدام أداة بناء مثل Webpack لتحويل الملفات تلقائيًا كجزء من عملية بناء المشروع.

إذا كنت ترغب في تحويل الملفات يدويًا، فيمكنك تثبيت مترجم Sass على جهاز الكمبيوتر الخاص بك وتشغيله على ملفات المصدر الخاصة بك. يمكن تثبيت مترجم Sass عن طريق تشغيل الأمر التالي في سطر الأوامر:

npm install -g sass

بعد التثبيت، يمكنك تحويل ملف Sass إلى CSS عن طريق تشغيل الأمر التالي:

sass input.scss output.css

حيث input.scss هو المسار إلى ملف Sass الذي ترغب في تحويله، و output.css هو المسار إلى الملف الذي سيتم حفظ ناتج التحويل فيه.

يجب التوضيح أن Bootstrap هو إطار عمل (Framework) لتصميم المواقع والتطبيقات الويب،

أي يوفر مجموعة واسعة من الأدوات والمكونات التي تساعد في بناء وتنظيم الهيكلة الأساسية للموقع، ويحتوي على نظام الشبكة (Grid system) الذي يساعد في توزيع العناصر على الصفحة بشكل مرن ومتجاوب.

وبالنسبة للأوامر المحددة مثل تغيير الهوامش والحواف والبادينج، فإن Bootstrap يوفر مجموعة من الفئات (Classes) التي يمكنك استخدامها لتحقيق التأثيرات المرغوبة، ومنها فئات البادينج (Padding classes) لإضافة الهوامش والبادينج بأحجام مختلفة، بما في ذلك القيم الكبيرة التي ذكرتها كالتالي:

• p-1 (لإضافة بادينج صغير)
• p-2 (لإضافة بادينج متوسط)
• p-3 (لإضافة بادينج كبير)
• p-4 (لإضافة بادينج أكبر)
• p-5 (أكبر بايدينج متوفر بقياس 3rem)

بالإضافة إلى البادينج، Bootstrap يوفر أيضًا الفئات المماثلة لتطبيق تأثيرات الهوامش (Margins) على العناصر، وتستطيع استخدام الفئات المناسبة وتطبيقها على العنصر الذي تريد تعديل هوامشه أو الإزاحة.

وفي حال أردت استخدام قيمة أكبر من p-5 من الأسهل استخدام كلاس مخصص لذلك وتنسيقه من خلال ملف CSS في مشروعك أي كالتالي:

.custom-space {
  padding: 5rem; /* قيمة إزاحة كبيرة */
}

وعند التوجه لصفحة الإزاحات spacing في المستند الرسمي لـ Bootstrap ستجد أنه يخبرك بالتالي:

(You can add more sizes by adding entries to the $spacers Sass map variable.)

ومعناه إمكانية إضافة مقاسات إضافية للبادينج (Padding) عن طريق إضافة إدخالات إلى متغير خريطة "Sass map" المسمى "$spacers".

وقد وضح لك عمر كيفية فعل ذلك.

وهناك العديد من الكلاسات والمكونات الجاهزة لتخصيص موقعك بواسطة Bootstrap ومن الأفضل تعلم الإطار، وأيضًا التعرف على الكلاسات المتاحة من خلال المستند الرسمي  ولكنه باللغة الإنجليزية ويوجد شرح باللغة العربية لـ Bootstrap 4.5 في موسوعة حسوب.

وأيضًا يوجد دروس ومقالات في أكاديمية حسوب عن إطار عمل Bootstrap ومنها:

ما تشير إليه يسمى Utility classes وهي كلاسات مساعدة يتم تحديد نطاقها لخاصية CSS واحدة مثل خاصية نمط النص أو خاصية لون الخلفية أو خاصية الهامش أو الحد ما الى ذلك. وبوتسراب بدوره يتوفر على سلسلة منها نعم.

فهو بشكل أساسي يتوفر على كلاسات مساعدة في كل من:

• الحدود Borders / سمك الحدود Border Width / لون الحدود Border Color / نوع الحدود Border Radius
• كلاسات التعويم Float and Clearfix / Responsive Floats
• التوسيط Center Align
• العرض والارتفاع Height and Width
• كلاسات التباعد Spacing، مثل الهوامش والحواشي Paddings and Margins
• الضلال Shadows
• محاذاة العناصر على المحور العمودي Alignment
• الظهور Visibility
• الألوان Colors
• ألوان الخلفيات Background Colors

بخصوص كلاسات التباعد، فهي تتوفر على مقاسات من 0 الى 5 ولا يمكن استعمال أكثر من ذلك بصورة مباشرة. ولكن سيمكنك بطبيعة الحال استعمال كلاسات مخصصة تصفها وحدك. على عكس أطر عمل utility-first مثل Tailwindcss الذي يمكن فيه مثل هاته الأمر بصورة عادية جدا.