الهجرة إلى الإصدار 4 من Bootstrap

من موسوعة حسوب

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

التغييرات المستقرة

بالنسبة لمن يريد الانتقال من الإصدار بيتا 3 إلى أيّ من الإصدارات ‎4.x‎ المستقرة، فلا توجد تغييرات كاسرة للتوافق، بيد أنّ هناك بعض التغييرات التي يجدر الانتباه إليها.

الطباعة

  • أدوات إصلاح علل الطباعة. كان استخدام الأصناف ‎.d-print-*‎ يؤدي في السابق إلى إلغاء أصناف ‎.d-* ‎ الأخرى. أما الآن فهي تتطابق مع أدوات العرض الأخرى، كما لا تنطبق إلا على الوسائط المعنية (‎@media print).
  • توسيع أدوات عرض الطباعة المتاحة لتتناسب مع الأدوات المساعدة الأخرى. لم يتوفر الإصدار بيتا 3 وما دونه إلا على inline-block و inline و none. و لقد أضاف الإصدار 4  إلى ذلك flex و inline-flex و table و  table-row و  table-cell.
  • إتاحة معاينة الطباعة الثابتة عبر المتصفحات مع أنماط طباعة جديدة تتيح تحديد حجم الصفحة ‎@page size

تغييرات بيتا 3

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

معلومات متنوعة

  • إزالة المتغير غير المستخدم ‎$thumbnail-transition. لم نكن ننقل أي شيء، لذلك لم تكن هناك حاجة إلى هذا المتغير.
  • لم تعد حزمة npm تتضمن أي ملفات بخلاف ملفات المصدر  source والمورد dist؛ إذا كنت تعتمد عليها وكنت تشغّل برامجنا النصية عبر المجلد node_modules، فعليك تعديل سير عملك.

الاستمارات

  • أعدنا كتابة مربعات التأخير وأزرار الانتقاء المخصصة والابتدائية. أصبح لكليهما الآن بنية HTML متطابقة (وسوم خارجية <div> مع إخوة <input> و <label>) ونفس أنماط التخطيط (مكدّسة ابتداء، ومضمّنة مع صنف مُعدِّل modifier class). يتيح لنا هذا تصميم اللاصقات بناءً على حالة الإدخال، وكذلك تبسيط دعم الخاصية disabled (التي كانت تتطلب في السابق صنفا أبويا) ودعم تصديق الاستمارات. رافق هذا تغيير أنماط CSS لإدارة صور الخلفية المتعددة على مربعات التأشير والانتقاء المخصصة. سابقًا، كان لعنصر ‎.custom-control-indicator- المحذوف حاليا - لون خلفية متدرج وأيقونة SVG. تخصيص تدرج الخلفية يعني ضرورة استبدال كل تلك العناصر في كل مرة تحتاج فيها إلى تغيير أحدها. أصبحنا الآن نستخدم ‎.custom-control-label::before لأجل التعبئة والتلوين المتدرج، فيما يتكفل ‎.custom-control-label::after بالأيقونة. إن أردت جعل مربع التأشير ضمنيا، فأضف الصنف ‎.custom-control-inline.
  • تحديث محدّدات مجموعات الأزرار الخاصة بالمدخلات. بدلاً من استخدام ‎[data-toggle = "button"] {}‎ للتحكم في التنسيق والسلوك، ولا نستخدم خاصية البيانات data  إلا لسلوكات جافا سكربت، فيما نعتمد على الصنف الجديد ‎.btn-group-togg لأجل التنسيق.
  • إزالة ‎.col-form-legend وتعويضه بصنف مُحسّن ‎.col-form-label، بهذه الطريقة يمكن استخدام ‎.col-form-label-sm و ‎.col-form-label-lg على عناصر <legend> بكل سهولة.
  • تغيير متغير عناصر إدخال الملفات المخصصة ‎$custom-file-text. فلم يعد عبارة عن قاموس Sass متشعب، وهو الآن يعمل حصرا على سلسلة نصية واحدة فقط — زر التصفح Browse الذي أصبح الآن العنصر الزائف الوحيد الذي يُنشأ عبر Sass. يأتي نص اختيار الملف Choose file من اللاصقة ‎.custom-file-label.

مجموعات الإدخال

  • أصبحت إضافات مجموعة الإدخال محدّدة الآن في مواضعها نسبة إلى عنصر الإدخال. لقد أزلنا ‎.input-group-addon و ‎.input-group-btn وعوّضناهما بصنفين جديدين: ‎.input-group-prepend و ‎.input-group-append. يجب عليك أن تستخدم صراحة الإلحاق append  أو الإسباق prepend لتبسيط استخدام CSS. خلال الإلحاق أو الإسباق، ضع الأزرار كما هو معتاد، ولكن مع تغليف النص في عنصر ‎.input-group-text.
  • أصبحت أنماط التصديق مدعومة الآن، وكذلك عناصر الإدخال المتعددة (مع ذلك لا يمكن التصديق إلا على عنصر إدخال واحد فقط في كل مجموعة).
  • يجب أن توضع أصناف الأحجام في الأب ‎.‎input-group‎. وليس في عناصر الاستمارة الفردية.

