Муҳоҷират ба v4

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-imageҳо дар қуттиҳои қуттиҳои шакли фармоишӣ ва радиоҳо иваз кардем. Пештар, .custom-control-indicatorунсури тозашуда дорои ранги замина, градиент ва тасвири SVG буд. Мутобиқсозии градиенти замина маънои иваз кардани ҳамаи онҳоро дошт, ки ҳар дафъае, ки шумо танҳо як нафарро иваз кардан лозим буд. Ҳоло, мо .custom-control-label::beforeбарои пур кардан ва градиент дорем ва .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ва .input-group-btnбарои ду синфи нав, .input-group-prependва .input-group-append. Шумо бояд ҳозир замима ё муқаддимаро ба таври возеҳ истифода баред, ки қисми зиёди CSS-и моро содда мекунад. Дар дохили замима ё пешванд тугмаҳои худро тавре ҷойгир кунед, ки онҳо дар ҷои дигар вуҷуд доранд, аммо матнро дар .input-group-text.

• Ҳоло сабкҳои тасдиқкунӣ, мисли вурудоти сершумор дастгирӣ мешаванд (гарчанде ки шумо метавонед танҳо як вурудро барои як гурӯҳ тасдиқ кунед).

• Синфҳои андозагирӣ бояд дар волидайн .input-groupбошанд, на унсурҳои шакли инфиродӣ.

Бета 2 тағирот

Ҳангоми дар бета, мо ният дорем, ки ягон тағироти қатъӣ надошта бошем. Бо вуҷуди ин, корҳо на ҳамеша ба нақша гирифта шудаанд. Дар зер тағиротҳои ногуворе ҳастанд, ки ҳангоми гузаштан аз Beta 1 ба Beta 2 бояд дар назар дошта шаванд.

Шикастан

