مهاجرت به نسخه 4

Bootstrap 4 بازنویسی اصلی کل پروژه است. قابل توجه ترین تغییرات در زیر خلاصه شده است و به دنبال آن تغییرات خاص تر در اجزای مربوطه آمده است.

تغییرات پایدار

با انتقال از نسخه بتا 3 به نسخه پایدار v4.x، هیچ تغییری وجود ندارد، اما تغییرات قابل توجهی وجود دارد.

چاپ

• تعمیر ابزارهای چاپ شکسته قبلاً، استفاده از یک .d-print-*کلاس به طور غیرمنتظره ای هر .d-*کلاس دیگری را رد می کرد. اکنون، آنها با سایر ابزارهای نمایشگر ما مطابقت دارند و فقط برای آن رسانه اعمال می شوند ( @media print).

• ابزارهای نمایش چاپ موجود را برای مطابقت با سایر ابزارها گسترش داد. نسخه بتا 3 و بالاتر فقط block, inline-block, inline, و none. Stable v4 اضافه flexشد inline-flex،،،،، tableو table-row.table-cell

• رندر پیش‌نمایش چاپ در مرورگرها با سبک‌های چاپ جدید که مشخص می‌کنند، ثابت @page sizeشد.

تغییرات بتا 3

در حالی که بتا 2 شاهد بخش عمده ای از تغییرات اساسی ما در مرحله بتا بود، اما ما هنوز چند مورد را داریم که باید در نسخه بتا 3 به آنها پرداخته شود. اگر از نسخه بتا 2 یا هر نسخه قدیمی بوت استرپ به نسخه بتا 3 بروزرسانی می کنید، این تغییرات اعمال می شود.

متفرقه

• $thumbnail-transitionمتغیر استفاده نشده را حذف کرد . ما در حال انتقال چیزی نبودیم، بنابراین فقط کد اضافی بود.
• بسته npm دیگر شامل هیچ فایلی غیر از فایل های منبع و dist ما نمی شود. اگر به آنها تکیه می‌کردید و اسکریپت‌های ما را از طریق node_modulesپوشه اجرا می‌کردید، باید گردش کار خود را تطبیق دهید.

تشکیل می دهد

• هر دو چک باکس سفارشی و پیش فرض و رادیو را بازنویسی کرد. اکنون، هر دو دارای ساختار HTML منطبق (خارجی <div>با خواهر و برادر <input>و <label>) و سبک‌های چیدمان یکسان (پیش‌فرض پشته‌ای، درون خط با کلاس اصلاح‌کننده) هستند. این به ما امکان می دهد برچسب را بر اساس وضعیت ورودی استایل دهیم، پشتیبانی از disabledویژگی را ساده می کند (که قبلاً به یک کلاس والد نیاز داشت) و اعتبارسنجی فرم خود را بهتر پشتیبانی می کند.

  به عنوان بخشی از این، ما CSS را برای مدیریت چندین background-images در چک باکس‌های فرم سفارشی و رادیوها تغییر داده‌ایم. قبلاً، .custom-control-indicatorعنصر حذف شده دارای رنگ پس‌زمینه، شیب و نماد SVG بود. سفارشی کردن گرادیان پس‌زمینه به معنای جایگزینی همه آن‌ها هر بار که لازم بود فقط یکی را تغییر دهید. در حال حاضر، ما .custom-control-label::beforeبرای fill و گرادیان و .custom-control-label::afterکنترل آیکون داریم.

  برای ایجاد یک بررسی سفارشی به صورت درون خطی، اضافه کنید .custom-control-inline.

