الفرق بين المراجعتين ل"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 {
سطر 17: سطر 17:
  
 
// استخدام المخلوط
 
// استخدام المخلوط
 +
// متجاوزا منذ الإصدار 4.3 `invisible()` تنبيه: أصبح المخلوط
 +
// وسيُحذف في الإصدار الخامس
 +
 
.element {
 
.element {
 
   @include invisible(visible);
 
   @include invisible(visible);
سطر 26: سطر 29:
  
 
== مصادر ==
 
== مصادر ==
* [https://getbootstrap.com/docs/4.0/utilities/visibility/ صفحة Visibility في توثيق Bootstrap].
+
* [https://getbootstrap.com/docs/4.5/utilities/visibility/ صفحة Visibility في توثيق Bootstrap].
[[تصنيف:Bootstrap]]
+
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
[[تصنيف:Bootstrap utilities]]
+
[[تصنيف:Bootstrap utilities|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 13:09، 13 يوليو 2020

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

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

طبِّق الصنف ‎.visible أو ‎.invisible حسب الحاجة.

<div class="visible">...</div>
<div class="invisible">...</div>
// صنف
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}

// استخدام المخلوط
// متجاوزا منذ الإصدار 4.3 `invisible()` تنبيه: أصبح المخلوط
// وسيُحذف في الإصدار الخامس

.element {
  @include invisible(visible);
}
.element {
  @include invisible(hidden);
}

مصادر