تغييرات الإصدار بيتا 2

نحاول قدر الإمكان تجنب إجراء أيّ تغييرا كاسرة للتوافق في الإصدار التجريبي بيتا. ولكن ليس كل ما يُبتغى يُنال. فيما يلي بعض التغييرات الكاسرة التي يجب أخذها بالحسبان عند الانتقال من الإصدار بيتا 1 إلى بيتا 2.

  • إزالة المتغير ‎$badge-color واستخدامه على عناصر ‎.badge. أصبحنا نستخدم دالة تباين الألوان لاختيار اللون بناءً على لون الخلفية، لذا لم يعد المتغير ضروريا.
  • إعادة تسمية الدالة  grayscale()‎ إلى gray()‎ لتجنب التعارض مع مرشحات التدرج الرمادي الأصلية في CSS.
  • إعادة تسمية ‎.table-inverse و ‎.thead-inverse و ‎.thead-default إلى ‎ .*-dark و ‎.*-light، وذلك لمطابق مخططات الألوان المستخدمة في المواضع الأخرى.
  • تنشئ الجداول المتجاوبة الآن أصنافًا لكل نقطة حدية للشبكة. هذا يكسر التوافق مع الإصدار بيتا 1 من حيث أنّ ‎.table-responseive المُستخدم سابقا شبيه  بالصنف ‎.table-responseive-md. يمكنك الآن استخدام ‎.table-responseive أو ‎.table-responseive- {sm، md، lg، xl}‎.
  • التوقف عن دعم Bower، ذلك أنّ مدير الحزم أصبح مُتجاوزًا موازنة بالبدائل المتاحة (على سبيل المثال، Yarn أو npm). انظر bower/bower#2298 لمزيد من التفاصيل.
  • ما يزال Bootstrap يتطلب jQuery 1.9.1 أو أعلى، ولكن يُنصح باستخدام الإصدار ‎3.x نظرًا لأن المتصفحات المدعومة من ‎3.x هي التي يدعمها Bootstrap،  علاوة على ذلك فإنّ الإصدار ‎3.x فيه بعض العلل الأمنية.
  • إزالة الصنف غير المستخدم ‎.form-control-label. كان هذا الصنف نسخة مكررة من الصنف ‎.col-form-label الذي كان يُوسِّط رأسيا عناصر <label> وعناصر الإدخال المرتبطة بها في خطاطات الاستمارات الأفقية.
  • تحويل color-yiq من مخلوط يتضمن خاصية اللون إلى دالة تعيد قيمة مما يتيح لك استخدامها في جميع خاصيات CSS. على سبيل المثال، بدلاً من كتابة color-yiq (# 000)‎، يمكنك الآن كتابة color: color-yiq (# 000)‎;‎.

أبرز النقاط

  • تقديم استخدام جديد لـ  pointer-events في النوافذ الشرطية. تمرّ النافذة الشرطية ‎.modal-dialog الخارجية عبر الأحداث ذات الخاصية pointer-events: none للتعامل مع النقرات المخصصة (مما يتيح الاكتفاء بالإنصات إلى ‎.modal-backdrop لأي نقرة)، ثم التفاعل معه في عناصر ‎.modal-content ذات الخاصية pointer-events: auto.

ملخص

فيما يلي عناصر التذاكر الأساسية التي يجب أن تأخذها بالحسبان عند الانتقال من الإصدار 3 إلى الإصدار 4.

دعم المتصفح

  • إزالة دعم IE8 و IE9 و iOS 6. لا يدعم الإصدار 4 من Bootstrap إلا IE10+‎ و iOS 7+‎. إن كان موقعك يحتاج أيّا منهما، سيكون عليك استخدام الإصدار 3.
  • إضافة دعم رسمي لمتصفح Android v5.0 Lollipop و إطارات العرض WebView. تظل الإصدارات السابقة من متصفح Android و WebView مدعومة، لكن دعمًا غير رسمي.

التغيرات العامة

  • أصبح Flexbox مُمكَّنا افتراضيا. يعني هذا عموما التحوّل من العناصر العائمة، والتوجه إلى مكوناتنا.
  • استبدلنا Sass بـ Less لكتابة ملفات CSS المصدرية.
  • التبديل من الوحدة px إلى الوحدة rem كوحدة أساسية في CSS، بيد أنّ وحدات البكسل ما تزال تستخدم في استعلامات الوسائط وسلوك الشبكة لأنّ إطارات عرض الجهاز لا تتأثر بحجم النوع.
  • زيادة حجم الخط العام من 14 بكسل إلى 16 بكسل.
  • إتاحة طبقات شبكة جديدة لإضافة خيار خامس (لمعالجة الأجهزة ذات الحجم 576 بكسل فما دونه) وإزالة ‎ -xs من تلك الأصناف. مثل: ‎.col-6 و col-sm-4 و col-md-3.
  • استبدال خاصية القالب الاختيارية المنفصلة بخيارات قابلة للإعداد عبر متغيرات SCSS (على سبيل المثال: ‎$enable-gradients: true).
  • إصلاح نظام البناء لاستخدام سلسلة من برامج npm النصية بدلاً من Grunt. انظر ملف package.json لمطالعة جميع البرامج النصية، أو انظر الملف readme لأغراض التطوير المحلي.
  • لم يعد الاستخدام غير المتجاوب لـ Bootstrap مدعومًا.
  • إزالة أداة التخصيص عبر الإنترنت وتعويضها بتوثيق أكثر شمولًا وبناءات مخصّصة.
  • إضافة العشرات من أصناف الأدوات المساعدة الجديدة لأجل أزواج قيمة خاصيات CSS الشائعة، إضافة إلى اختصارات التباعد الخاصة بالهوامش والحواشي.

نظام الشبكة

  • الانتقال إلى flexbox.
    • إضافة دعم Flexbox في مخلوط الشبكة والأصناف المُعرّفة مسبقًا.
      • تضمين دعم أصناف المحاذاة الرأسية والأفقية كجزء من flexbox.
  • تحديث أسماء أصناف الشبكة وطبقات شبكة جديدة.
    • إضافة طبقة شبكة sm جديدة للشبكات ذات الأحجام الأقل من 768 بكسل لمزيد من التحكم. أصبحت لدينا الآن الطبقات xs و sm و md و lg و xl. هذا يعني أيضًا أنه تم رفع كل طبقة بمستوى واحد (لذلك فإنّ ‎.col-md-6 في الإصدار 3 أصبحت ‎.col-lg-6 في الإصدار 4).
    • تعديل أصناف الشبكة xs بحيث لا تتطلب استخدام رمز الطبقة ( infix)، وذلك تبيانا لكونها تبدأ في تطبيق الأنماط ابتداء من min-width: 0 وليس عند قيمة بكسلية محددة. بدلاً من ‎.col-xs-6، استخدم ‎.col-6. بالمقابل، تتطلب جميع طبقات الشبكة الأخرى استخدام رمز الطبقة infix (مثلsm).
  • تحديث أحجام الشبكة والمخاليط،والمتغيرات.
    • أصبح لخنادق الشبكة  الآن قاموس Sass لاستخدامه لتحديد عرض الخنادق في كل نقطة حدية.
    • تحديث مخاليط الشبكة لكي تستخدا المخلوط make-col-ready و make-col لتعيين قيم flex و max-width للأعمدة فرادى.
    • تغيير النقاط الحدية في استعلام الوسائط الخاص بنظام الشبكة وعرض الحاويات لمراعاة طبقات الشبكة الجديدة، والتأكد من أنّ الأعمدة قابلة للقسمة بالتساوي على 12 في عرضها الأقصى.
    • يُتعامل الآن مع النقاط الحدية للشبكة وعرض الحاويات عبر قواميس Sass‎‎‎‏ (‎$grid-breakpoints و ‎$container-max-widths‎) بدلاً من استخدام متغيرات منفصلة. لقد استُبدِلت المتغيرات ‎@screen-*‎، وأصبح بإمكانك تخصيص طبقات الشبكة بالكامل.
    • تم تغيير استعلامات الوسائط كذلك. بدلاً من تكرار إعلانات استعلام الوسائط بالقيمة نفسها في كل مرة، فقد وفّرنا الآن ‎@include media-breakpoint-up/down/only ، فبدلاً من كتابة ‎@media (min-width: @screen-sm-min) { ... }‎، يمكنك كتابة ‎@include media-breakpoint-up(sm) { ... }‎.

المكونات

  • إزالة الألواح (panels) والصور المصغرة والجدران (wells) وتعويضها بمكون شامل جديد، وهو البطاقات.
  • إزالة أيقونات الخطوط Glyphicons. إذا كنت بحاجة إلى استخدام الأيقونات، فهذه بعض الخيارات المتاحة:
  • إزالة الملحقة Affix jQuery.
    • نوصي باستخدام position: sticky بدلاً من ذلك. راجع هذه الصفحة لمزيد من التفاصيل وبعض التوصيات الخاصة بالملء. أحد الاقتراحات الممكنة هو استخدام قاعدة ‎@supports لتقديمها (على سبيل المثال ‎@supports (position: sticky) { ... }‎))
    • إذا كنت تستخدم Affix لتطبيق أنماط إضافية غير موضعية، فقد لا يناسبك الملء المتعدد polyfill. أحد الخيارات المتاحة في مثل هذه الحالات هو استخدام المكتبة ScrollPos-Styler.
  • إزالة مكوّن pager، إذ أنّه كان مجرد زرّ مخصّص.
  • إعادة تصميم جميع المكونات تقريبًا بُغية الإكثار من استخدام محددات الأصناف غير المتداخلة بدلاً من استخدام محدّدات الأبناء المخصّصة للغاية.