• انتخابگر به روز شده برای گروه های دکمه های مبتنی بر ورودی. به جای [data-toggle="buttons"] { }برای سبک و رفتار، از ویژگی فقط برای رفتارهای JS استفاده می‌کنیم و برای استایل‌سازی به کلاس dataجدیدی تکیه می‌کنیم..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و . اکنون باید صراحتاً از یک ضمیمه یا یک prepend استفاده کنید که بیشتر CSS ما را ساده می کند. در یک ضمیمه یا پیش‌بند، دکمه‌های خود را همانطور که در هر جای دیگری وجود دارند قرار دهید، اما متن را در آن قرار دهید ..input-group-btn.input-group-prepend.input-group-append.input-group-text

• اکنون سبک های اعتبار سنجی مانند ورودی های متعدد پشتیبانی می شوند (اگرچه شما فقط می توانید یک ورودی را در هر گروه تأیید کنید).

• کلاس‌های اندازه‌گیری باید بر روی والد باشد .input-groupو نه عناصر فرم فردی.

بتا 2 تغییر می کند

در حالی که در نسخه بتا هستیم، هدف ما این است که هیچ تغییری نداشته باشیم. با این حال، همیشه همه چیز طبق برنامه پیش نمی رود. در زیر تغییرات اساسی وجود دارد که باید هنگام انتقال از بتا 1 به بتا 2 در نظر داشت.

شکستن

• $badge-colorمتغیر حذف شده و استفاده از آن در .badge. ما از یک تابع کنتراست رنگ برای انتخاب یک colorبر اساس استفاده می کنیم background-color، بنابراین متغیر غیر ضروری است.
• برای جلوگیری از شکستن تضاد با فیلتر اصلی CSS، نام grayscale()تابع به تغییر نام داده شد.gray()grayscale
• تغییر نام .table-inverse، .thead-inverseو .thead-defaultبه .*-darkو .*-light، مطابق با طرح های رنگی ما که در جاهای دیگر استفاده می شود.
• جداول پاسخگو اکنون کلاس هایی را برای هر نقطه شکست شبکه تولید می کنند. این از نسخه بتا 1 جدا می شود زیرا نسخه ای که .table-responsiveاستفاده می کنید بیشتر شبیه به .table-responsive-md. اکنون می توانید .table-responsiveیا .table-responsive-{sm,md,lg,xl}در صورت نیاز استفاده کنید.
• پشتیبانی Bower به‌عنوان مدیر بسته برای گزینه‌های جایگزین (به عنوان مثال، Yarn یا npm) منسوخ شده است. برای جزئیات بیشتر به bower/bower#2298 مراجعه کنید.
• Bootstrap همچنان به jQuery 1.9.1 یا بالاتر نیاز دارد، اما به شما توصیه می شود از نسخه 3.x استفاده کنید زیرا مرورگرهای پشتیبانی شده v3.x همان مرورگرهایی هستند که Bootstrap پشتیبانی می کند به علاوه v3.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-contentpointer-events: auto

خلاصه

در اینجا آیتم های بلیط بزرگی وجود دارد که می خواهید هنگام انتقال از نسخه 3 به نسخه 4 از آنها آگاه باشید.

پشتیبانی از مرورگر

• پشتیبانی از IE8، IE9 و iOS 6 قطع شد. نسخه 4 اکنون فقط IE10+ و iOS 7+ است. برای سایت هایی که به هر یک از آنها نیاز دارند، از v3 استفاده کنید.
• پشتیبانی رسمی برای مرورگر Android v5.0 Lollipop و WebView اضافه شد. نسخه های قبلی مرورگر Android و WebView فقط به صورت غیر رسمی پشتیبانی می شوند.

تغییرات جهانی