• Тағйирёбандаи хориҷшуда $badge-colorва истифодаи он дар .badge. Мо функсияи контрасти рангро барои интихоби ранг дар colorасоси , истифода мебарем background-color, бинобар ин тағирёбанда нолозим аст.
• grayscale()Функсияи номгузорӣ барои пешгирӣ кардани ихтилоф бо филтри gray()аслии CSS .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синфе буд, ки дар маркази амудӣ <label>бо вуруди алоқаманди он дар тарҳҳои шакли уфуқӣ ҷойгир шудааст.
• Аз миксин color-yiq, ки colorамволро дар бар мегирад, ба функсияе иваз карда шуд, ки арзишро бармегардонад ва ба шумо имкон медиҳад, ки онро барои ҳама гуна амволи CSS истифода баред. Масалан, шумо ба ҷои color-yiq(#000), шумо менависед color: color-yiq(#000);.

Нуктаҳои муҳим

• Истифодаи нав pointer-eventsдар модальҳо ҷорӣ карда шуд. Дар берунӣ .modal-dialogаз рӯйдодҳо бо pointer-events: noneбарои коркарди клики фармоишӣ мегузарад (имкон медиҳад, ки танҳо .modal-backdropбарои ҳама клик гӯш кардан мумкин аст) ва сипас онро барои воқеии .modal-contentбо pointer-events: auto.

Хулоса

Инҳо чизҳои бузурги чиптаҳое мебошанд, ки шумо ҳангоми гузаштан аз v3 ба v4 огоҳ шудан мехоҳед.

Дастгирии браузер

• Дастгирии IE8, IE9 ва iOS 6-ро қатъ кард. v4 ҳоло танҳо IE10+ ва iOS 7+ аст. Барои сайтҳое, ки ба яке аз инҳо ниёз доранд, v3-ро истифода баред.
• Дастгирии расмӣ барои браузери Android v5.0 Lollipop ва WebView илова карда шуд. Версияҳои қаблии браузери Android ва WebView танҳо ба таври ғайрирасмӣ дастгирӣ мешаванд.

Тағйироти глобалӣ

• Flexbox бо нобаёнӣ фаъол аст. Умуман, ин маънои дуршавӣ аз шиноварӣ ва бештар дар тамоми ҷузъҳои мо мебошад.
• Барои файлҳои сарчашмаи CSS мо аз Less ба Sass гузаштанд.
• Аз як воҳиди асосии CSS- pxи remмо гузаштанд, гарчанде ки пикселҳо то ҳол барои дархостҳои медиавӣ ва рафтори шабака истифода мешаванд, зеро ба намоишгоҳи дастгоҳ аз андозаи намуд таъсир намерасонанд.
• Андозаи шрифти глобалӣ 14pxаз 16px.
• Сатҳи шабакаҳои навсозӣ барои илова кардани варианти панҷум (суроғаи дастгоҳҳои хурдтар дар 576pxва поён) ва -xsинфиксро аз ин синфҳо хориҷ карданд. Мисол: .col-6.col-sm-4.col-md-3.
• Мавзӯи алоҳидаи ихтиёриро бо имконоти танзимшаванда тавассути тағирёбандаҳои SCSS иваз кард (масалан, $enable-gradients: true).
• Сохтани система аз нав таъмир карда шуд, то ба ҷои Grunt як қатор скриптҳои npm истифода шавад. Барои 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. Ҳама сатҳҳои дигари шабака инфиксро талаб мекунанд (масалан, 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) { ... }.

Компонентхо

• Панелҳо, эскизҳо ва чоҳҳо барои як ҷузъи нави фарогир, кортҳои партофташуда .
• Шрифти тасвири Glyphicons -ро партофтааст. Агар ба шумо нишонаҳо лозим бошад, баъзе интихобҳо инҳоянд:
  • версияи болоии Glyphicons
  • Октиконҳо
  • Шрифти олӣ
  • Барои рӯйхати алтернативаҳо ба саҳифаи васеъкунӣ нигаред . Оё пешниҳодҳои иловагӣ доред? Лутфан масъала ё PR кушоед.
• Васлкунаки Affix jQuery -ро партофтааст.
  • Мо тавсия медиҳем, ки ба ҷои он истифода position: stickyбаред. Барои тафсилот ва тавсияҳои мушаххаси polyfill ба HTML5 Лутфан ворид шавед. Як пешниҳод ин аст, ки @supportsқоида барои татбиқи он истифода шавад (масалан, @supports (position: sticky) { ... })/
  • Агар шумо Affix-ро барои татбиқи positionуслубҳои иловагӣ истифода мекардед, полифилҳо метавонанд ҳолати истифодаи шуморо дастгирӣ накунанд. Як вариант барои чунин истифодаҳо китобхонаи тарафи сеюм ScrollPos-Styler мебошад.
• Ҷузъи пейжерро партофтааст, зеро он асосан тугмаҳои каме фармоишӣ буд.
• Қариб ҳамаи ҷузъҳо аз нав кор карда шуданд, то ба ҷои селекторҳои аз ҳад зиёди кӯдакона интихобкунандагони синфҳои лонанашуда истифода шаванд.

Аз рӯи компонент

Ин рӯйхат тағйироти калидиро аз рӯи ҷузъи байни v3.xx ва v4.0.0 таъкид мекунад.

Аз нав оғоз кунед

Нав дар Bootstrap 4 ин Reboot аст , ҷадвали услуби навест, ки бар 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-responsiveростро ба <table>.
• Барои мувофиқат .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дигар сабкҳоро аз .rowмиксҳои via татбиқ намекунад, бинобар .rowин ҳоло барои тарҳбандиҳои шабакаи уфуқӣ талаб карда мешавад (масалан, <div class="form-group row">).
  • Синфи нав .col-form-labelба тамғакоғазҳои амудӣ бо .form-controls илова карда шуд.
  • .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мутаносибан нисбат ба v3 хеле хурдтар аст.
• Хусусияти тугмаи ҳолати button.jsплагини jQuery қатъ карда шуд. Ин усулҳо $().button(string)ва $().button('reset')усулҳоро дар бар мегирад. Мо маслиҳат медиҳем, ки ба ҷои он каме ночизи JavaScript-и фармоиширо истифода барем, ки он барои рафтори маҳз ҳамон гунае, ки шумо мехоҳед, фоида меорад.
  • Аҳамият диҳед, ки дигар хусусиятҳои плагин (қуттиҳои тугмаҳо, радиоҳои тугмаҳо, тугмаҳои ягонаи гузариш) дар v4 нигоҳ дошта шудаанд.
• Тугмаҳоро [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, md, lg, ва xl).
• Номи синфҳои тағирдиҳандаи шабакаи ҷавобӣ .col-{breakpoint}-{modifier}-{size}барои .{modifier}-{breakpoint}-{size}синфҳои оддии шабака иваз карда шуд.
• Синфҳои тағирдиҳандаи тела ва кашидан барои синфҳои нав, ки бо flexbox кор мекунанд, партофта 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, .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 аз нав нависед.
• Ҳоло дар насли s синфҳои равшан ( .page-item, ) талаб карда мешаванд.page-link.pagination
• Компонентро .pagerкомилан партофтанд, зеро он аз тугмаҳои контури фармоишӣ каме бештар буд.

Нонпораҳо

• Синфи возеҳ, .breadcrumb-item, ҳоло дар насли .breadcrumbс талаб карда мешавад

Нишонҳо ва нишонаҳо

• Номаш .labelба он иваз карда шуд, .badgeто аз <label>унсур ҷудо карда шавад.
• Компонентро партофтанд .badge, зеро он бо тамғакоғазҳо тақрибан якхела буд. .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.
  • Барои назорати қаблӣ/оянда .carousel-control.rightва .carousel-control.leftҳоло .carousel-control-nextва ҳастанд .carousel-control-prev, яъне онҳо дигар синфи мушаххаси асосиро талаб намекунанд.
• Ҳама услубҳои ҷавобгӯ, таъхир ба утилитаҳо (масалан, нишон додани сарлавҳаҳо дар баъзе намоишгоҳҳо) ва услубҳои фармоишӣ дар ҳолати зарурӣ хориҷ карда шуданд.
• Тасвирҳои ҳазфшуда барои тасвирҳо дар ҷузъҳои карусел, ки ба хидматрасониҳо дахл доранд.
• Намунаи Каруселро тағир дод, то аломатгузорӣ ва услубҳои навро дар бар гирад.

Ҷадвалҳо

• Дастгирии мизҳои лонашудаи услубӣ хориҷ карда шудааст. Ҳама сабкҳои ҷадвал ҳоло дар v4 барои селекторҳои содда мерос гирифта шудаанд.
• Варианти ҷадвали баръакс илова карда шуд.

Хизматҳои коммуналӣ

• Намоиш, пинҳон ва ғайра:
  • Утилитаҳои дисплейро ҷавобгар сохтанд (масалан, .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 барои қатъ кардани дастгирии версияҳои кӯҳнаи браузер навсозӣ шуд.

Миксинҳои префикси фурӯшанда

Миксинҳои префикси фурӯшандаи Bootstrap 3 , ки дар v3.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-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Ҳуҷҷатгузорӣ

Ҳуҷҷатҳои мо низ дар саросари ҷаҳон такмил ёфтанд. Ин аст пасттарин:

• Мо ҳоло ҳам Jekyll-ро истифода мебарем, аммо дар омехта плагинҳо дорем:
  • bugify.rbбарои самаранок номбар кардани сабтҳо дар саҳифаи хатогиҳои браузери мо истифода мешавад.
  • example.rbяк фардкунандаи фармоишии highlight.rbплагини пешфарз аст, ки барои коркарди осонтари мисол-код имкон медиҳад.
  • callout.rbяк фарди фармоишии шабеҳи он аст, аммо барои истинодҳои махсуси ҳуҷҷатҳои мо тарҳрезӣ шудааст.
  • markdown-block.rbбарои намоиш додани пораҳои Markdown дар дохили унсурҳои HTML ба монанди ҷадвалҳо истифода мешавад.
  • jekyll-toc барои тавлиди ҷадвали мундариҷаи мо истифода мешавад.
• Ҳама мундариҷаи ҳуҷҷатҳо дар Markdown (ба ҷои HTML) барои таҳрир осонтар навишта шудаанд.
• Саҳифаҳо барои мундариҷаи соддатар ва иерархияи дастрастар аз нав ташкил карда шуданд.
• Мо аз CSS муқаррарӣ ба SCSS гузаштем, то аз тағирёбандаҳо, миксинҳо ва ғайра пурра бартарии Bootstrap истифода барем.

Утилитаҳои ҷавобгӯ

Ҳама @screen-тағирёбандаҳо дар v4.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-синфҳо хориҷ карда шуданд, ба истиснои утилитаҳои чопӣ, ки номашон иваз карда шудааст.
  • Аз v3 хориҷ карда шуд:.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
  • Аз alpha v4 хориҷ карда шуд:.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 маънои онро дорад, ки барои ноил шудан ба натиҷаҳои якхела ба шумо лозим меояд, ки як нуқтаи кандашавӣ калонтар шавед. Синфҳои нави утилитаҳои ҷавобгӯ кӯшиш намекунанд ҳолатҳои камтар маъмулро дар бар гиранд, ки дар он намуди зоҳирии элементро ҳамчун диапазони ягонаи ҳамбастаи андозаҳои намоишӣ ифода кардан мумкин нест; ба ҷои шумо лозим меояд, ки дар чунин ҳолатҳо CSS-и фармоиширо истифода баред.