اذهب إلى المحتوى
  • 0

لماذا (class (subtle لا يعمل

Ahmed Allawi

السؤال

Recommended Posts

  • 1

إذا كنت تستخدم bootstrap 4 فإن الفئة (bg-color-subtle) ليست موجودة ، بل يمكنك استخدام الفئة (bg-light) وستحقق نفس التأثير.

أما بالنسبة للفئة (subtle) ، فهي ليست جزءًا من bootstrap ، قد يكون هذا اسم فئة تم إنشاؤها في ملف التنسيق style.css.

 وباستطاعتك إنشاء الفئة subtle بنفسك باستخدام CSS بالشكل التالي:

.subtle {
  opacity: 0.5;
}

وهذا سوف يخفف من تأثير أي عنصر يحمل تلك الفئة.

وإذا كنت تستخدم bootstrap 5.3 فإن الفئة (bg-color-subtle) موجودة وتعمل بشكل صحيح.

ولتضمين المكتبة في الكود الخاص بك عن طريق روابط CDN استخدم التالي:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>

ويمكنك قراءة المستندات الخاصة بإصدار 5.3.

وإذا كنت تستخدم المكتبة في مشروع يعتمد على webpack فعليك بقراءة الدليل التالي:
https://getbootstrap.com/docs/5.3/getting-started/webpack/

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكن أن يكون السبب في عدم عمل الكلاسات هو عدم تضمين ملفات CSS المطلوبة بشكل صحيح في صفحتك. يجب التأكد من تضمين ملفات CSS bootstrap بشكل صحيح في صفحتك.

أما بالنسبة للكلاس `subtle`، فهو غير موجود في Bootstrap 4.

إذا كنت تستخدم Bootstrap v4 ، فلا يوجد كلاس يسمى "bg-color-subtle" أو "subtle". ربما كان موجودًا في إصدارات سابقة من Bootstrap. لذلك، يجب التأكد من إصدار Bootstrap الذي تستخدمه ومن الكلاسات المتاحة فيه.

في حين يوجد كلاس هو "bg-light" الذي يعطي خلفية فاتحة للعنصر ويمكنك تغيير لون الخلفية باستخدام كلاسات الألوان المختلفة في Bootstrap مثل "bg-primary" ، "bg-secondary" ، "bg-success" ، "bg-danger" ، "bg-warning" و "bg-info".

وللحصول على النتائج التي تريدها ، يمكنك إما استخدام كلاس "bg-light" واستخدام الكلاسات المختلفة لتغيير لون الخلفية والحدود وما إلى ذلك.

يمكنك معرفة جميع كلاسات الخلفيات المتاحة في إي إصدار Bootstrap  من خلال هذا الرابط.

وهذه بعض المصادر المفيدة في هذا الموضوع.

توثيق Bootstrap كامل مترجم إلى العربية من موسوعة حسوب : Bootstrap - موسوعة حسوب (hsoub.com)

مقالات عن Bootstrap من إكاديمية حسوب إطار عمل Bootstrap - أكاديمية حسوب (hsoub.com)

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكن أن يحدث ذلك لأن بعض الفئات والأنماط في Bootstrap قد لا تكون متوفرة في الإصدار الذي تستخدمه. يجب التحقق من الإصدار الذي تستخدمه من Bootstrap والتأكد من توافق الأنماط والفئات التي تستخدمها مع هذا الإصدار.

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

ولكن أظنك تقصد الأصناف الأولية على نحو:

bg-danger-subtle

أو:

bg-primary-subtle

وهي أصناف بوتستراب تم اضافتها في بوتستراب 5.3 مؤخرا فقط، بحيث تعطي العناصر خلفية ذات دلالة معينة مخففة اللون او ثانوية.

 أمثلة:

te.thumb.PNG.4c53c60d38931a20c5ed907a0bee611b.PNG

تأكد من تضمين ملف تنسيقات بوتستراب 5.3 للاستفادة منها.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...