حسب المكونات

تبرز هذه القائمة التغييرات الرئيسية مُرتّبة حسب المكوّنات بين الإصدارين v3.xx و v4.0.0.

Reboot

Reboot هي إضافة جديدة إلى Bootstrap 4، وهي ورقة أنماط تعتمد على Normalize وعلى أنماط إعادة التعيين الخاصة بنا. لا تستخدم المحددات التي تظهر في هذا الملف إلا العناصر — إذ لا توجد أصناف هنا. هذا يعزل أنماط إعادة التعيين عن أنماط المكونات الخاصة، وذلك في إطار التوجه نحو مقاربة وحداتية (modular). بعض أبرز عمليات إعادة الضبط المُتضمّنة فيها هي تغيير box-sizing: border-box، والانتقال من وحدات em إلى وحدات rem في العديد من العناصر، وكذلك أنماط الروابط والعديد من عمليات إعادة تعيين عناصر الاستمارة.

الكتابة

  • نقل جميع أدوات ‎.text- ‎إلى ملف ‎_utilities.scss.
  • إزالة ‎.page-header، وذلك لأنّه يمكن تطبيق أنماطه عبر الأدوات المساعدة.
  • إزالة ‎.dl -orizontal. استخدم بدلا منه ‎.row على عناصر <dl>، واستخدم أصناف أعمدة الشبكة (أو المخاليط) على أبناء <dt> و <dd>.
  • إعادة تصميم الاقتباسات ونقل أنماطها من عنصر <blockquote> إلى صنف واحد ‎.blockquote. إزالة معدّل ‎.blockquote-reverse وتعويضه بأدوات المساعدة النصية.
  • يتطلب ‎.list-inline الآن أن يُطبّق الصنف ‎.list-inline-item الجديد على عناصر القائمة الفرعية الخاصة به.

