تبديل الصور Image replacement في إطار العمل Bootstrap

من موسوعة حسوب
مراجعة 13:18، 7 مايو 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')

أبدِل النصوص بصوّر خلفيّة باستخدام صنف إحلال الصوّر الذي يقدّمه إطار العمل 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>

مصادر