ما يمكن توقعه مع Bootstrap 4

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

حالة Bootstrap 4

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

لم تكتمل وثائق Bootstrap 4 بعد ، لذا فإن التجربة طريقة جيدة لاختبار بعض الميزات الجديدة. بمجرد إتاحته رسميًا للاستخدام الإنتاجي ، ستكون على دراية جيدة بجميع التحسينات الجديدة الرائعة.

مصمم للمتصفحات الحديثة

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

تحسين إعادة التعيين

ربما أصبحت معتادًا على Normalize.css ، وهو خيار إعادة تعيين رائع. هناك إعادة تعيين جديدة ومحسّنة مع إضافة أشياء محددة من Bootstrap تسمى reboot.css. تفاصيل Bootstrap هي أشياء مثل box-sizing: border ، rems كوحدة للقياس ، وأنماط الارتباط ، وأنماط النموذج. إنه مزيج رائع بين Normalize.css واحتياجات Bootstrap المحددة ، لذلك من المؤكد أنك ستكون بداية رائعة.

ساس

في الأيام السابقة من Bootstrap ، بدا أن LESS هو المفضل. مع تغيرات الصناعة وتفضيلات المصمم التي تميل نحو SASS ، فإن هذا هو ما هو في صالح الحالي. إذا كنت تتذكر الإصدار 3 ، فهذا عندما أصبح خيار SASS متاحًا مع خيار المنفذ. اعتبارًا من الآن ، لا يوجد دعم مخطط لـ LESS.

التخصيصات

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

هناك عدد غير قليل من خيارات التخصيص الجديدة في Bootstrap 4. يمكنك رؤية الوضع الحالي هنا. من المرجح أن تتطور قليلاً مع استمرار إصدار التفاصيل.

ضع في اعتبارك أن هذه تخصيصات سهلة الإعداد في البداية:

• افتراضات الجسم
• متغيرات اللون
• صندوق فليكس
• خيارات تصميم CSS3 مثل الانتقالات والزوايا الدائرية والظلال المسقطة ، إلخ.
• قياسات التباعد
• أنماط الارتباط
• نقاط توقف الشبكة
• حاويات الشبكة
• أعمدة الشبكة
• تحجيم الطباعة
• عناصر
• الجداول
• أكثر!

Flexbox أي شخص؟

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

قبل الانطلاق وتحويل جميع مشاريعك ، هناك شيء مهم يجب ذكره. على الرغم من زيادة دعم المتصفح بشكل كبير ، لا يزال Internet Explorer 9 يفتقر إلى دعم Flexbox. فيما يتعلق بسهولة الاستخدام ، يجعل Bootstrap 4 من السهل استخدام Flexbox إذا لم تكن بحاجة إلى دعم IE9. بشكل أساسي ، كل ما عليك فعله هو العثور على ملف _variables.scss وتغيير $ enable-flex من خطأ إلى صحيح. إذا كنت معتادًا على SASS ، فهذا شيء سريع للقيام به.

تحديثات الشبكة

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

عند الانفصال عن وحدات البكسل التي اعتدنا عليها كثيرًا ، فلنلقِ نظرة على مثال لشيء شائع مثل .container و .row. تحتوي الحاوية الآن على أقصى عرض محدد في rems. يحتوي الصف على هامش أيمن وأيسر سلبي افتراضي يبلغ -.9375rem ، بينما تحتوي الأعمدة على مساحة افتراضية لليمين واليسار عند 0.9375rem . كما قد تتذكر ، كانت هذه القيم في السابق 15 15px في Bootstrap 3. قيم rem الجديدة هذه قابلة للمقارنة مع ذلك.

استعلامات الوسائط المحسنة

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

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

الآن ، يمكن اتباع نهج أكثر قدرة على التنقل مع استعلامات الوسائط المحدثة هذه:

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

إذا كنت تريد شيئًا مختلفًا ، فإن نقاط التوقف قابلة للتكوين في SASS إذا كنت ترغب في اختيار ما يناسبك.

البطاقات كبديل

