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

لإخفاء div ضمن الbootstrap

محمد رائد جمعة

السؤال

Recommended Posts

  • 1

أهلاً محمد،

لإخفاء div في نسخة Bootstrap4 يمكنك استخدام الصف d-none وذلك لإخفاءه في الشاشات الصغيرة جداً -إكسترا سمول- (xs) أو الصف d-sm-none لإخفاء العنصر div في الشاشات الصغيرة (sm).

إخفاء العنصر div في الشاشات الصغيرة (sm) يمكنك تطبيق الكود التالي:

<div class="d-sm-none">
  <img src="img_name">
</div>

إخفاء العنصر div في الشاشات الصغيرة جداً (xs) يمكنك تطبيق الكود التالي:

<div class="d-none">
  <img src="img_name">
</div>

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

إخفاء العنصر img في الشاشات الصغيرة (sm) يمكنك تطبيق الكود التالي:

<img src="img_name" class="d-sm-none">

إخفاء العنصر img في الشاشات الصغيرة جداً (xs) يمكنك تطبيق الكود التالي:

<img src="img_name" class="d-none">

إن الصف d-none يغير قيمة خاصية العرض display الخاصة بالعنصر إلى القيمة none وذلك في الشاشات الصغيرة جداً (xs) فقط، وبالمثل الصف d-sm-none يغير قيمة خاصية العرض display الخاصة بالعنصر إلى القيمة none وذلك في الشاشات الصغيرة (sm) فقط.

من هذا المُنطَلق فإنّ أسماء الأصناف تأخذ الصيغة التاليّة:

‎d-{value}‎ بالنسبة للنقطة الحديّة xs

‎d-{breakpoint}-{value}‎ بالنسبة للنقاط الحديّة sm، و md، و lg وxl

لمزيدٍ من المعلومات اطلع على خاصيّة العرض display في إطار العمل Bootstrap :

https://wiki.hsoub.com/Bootstrap/display

 

تم التعديل في بواسطة قصي العلي
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

السلام عليكم 

للقيام بذلك في Bootstrap 4    لاخفاء حجم معين تقوم اولا باضافة d-none  حيث تعني لا تعرض اي اخفاء عند كل الاحجام ثم تضيف d-md-block  وهذه تعني اعرض حجم الشاشة المتوسط و اي حجم اكبر منه

<div  > 
    <h1>will not display in small and extra small
    </h1>
    
    <img class="d-none d-md-block"  src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"/>
    
    </div>

 

وهنا شرح مبسط علي يوتيوب 

 

تحياتي

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...