الفرق بين المراجعتين ل"Bootstrap/clearfix"
اذهب إلى التنقل
اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:حذف تعويم المحتوى Clearfix في إطار العمل Bootstrap}}</noinclude> تصنيف:Bootstrapتصنيف:Bootstrap utili...') |
(إضافة محتوى الصفحة) |
||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:حذف تعويم المحتوى Clearfix في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:حذف تعويم المحتوى Clearfix في إطار العمل Bootstrap}}</noinclude> | ||
− | [[تصنيف:Bootstrap]][[تصنيف:Bootstrap utilities]] | + | [[تصنيف:Bootstrap]] |
+ | [[تصنيف:Bootstrap utilities]] | ||
+ | استخدم الصنف <code>.clearfix</code> الذي يقدّمه إطار العمل Bootstrap لحذف [[Bootstrap/float|تعويم المحتوى]] داخل حاويّة. | ||
+ | |||
+ | يُضاف الصنف <code>.clearfix</code> إلى '''العنصُر الأب''' لإلغاء تأثير الخاصيّة <code>float</code>. يمكن استخدامه بصيغة مخلوط Sass.<syntaxhighlight lang="html"> | ||
+ | <div class="clearfix">...</div> | ||
+ | </syntaxhighlight><syntaxhighlight lang="sass"> | ||
+ | // تعريف المخلوط | ||
+ | @mixin clearfix() { | ||
+ | &::after { | ||
+ | display: block; | ||
+ | content: ""; | ||
+ | clear: both; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // استخدام المخلوط | ||
+ | .element { | ||
+ | @include clearfix; | ||
+ | } | ||
+ | </syntaxhighlight>يوضّح المثال التالي استخدام الأداة Clearfix. يؤدّي عدم استخدام <code>.clearfix</code> في المثال إلى عدم تمدّد عنصُر <code><nowiki><div></nowiki></code> المغلِّف حول الزرّيْن، ممّا ينتُج عنه مُخطَّط غير سلس.<syntaxhighlight lang="html"> | ||
+ | <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> | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | == مصادر == | ||
+ | * [https://getbootstrap.com/docs/4.0/utilities/clearfix/ صفحة في Clearfix توثيق Bootstrap]. |
مراجعة 11:08، 13 أبريل 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>