صور

  • إعادة تسمية ‎.img-responsive إلى ‎.img-fluid.
  • إعادة تسمية ‎.img-rounded تقريب إلى ‎.rounded
  • إعادة تسمية ‎.img-circle إلى ‎.rounded-circle

الجداول

  • لقد أُزيلت جميع نسخ محدّدات < تقريبًا، مما يعني أن الجداول المتداخلة سوف ترث الأنماط تلقائيًا من آبائها. يبسط هذا المحدّدات والتخصيصات تبسيطا واضحا.
  • إعادة تسمية ‎.table-condensed إلى ‎.table-sm لأجل حفظ الاتساق.
  • إضافة خيار ‎.table-inverse جديد.
  • إضافة معدِّلين لترويسات الجدول: وهما ‎.thead-default و  ‎.thead-inverse.
  • إعادة تسمية الأصناف السياقية لتكون لها بادئة ‎.table. وهكذا تحولت ‎.active و ‎.success و ‎.warning و ‎.danger و .info إلى ‎.table-activeو ‎.table-Success و ‎.table-warning و ‎ .table-risk و ‎.table-info.

الاستمارات

  • أعيد تعيين العنصر المنقول إلى ملف ‎_reboot.scss.
  • إعادة تسمية ‎.control-label إلى ‎.col-form-label.
  • إعادة تسمية ‎.input-lg و ‎.‎input-sm إلى ‎.form-control-lg و ‎.form-control-sm على التوالي.
  • إزالة أصناف ‎.form-group-*‎ بُغية التبسيط. استخدام أصناف ‎.form-control-*‎ بدلاً منها الآن.
  • إزالة ‎.help-block وتعويضها بـ ‎.form-text لأجل نصوص المساعدة الكتلية، أما فيما يخص نصوص المساعدة المضمّنة وغيرها من الخيارات المرنة، استخدم الأصناف المساعدة من قبيل ‎ .text-muted.
  • إزالة ‎.radio-inline و ‎.checkbox-inline.
  • إدماج ‎.checkbox و ‎.radio في ‎.form-check وكل أصناف ‎.form-check-* ‎.
  • إصلاح مشكلة الاستمارات الأفقية:
    • لم تعد أصناف ‎.form-horizontal إجبارية.
    • لم تعد ‎.form-group تطبق الأنماط من ‎.row عبر المخاليط، لذا أصبحت ‎.row ضرورية الآن في خطاطات الشبكة الأفقية (كما في <div class="form-group row">).
    • إضافة الصنف ‎.col-form-label إلى اللاصقات ذات الصنف ‎.form-control المُوسّطة رأسيا.
    • إضافة صنف ‎.form-row جديد لأجل خطاطات الاستمارات ذات أصناف الشبكة (عوّض ‎.row بـ ‎.‎form-row).
  • إضافة دعم الاستمارات المخصصة (مربعات التأشير وأزرار الانتقاء، وقوائم الاختيار وعناصر إدخال الملفات).
  • استبدال الأصناف ‎.has-error و ‎.has-warning و ‎.‎has-Success بأصناف ذات ميزة التصديق في HTML5 عبر أصناف CSS الزائفة ‎:invalid و ‎:valid.
  • إعادة تسمية ‎.form-control-static إلى ‎.‎form-control-plaintext.

