مهندسو التنمية ، باستخدام bootstrap ، المطورين الأمامي ، باستخدام الأساس . لنتحدث عن السبب.
هناك العديد من الاختلافات الرئيسية بين Bootstrap و Foundation ، لكن أعتقد أنك بحاجة فقط إلى تذكر شيء واحد:
يعتبر مفهومي التصميم الخاصين بـ Zurb و Twitter واضحين للغاية ، حيث يمكن رؤيتهما من تسمية أطرهم الخاصة: Bootstrap يعني bootstrap ، bootstrap ، وبعبارة أخرى ، يحاول التعامل مع كل ما تحتاجه في مشروعك. الأساس يعني الخلق ، الخلق ، وبعبارة أخرى ، فإنه يمنحك إبداعًا قويًا في مشروعك.
الحفاظ على هذا العرض ، الآن سأدرج المزيد من الاختلافات الرئيسية بين الاثنين:
1. عناصر واجهة المستخدم
يرتب الأساس بعض العناصر المحدودة فقط ، بينما يمنحك Bootstrap جميع العناصر التي يمكنك تخيلها.
هدف تصميم Zurb للأساس هو أنه حتى إذا كنت تستخدم عناصر واجهة المستخدم المحددة مسبقًا ، فإنه لا ينبغي أن يبدو مشابهًا لموقع الويب الخاص بك.
من ناحية أخرى ، يحاول Bootstrap تزويدك بجميع عناصر واجهة المستخدم المحددة.
2. REMS مقابل البكسل
يستخدم Foundation REMS ، بينما يستخدم Bootstrap البكسل .
استخدام وحدات البكسل يعني أنه يتعين عليك تحديد الطول والعرض والهوامش الداخلية والهوامش الخارجية بدقة ، وفي كل جهاز وحجم شاشة ، لأن الأجهزة المختلفة تميل إلى وجود فرق كبير في تأثيرات العرض.
الآن الأساس 5 يستخدم REMS ، وليس EM. هذا يتجنب مشكلة تتالي EM.
استخدام REMS يعني أنه يمكنك استخدام حجم الخط: 80 ٪ ؛ لتقليل المكون بأكمله وفرعه بنسبة 20 ٪.
تجدر الإشارة إلى أنه مع REMS ، يمكنك التخلص من تفاصيل وحدات البكسل ، لذلك يستحق استخدام REMS للتعامل معها.
يوفر Foundation أيضًا طريقة Mixin لـ Sass لتحويل وحدات البكسل إلى REMS ، بحيث يمكنك الاستمرار في استخدام طريقة تفكير البيكسلات لتحديد الصفحات:
.element {width: rem-calc (10px) ؛ سيتم تحويل // إلى REMS}3. شبكة مرنة مقابل شبكة محددة مسبقًا
يمكن لشبكة Foundation تلقائيًا التكيف مع عرض المتصفح الحالي. حدد Boostrap عدة أحجام الشبكة للتكيف مع الأجهزة والشاشات السائدة.
سيغير Bootstrap فجأة شبكته عند تغيير عرض المتصفح.
سوف يتكيف الأساس بمرونة مع عرض المتصفح الحالي. هذه طريقة فنية جديدة. أثناء التكيف تلقائيًا ، يمكن أن يؤدي نفس تأثير المحول.
الأساس له نقطتان رئيسيتان عندما تتغير الشبكة: صغيرة ومتوسطة وكبيرة. يتم تقليل جميع العمليات وتوسيعها وتكييفها مع عرض المتصفح الحالي. أحجام الشاشة المحددة مسبقًا غير مطلوبة ، والسبب الأكثر أهمية هو أن يتم تشجيعك على تحديد أنماط مختلفة بناءً على حجم الشاشة.
باستخدام bootstrap ، يمكنك الحصول على شبكة ثابتة أو متعددة ، مما يعني أنك بحاجة إلى ضبط أو عدم عرض محدد مسبقًا للحاوية الشبكية.
مع الأساس و SASS ، يمكنك ضبط حجم الشبكة الأكبر بحرية (يتم حساب المتوسطة والصغيرة تلقائيًا) ، وعدد الأعمدة للشاشات الكبيرة ، وعدد الأعمدة للشاشات الصغيرة.
4. يتم دعم الأجهزة المحمولة مقابل الأجهزة المحمولة أيضًا
تم تصميم الأساس مع أي شاشة ذات أربع تورط في الاعتبار. تم تصميم Bootstrap مع التقسيم مسبقًا إلى: الهواتف المحمولة والأجهزة اللوحية وأجهزة سطح المكتب وأجهزة سطح المكتب مع شاشات كبيرة الحجم .
إن بناء موقع ويب للهاتف المحمول الذي يدعم الأجهزة المحمولة يعني أنه متاح بالتأكيد على شاشة أكبر. لذلك ، تشجعك المؤسسة على القيام بذلك: الهاتف المحمول.
إذا كنت تستخدم Mixin Sass Media Mixin للمؤسسة ، فستجد أنه لا يوجد استعلام وسائط محدد للاستعلام عن ماهية الجهاز المحمول ، لكنك تستخدم استعلام الوسائط لتحديد كيفية عرضه على شاشة أكبر.
إذا كنت تفكر أولاً في أجهزة كمبيوتر سطح المكتب عند تصميم الأشياء ، فقد تواجه مشاكل كبيرة عند دعم الشاشات الأصغر. إذا كنت تفكر أولاً في هاتفك ، فستركز على ما هو أكثر أهمية للمستخدمين وزيادة إحساسك بالمساحة.
5. المجتمع
Bootstrap لديه مجتمع أكبر. ومع الأساس ، يجب أن تكون أكثر اعتمادًا ذاتيًا.
أبرز ما في Bootstrap هو المجتمع. إنها ضخمة للغاية وشاملة ، ويمكنك العثور على أي شيء تريده تقريبًا.
إذا اخترت الأساس ، فقد يكون الاعتماد على الذات شيئًا يجب أن تتقنه. جميع الحلول تقريبًا مخصصة للتمهيد ، ويمكنك فقط بناء خاص بك.
ختاماً
اسأل نفسك بعض الأسئلة:
هل تريد شيئًا أكثر فائدة أو يجعله أكثر الحياة؟
هل تريد تنظيم CSS الخاص بك وجعله مكونك الأساسي؟
الإجابات هي: bootstrap. مؤسسة .
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
هل هذه مقارنة مثيرة للاهتمام؟ آمل أن يكون من المفيد للجميع فهم الأطر الأمامية Bootstrap 3 والمؤسسة 5.