الفرق بين المراجعتين ل"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>