الأزرار

  • إعادة تسمية ‎.btn-default إلى‎.btn-secondary.
  • إزالة الصنف ‎.btn-xs تمامًا، لأنّ ‎.btn-sm أصغر نسبيًا من الإصدار الثالث.
  • إزالة ميزة زر الحالة لملحقة button.js jQuery. يشمل هذا التابعين ‎$().button(string)‎ و ‎$().button('reset')‎. ننصح باستخدام جزء مخصّص صغير من جافا سكربت بدلاً من ذلك للحصول على تحكم أكبر.
    • لاحظ أنّه احتفظنا بميزات الملحقة الأخرى (مثل مربعات التأشير وأزرار الانتقاء، وأزرار التبديل المفردة) في الإصدار 4.
  • تغيير [disabled] إلى ‎:disabled في الأزرار لأنّ الإصدارات IE9 +‎ تدعم ‎:disabled. ما تزال fieldset[disabled]‎ ضرورية مع ذلك، لأن مجموعات الحقول المعطّلة الأصلية معطوبة في IE11.

مجموعه الأزرار

  • إعادة كتابة المكون باستخدام flexbox.
  • إزالة ‎.btn-group-justified. يمكنك أن  تستخدم بدلها <div class="btn-group d-flex" role="group"></div> كغلاف حول العناصر ذات الصنف ‎.w-100.
  • إزالة الصنف ‎.btn-group-xs تماما نتيجة لإزالة ‎.btn-xs.
  •  إزالة التباعد الصريح بين مجموعات الأزرار في أشرطة أدوات الأزرار؛ استخدم أدوات الهامش بدلها.
  • تحسين التوثيق الذي يخصّ استخدامها مع المكونات الأخرى.

القائمة المنسدلة

  • تم التبديل من محددات الأب إلى الأصناف الفردية لكافة المكونات والمُعدِّلات وغيرها.
  • تبسيط أنماط القوائم المنسدلة، إذ لم يعد تضاف إليها أسهم متجهة لأعلى أو أسفل.
  • يمكن الآن بناء القوائم المنسدلة بواسطة <div> أو <ul>.
  • إعادة تصميم أنماط القوائم المنسدلة وترميزها لتوفر دعما مبسّطا ومُضمّنا لعناصر <a> و <button> في القوائم المنسدلة.
  • إعادة تسمية ‎.divider إلى ‎.dropdown-divider.
  • تتطلب عناصر القائمة المنسدلة الآن استخدام ‎.dropdown-item.
  • لم تعد مفاتيح تبديل القوائم المنسدلة تتطلب الاستخدام الصريح لعنصر <span class="caret"></span>؛ إذ أنّها تُوفّر الآن تلقائيًا عبر عنصر CSS الزائف ‎::after في ‎.dropdown-toggle.

نظام الشبكة

  • إضافة نقطة حديثة جديدة إلى الشبكة بحجم 576 بكسل تحت اسم sm، ممّا يعني أن هناك الآن خمسة طبقات إجمالية (xs و sm و md و lg و xl).
  • إعادة تسمية أصناف معدّلات الشبكة المتجاوبة من ‎‎.col-{breakpoint}-{modifier}-{size}‎  إلى ‎.{modifier}-{breakpoint}-{size}‎  لتبسيط أصناف الشبكة.
  • إزالة أصناف أصناف معدلات الدفع push  والسحب pull وتعويضها بأصناف الترتيب orderالقائمة على Flexbox. على سبيل المثال، بدلاً من ‎.col-8.push-4 و ‎. col-4.pull-8، عليك استخدام ‎.col-8.order-2 و ‎.col-4.order-1.
  • إضافة أصناف flexbox مساعدة لاستخدامها في نظام الشبكة ومع المكونات.

مجموعات القوائم

  • إعادة كتابة هذا المكوّن باستخدام flexbox.
  • استبدال العنصر a.list-group بالصنف الصريح ‎.list-group-item-action لتنسيق الروابط وإصدارات الأزرار في عناصر مجموعة القوائم.
  • إضافة الصنف ‎.list-group-flush لاستخدامه مع البطاقات.

