Source

الترحيل إلى الإصدار 4

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

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

بالانتقال من Beta 3 إلى إصدارنا الثابت v4.0 ، لا توجد تغييرات كسر ، ولكن هناك بعض التغييرات الملحوظة.

طباعة

  • أدوات طباعة مكسورة ثابتة. في السابق ، كان استخدام .d-print-*فئة ما يلغي بشكل غير متوقع أي .d-*فئة أخرى. الآن ، تتطابق مع أدوات العرض الأخرى الخاصة بنا وتنطبق فقط على تلك الوسائط ( @media print).

  • توسيع أدوات عرض الطباعة المتاحة لتلائم الأدوات الأخرى. بيتا 3 والأقدم فقط كان لديهم blockو inline-blockو inlineو none. تمت إضافة مستقر v4 flexو inline-flexو tableو table-rowو table-cell.

  • تم إصلاح عرض معاينة الطباعة عبر المستعرضات باستخدام أنماط طباعة جديدة يتم تحديدها @page size.

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

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

متفرقات

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

نماذج

  • أعد كتابة كل من مربعات الاختيار وأجهزة الراديو المخصصة والافتراضية. الآن ، كلاهما له بنية HTML متطابقة (خارجي <div>مع شقيق <input>و <label>) ونفس أنماط التخطيط (افتراضي مكدس ، مضمّن مع فئة معدّل). يتيح لنا ذلك تصميم الملصق بناءً على حالة الإدخال ، وتبسيط دعم disabledالسمة (التي كانت تتطلب سابقًا فئة أصل) ودعم التحقق من صحة النموذج بشكل أفضل.

    كجزء من هذا ، قمنا بتغيير CSS لإدارة العديد من background-images في مربعات الاختيار وأجهزة الراديو ذات النماذج المخصصة. في السابق ، .custom-control-indicatorكان للعنصر الذي تمت إزالته الآن لون الخلفية والتدرج وأيقونة SVG. يعني تخصيص تدرج الخلفية استبدال كل هؤلاء في كل مرة تحتاج فيها إلى تغيير واحد فقط. الآن ، لدينا .custom-control-label::beforeللتعبئة والتدرج .custom-control-label::afterويتعامل مع الرمز.

    لعمل فحص مخصص مضمنة ، أضف .custom-control-inline.

  • المحدِّد المحدث لمجموعات الأزرار القائمة على الإدخال. بدلاً من [data-toggle="buttons"] { }الأسلوب والسلوك ، نستخدم dataالسمة فقط لسلوكيات JS ونعتمد على .btn-group-toggleفئة جديدة للتصميم.

  • تمت إزالته .col-form-legendلصالح تحسين طفيف .col-form-label. بهذه الطريقة .col-form-label-smويمكن .col-form-label-lgاستخدامها على <legend>العناصر بكل سهولة.

  • تلقت مدخلات الملفات المخصصة تغييراً في $custom-file-textمتغير Sass الخاص بهم. لم تعد خريطة Sass متداخلة وهي الآن تشغل سلسلة واحدة فقط — Browseالزر حيث أصبح الآن العنصر الزائف الوحيد الذي تم إنشاؤه من Sass الخاص بنا. النص Choose fileيأتي الآن من .custom-file-label.

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

  • أصبحت الوظائف الإضافية لمجموعة الإدخال محددة الآن لموضعها بالنسبة إلى أحد المدخلات. لقد انسحبنا .input-group-addonمن .input-group-btnأجل فصلين جديدين ، .input-group-prependو .input-group-append. يجب أن تستخدم بشكل صريح ملحقًا أو مقدمًا الآن ، مما يبسط الكثير من CSS لدينا. داخل ملحق أو مقدمة ، ضع الأزرار الخاصة بك كما لو كانت موجودة في أي مكان آخر ، ولكن قم بلف النص .input-group-text.

  • يتم الآن دعم أنماط التحقق من الصحة ، كما هو الحال مع العديد من المدخلات (على الرغم من أنه يمكنك التحقق من صحة إدخال واحد فقط لكل مجموعة).

  • يجب أن تكون فئات التحجيم على الأصل .input-groupوليس على عناصر النموذج الفردية.

تغييرات بيتا 2

