1. ملف رمز المصدر
_grid.scss: ملف فئة نظام الشبكة
mixins/_grid.scss: دعم مجموعات mixin التي تنفذها أنظمة الشبكة
mixins/_grid-framework.scss: mixin الأساسي الذي تم تنفيذه بواسطة نظام الشبكة
2. وظائف مدعومة
1. إدراك التصميم بالنسبة المئوية
2. إدراك وضع الشبكة
3. تنفيذ تعشيش الشبكات
4. إذا كنت تستخدم نظام الشبكة فقط ، يمكنك فقط تشفير ملف bootstrap- grid.scss
مبدأ التنفيذ
1. التخطيط حسب النسبة المئوية ، المشكلة الرئيسية هي كيفية توزيع العرض بالتساوي على الأجهزة المختلفة. يستخدم Bootstrap فقط نسبة مئوية بسيطة ، ويتم استخدام نفس النسبة المئوية تحت أي جهاز حجم.
2. وضع الشبكات: يحل قدرة الشبكات على التحرك اليسار واليمين وتحويل عدة خلايا إلى اليمين مع الشبكات
3. تعشش الشبكات: قم بتنفيذ نظام تخطيط الشبكة بعد محتوى الشبكة.
4. تحليل رمز المصدر
1.
أولاً: تحديد فئتين للحاويات
أ) حاوية: حاوية شبكة ، والتي تحدد عرضًا مختلفًا وفقًا للأجهزة المختلفة ولن تملأ شاشة كاملة ؛
ب) Conteaer-Fluid: حاوية شعرية ، ملء الشاشة مع أي دعم
يستخدم كل من الحاوية والفلء الحاويات (mixins/_grid.scss). Make-Container لا ينفذ إلا عناصر تحكم مثل التركيز والهوامش اليسرى واليمنى ، ومسح العوامات ، وما إلى ذلك ؛ تحدد الحاوية عرض الحاوية وفقًا للأجهزة المختلفة.
ثم: تحديد الصف (صف):
يتم استدعاء صف Make (mixins/_grids.scss) لتحقيق تعريف تطهير الهوامش العائمة واليسرى. في 4.0 ، إذا تم تمكين دعم التخطيط المرن ، فسيتم تعيين عرض الحاوية على مرن ومرنة كملف ، ومسح عائم.
التالي: استدعاء مباشرة العمود الشبكي (mixins/_grid-framework.scss) لتحقيق إنشاء الخلايا
أ) العمود الشبكي: طريقة الدخول لتوليد الخلايا ، ومرور العدد الإجمالي للشبكات ، وعرض الهامش ، والعديد من الأحجام المدعومة
ب) تشير العمود الشبكي إلى العديد من الطرق في mixins/_grid.scss:
أ) استخدام وظيفة مفتاح الخريطة لاجتياز مجموعة مفاتيح الخريطة ؛
يتم استخدام وظيفة extend ، وتستخدم للميراث ، وتنفيذ اليسار العائم لجميع cols ، والوضع النسبي لجميع القولون.
for $ i من أعمدة من 1 إلى $ {.col-#{$ breakpoint}-#{$ i} {extend ٪ grid-column ؛ // التمديد هو الميراث ، ودمج هذا في مجموعة نمط //. ....}}}أ) دالة صنع اللون لتنفيذ حساب عرض العقيد
ب) استدعاء طريقة Make-Coll-Modile في mixins/_grid.scss لتحقيق توليد أنماط الدفع والسحب والإزاحة:
أنا. دفع: ادفع بعض الشبكات إلى اليمين ، باستخدام اليسار
الثاني. سحب: ادفع بعض الشبكات إلى اليسار ، باستخدام اليمين
ثالثا. الإزاحة: يستخدم تنفيذ الهامش اليسرى ، ودفعه إلى اليمين إلى نسبة مئوية.
mixin make-color ($ size ، $ أعمدة: $ grid columns) {margin-left: النسبة المئوية ($ size / $ columns) ؛}@mixin make-col-push ($ size ، $ الأعمدة: $ grid-columns) {left: if ($ size> 0 ، النسبة المئوية ($ size / $ الأعمدة) ، auto) ؛ اليمين: إذا ($ size> 0 ، النسبة المئوية ($ size / $ columns) ، auto) ؛} @mixin make-col-pull ($ size ، $ أعمدة: $ grid columns) {right: if ($ size> 0 ، النسبة المئوية ($ size / $ columns) ، Auto) ؛ == push {inClude make-col-push ($ size ، $ columns) ؛ } else if $ type == pull {inClude make-col-pull ($ size ، $ columns) ؛ } else if $ type == Offset {inClude make-color ($ size ، $ columns) ؛ }}ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.