الفرق بين المراجعتين ل"Bootstrap/image replacement"
اذهب إلى التنقل
اذهب إلى البحث
(تحديث إلى 4.5) |
|||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: تبديل الصور Image replacement في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE: تبديل الصور Image replacement في إطار العمل Bootstrap}}</noinclude> | ||
| + | أبدِل النصوص بصوّر خلفيّة باستخدام صنف إحلال الصوّر الذي يقدّمه إطار العمل Bootstrap. | ||
| + | |||
| + | '''تنبيه:''' أصبح الصنف <code>.text-hide</code> أو [[Sass/mixins|المخلوط]] المقابل له مُتجاوزًا منذ الإصدار 4.5، وسيُزال في الإصدار الخامس.<syntaxhighlight lang="html"> | ||
| + | <h1 class="text-hide">ترويسة مُخصّصة</h1> | ||
| + | </syntaxhighlight><syntaxhighlight lang="sass"> | ||
| + | // استخدام المخلوط | ||
| + | .heading { | ||
| + | @include text-hide; | ||
| + | } | ||
| + | </syntaxhighlight>يمكن كذلك استخدام الصنف <code>.text-hide</code> للحفاظ على سهولة الوصول وفوائد التحسين لمحرِّكات البحث اللذين تقدّمهما الترويسات عند استخدام صورة خلفيّة (<code>[[CSS/background-image|background-image]]</code>) بدلًا من نصّ.<syntaxhighlight lang="html"> | ||
| + | <h1 class="text-hide" style="background-image: url('...');">Bootstrap</h1> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == مصادر == | ||
| + | * [https://getbootstrap.com/docs/4.5/utilities/image-replacement/ صفحة Image replacement في توثيق Bootstrap]. | ||
| + | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | ||
| + | [[تصنيف: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>