الفرق بين المراجعتين ل"Bootstrap/visibility"
اذهب إلى التنقل
اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:قابليّة الرؤية Visibility في إطار العمل Bootstrap}}</noinclude>') |
(إضافة محتوى الصفحة) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:قابليّة الرؤية Visibility في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:قابليّة الرؤية Visibility في إطار العمل Bootstrap}}</noinclude> | ||
| + | تحكَّم في قابليّة الرؤية دون التعديل على قيمة الخاصيّة <code>display</code> باستخدام أدوات الرؤية المتوفّرة في إطار العمل Bootstrap. | ||
| + | |||
| + | تعدِّل أدوات الرؤية (<code>visibility</code>) قابليّة رؤية العناصر. لا تؤثّر هذه الأدوات أبدًا على الخاصيّة <code>display</code>، وهي مفيدة لإخفاء المحتوى عن أغلب الزوّار مع توفيره لقارئات الشاشة. | ||
| + | |||
| + | طبِّق الصنف <code>.visible</code> أو <code>.invisible</code> حسب الحاجة.<syntaxhighlight lang="html"> | ||
| + | <div class="visible">...</div> | ||
| + | <div class="invisible">...</div> | ||
| + | </syntaxhighlight><syntaxhighlight lang="css"> | ||
| + | // صنف | ||
| + | .visible { | ||
| + | visibility: visible; | ||
| + | } | ||
| + | .invisible { | ||
| + | visibility: hidden; | ||
| + | } | ||
| + | |||
| + | // استخدام المخلوط | ||
| + | .element { | ||
| + | @include invisible(visible); | ||
| + | } | ||
| + | .element { | ||
| + | @include invisible(hidden); | ||
| + | } | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == مصادر == | ||
| + | * [https://getbootstrap.com/docs/4.0/utilities/visibility/ صفحة Visibility في توثيق Bootstrap]. | ||
| + | [[تصنيف:Bootstrap]] | ||
| + | [[تصنيف:Bootstrap utilities]] | ||
مراجعة 17:30، 14 أبريل 2018
تحكَّم في قابليّة الرؤية دون التعديل على قيمة الخاصيّة display باستخدام أدوات الرؤية المتوفّرة في إطار العمل Bootstrap.
تعدِّل أدوات الرؤية (visibility) قابليّة رؤية العناصر. لا تؤثّر هذه الأدوات أبدًا على الخاصيّة display، وهي مفيدة لإخفاء المحتوى عن أغلب الزوّار مع توفيره لقارئات الشاشة.
طبِّق الصنف .visible أو .invisible حسب الحاجة.
<div class="visible">...</div>
<div class="invisible">...</div>
// صنف
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
// استخدام المخلوط
.element {
@include invisible(visible);
}
.element {
@include invisible(hidden);
}