Bootstrap 4 ميزات جديدة وباردة ستحبها

الإصدار الرئيسي التالي من إطار Bootstrap قاب قوسين أو أدنى. يمكن تنزيل إصدار ألفا بالفعل من موقع تطوير Bootstrap على الويب ، ويتوفر الكود المصدري أيضًا على Github.

يُعد Twitter Bootstrap حاليًا إطار العمل الأكثر شعبية في الواجهة الأمامية. انها تمكن المطورين ل قم بإنشاء مواقع ويب للجوال وسرعة الاستجابة بسرعة. يتيح Bootstrap الاستفادة بفعالية من واجهة HTML5 القياسية و CSS3 و Javascript الثلاثية. يتم استخدامه حاليًا بواسطة أكثر من 6 ملايين موقع على الويب.

على الرغم من أن Bootstrap 4 لا يزال في مرحلة التطوير (لذلك لا تستخدمه على موقع مباشر حتى الآن) ، فقد قام المطورون بعمل رائع. في هذا المنشور ، سوف نلقي نظرة على الإصدار الجديد الذي يتضمن العديد من الميزات الرائعة التي ستشهد بالتأكيد تبسيط وتحسين سير العمل تطوير الواجهة الأمامية.

1. ساس بدلا من أقل

حتى الآن ، استخدم Bootstrap LESS بصفته أستاذًا أساسيًا لـ CSS ، ولكن بالنسبة للإصدار الرئيسي الجديد ، سيتم إعادة صياغة قواعد النمط في Sass ، وهو الأكثر شهرة بين مطوري الواجهة الأمامية ، وله قاعدة كبيرة من المساهمين ، وأسهل في الاستخدام ويوفر أكثر الاحتمالات. بفضل Libsass ساس Complli قوية مكتوبة في C / C++ سوف Bootstrap 4 ترجمة أسرع بكثير من ذي قبل.

2. شبكة جديدة للشاشات الصغيرة

يحتوي Bootstrap على نظام شبكي سريع الاستجابة يسمح للمطورين باستهداف الأجهزة باستخدام طرق عرض مختلفة. يحتوي Bootstrap 3 حاليًا على 4 فئات شبكة للأعمدة, .العقيد-XS-XX للهواتف المحمولة, .العقيد-SM-XX للأقراص, .العقيد-MD-XX لسطح المكتب ، و .العقيد-LG-XX لسطح المكتب أكبر. سيعمل Bootstrap 4 على تعزيز نظام الشبكة عن طريق نظام خامس سيسهل للمطورين القيام بذلك استهداف الأجهزة الأصغر تحت عرض منفذ عرض 480 بكسل.

اتخذت فئة الشبكة الجديدة اسم أصغر فئة سابقة ، ودفعت الأسماء الحالية لمستويات الشبكة لأعلى بمقدار درجة واحدة. في Bootstrap 4 ستستخدم أجهزة سطح المكتب الكبيرة .العقيد-XL-XX اختيار الطبقة. من المهم أن تعرف أنه على الرغم من الاسم الجديد ، إلا أنهم لم يضيفوا فصلًا جديدًا لشاشات كبيرة جدًا ولكن لشاشات صغيرة جدًا.

3. يقدم وحدات CSS النسبية

أخيرًا ، يقوم Bootstrap 4 بإسقاط الدعم لبرنامج Internet Explorer 8. إنها خطوة ذكية حقًا لأنها تتيح لهم التخلص من polyfills المزعجة ، والتحويل إلى وحدات CSS النسبية. بدلا من بكسل ، فإن الإصدار الرئيسي الجديد سوف استخدام REMs و EM التي تجعل من الممكن ل تنفيذ الطباعة استجابة على مواقع Bootstrap. سيؤدي ذلك أيضًا إلى زيادة قابلية القراءة ، وجعل المواقع أكثر سهولة للمستخدمين المعاقين.

إذا كنت ترغب في تجربة كيفية عمل الوحدات النسبية مع Bootstrap 4 الجديد ، تحقق من هذا العرض التوضيحي على Codepen.

4. بطاقات Bootstrap العلامة التجارية الجديدة

قرر فريق التطوير توحيد بعض العناصر السابقة لواجهة مستخدم Bootstrap ، لذلك قرروا تقديم مكون واجهة مستخدم جديد يسمى البطاقات. ستحل البطاقات محل الآبار والصور المصغرة واللوحات السابقة ، وستوفر للمستخدمين سير عمل أكثر انسيابية. لا تقلق ، فالبطاقات ستحتفظ بالعناصر المألوفة ، مثل العناوين والرؤوس والتذييلات للآبار والصور المصغرة واللوحات.

نظرًا لأن البطاقات ستكون أكثر مرونة من مكونات واجهة المستخدم الحالية ، فإنها ستتيح مساحة أكبر للتطبيقات الإبداعية. هناك بعض الرواد الذين أجروا تجارب على Codepen باستخدام بطاقات Bootstrap. يمكنك التحقق منها ، أو إنشاء بطاقات خاصة بك.

5. إعادة تشغيل وحدة جديدة

