الفرق بين المراجعتين لصفحة: «Bootstrap/clearfix»
إضافة محتوى الصفحة |
لا ملخص تعديل |
||
| سطر 4: | سطر 4: | ||
استخدم الصنف <code>.clearfix</code> الذي يقدّمه إطار العمل Bootstrap لحذف [[Bootstrap/float|تعويم المحتوى]] داخل حاويّة. | استخدم الصنف <code>.clearfix</code> الذي يقدّمه إطار العمل Bootstrap لحذف [[Bootstrap/float|تعويم المحتوى]] داخل حاويّة. | ||
يُضاف الصنف <code>.clearfix</code> إلى '''العنصُر الأب''' لإلغاء تأثير الخاصيّة <code>float</code>. يمكن استخدامه بصيغة مخلوط Sass.<syntaxhighlight lang="html"> | يُضاف الصنف <code>.clearfix</code> إلى '''العنصُر الأب''' لإلغاء تأثير الخاصيّة <code>[[CSS/float|float]]</code>. يمكن استخدامه بصيغة [[Sass/mixins|مخلوط Sass]].<syntaxhighlight lang="html"> | ||
<div class="clearfix">...</div> | <div class="clearfix">...</div> | ||
</syntaxhighlight><syntaxhighlight lang="sass"> | </syntaxhighlight><syntaxhighlight lang="sass"> | ||
| سطر 20: | سطر 20: | ||
@include clearfix; | @include clearfix; | ||
} | } | ||
</syntaxhighlight>يوضّح المثال التالي استخدام الأداة Clearfix. يؤدّي عدم استخدام <code>.clearfix</code> في المثال إلى عدم تمدّد عنصُر <code><nowiki><div></nowiki></code> المغلِّف حول الزرّيْن، ممّا ينتُج عنه مُخطَّط غير سلس.<syntaxhighlight lang="html"> | </syntaxhighlight>يوضّح المثال التالي استخدام الأداة Clearfix. يؤدّي عدم استخدام <code>.clearfix</code> في المثال إلى عدم تمدّد عنصُر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> المغلِّف حول الزرّيْن، ممّا ينتُج عنه مُخطَّط غير سلس.<syntaxhighlight lang="html"> | ||
<div class="bg-info clearfix"> | <div class="bg-info clearfix"> | ||
<button type="button" class="btn btn-secondary float-left">مثال على زرّ عائم إلى اليسار</button> | <button type="button" class="btn btn-secondary float-left">مثال على زرّ عائم إلى اليسار</button> | ||
مراجعة 03:48، 14 أبريل 2018
استخدم الصنف .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>