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

من موسوعة حسوب
لا ملخص تعديل
لا ملخص تعديل
 
(مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:حذف تعويم المحتوى Clearfix في إطار العمل Bootstrap}}</noinclude>
<noinclude>{{DISPLAYTITLE:حذف تعويم المحتوى Clearfix في إطار العمل Bootstrap}}</noinclude>
[[تصنيف:Bootstrap]]
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
[[تصنيف:Bootstrap utilities]]
[[تصنيف:Bootstrap utilities|{{SUBPAGENAME}}]]
استخدم الصنف <code>‎.clearfix</code> الذي يقدّمه إطار العمل Bootstrap لحذف [[Bootstrap/float|تعويم المحتوى]] داخل حاويّة.
استخدم الصنف <code>‎.clearfix</code> الذي يقدّمه إطار العمل Bootstrap لحذف [[Bootstrap/float|تعويم المحتوى]] داخل حاويّة.


سطر 28: سطر 28:


== مصادر ==
== مصادر ==
* [https://getbootstrap.com/docs/4.0/utilities/clearfix/ صفحة في Clearfix توثيق Bootstrap].
* [https://getbootstrap.com/docs/4.5/utilities/clearfix/ صفحة في Clearfix توثيق Bootstrap].

المراجعة الحالية بتاريخ 06:53، 14 يوليو 2020

استخدم الصنف ‎.clearfix الذي يقدّمه إطار العمل Bootstrap لحذف تعويم المحتوى داخل حاويّة.

يُضاف الصنف ‎.clearfix إلى العنصُر الأب لإلغاء تأثير الخاصيّة float. يمكن استخدامه بصيغة مخلوط Sass.

<div class="clearfix">...</div>
// تعريف المخلوط
@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

// استخدام المخلوط
.element {
  @include clearfix;
}

يوضّح المثال التالي استخدام الأداة Clearfix. يؤدّي عدم استخدام ‎.clearfix في المثال إلى عدم تمدّد عنصُر <div> المغلِّف حول الزرّيْن، ممّا ينتُج عنه مُخطَّط غير سلس.

<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-left">مثال على زرّ عائم إلى اليسار</button>
  <button type="button" class="btn btn-secondary float-right">مثال على زرّ عائم إلى اليمين</button>
</div>

مصادر