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

من موسوعة حسوب
إضافة محتوى الصفحة
لا ملخص تعديل
سطر 2: سطر 2:
تحكَّم في قابليّة الرؤية دون التعديل على قيمة الخاصيّة <code>display</code> باستخدام أدوات الرؤية المتوفّرة في إطار العمل Bootstrap.
تحكَّم في قابليّة الرؤية دون التعديل على قيمة الخاصيّة <code>display</code> باستخدام أدوات الرؤية المتوفّرة في إطار العمل Bootstrap.


تعدِّل أدوات الرؤية (<code>visibility</code>) قابليّة رؤية العناصر. لا تؤثّر هذه الأدوات أبدًا على الخاصيّة <code>display</code>، وهي مفيدة لإخفاء المحتوى عن أغلب الزوّار مع توفيره لقارئات الشاشة.
تعدِّل أدوات الرؤية (<code>[[CSS/visibility|visibility]]</code>) قابليّة رؤية العناصر. لا تؤثّر هذه الأدوات أبدًا على الخاصيّة <code>display</code>، وهي مفيدة لإخفاء المحتوى عن أغلب الزوّار مع توفيره لقارئات الشاشة.


طبِّق الصنف <code>‎.visible</code> أو <code>‎.invisible</code> حسب الحاجة.<syntaxhighlight lang="html">
طبِّق الصنف <code>‎.visible</code> أو <code>‎.invisible</code> حسب الحاجة.<syntaxhighlight lang="html">
<div class="visible">...</div>
<div class="visible">...</div>
<div class="invisible">...</div>
<div class="invisible">...</div>
</syntaxhighlight><syntaxhighlight lang="css">
</syntaxhighlight><syntaxhighlight lang="sass">
// صنف
// صنف
.visible {
.visible {

مراجعة 03:15، 15 أبريل 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);
}

مصادر