عرض مصدر Bootstrap/migration

<noinclude>{{DISPLAYTITLE: الهجرة إلى الإصدار 4 من Bootstrap }}</noinclude>
الإصدار الرابع من Bootstrap  هو إعادة كتابة جذرية للمشروع بأكمله. سنلخّص في هذه الصفحة أبرز التغييرات التي أتى بها هذا الإصدار، ثمّ سنسردا التغييرات بحسب كل مكونة على حدة.

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

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

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

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

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

* تغيير متغير عناصر إدخال الملفات المخصصة <code>‎$custom-file-text</code>. فلم يعد عبارة عن قاموس Sass متشعب، وهو الآن يعمل حصرا على سلسلة نصية واحدة فقط — زر التصفح <code>Browse</code> الذي أصبح الآن العنصر الزائف الوحيد الذي يُنشأ عبر Sass. يأتي نص اختيار الملف <code>Choose file</code> من اللاصقة <code>‎.custom-file-label</code>.

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

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

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

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

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

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

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

=== المكونات ===
* '''إزالة الألواح (panels) والصور المصغرة والجدران (wells)''' وتعويضها بمكون شامل جديد، وهو البطاقات.
* '''إزالة أيقونات الخطوط Glyphicons.''' إذا كنت بحاجة إلى استخدام الأيقونات، فهذه بعض الخيارات المتاحة:
** الإصدار upstream من [https://www.glyphicons.com/ Glyphicons]
** [https://octicons.github.com/ Octicons]
** [https://fontawesome.com/ Font Awesome]
** راجع [[Bootstrap/extend|صفحة التوسيع]] للحصول على قائمة أوسع بالبدائل.
* '''إزالة الملحقة Affix jQuery.'''
** نوصي باستخدام <code>position: sticky</code> بدلاً من ذلك. راجع [https://html5please.com/#sticky هذه الصفحة] لمزيد من التفاصيل وبعض التوصيات الخاصة بالملء. أحد الاقتراحات الممكنة هو استخدام قاعدة <code>‎@supports</code> لتقديمها (على سبيل المثال <code>‎@supports (position: sticky) { ... }‎)</code>)
** إذا كنت تستخدم Affix لتطبيق أنماط إضافية غير موضعية، فقد لا يناسبك الملء المتعدد polyfill. أحد الخيارات المتاحة في مثل هذه الحالات هو استخدام المكتبة [https://github.com/acch/scrollpos-styler ScrollPos-Styler].
* '''إزالة مكوّن pager'''، إذ أنّه كان مجرد زرّ مخصّص.
* '''إعادة تصميم جميع المكونات''' تقريبًا بُغية الإكثار من استخدام محددات الأصناف غير المتداخلة بدلاً من استخدام محدّدات الأبناء المخصّصة للغاية.

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

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

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

=== صور ===
* إعادة تسمية <code>‎.img-responsive</code> إلى <code>‎.img-fluid</code>.
* إعادة تسمية <code>‎.img-rounded</code> تقريب إلى <code>‎.rounded</code>
* إعادة تسمية <code>‎.img-circle</code> إلى <code>‎.rounded-circle</code>

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

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

=== الأزرار ===
* إعادة تسمية <code>‎.btn-default</code> إلى<code>‎.btn-secondary</code>.
* إزالة الصنف <code>‎.btn-xs</code> تمامًا، لأنّ <code>‎.btn-sm</code> أصغر نسبيًا من الإصدار الثالث.
* إزالة [https://getbootstrap.com/docs/3.3/javascript/#buttons-stateful ميزة زر الحالة] لملحقة button.js jQuery. يشمل هذا التابعين <code>‎$().button(string)‎</code> و <code>‎$().button('reset')‎</code>. ننصح باستخدام جزء مخصّص صغير من جافا سكربت بدلاً من ذلك للحصول على تحكم أكبر.
** لاحظ أنّه احتفظنا بميزات الملحقة الأخرى (مثل مربعات التأشير وأزرار الانتقاء، وأزرار التبديل المفردة) في الإصدار 4.
* تغيير <code>[disabled]</code> إلى <code>‎:disabled</code> في الأزرار لأنّ الإصدارات IE9 +‎ تدعم <code>‎:disabled</code>. ما تزال <code>fieldset[disabled]‎</code> ضرورية مع ذلك، لأن [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility مجموعات الحقول المعطّلة الأصلية معطوبة في IE11].

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

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

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

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

=== النوافذ الشرطية ===
* إعادة كتابة هذا المكون باستخدام flexbox.
* نتيجة للانتقال إلى استخدام flexbox، من المحتمل أن تنكسر محاذاة أيقونات الاستبعاد في الترويسة، لأنّنا لم نعد نستخدم العناصر العائمة. إذ أنّ المحتوى العائم يأتي أولاً، وذلك على خلاف Flexbox. لذا عليك تحديث أيقونات الاستبعاد حتى تأتي بعد عناوين النافذة الشرطية لكي تتجنّب هذا الخلل.
* إزالة الخيار <code>remote</code> (الذي يمكن استخدامه لتحميل المحتويات الخارجية وإدخاله تلقائيًا في النافذة الشرطية)، كما أُزيل أيضًا الحدث المقابل له <code>loaded.bs.modal</code>. نوصي أن تستخدم بدلاً منه قوالب من جانب العميل أو إطار عمل متخصّص في ربط البيانات أو استدعاء [https://api.jquery.com/load/ jQuery.load] بنفسك.

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

=== شرائط التنقل Navbar ===
لقد أعدنا كتابة [[Bootstrap/navbar|شرائط التنقل]] بالكامل باستخدام flexbox، مع تحسين دعم المحاذاة والتجاوب والتخصيص.
* تُطبَّق سلوكيات شرائط التنقل المتجاوبة على الصنف <code>‎.navbar</code> عبر الصنف '''الإجباري''' ‎<code>.navbar-expand- {breakpoint}‎</code> حيث تريد أن يُطوى شريط التنقل. في السابق كان هذا ممكنا عبر تعديل أحد متغيرات Less، لذا كان يتطلب إعادة التصريف.
* أصبحت <code>‎.navbar-default</code> حاليا ‎<code>.navbar-light</code>، إلا أنّ <code>‎.navbar-dark</code> ما تزال كما هي. '''لا بد من إضافة أحدهما إلى أيّ شريط التنقل'''. لكن اعلم أنّ هذه الأصناف لم تعد تعيّن ألوان الخلفية؛ وإنّما تؤثّر على اللون فقط.
* تتطلب شرائط التنقل الآن إضافة الخلفية. اختر ما تشاء من ألوان الخلفية عبر أدوات الخلفية (<code>‎.bg-*</code>‎)، أو [[Bootstrap/navbar#.D9.85.D9.8F.D8.AE.D8.B7.D9.8E.D9.91.D8.B7.D8.A7.D8.AA .D8.A7.D9.84.D8.A3.D9.84.D9.88.D8.A7.D9.86|اختر واحدًا مخصّصا عبر أصناف  light/inverse]].
* نتيجة استخدام Flexbox، يمكن لشرائط التنقل الآن استخدام أدوات Flexbox لتسهيل خيارات المحاذاة.
* لقد غيرنا <code>‎.navbar-toggle</code> إلى <code>‎.navbar-toggler،</code> وأصبح لها أنماط تنسيق ووسوم مختلفة (لم تعد هناك 3 عناصر من <code><nowiki><span></nowiki></code>).
* إزالة الصنف <code>‎.navbar-form</code> بالكامل. إذ لم يعد ضروريًا. بدلاً من ذلك، ما عليك سوى استخدام <code>‎.form-inline</code> وتطبيق أدوات الهامش عند الضرورة.
* لم تعد شرائط التنقل تتضمن <code>margin-bottom</code> أو  <code>border-radius</code> ابتدائيًا. استخدم الأدوات المساعدة وفق ما تمليه الضرورة.
* تمّ تحديث جميع الأمثلة التي تتضمن أشرطة التنقل لتضمين الترميز جديد.

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

=== عناصر التنقّل Breadcrumb ===
* لقد أصبح من الضروري استخدام الصنف <code>‎.breadcrumb-item</code> صراحة في كل العناصر المُحتواة في <code>‎.breadcrumbs</code>

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

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

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

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

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

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

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

=== مخاليط سوابق المتصفحات ===
أزيلت مخاليط [https://www.lifewire.com/css-vendor-prefixes-3466867 بادئات المتصفحات] الخاصة بالإصدار 3 من Bootstrap، إذ أصبحت مُتجاوزة ابتداء من الإصدار 3.2.0، وأزيلت في الإصدار 4. ونظرًا لأننا نستخدم [https://github.com/postcss/autoprefixer Autoprefixer]، فلم تعد ضرورية.

لقد أزلنا المخاليط التالية: <code>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</code>

== التوثيق ==
شهد التوثيق تحديثا كذلك. وهذه أهم الترقيات:
* ما زلنا نستخدم Jekyll، ولكن أصبحنا نستخدم ملحقات أخرى علاوة عليها:
** يُستخدم <code>bugify.rb</code> لسرد الإدخالات بكفاءة في صفحة [https://getbootstrap.com/docs/4.5/browser-bugs/ أخطاء المتصفح].
** <code>example.rb</code> هو فرع مُخصّص من الملحقة <code>highlight.rb</code> الافتراضية، إذ يسهل معالجة شفرات الأمثلة.
** <code>callout.rb</code> هو فرع مخصصة مماثل، ولكنّه مصمّم ليناسب التوثيق خاصتنا.
** يستخدم [https://github.com/toshimaru/jekyll-toc jekyll-toc] لإنشاء جداول المحتويات.
* أعيد كتابة كل محتوى التوثيق بترميز Markdown (بدلاً من HTML) لتسهيل تحريره وتعديله.
* أعيد تنظيم الصفحات لتبسيط المحتوى، وتحسين تنظيم التوثيق.
* انتقلنا من CSS العادي إلى SCSS للاستفادة من المتغيرات والمخاليط وغيرهما من الميزات.

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

لقد أزلنا أصناف الأدوات المساعدة المتجاوبة إلى حد كبير وعوضناها بأدوات عرض صريحة.
* إزالة الصنفين <code>‎.hidden</code> و ‎<code>.show</code> بسبب تعارضهما مع التابعين <code>‎$(...).hide()‎</code> و ‎<code>$(...).show()</code>‎ في jQuery. بدل استخدامها، حاول تبديل الخاصية <code>[hidden]</code> أو استخدم الأنماط المضمنة مثل <code>"‎‎‎</code>‎‎‎‎‎‎<code>style = "display: none;‎</code> و <code>style="display: block;"‎</code>
* إزالة جميع أصناف <code>‎.hidden-</code>‎ باستثناء أدوات الطباعة المساعدة، والتي أعيد تسميتها.
** أزيلت هذه الأصناف من الإصدار 3:  ‎<code>.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</code>
** أزيلت هذه الأصناف من الإصدار 4: <code>hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down</code>
* لم تعد أدوات الطباعة تبدأ بـ <code>‎.hidden-</code>‎ أو <code>‎.visible-‎</code> ولكن بـ <code>‎.d-print-‎</code>.
** الأسماء القديمة: <code>‎.visible-print-block</code> و <code>‎.visible-print-inline</code> و‎ <code>.visible-print-inline-block</code> و<code>‎ .hidden-print</code>
** أصناف جديدة: <code>‎.d-print-block</code> و  <code>‎.d-print-inline</code> و  <code>‎.d-print-inline-block</code> و <code>‎.d-print-none</code>
بدلاً من استخدام الأصناف<code>‎.visible-*</code>‎ صراحة، يمكنك جعل عنصر ما مرئيًا بعدم إخفائه عند حجم معيّن من الشاشة. يمكنك الجمع بين أصناف <code>‎.d-*-none</code> وأحد أصناف <code>‎.d-*-block</code> لتضمن ألا يظهر العنصر إلا في مجال معيّن من أحجام الشاشة (على سبيل المثال، إن استخدمت الصنف <code>‎.d-none.d-md-block.d-xl-none</code>، فلن يظهر العنصر إلا في الأجهزة المتوسطة والكبيرة).

لاحظ أنّ التغييرات على نقاط الشبكة الحدية في الإصدار 4 تستوجب زيادة مستوى الطبقة في النقاط الحدية لتحقيق النتائج نفسها. لا تحاول أصناف الأدوات المساعدة المتجاوبة الجديدة استيعاب الحالات غير الشائعة التي يتعذّر فيها التعبير عن منظورية (visibility) العنصر كمجال واحد متجاور من أحجام إطارات العرض؛ إن أردت تحقيق ذلك عليك استخدام أنماط CSS مخصصة.
== مصادر ==
* [https://getbootstrap.com/docs/4.5/migration/ صفحة migration في توثيق Bootstrap].
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]