على دراية باللوحات والآبار والصور المصغرة؟ تعد البطاقات الآن الأحدث والأفضل وتوفر بعض خيارات التصميم الرائعة. أحد الأمثلة على ذلك هو مجموعات البطاقات. على الرغم من اختلاف مقدار النص ، فإن البطاقات متساوية في الارتفاع ، دون الاعتماد على JavaScript. يعمل هذا مع كل من Flexbox ووضع الشبكة الافتراضي. عند استخدام Flexbox ، يتم إنشاء البطاقات باستخدام خصائص Flexbox. تستخدم الشبكة الافتراضية خدعة CSS لتجنب الحاجة إلى JavaScript. تستخدم الحاوية display: table; ويتم display: table-cell; إعطائها خصائص الجدول - هذا هو المكان الذي يأتي منه ارتفاع العمود المتساوي.

الطباعة

تذكر كيف تستخدم الشبكة الآن rems؟ حسنًا ، من المنطقي أن الطباعة ستفعل ذلك أيضًا! عند التفكير في هذا الأمر ، تذكر أن جميع أحجام الخطوط مرتبطة بالعنصر الجذر ، علامة HTML. عندما تقوم بتغيير حجم الخط (أو أي أنماط أخرى) في علامة HTML ، يمكنك بسهولة تصميم الأنماط وقياسها في جميع أنحاء مشروعك.

لنفترض أن عنصر HTML الخاص بك مصمم font-size: 16px . لنفترض أنك أردت أن تكون علامات h5 بهذا الحجم ، فأنت تعلن عن حجم خط يبلغ 1rem.

h5 {
font-size: 1rem;
}

الآن ، قد يكون هناك بعض الرياضيات المتضمنة للمضي قدمًا. إذا أردت أن تكون علامات h1 40 بكسل ، فإليك كيفية اكتشاف ذلك:

h1 {
font-size: 2.5rem; /* 16 * 2.5 = 40px */
}

لا تشعر ريم حتى الآن؟ لا يزال بإمكانك استخدام وحدات البكسل و ems لتغيير الحجم إذا كنت ترغب في ذلك.

المزيد من أنماط العناوين

تعتبر العناوين رائعة لإنشاء التسلسل الهرمي. لكن ماذا لو أردت شيئًا أكثر بروزًا من h1 ، h2 ، h3 ، إلخ؟ حسنًا ، الخبر السار هو أنه يمكنك إضافة فئة عرض تتجه إلى عنوان قياسي يجعلها أكبر. سيبدو مثل:

<h1 class="display-4">Heading Display 4</h1>

display-4 أكبر من display-2 .

حجم ملف أصغر

يحتوي Bootstrap 4 على مساحة أصغر. إنه في الواقع أصغر بحوالي 30٪ من الإصدار الأخير ، Bootstrap 3. كان في السابق حوالي 123 كيلو بايت والآن هو ~ 88 كيلو بايت. إنه لأمر رائع أنه أصغر حجمًا ولا يزال يتمتع بنفس الميزات الرائعة.

ضع في اعتبارك أن هناك خيارًا لاستخدام أجزاء Bootstrap التي تحتاجها فقط ، مما يجعل أحجام الملفات أصغر.

لا مزيد من الحروف الرسومية؟

تم استخدام Glyphicons على نطاق واسع في الإصدارات السابقة من Bootstrap ، لذلك من المحزن رؤيتها تذهب. لا تقلق ، هذه ليست نهاية أيقونات الويب. في مكانه ، يجب أن يخدمك FontAwesome أيضًا. يمكنك أيضًا التحقق من Octigons من Github للحصول على خيارات رمز رائعة.

الانتقال إلى Bootstrap 4

بينما هو حاليًا في ألفا ، لا يوجد سبب يمنعك من العمل معه في بيئة اختبار. شفرة المصدر متاحة في فرع v4-dev على GitHub. أثناء تجربة ورؤية أي شيء يحتاج إلى الاهتمام ، هناك طلب سحب للتطوير والتتبع يتضمن ملاحظات حول التغييرات وأي تحسينات جديدة أخرى.

الأمور في مستوى ألفا ، وستكون هناك في النهاية إصدارات تجريبية بعد أن تصبح الميزات والوظائف جاهزة للاختبار. بعد الإصدار التجريبي ، سيتم استخدام مرشحين اثنين لاختبار الأشياء في الإنتاج. عندما سارت الأمور على ما يرام ، سيكون الإصدار النهائي جاهزًا!

لقد خدشنا السطح هنا وبدأت محادثة Bootstrap 4 للتو. من المثير رؤية ما يخبئه المستقبل وأنا متحمس لرؤيته يخرج من ألفا. تأكد من مراقبة التحديثات وتنزيل نسخة لاختبار مكونات Bootstrap 4 الجديدة.