الفرق بين المراجعتين ل"Bootstrap/image replacement"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(تحديث إلى 4.5)
 
(مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة)
سطر 2: سطر 2:
 
أبدِل النصوص بصوّر خلفيّة باستخدام صنف إحلال الصوّر الذي يقدّمه إطار العمل Bootstrap.
 
أبدِل النصوص بصوّر خلفيّة باستخدام صنف إحلال الصوّر الذي يقدّمه إطار العمل Bootstrap.
  
استخدم الصنف <code>‎.text-hide</code> أو [[Sass/mixins|مخلوط Sass]] المقابل له للمساعدة في إبدال المحتوى النصّي لعنصٌر ووضع صورة في الخلفيّة مكانه.<syntaxhighlight lang="html">
+
'''تنبيه:''' أصبح الصنف <code>‎.text-hide</code> أو [[Sass/mixins|المخلوط]] المقابل له مُتجاوزًا منذ الإصدار 4.5، وسيُزال في الإصدار الخامس.<syntaxhighlight lang="html">
 
<h1 class="text-hide">ترويسة مُخصّصة</h1>
 
<h1 class="text-hide">ترويسة مُخصّصة</h1>
 
</syntaxhighlight><syntaxhighlight lang="sass">
 
</syntaxhighlight><syntaxhighlight lang="sass">
سطر 10: سطر 10:
 
}
 
}
 
</syntaxhighlight>يمكن كذلك استخدام الصنف <code>‎.text-hide</code> للحفاظ على سهولة الوصول وفوائد التحسين لمحرِّكات البحث اللذين تقدّمهما الترويسات عند استخدام صورة خلفيّة (<code>[[CSS/background-image|background-image]]</code>) بدلًا من نصّ.<syntaxhighlight lang="html">
 
</syntaxhighlight>يمكن كذلك استخدام الصنف <code>‎.text-hide</code> للحفاظ على سهولة الوصول وفوائد التحسين لمحرِّكات البحث اللذين تقدّمهما الترويسات عند استخدام صورة خلفيّة (<code>[[CSS/background-image|background-image]]</code>) بدلًا من نصّ.<syntaxhighlight lang="html">
<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
+
<h1 class="text-hide" style="background-image: url('...');">Bootstrap</h1>
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
== مصادر ==
 
== مصادر ==
* [https://getbootstrap.com/docs/4.0/utilities/image-replacement/ صفحة Image replacement في توثيق Bootstrap].
+
* [https://getbootstrap.com/docs/4.5/utilities/image-replacement/ صفحة Image replacement في توثيق Bootstrap].
[[تصنيف:Bootstrap]]
+
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
[[تصنيف:Bootstrap utilities]]
+
[[تصنيف:Bootstrap utilities|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 06:28، 16 يوليو 2020

أبدِل النصوص بصوّر خلفيّة باستخدام صنف إحلال الصوّر الذي يقدّمه إطار العمل Bootstrap.

تنبيه: أصبح الصنف ‎.text-hide أو المخلوط المقابل له مُتجاوزًا منذ الإصدار 4.5، وسيُزال في الإصدار الخامس.

<h1 class="text-hide">ترويسة مُخصّصة</h1>
// استخدام المخلوط
.heading {
  @include text-hide;
}

يمكن كذلك استخدام الصنف ‎.text-hide للحفاظ على سهولة الوصول وفوائد التحسين لمحرِّكات البحث اللذين تقدّمهما الترويسات عند استخدام صورة خلفيّة (background-image) بدلًا من نصّ.

<h1 class="text-hide" style="background-image: url('...');">Bootstrap</h1>

مصادر