أثناء الاستخدام التجريبي ، نهدف إلى عدم إجراء تغييرات جذرية. ومع ذلك ، لا تسير الأمور دائمًا كما هو مخطط لها. فيما يلي التغييرات العاجلة التي يجب وضعها في الاعتبار عند الانتقال من Beta 1 إلى Beta 2.

كسر

  • تمت إزالة $badge-colorالمتغير وتشغيله .badge. نستخدم وظيفة تباين الألوان لاختيار a colorبناءً على the background-color، لذا فإن المتغير غير ضروري.
  • تمت إعادة تسمية grayscale()الوظيفة gray()لتجنب كسر التعارض مع grayscaleعامل تصفية CSS الأصلي.
  • تمت إعادة تسمية أنظمة .table-inverseالألوان لدينا والمستخدمة .thead-inverseفي .thead-defaultأي مكان آخر .*-dark..*-light
  • تنشئ الجداول المستجيبة الآن فئات لكل نقطة توقف للشبكة. هذا يكسر بيتا 1 في أن ما .table-responsiveكنت تستخدمه هو أشبه .table-responsive-md. يمكنك الآن استخدام .table-responsiveأو .table-responsive-{sm,md,lg,xl}حسب الحاجة.
  • تم إسقاط دعم Bower حيث تم إهمال مدير الحزم للبدائل (على سبيل المثال ، الغزل أو npm). انظر bower / bower # 2298 للحصول على التفاصيل.
  • لا يزال Bootstrap يتطلب jQuery 1.9.1 أو أعلى ، ولكن يُنصح باستخدام الإصدار 3.x نظرًا لأن المتصفحات المدعومة من الإصدار v3.x هي تلك التي يدعمها Bootstrap بالإضافة إلى الإصدار 3.x الذي يحتوي على بعض إصلاحات الأمان.
  • تمت إزالة .form-control-labelالفئة غير المستخدمة. إذا كنت قد استفدت بالفعل من هذه الفئة ، فقد كانت نسخة مكررة من .col-form-labelالفصل الذي تم توسيط a عموديًا <label>مع الإدخال المرتبط به في تخطيطات النماذج الأفقية.
  • تم تغيير ال color-yiqمن mixin الذي يتضمن colorالخاصية إلى دالة تُرجع قيمة ، مما يسمح لك باستخدامها لأي خاصية 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 هو الآن IE10 + و iOS 7+ فقط. بالنسبة للمواقع التي تحتاج إلى أي منهما ، استخدم v3.
  • تمت إضافة الدعم الرسمي لمتصفح Android v5.0 Lollipop و WebView. تظل الإصدارات السابقة من متصفح Android و WebView مدعومة بشكل غير رسمي فقط.

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

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

نظام الشبكة

  • انتقل إلى flexbox.
    • دعم إضافي لـ flexbox في الخلطات الشبكية والفئات المحددة مسبقًا.
    • كجزء من flexbox ، تم تضمين دعم لفئات المحاذاة الرأسية والأفقية.
  • تم تحديث أسماء فئة الشبكة وطبقة شبكة جديدة.
    • تمت إضافة smطبقة شبكة جديدة أدناه 768pxلمزيد من التحكم الدقيق. لدينا الآن xsو smو mdو lgو xl. هذا يعني أيضًا أن كل مستوى قد تم رفعه لمستوى واحد (لذلك .col-md-6في v3 أصبح الآن .col-lg-6في v4).
    • xsتم تعديل فئات الشبكة بحيث لا تتطلب اللاحق لتمثل بشكل أكثر دقة أنها تبدأ في تطبيق الأنماط min-width: 0وليس على قيمة بكسل محددة. بدلا من .col-xs-6ذلك الآن .col-6. تتطلب جميع طبقات الشبكة الأخرى infix (على سبيل المثال ، sm).
  • تم تحديث أحجام الشبكة والخلطات والمتغيرات.
    • تحتوي مزاريب الشبكة الآن على خريطة Sass بحيث يمكنك تحديد عروض مزراب معينة في كل نقطة توقف.
    • تم تحديث الخلطات الشبكية للاستفادة من make-col-readyمزيج الإعداد و a لتعيين make-colحجم العمود الفردي.flexmax-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) { ... }.

عناصر

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

حسب المكون

