الفرق بين المراجعتين لصفحة: «Bootstrap/image replacement»

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


استخدم الصنف <code>‎.text-hide</code> أو مخلوط Sass المقابل له للمساعدة في إبدال المحتوى النصّي لعنصٌر ووضع صورة في الخلفيّة مكانه.<syntaxhighlight lang="html">
استخدم الصنف <code>‎.text-hide</code> أو [[Sass/mixins|مخلوط Sass]] المقابل له للمساعدة في إبدال المحتوى النصّي لعنصٌر ووضع صورة في الخلفيّة مكانه.<syntaxhighlight lang="html">
<h1 class="text-hide">ترويسة مُخصّصة</h1>
<h1 class="text-hide">ترويسة مُخصّصة</h1>
</syntaxhighlight><syntaxhighlight lang="sass">
</syntaxhighlight><syntaxhighlight lang="sass">
سطر 9: سطر 9:
   @include text-hide;
   @include text-hide;
}
}
</syntaxhighlight>يمكن كذلك استخدام الصنف <code>‎.text-hide</code> للحفاظ على سهولة الوصول وفوائد التحسين لمحرِّكات البحث اللذين تقدّمهما الترويسات عند استخدام صورة خلفيّة (<code>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('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
</syntaxhighlight>
</syntaxhighlight>


== مصادر ==
== مصادر ==
[https://getbootstrap.com/docs/4.0/utilities/image-replacement/ صفحة Image replacement في توثيق Bootstrap].
* [https://getbootstrap.com/docs/4.0/utilities/image-replacement/ صفحة Image replacement في توثيق Bootstrap].
[[تصنيف:Bootstrap]]
[[تصنيف:Bootstrap]]
[[تصنيف:Bootstrap utilities]]
[[تصنيف:Bootstrap utilities]]

مراجعة 02:35، 15 أبريل 2018

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

استخدم الصنف ‎.text-hide أو مخلوط Sass المقابل له للمساعدة في إبدال المحتوى النصّي لعنصٌر ووضع صورة في الخلفيّة مكانه.

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

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

<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>

مصادر