• Flexbox به طور پیش فرض فعال است. به طور کلی این به معنای دور شدن از شناورها و بیشتر در اجزای ما است.
• برای فایل‌های CSS منبع ما، از Less به Sass تغییر وضعیت داد.
• به‌عنوان واحد CSS اصلی ما، از pxبه remبه‌عنوان واحد CSS اصلی ما جابه‌جا شد، اگرچه پیکسل‌ها همچنان برای درخواست‌های رسانه و رفتار شبکه استفاده می‌شوند، زیرا درگاه‌های نمای دستگاه تحت تأثیر اندازه نوع قرار نمی‌گیرند.
• اندازه قلم جهانی از 14pxبه افزایش یافت 16px.
• سطوح شبکه را برای افزودن گزینه پنجم (آدرس کردن دستگاه‌های کوچکتر در 576pxپایین و پایین) اصلاح کرد و -xsinfix را از آن کلاس‌ها حذف کرد. مثال: .col-6.col-sm-4.col-md-3.
• موضوع اختیاری جداگانه را با گزینه های قابل تنظیم از طریق متغیرهای SCSS (به عنوان مثال، $enable-gradients: true) جایگزین کرد.
• سیستم ساخت برای استفاده از یک سری اسکریپت های npm به جای Grunt بازنگری شد. برای package.jsonهمه اسکریپت ها یا پروژه readme ما برای نیازهای توسعه محلی را ببینید.
• استفاده غیر پاسخگو از Bootstrap دیگر پشتیبانی نمی شود.
• Customizer آنلاین را به نفع اسناد راه اندازی گسترده تر و ساخت های سفارشی حذف کرد.
• ده‌ها کلاس کاربردی جدید برای جفت‌های ویژگی-مقدار متداول CSS و میانبرهای فاصله حاشیه/بالا اضافه شده است.

سیستم شبکه ای

• به flexbox منتقل شد.
  • پشتیبانی از flexbox در میکس های شبکه و کلاس های از پیش تعریف شده اضافه شده است.
  • به عنوان بخشی از flexbox، شامل پشتیبانی از کلاس های تراز عمودی و افقی است.
• نام کلاس های شبکه و یک ردیف شبکه جدید به روز شده است.
  • smیک لایه شبکه جدید در زیر 768pxبرای کنترل دانه ای بیشتر اضافه شده است. ما اکنون داریم xs،،،،، و . این همچنین به این معنی است که هر سطح یک سطح افزایش یافته است (بنابراین در v3 اکنون در v4 است).smmdlgxl.col-md-6.col-lg-6
  • xsکلاس‌های گرید به گونه‌ای اصلاح شده‌اند که نیازی به پسوند برای نشان دادن دقیق‌تر این نیست که آنها شروع به اعمال سبک‌ها در min-width: 0و نه یک مقدار پیکسل تعیین‌شده می‌کنند. به جای اینکه .col-xs-6الان هست .col-6. همه سطوح شبکه دیگر نیاز به infix دارند (به عنوان مثال، sm).
• اندازه‌های شبکه، میکس‌ها و متغیرها به‌روزرسانی شده است.
  • ناودان های گرید اکنون دارای یک نقشه Sass هستند تا بتوانید عرض ناودان های خاصی را در هر نقطه شکست مشخص کنید.
  • میکسین های شبکه به روز شده برای استفاده از make-col-readyمخلوط آماده سازی و a 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) { ... }.

اجزاء

• حذف پانل‌ها، تصاویر کوچک و چاه‌ها برای یک جزء جدید، کارت‌ها .
• فونت نماد Glyphicons را حذف کرد. اگر به نمادها نیاز دارید، برخی از گزینه ها عبارتند از:
  • نسخه بالادست Glyphicons
  • Octicon ها
  • فونت عالی
  • برای لیستی از گزینه های جایگزین به صفحه Extend مراجعه کنید . پیشنهادات اضافی دارید؟ لطفا یک موضوع یا روابط عمومی را باز کنید.
• پلاگین Affix jQuery حذف شد.
  • توصیه می کنیم position: stickyبه جای آن استفاده کنید. برای جزئیات و توصیه‌های خاص polyfill به ورودی HTML5 لطفاً مراجعه کنید . یک پیشنهاد استفاده از یک @supportsقانون برای اجرای آن است (به عنوان مثال، @supports (position: sticky) { ... })
  • اگر از Affix برای اعمال سبک های اضافی و غیر positionسبک استفاده می کردید، ممکن است polyfills مورد استفاده شما را پشتیبانی نکند. یکی از گزینه ها برای چنین استفاده هایی کتابخانه شخص ثالث ScrollPos-Styler است.