النوافذ الشرطية

  • إعادة كتابة هذا المكون باستخدام flexbox.
  • نتيجة للانتقال إلى استخدام flexbox، من المحتمل أن تنكسر محاذاة أيقونات الاستبعاد في الترويسة، لأنّنا لم نعد نستخدم العناصر العائمة. إذ أنّ المحتوى العائم يأتي أولاً، وذلك على خلاف Flexbox. لذا عليك تحديث أيقونات الاستبعاد حتى تأتي بعد عناوين النافذة الشرطية لكي تتجنّب هذا الخلل.
  • إزالة الخيار remote (الذي يمكن استخدامه لتحميل المحتويات الخارجية وإدخاله تلقائيًا في النافذة الشرطية)، كما أُزيل أيضًا الحدث المقابل له loaded.bs.modal. نوصي أن تستخدم بدلاً منه قوالب من جانب العميل أو إطار عمل متخصّص في ربط البيانات أو استدعاء jQuery.load بنفسك.

عناصر التنقل Navs

  • إعادة كتابة هذا المكوّن باستخدام flexbox.
  • إزالة جميع المحدّدات <  بُغية تبسيط التنسيق عبر الأصناف غير المتداخلة.
  • لقد أصبحنا نستخدم أصناف منفصلة لعناصر ‎.nav و ‎.nav-item و ‎.nav-item بدلاً  من محدّدات HTML الخاصة من قبيل ‎.nav > li > a، وهذا يجعل ترميز HTML أكثر مرونة مع تسهيل إمكانية التوسيع.

شرائط التنقل Navbar

لقد أعدنا كتابة شرائط التنقل بالكامل باستخدام flexbox، مع تحسين دعم المحاذاة والتجاوب والتخصيص.

  • تُطبَّق سلوكيات شرائط التنقل المتجاوبة على الصنف ‎.navbar عبر الصنف الإجباري ‎.navbar-expand- {breakpoint}‎ حيث تريد أن يُطوى شريط التنقل. في السابق كان هذا ممكنا عبر تعديل أحد متغيرات Less، لذا كان يتطلب إعادة التصريف.
  • أصبحت ‎.navbar-default حاليا ‎.navbar-light، إلا أنّ ‎.navbar-dark ما تزال كما هي. لا بد من إضافة أحدهما إلى أيّ شريط التنقل. لكن اعلم أنّ هذه الأصناف لم تعد تعيّن ألوان الخلفية؛ وإنّما تؤثّر على اللون فقط.
  • تتطلب شرائط التنقل الآن إضافة الخلفية. اختر ما تشاء من ألوان الخلفية عبر أدوات الخلفية (‎.bg-*‎)، أو اختر واحدًا مخصّصا عبر أصناف  light/inverse.
  • نتيجة استخدام Flexbox، يمكن لشرائط التنقل الآن استخدام أدوات Flexbox لتسهيل خيارات المحاذاة.
  • لقد غيرنا ‎.navbar-toggle إلى ‎.navbar-toggler، وأصبح لها أنماط تنسيق ووسوم مختلفة (لم تعد هناك 3 عناصر من <span>).
  • إزالة الصنف ‎.navbar-form بالكامل. إذ لم يعد ضروريًا. بدلاً من ذلك، ما عليك سوى استخدام ‎.form-inline وتطبيق أدوات الهامش عند الضرورة.
  • لم تعد شرائط التنقل تتضمن margin-bottom أو  border-radius ابتدائيًا. استخدم الأدوات المساعدة وفق ما تمليه الضرورة.
  • تمّ تحديث جميع الأمثلة التي تتضمن أشرطة التنقل لتضمين الترميز جديد.

ترقيم الصفحات

  • إعادة كتابة هذا المكوّن باستخدام flexbox.
  • لقد أصبحت الأصناف الصريحة (‎.page-item و ‎.page-link) ضرورية الآن في العناصر الموجود داخل ‎.pagination
  • إزالة المكوّن ‎.pager إزالة كاملة، إذ لم تكن إلا أزرارًا بدون خلفية مخصصة.

عناصر التنقّل Breadcrumb

  • لقد أصبح من الضروري استخدام الصنف ‎.breadcrumb-item صراحة في كل العناصر المُحتواة في ‎.breadcrumbs

اللاصقات والشارات

  • تجميع ‎.label و ‎.badge لتمييزها عن عناصر <label> وتبسيط المكونات ذات الصلة.
  • إضافة ‎.badge-pill كمُعدِّل لمظهر الأقراص المستديرة.
  • لم تعد الشارات عائمة تلقائيًا في مجموعات القوائم والمكونات الأخرى. إن أردت ذلك عليك استخدام الأصناف المساعدة.
  • إزالة ‎.badge-default وإضافة ‎.badge-secondary لمطابقة أصناف التعديل الخاصة بالمكونات المستخدمة في المواضع الأخرى.