تحل وحدة إعادة التشغيل الجديدة محل السابقة normalize.css إعادة تعيين الملف. لا تتخلى عنها على العكس من ذلك ، فإنه يبني قواعد أكثر عليه. كان الهدف من هذه الخطوة هو تضمين جميع محددات CSS العامة وأنماط إعادة التعيين في ملف SCSS فردي وسهل الاستخدام. يمكنك إلقاء نظرة على الكود المصدري هنا إذا كنت ترغب في فهم كيفية عمل الوحدة الجديدة بشكل أفضل.

من الجيد أن تعرف أن أنماط إعادة التعيين الجديدة تقوم بذكاء بتعيين خاصية CSS ذات حجم المربع إلى صندوق الحدود على ال العنصر ، الذي ورثته كل عنصر فرعي على الصفحة. حكم النمط الجديد يجعل تخطيطات استجابة أكثر سهولة. إذا كنت ترغب في تجربة الفرق بين أنواع تخطيط مربع المحتوى والحدود ، فقم بإلقاء نظرة على هذا العرض التوضيحي المفيد الذي يوفره CSS-Tricks.com (لم يتم إنشاؤه من أجل Bootstrap 4 ، لكنه يوضح فقط كيفية تغيير حجم المربع يعمل بشكل عام).

6. التقيد في دعم Flexbox

يتيح Bootstrap 4 الاستفادة من Flexbox Layout في CSS3 ، ولكن - لأن Internet Explorer 9 لا يدعم وحدة flexbox - الإصدار الافتراضي من Bootstrap 4 بدلاً من ذلك يستفيد من خصائص CSS العائمة والعرض لتنفيذ تخطيط السوائل.

يحتوي Flexbox على تصميم سهل الاستخدام ويمكن استخدامه بشكل ممتاز في تصميم متجاوب ، حيث يوفر حاوية مرنة إما تمدد أو تقلص لملء المساحة المتاحة بأفضل طريقة. لا تستخدم سوى ميزة الاشتراك في flexbox إذا كنت لا بحاجة إلى تقديم الدعم ل IE9.

7. تبسيط التخصيص المتغير

يتم تضمين جميع متغيرات Sass المستخدمة في إصدار Bootstrap الجديد في ملف واحد يسمى _variables.scss ، مما يؤدي إلى تبسيط عملية التطوير بشكل كبير. ليس عليك القيام بأي شيء آخر عدا نسخ الإعدادات من هذا الملف إلى ملف آخر يسمى _custom.scss لتغيير القيم الافتراضية.

يمكنك تخصيص أشياء كثيرة مثل الألوان ، المسافات ، أنماط الوصلة ، الطباعة ، الجداول ، نقاط توقف الشبكة والحاويات ، رقم العمود وعرض الحضيض ، وغيرها الكثير.

8. فئات فائدة جديدة للتباعد

يحتوي Bootstrap 3 بالفعل على العديد من فئات الأدوات العملية مثل تلك التي تتغير عائمة أو clearfix ، لكن Bootstrap 4 يضيف أكثر من ذلك. ال فصول تباعد جديدة السماح للمطورين بتغيير الحشوات والهوامش بسرعة على مواقعهم.

بناء الجملة للفئات الجديدة واضح تمامًا ، على سبيل المثال إضافة .فئة م -0 يربط قاعدة الاسلوب ذلك يحدد الهوامش على 0 على جميع جوانب العنصر المعطى (الهامش الكل - 0). بينما تستخدم الهوامش م- بادئة ، حشوات على غرار ص- اختصار. في مستندات التطوير ، يمكنك إلقاء نظرة على جميع فئات أدوات التباعد الجديدة.

9. تلميحات الأدوات و Popovers مدعوم من الحبل

في تلميحات الأدوات والبوبوفيرت Bootstrap 4 تستخدم مكتبة Tether supercool ، وهي محرك تحديد المواقع الذي يجعل من الممكن الاحتفاظ بعنصر محدد تمامًا بجوار عنصر آخر في نفس الصفحة. وهذا يعني تلميحات الأدوات و popovers سيتم وضعها تلقائيا بشكل صحيح على Bootstrap 4 المواقع.

لا تنسَ أن Tether هي مكتبة JavaScript تابعة لجهة خارجية ، تحتاج إلى تضمينها بشكل منفصل في HTML قبل ملف bootstrap.js الخاص بك.

10. إعادة تفعيل جافا سكريبت الإضافات

قام فريق التطوير بإعادة هيكلة كل مكون إضافي لجافا سكريبت للإصدار الجديد باستخدام EcmaScript 6. مع الاستخدام الذكي لأحدث التفاصيل وأحدث التحسينات التي يعتزمون تحسين تجربة الواجهة الأمامية.

لقد مر Bootstrap 4 الجديد أيضًا بتحسينات JavaScript الأخرى ، مثل نوع الخيار التحقق, أساليب عامة teardown, و دعم UMD, يعمل هذا معًا لجعل إطار الواجهة الأمامية الأكثر شعبية يعمل بسلاسة أكثر من أي وقت مضى.

اقرأ الآن: 10 بدائل خفيفة الوزن إلى Bootstrap & Foundation