• جزء پیجر حذف شد زیرا اساساً دکمه‌های کمی سفارشی شده بود.
• تقریباً همه مؤلفه‌ها را بازسازی کرد تا از انتخابگرهای کلاس غیر تودرتوی بیشتری به جای انتخابگرهای کودکان بیش از حد خاص استفاده کند.

بر اساس جزء

این لیست تغییرات کلیدی را بر اساس مؤلفه بین v3.xx و v4.0.0 برجسته می کند.

راه اندازی مجدد

راه اندازی مجدد Bootstrap 4 جدید است ، یک شیوه نامه جدید که بر اساس Normalize با سبک های بازنشانی تا حدودی عقیده ما ساخته شده است. انتخابگرهایی که در این فایل ظاهر می شوند فقط از عناصر استفاده می کنند—در اینجا هیچ کلاسی وجود ندارد. این امر سبک‌های بازنشانی ما را از سبک‌های مؤلفه ما برای یک رویکرد مدولارتر جدا می‌کند. برخی از مهم‌ترین بازنشانی‌هایی که شامل 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-پیشوند - تغییر داد. از این رو .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دیگر سبک‌های .rowvia mixin را اعمال نمی‌کند، بنابراین .rowاکنون برای طرح‌بندی‌های شبکه افقی (مثلاً <div class="form-group row">) مورد نیاز است.
  • کلاس جدید .col-form-labelبه برچسب‌های وسط عمودی با .form-controls اضافه شد.
  • .form-rowبرای طرح‌بندی‌های فرم جمع‌وجور با کلاس‌های شبکه‌ای جدید اضافه شده است (شما را .rowبا a تعویض کنید .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نسبتاً بسیار کوچکتر از نسخه 3 است.
• ویژگی دکمه Stateful افزونه button.jsjQuery حذف شده است. این شامل $().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>s یا <ul>s کرکره ها را ساخت.
• سبک‌های کشویی و نشانه‌گذاری مجدد برای ارائه پشتیبانی آسان و داخلی از آیتم‌های کشویی <a>و مبتنی بر آن.<button>
• تغییر نام .dividerبه .dropdown-divider.
• موارد کشویی اکنون نیاز دارند .dropdown-item.
• ضامن های کشویی دیگر نیازی به صریح ندارند <span class="caret"></span>. این اکنون به طور خودکار از طریق CSS ::afterدر ارائه می .dropdown-toggleشود.

سیستم شبکه ای

• 576pxیک نقطه شکست شبکه جدید به عنوان اضافه شده است sm، به این معنی که اکنون پنج سطح کل وجود دارد ( xs،،،،، smو ) .mdlgxl
• کلاس های اصلاح کننده گرید پاسخگو از .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 را فراخوانی کنید.

Navs

• کامپوننت را با flexbox بازنویسی کرد.
• تقریباً همه >انتخابگرها برای استایل ساده‌تر از طریق کلاس‌های غیر تودرتو حذف شدند.
• به جای انتخابگرهای خاص HTML مانند .nav > li > a، ما از کلاس های جداگانه برای .navs، .nav-items و .nav-links استفاده می کنیم. این باعث می شود HTML شما انعطاف پذیرتر شود و در عین حال توسعه پذیری بیشتری را به همراه دارد.

نوار ناوبری

نوار ناوبری به طور کامل در flexbox با پشتیبانی بهبود یافته برای تراز، پاسخگویی و سفارشی سازی بازنویسی شده است.

• رفتارهای نوار ناوبری پاسخگو اکنون از .navbarطریق موارد مورد نیاز .navbar-expand-{breakpoint} در جایی که شما انتخاب می‌کنید کجا نوار ناوبر را جمع کنید به کلاس اعمال می‌شود. قبلاً این یک تغییر متغیر کمتر بود و نیاز به کامپایل مجدد داشت.
• .navbar-defaultدر حال حاضر است .navbar-light، هر چند .navbar-darkبه همان شکل باقی مانده است. یکی از اینها در هر نوار ناوبری مورد نیاز است. با این حال، این کلاس‌ها دیگر background-colors را تنظیم نمی‌کنند. در عوض آنها اساساً فقط تأثیر می گذارند color.
• نوارهای ناوبری اکنون به نوعی اعلان پس زمینه نیاز دارند. از میان ابزارهای پس‌زمینه ما ( .bg-*) را انتخاب کنید یا کلاس‌های نور/عکوس بالا را برای سفارشی‌سازی دیوانه‌وار تنظیم کنید.
• با توجه به سبک‌های flexbox، نوارهای ناوبری اکنون می‌توانند از ابزارهای flexbox برای گزینه‌های تراز آسان استفاده کنند.
• .navbar-toggleاکنون است .navbar-togglerو دارای سبک های مختلف و نشانه گذاری داخلی است (سه <span>ثانیه بیشتر نیست).
• کلا .navbar-formکلاس رو رها کرد دیگر لازم نیست؛ در عوض، در .form-inlineصورت لزوم از ابزارهای حاشیه استفاده و اعمال کنید.
• نوارهای ناوبری دیگر شامل 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،،، و ..right.carousel-item-next.carousel-item-prev.carousel-item-left.carousel-item-right
  • .itemهم اکنون .carousel-itemاست.
  • برای کنترل‌های prev/next، .carousel-control.rightو .carousel-control.leftare now .carousel-control-nextو .carousel-control-prev، به این معنی که دیگر نیازی به کلاس پایه خاصی ندارند.
• تمام استایل‌های واکنش‌گرا حذف شد، به برنامه‌های کاربردی (مثلاً نشان دادن شرح‌ها در نمای‌پورت‌های خاص) و سبک‌های سفارشی در صورت لزوم موکول شد.
• تصویر حذف شده برای تصاویر موجود در موارد چرخ فلک لغو می شود و به برنامه های کاربردی موکول می شود.
• مثال Carousel را بهینه کرد تا نشانه‌گذاری و سبک‌های جدید را شامل شود.

جداول

• پشتیبانی از جداول تودرتوی استایل‌دار حذف شد. همه سبک های جدول اکنون در نسخه 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}.
• تراز و فاصله:
  • ابزارهای حاشیه پاسخگو و بالشتک جدید برای همه طرف‌ها، به‌علاوه کوتاه‌نویسی عمودی و افقی اضافه شده است.
  • اضافه شدن قایق از ابزارهای فلکس باکس .
  • برای کلاس .center-blockجدید .mx-autoحذف شده است.
• 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-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-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()Sass یا $grid-breakpointsنقشه Sass استفاده کنید.

کلاس های ابزار پاسخگو ما تا حد زیادی به نفع برنامه های displayکاربردی واضح حذف شده اند.

• کلاس ها .hiddenو .showبه دلیل تضاد با jQuery $(...).hide()و $(...).show()متدها حذف شده اند. در عوض، سعی کنید [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نشان دهید (مثلاً عنصر را فقط در دستگاه های متوسط ​​و بزرگ نشان می دهد).

توجه داشته باشید که تغییرات در نقاط شکست شبکه در v4 به این معنی است که برای دستیابی به نتایج یکسان باید یک نقطه شکست بزرگتر بروید. کلاس‌های کاربردی جدید پاسخگو سعی نمی‌کنند موارد کمتر رایجی را که در آن دید یک عنصر را نمی‌توان به‌عنوان یک محدوده پیوسته از اندازه‌های viewport بیان کرد، تطبیق داد. در عوض باید از CSS سفارشی در چنین مواردی استفاده کنید.