اللوحات والصور المصغرة والجدران

تم إزالتها بالكامل وتعويضها بمكون البطاقة الجديد.

اللوحات

  • أعدنا بناء العناصر من ‎.panel إلى ‎.card باستخدام flexbox.
  • أزلنا ‎.panel-default الافتراضي ولم نعوضها.
  • أزلنا كذلك ‎.panel-group ولم نعوضها. أما ‎.car-group فليست بديلاً لها، فهي مختلفة.
  • تغيير ‎.panel-heading إلى ‎.‎card-header
  • تغيير ‎.panel-title إلى ‎.card-title. بناءً على المظهر الذي تريد تصميمه، قد ترغب أيضًا في استخدام عناصر أو أصناف العناوين (على سبيل المثال، ‎<h3>، .h3) أو العناصر أو الأصناف الغليظة (مثل <strong>، <b> أو ‎.font-weight-bold ). لاحظ أن ‎.card-title تنتج مظهرًا مختلفًا عن ‎.panel-title رغم تماثل الأسماء
  • تغيير ‎.panel-body إلى ‎.card-body
  • تغيير ‎.panel-footer إلى ‎.card-footer
  • إزالة ‎.panel-basic و ‎.panel-Success و ‎.panel-info و ‎.panel-warning و ‎.panel-risk وتعويضها بالأصناف ‎.bg-‎ و ‎. text-‎ و ‎.border المُنشأة من قاموس Sass المُسمّى ‎$theme-colors.

شريط التقدم

  • تعويض الأصناف السياقية ‎.progress-bar-*‎ السياقية بالأصناف ‎.bg-*‎.استخدم مثلًا ‎class="progress-bar bg-danger"‎ بدلا من class="progress-bar progress-bar-danger"‎
  • تبديل ‎.active في شرائط التقدم المتحركة بالصنف ‎.progress-bar-animated.

الدوار Carousel

  • مراجعة المكوّن بالكامل لتبسيط التصميم والتنسيق. أصبح عدد الأنماط التي يمكنك إعادة كتابتها أقل، علاوة على إضافة مؤشرات وأيقونات جديدة.
  • ألغينا التداخل في جميع أنماط CSS وأعدنا تسميتها، وقد أصبحت كل الأصناف مسبوقة بـ. carousel-‎.
    • بالنسبة لعناصر الدوار ‎.next و prev. و ‎.left  و ‎‎. right أصبحت الآن ‎. carousel-item-next و ‎.carousel-item-prev و ‎.carousel-item-left و ‎.carousel-item-right.
    • كما أصبحت ‎.item الآن ‎.carousel-item.
    • بالنسبة لعناصر التحكم prev/next ، أصبحت ‎.carcarel-control.right و ‎.carousel-control.left الآن ‎.carousel-control-next و ‎.carousel-control-prev، مما يعني أنها لم تعد تتطلب صنفا أبًا معيّنا.
  • إزالة جميع الأنماط المتجاوبة، والإحالة إلى الأدوات المساعدة (على سبيل المثال، عرض اللاصقات التوضيحية في إطارات عرض معينة) والأنماط المخصصة حسب الحاجة.
  • إزالة تجاوز (overrides) الصور  في عناصر الدوار، عليك أن تستخدم بدلها الأدوات المساعدة.
  • تعديل مثاال الدوار ليتضمّن الترميز والأنماط الجديدة.

الجداول

  • إزالة دعم الجداول المتداخلة المُنسّقة. أصبحت جميع أنماط الجدول موروثة الآن في الإصدار 4 لتسهيل كتابة المحددات.
  • إضافة الجداول المعكوسة.

الأدوات المساعدة

  • Display و hidden وغيرها:
    • جعل أدوات العرض متجاوبة (مثل d-none و d-{sm,md,lg,xl}-none).
    • إزالة الأصناف ‎.hidden-*‎ من الأدوات المساعدة وتعويضها بأدوات عرض جديدة. على سبيل المثال، بدلاً من ‎.hidden-sm-up، استخدم ‎.d-sm-none. أعيدت تسمية أدوات ‎.hidden-print لاستخدام نظام التسمية المُتّبع في أدوات العرض. يمكنك الاطلاع على مزيد من المعلومات ضمن قسم الأدوات المساعدة المتجاوبة أدناه.
    • إضافة الأصناف ‎.float-{sm,md,lg,xl}-{left,right,none}‎ لاستخدامها مع العناصر العائمة المتجاوبة، كما أزيلت ‎.pull-left و ‎.pull-right لأنها مكررة وتشبه ‎.float-left و ‎.float-right.
  • النوع:
    • إضافة تنوعات متجاوبة إلى أصناف محاذاة النص  ‎.text-{sm,md,lg,xl}-{left,center,right}‎
  • المحاذاة والتباعد:
    • إضافة أدوات متجاوبة جديدة للهوامش والحواشي لجميع الجوانب، بالإضافة إلى بعض الاختصارات الرأسية والأفقية.
    • إضافة العديد من أدوات flexbox .
    • إزالة ‎.center-block  وتعويضها بالصنف لجديد ‎.mx-auto
  • تحديث Clearfix لإزالة دعم الإصدارات الأقدم من المتصفحات.

