الفرق بين المراجعتين لصفحة: «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>

مصادر