تسلط هذه القائمة الضوء على التغييرات الرئيسية حسب المكون بين v3.xx و v4.0.0.

اعادة التشغيل

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

الطباعة

  • نقل جميع .text-الأدوات المساعدة إلى _utilities.scssالملف.
  • تم إسقاطه .page-headerحيث يمكن تطبيق أنماطه عبر الأدوات المساعدة.
  • .dl-horizontalوقد انخفض. بدلاً من ذلك ، استخدم .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--prefix. ومن ثم .active، .successو .warning، .dangerو ، .infoو ، و ..table-active.table-success.table-warning.table-danger.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خلال mixin ، لذا .rowفهو مطلوب الآن لتخطيطات الشبكة الأفقية (على سبيل المثال ، <div class="form-group row">).
    • تمت إضافة .col-form-labelفئة جديدة إلى تسميات توسيط رأسية مع .form-controls.
    • تمت إضافة جديد .form-rowلتخطيطات النماذج المدمجة مع فئات الشبكة (استبدلها .rowبـ a .form-rowand go).
  • تمت إضافة دعم النماذج المخصصة (لمربعات الاختيار وأجهزة الراديو والتحديدات ومدخلات الملفات).
  • تم استبدال .has-error، .has-warningوفئات .has-successبالتحقق من صحة نموذج HTML5 عبر فئات CSS :invalidوالفئات :validالزائفة.
  • أعيدت تسميته .form-control-staticإلى .form-control-plaintext.

أزرار

  • أعيدت تسميته .btn-defaultإلى .btn-secondary.
  • أسقطت .btn-xsالفصل تمامًا كما .btn-smهو نسبيًا أصغر بكثير من v3.
  • تم إسقاط ميزة الزرbutton.js ذات الحالة الخاصة بالمكوِّن الإضافي jQuery. وهذا يشمل الطرق $().button(string)والأساليب $().button('reset'). ننصح باستخدام القليل من JavaScript المخصص بدلاً من ذلك ، والذي سيكون له ميزة التصرف بالطريقة التي تريدها بالضبط.
    • لاحظ أنه تم الاحتفاظ بالميزات الأخرى للمكوِّن الإضافي (مربعات اختيار الأزرار ، وأزرار الراديو ، وأزرار التبديل المفرد) في الإصدار 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>s أو <ul>s الآن.
  • إعادة تصميم أنماط قائمة منسدلة وترميز لتوفير دعم سهل <a>ومضمّن <button>لعناصر القائمة المنسدلة.
  • أعيدت تسميته .dividerإلى .dropdown-divider.
  • تتطلب عناصر القائمة المنسدلة الآن .dropdown-item.
  • لم تعد تبديل القائمة المنسدلة تتطلب وضوحًا <span class="caret"></span>؛ يتم توفير هذا الآن تلقائيًا عبر CSS's ::afteron .dropdown-toggle.

نظام الشبكة

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

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

  • مكون إعادة الكتابة مع flexbox.
  • تم استبداله a.list-group-itemبفئة صريحة ، .list-group-item-actionلتصميم إصدارات الارتباط والأزرار لعناصر مجموعة القائمة.
  • فئة مضافة .list-group-flushللاستخدام مع البطاقات.
  • مكون إعادة الكتابة مع flexbox.
  • بالنظر إلى الانتقال إلى flexbox ، من المحتمل أن تكون محاذاة أيقونات الرفض في الرأس معطلة لأننا لم نعد نستخدم العوامات. يأتي المحتوى العائم أولاً ، ولكن مع flexbox لم يعد الأمر كذلك. قم بتحديث أيقونات الرفض لتأتي بعد العناوين المشروطة لإصلاحها.
  • تمت إزالة remoteالخيار (الذي يمكن استخدامه لتحميل المحتوى الخارجي وحقنه تلقائيًا في نموذج) loaded.bs.modalوالحدث المقابل. نوصي بدلاً من ذلك باستخدام قوالب من جانب العميل أو إطار عمل لربط البيانات ، أو استدعاء jQuery.load نفسك.
  • مكون إعادة الكتابة مع flexbox.
  • تم إسقاط جميع >المحددات تقريبًا للحصول على تصميم أبسط عبر فئات غير متداخلة.
  • بدلاً من المحددات الخاصة بـ HTML مثل .nav > li > a، نستخدم فئات منفصلة لـ .navs و s .nav-itemو .nav-links. هذا يجعل HTML الخاص بك أكثر مرونة مع زيادة قابلية التوسعة.

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

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

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

  • مكون إعادة الكتابة مع flexbox.
  • مطلوب الآن فئات صريحة ( .page-item، .page-link) على أحفاد .paginations
  • أسقط .pagerالمكون بالكامل لأنه كان أكثر بقليل من أزرار مخطط تفصيلي مخصصة.
  • فئة صريحة ، .breadcrumb-itemمطلوب الآن على أحفاد .breadcrumbs