مخاليط سوابق المتصفحات

أزيلت مخاليط بادئات المتصفحات الخاصة بالإصدار 3 من Bootstrap، إذ أصبحت مُتجاوزة ابتداء من الإصدار 3.2.0، وأزيلت في الإصدار 4. ونظرًا لأننا نستخدم Autoprefixer، فلم تعد ضرورية.

لقد أزلنا المخاليط التالية: animation و animation-delay و animation-direction و animation-duration و animation-fill-mode و animation-iteration-count و animation-name و animation-timing-function و backface-visibility و box-sizing و content-columns و hyphens و opacity و perspective و perspective-origin و rotate و rotateX و rotateY و scale و scaleX و scaleY و skew و transform-origin و transition-delay و transition-duration و transition-property و transition-timing-function و transition-transform و translate و translate3d و user-select

التوثيق

شهد التوثيق تحديثا كذلك. وهذه أهم الترقيات:

  • ما زلنا نستخدم Jekyll، ولكن أصبحنا نستخدم ملحقات أخرى علاوة عليها:
    • يُستخدم bugify.rb لسرد الإدخالات بكفاءة في صفحة أخطاء المتصفح.
    • example.rb هو فرع مُخصّص من الملحقة highlight.rb الافتراضية، إذ يسهل معالجة شفرات الأمثلة.
    • callout.rb هو فرع مخصصة مماثل، ولكنّه مصمّم ليناسب التوثيق خاصتنا.
    • يستخدم jekyll-toc لإنشاء جداول المحتويات.
  • أعيد كتابة كل محتوى التوثيق بترميز Markdown (بدلاً من HTML) لتسهيل تحريره وتعديله.
  • أعيد تنظيم الصفحات لتبسيط المحتوى، وتحسين تنظيم التوثيق.
  • انتقلنا من CSS العادي إلى SCSS للاستفادة من المتغيرات والمخاليط وغيرهما من الميزات.

الأدوات المساعدة المتجاوبة

إزالة جميع المتغيرات ‎@screen-‎ من الإصدار 4.0.0. استخدم بدلها  media-breakpoint-up()‎ أو media-breakpoint-down()‎ أو المخاليط media-breakpoint-only()‎ أو القاموس ‎$grid-breakpoints.

لقد أزلنا أصناف الأدوات المساعدة المتجاوبة إلى حد كبير وعوضناها بأدوات عرض صريحة.

  • إزالة الصنفين ‎.hidden و ‎.show بسبب تعارضهما مع التابعين ‎$(...).hide()‎ و ‎$(...).show()‎ في jQuery. بدل استخدامها، حاول تبديل الخاصية [hidden] أو استخدم الأنماط المضمنة مثل "‎‎‎‎‎‎‎‎‎style = "display: none;‎ و style="display: block;"‎
  • إزالة جميع أصناف ‎.hidden-‎ باستثناء أدوات الطباعة المساعدة، والتي أعيد تسميتها.
    • أزيلت هذه الأصناف من الإصدار 3:  ‎.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • أزيلت هذه الأصناف من الإصدار 4: hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • لم تعد أدوات الطباعة تبدأ بـ ‎.hidden-‎ أو ‎.visible-‎ ولكن بـ ‎.d-print-‎.
    • الأسماء القديمة: ‎.visible-print-block و ‎.visible-print-inline و‎ .visible-print-inline-block و‎ .hidden-print
    • أصناف جديدة: ‎.d-print-block و ‎.d-print-inline و ‎.d-print-inline-block و ‎.d-print-none

بدلاً من استخدام الأصناف‎.visible-*‎ صراحة، يمكنك جعل عنصر ما مرئيًا بعدم إخفائه عند حجم معيّن من الشاشة. يمكنك الجمع بين أصناف ‎.d-*-none وأحد أصناف ‎.d-*-block لتضمن ألا يظهر العنصر إلا في مجال معيّن من أحجام الشاشة (على سبيل المثال، إن استخدمت الصنف ‎.d-none.d-md-block.d-xl-none، فلن يظهر العنصر إلا في الأجهزة المتوسطة والكبيرة).

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

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=Bootstrap/migration&oldid=29774»