تسميات وشارات

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

اللوحات والصور المصغرة والآبار

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

اللوحات

  • .panelإلى .card، تم إنشاؤه الآن باستخدام flexbox.
  • .panel-defaultتمت إزالته ولا بديل.
  • .panel-groupتمت إزالته ولا بديل. .card-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-primary، .panel-success، .panel-info، .panel-warning، .panel-dangerوتم إسقاطها لـ .bg-، .text-والمرافق التي تم .borderإنشاؤها من $theme-colorsخريطة Sass الخاصة بنا.

تقدم

  • .progress-bar-*تم استبدال الفئات السياقية بأدوات .bg-*مساعدة. على سبيل المثال ، class="progress-bar progress-bar-danger"يصبح class="progress-bar bg-danger".
  • تم استبدال .activeأشرطة التقدم المتحركة بـ .progress-bar-animated.
  • أصلح المكون بأكمله لتبسيط التصميم والتصميم. لدينا أنماط أقل يمكنك تجاوزها ، ومؤشرات جديدة ، وأيقونات جديدة.
  • تم إلغاء تداخل كل CSS وإعادة تسميته ، مما يضمن أن كل فئة مسبوقة بـ .carousel-.
    • بالنسبة لعناصر الرف الدائري ، .nextو .prevو .leftو و .rightare now .carousel-item-nextو .carousel-item-prevو .carousel-item-leftو .carousel-item-right.
    • .itemهو أيضا الآن .carousel-item.
    • بالنسبة لعناصر التحكم prev / next ، .carousel-control.rightوهي .carousel-control.leftالآن .carousel-control-nextو .carousel-control-prev، مما يعني أنها لم تعد تتطلب فئة أساسية محددة.
  • تمت إزالة جميع الأنماط سريعة الاستجابة ، والإرجاء إلى الأدوات المساعدة (على سبيل المثال ، عرض التسميات التوضيحية على إطارات عرض معينة) والأنماط المخصصة حسب الحاجة.
  • تمت إزالة تجاوزات الصور للصور الموجودة في عناصر الرف الدائري ، مع الإرجاء إلى الأدوات المساعدة.
  • تم تعديل مثال الرف الدائري ليشمل الترميز والأنماط الجديدة.

الجداول

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

خدمات

  • عرض ، مخفي ، والمزيد:
    • جعل أدوات العرض تستجيب (على سبيل المثال ، .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}.
  • المحاذاة والتباعد:
  • تم تحديث Clearfix لإسقاط الدعم لإصدارات المستعرض الأقدم.

مزيج بادئة البائع

تمت إزالة مزيج بادئة بائع Bootstrap 3 ، التي تم إهمالها في الإصدار 3.2.0 ، في Bootstrap 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،translate3duser-select

توثيق

تلقت وثائقنا ترقية في جميع المجالات أيضًا. هنا هو أدنى مستوى:

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

المرافق سريعة الاستجابة

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

تمت إزالة فئات المرافق المتجاوبة لدينا إلى حد كبير لصالح displayالمرافق الصريحة.

  • تمت إزالة الفئات .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 تعني أنك ستحتاج إلى زيادة نقطة توقف واحدة لتحقيق نفس النتائج. لا تحاول فئات الأداة المساعدة الجديدة المستجيبة استيعاب الحالات الأقل شيوعًا حيث لا يمكن التعبير عن رؤية عنصر ما كنطاق واحد متجاور من أحجام منفذ العرض ؛ ستحتاج بدلاً من ذلك إلى استخدام CSS مخصص في مثل هذه الحالات.