Source

Миграција на в4

Боотстрап 4 је велика преинака целог пројекта. Најзначајније промене су сажете у наставку, праћене конкретнијим променама релевантних компоненти.

Стабилне промене

Преласком са Бета 3 на наше стабилно издање в4.0, нема значајних промена, али постоје неке значајне промене.

Штампање

  • Поправљени покварени услужни програми за штампање. Раније, коришћење .d-print-*класе би неочекивано поништило било коју другу .d-*класу. Сада се поклапају са нашим другим услужним програмима за приказ и примењују се само на тај медиј ( @media print).

  • Проширени доступни услужни програми за приказ штампања како би одговарали другим услужним програмима. Бета 3 и старије су имале само block, inline-block, inline, и none. Додата је стабилна верзија 4 flex, inline-flex, table, table-rowи table-cell.

  • Исправљено приказивање прегледа за штампу у свим претраживачима са новим стиловима штампања који специфицирају @page size.

Бета 3 промене

Док је Бета 2 доживела већину наших преломних промена током бета фазе, али још увек имамо неколико које је требало решити у Бета 3 издању. Ове промене се примењују ако ажурирате на Бета 3 са Бета 2 или било које старије верзије Боотстрапа.

Остало

  • Уклоњена неискоришћена $thumbnail-transitionпроменљива. Нисмо ништа преносили, тако да је то био само додатни код.
  • нпм пакет више не укључује никакве датотеке осим наших изворних и дист датотека; ако сте се ослањали на њих и покретали наше скрипте преко node_modulesфасцикле, требало би да прилагодите свој ток рада.

Формс

  • Поново написао и прилагођена и подразумевана поља за потврду и радио. Сада, оба имају одговарајућу ХТМЛ структуру (спољну <div>са братом и сестром <input>и <label>) и исте стилове изгледа (наслагани подразумевани, уметнути са класом модификатора). Ово нам омогућава да стилизујемо ознаку на основу стања уноса, поједностављујући подршку за disabledатрибут (претходно је захтевала родитељску класу) и бољу подршку нашој валидацији обрасца.

    Као део овога, променили смо ЦСС за управљање вишеструким background-imageс на прилагођеним пољима за потврду обрасца и радијима. Раније је сада уклоњени .custom-control-indicatorелемент имао боју позадине, градијент и СВГ икону. Прилагођавање градијента позадине значило је замену свих њих сваки пут када је требало да промените само један. Сада имамо .custom-control-label::beforeза попуњавање и градијент и .custom-control-label::afterрукујемо иконом.

    Да бисте направили прилагођену проверу у линији, додајте .custom-control-inline.

  • Ажуриран бирач за групе дугмади засноване на уносу. Уместо [data-toggle="buttons"] { }за стил и понашање, користимо dataатрибут само за ЈС понашања и ослањамо се на нову .btn-group-toggleкласу за стилизовање.

  • Уклоњено .col-form-legendу корист мало побољшаног .col-form-label. На овај начин .col-form-label-smи .col-form-label-lgможе се лако користити на <legend>елементима.

  • Уноси прилагођених датотека су примили промену своје $custom-file-textСасс променљиве. То више није угнежђена Сасс мапа и сада покреће само један стринг— Browseдугме јер је то сада једини псеудо-елемент генерисан из нашег Сасс-а. Текст Choose fileсада долази из .custom-file-label.

Групе уноса

  • Додаци групе уноса су сада специфични за њихов положај у односу на улаз. Напустили смо .input-group-addonи .input-group-btnза два нова разреда, .input-group-prependи .input-group-append. Сада морате експлицитно да користите додатак или додатак, поједностављујући већи део нашег ЦСС-а. У оквиру додавања или додатка, поставите дугмад онако како би постојала било где другде, али умотајте текст у .input-group-text.

  • Стилови валидације су сада подржани, као и вишеструки улази (иако можете потврдити само један унос по групи).

  • Класе величине морају бити на родитељу .input-group, а не на појединачним елементима обрасца.

Бета 2 промене

Док смо у бета верзији, циљ нам је да нема значајних промена. Међутим, ствари не иду увек по плану. Испод су кључне промене које треба имати на уму када прелазите са Бета 1 на Бета 2.

Бреакинг

  • Уклоњена $badge-colorпроменљива и њена употреба на .badge. Користимо функцију контраста боја да изаберемо а colorна основу background-color, тако да је променљива непотребна.
  • 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}по потреби.
  • Одбачена подршка за Бовер као менаџер пакета је застарела за алтернативе (нпр. Иарн или нпм). Погледајте бовер/бовер#2298 за детаље.
  • Боотстрап и даље захтева јКуери 1.9.1 или новији, али вам се саветује да користите верзију 3.к пошто су подржани претраживачи в3.к они које Боотстрап подржава плус в3.к има неке безбедносне исправке.
  • Уклоњена неискоришћена .form-control-labelкласа. Ако сте користили ову класу, она је била дупликат .col-form-labelкласе која је вертикално центрирала а <label>са припадајућим уносом у хоризонталним распоредима облика.
  • Промењен је color-yiqиз миксина који је укључивао colorсвојство у функцију која враћа вредност, омогућавајући вам да је користите за било које ЦСС својство. На пример, уместо color-yiq(#000), написали бисте color: color-yiq(#000);.

Хигхлигхтс

  • Уведена је нова pointer-eventsупотреба модала. Спољашњи .modal-dialogпролази кроз догађаје са pointer-events: noneза прилагођено руковање кликовима (омогућујући само слушање .modal-backdropбило каквих кликова), а затим га супротставља за стварни .modal-contentпомоћу pointer-events: auto.

Резиме

Ево великих карата којих ћете желети да будете свесни када прелазите са в3 на в4.

Подршка за претраживач

  • Избачена подршка за ИЕ8, ИЕ9 и иОС 6. в4 је сада само ИЕ10+ и иОС 7+. За сајтове којима је потребно било које од њих, користите в3.
  • Додата званична подршка за Андроид в5.0 Лоллипоп претраживач и ВебВиев. Раније верзије Андроид претраживача и ВебВиев-а остају само незванично подржане.

Глобалне промене

  • Флекбок је подразумевано омогућен. Уопштено говорећи, ово значи удаљавање од плутајућих и више од наших компоненти.
  • Прешли смо са Лесс на Сасс за наше изворне ЦСС датотеке.
  • Прешли смо са pxна на remкао нашу примарну ЦСС јединицу, иако се пиксели и даље користе за медијске упите и понашање мреже пошто величина типа не утиче на оквире приказа уређаја.
  • Глобална величина фонта је повећана са 14pxна 16px.
  • Преправљени су слојеви мреже да би се додала пета опција (адресирање мањих уређаја на 576pxи испод) и уклоњена -xsинфикс из тих класа. Пример: .col-6.col-sm-4.col-md-3.
  • Замењена је посебна опциона тема са опцијама које се могу конфигурисати преко СЦСС променљивих (нпр. $enable-gradients: true).
  • Систем изградње је ревидиран да користи серију нпм скрипти уместо Грунт. Погледајте package.jsonсве скрипте или читај ме за наш пројекат за потребе локалног развоја.
  • Употреба Боотстрапа који не реагује више није подржана.
  • Одбацили смо онлине Цустомизер у корист опсежније документације за подешавање и прилагођених верзија.
  • Додато је десетине нових услужних класа за уобичајене парове ЦСС својство-вредност и пречице за размаке маргина/допуна.

Систем мреже

  • Премештен у флекбок.
    • Додата подршка за флекбок у миксинама мреже и унапред дефинисаним класама.
    • Као део флекбок-а, укључена је подршка за класе вертикалног и хоризонталног поравнања.
  • Ажурирана имена класа мреже и нови ниво мреже.
    • Додан је нови smниво мреже испод 768pxза детаљнију контролу. Сада имамо xs, sm, md, lg, и xl. Ово такође значи да је сваки ниво повећан за један ниво (тако да .col-md-6је у в3 сада .col-lg-6у в4).
    • xsгрид класе су модификоване да не захтевају инфикс да прецизније представља да почињу да примењују стилове на min-width: 0, а не на постављеној вредности пиксела. Уместо .col-xs-6, сада је .col-6. Сви остали нивои мреже захтевају инфикс (нпр. sm).
  • Ажуриране величине мреже, мешавине и променљиве.
    • Мрежасти олуци сада имају Сасс мапу тако да можете одредити специфичне ширине олука на свакој тачки прекида.
    • Ажуриране мешавине мреже да би се користио make-col-readyприпремни миксин и а make-colза подешавање flexи max-widthза индивидуалну величину колоне.
    • Промењене тачке прекида за упите медија мреже мреже и ширине контејнера да би се урачунао нови ниво мреже и осигурало да су колоне равномерно дељиве са 12својом максималном ширином.
    • Преломне тачке мреже и ширине контејнера се сада рукују преко Сасс мапа ( $grid-breakpointsи $container-max-widths) уместо неколико засебних променљивих. Они у потпуности замењују @screen-*променљиве и омогућавају вам да у потпуности прилагодите нивое мреже.
    • Променили су се и медијски упити. Уместо да сваки пут понављамо наше декларације медијског упита са истом вредношћу, сада имамо @include media-breakpoint-up/down/only. Сада, уместо да пишете @media (min-width: @screen-sm-min) { ... }, можете писати @include media-breakpoint-up(sm) { ... }.

Компоненте

  • Избачени панели, сличице и бунари за нову свеобухватну компоненту, картице .
  • Испуштен је фонт иконе Глификона. Ако су вам потребне иконе, неке опције су:
  • Избацио је додатак Аффик јКуери.
    • Препоручујемо да користите position: stickyуместо тога. Погледајте ХТМЛ5 Молимо унесите детаље и конкретне препоруке за полифил. Један предлог је да користите @supportsправило за његову примену (нпр. @supports (position: sticky) { ... })/
    • Ако сте користили Аффик за примену додатних, не position-стилова, полифили можда неће подржавати ваш случај употребе. Једна опција за такву употребу је библиотека СцроллПос-Стилер треће стране .
  • Испуштена је компонента пејџера јер су у суштини била мало прилагођена дугмад.
  • Рефакторисане су скоро све компоненте да би се користило више неугнежђених селектора класа уместо превише специфичних селектора деце.

По компонентама

Ова листа истиче кључне промене по компонентама између в3.кк и в4.0.0.

Рестарт

Ново у Боотстрап-у 4 је Ребоот , нови стилски списак који се заснива на Нормализе са нашим сопственим донекле тврдоглавим стиловима ресетовања. Селектори који се појављују у овој датотеци користе само елементе — овде нема класа. Ово изолује наше стилове ресетовања од стилова компоненти за модуларнији приступ. Нека од најважнијих ресетовања која ово укључује су 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више не примењује стилове из .rowвиа микина, па .rowје сада потребно за хоризонталне распореде мреже (нпр. <div class="form-group row">).
    • Додата нова .col-form-labelкласа вертикално центрираним ознакама са .form-controlс.
    • Додато је ново .form-rowза компактне изгледе образаца са класама мреже (замените своје .rowза а .form-rowи идите).
  • Додата подршка прилагођених образаца (за потврдне оквире, радио уређаје, одабире и уносе датотека).
  • Замењене .has-error, .has-warning, и .has-successкласе са ХТМЛ5 валидацијом обрасца преко ЦСС-а :invalidи :validпсеудо-класа.
  • Преименовано .form-control-staticу .form-control-plaintext.

Дугмад

  • Преименовано .btn-defaultу .btn-secondary.
  • .btn-xsУ потпуности је одбачена класа јер је .btn-smпропорционално много мања од в3.
  • Функција дугмета са стањем у button.jsјКуери додатку је избачена. Ово укључује методе $().button(string)и . $().button('reset')Саветујемо вам да уместо тога користите мали део прилагођеног ЈаваСцрипт-а, који ће имати предност да се понаша тачно онако како желите.
    • Имајте на уму да су остале карактеристике додатка (пољи за потврду дугмади, радио тастери, дугмад са једним прекидачем) задржане у в4.
  • Промените дугмад [disabled]на :disabledкако ИЕ9+ подржава :disabled. Међутим fieldset[disabled], и даље је неопходно јер су изворни онемогућени скупови поља још увек у грешкама у ИЕ11 .

Група дугмади

  • Преписана компонента са флексбоксом.
  • Уклоњено .btn-group-justified. Као замену можете користити <div class="btn-group d-flex" role="group"></div>као омотач око елемената са .w-100.
  • Одбацио је .btn-group-xsкласу у потпуности због уклањања .btn-xs.
  • Уклоњени експлицитни размаци између група дугмади у тракама са дугмадима; сада користите маргиналне услужне програме.
  • Побољшана документација за употребу са другим компонентама.
  • Пребачен са родитељских селектора на сингуларне класе за све компоненте, модификаторе итд.
  • Поједностављени стилови падајућег менија да се више не испоручују са стрелицама окренутим нагоре или надоле у ​​падајућем менију.
  • Падајући мени се сада може направити помоћу <div>с или <ul>с.
  • Поново изграђени стилови падајућег менија и ознаке да би се обезбедила лака, уграђена подршка за <a>ставке <button>падајућег менија засноване на њима.
  • Преименовано .dividerу .dropdown-divider.
  • Ставке падајућег менија сада захтевају .dropdown-item.
  • Падајући прекидачи више не захтевају експлицитно <span class="caret"></span>; ово се сада обезбеђује аутоматски преко ЦСС-а ::afterна .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.
  • Додате флекбок услужне класе за грид систем и компоненте.

Листа група

  • Преписана компонента са флексбоксом.
  • Замењено a.list-group-itemексплицитном класом, .list-group-item-action, за стилизовање верзија веза и дугмади ставки групе листе.
  • Додата .list-group-flushкласа за коришћење са картицама.
  • Преписана компонента са флексбоксом.
  • С обзиром на прелазак на флекбок, поравнање икона за одбацивање у заглављу је вероватно покварено јер више не користимо флоат. Плутајући садржај је на првом месту, али са флекбок-ом то више није случај. Ажурирајте иконе за одбацивање тако да долазе после модалних наслова да бисте исправили.
  • Опција remote(која би се могла користити за аутоматско учитавање и убацивање спољног садржаја у модални) и одговарајући loaded.bs.modalдогађај су уклоњени. Уместо тога, препоручујемо коришћење шаблона на страни клијента или оквира за повезивање података, или да сами позовете јКуери.лоад .
  • Преписана компонента са флексбоксом.
  • Избачени су скоро сви >селектори ради једноставнијег стилизовања преко неугнежђених класа.
  • Уместо селектора специфичних за ХТМЛ као што је .nav > li > a, користимо засебне класе за .navс, .nav-itemс и .nav-linkс. Ово чини ваш ХТМЛ флексибилнијим док доноси повећану проширивост.

Навбар је у потпуности преписан у флекбок са побољшаном подршком за поравнање, одзив и прилагођавање.

  • Понашање одзивне навигационе траке се сада примењује на .navbarкласу преко обавезног .navbar-expand-{breakpoint} где бирате где ћете скупити навигациону траку. Раније је ово била модификација са мање променљивих и захтевала је поновно компајлирање.
  • .navbar-defaultје сада .navbar-light, иако .navbar-darkостаје исти. Један од њих је потребан на свакој навигационој траци. Међутим, ове класе више не постављају background-colorс; уместо тога у суштини утичу само на color.
  • Навбарови сада захтевају неку врсту позадинске декларације. Изаберите неки од наших позадинских услужних програма ( .bg-*) или поставите своје са светлосним/инверзним класама изнад за лудо прилагођавање .
  • С обзиром на флекбок стилове, навигационе траке сада могу да користе флекбок услужне програме за једноставне опције поравнања.
  • .navbar-toggleје сада .navbar-togglerи има различите стилове и унутрашње ознаке (не више од три <span>с).
  • Напустио .navbar-formразред у потпуности. Више није потребно; уместо тога, само користите .form-inlineи примените маргине по потреби.
  • Траке за навигацију више не укључују margin-bottomили border-radiusподразумевано. Користите услужне програме по потреби.
  • Сви примери са навигационим тракама су ажурирани да укључују нове ознаке.

Пагинација

  • Преписана компонента са флексбоксом.
  • Експлицитне класе ( .page-item, .page-link) су сада потребне за потомке .paginationс
  • Потпуно је испуштена .pagerкомпонента јер је била нешто више од прилагођених дугмади за обрис.
  • Експлицитна класа, .breadcrumb-item, сада је потребна за потомке .breadcrumbс

Ознаке и значке

  • Консолидован .labelи .badgeда се одвоји од <label>елемента и поједностави повезане компоненте.
  • Додан .badge-pillкао модификатор за заобљен изглед „пилуле“.
  • Значке више не лебде аутоматски у групама листа и другим компонентама. За то су сада потребне услужне класе.
  • .badge-defaultје избачено и .badge-secondaryдодато да одговара класама модификатора компоненти које се користе на другим местима.

Панели, сличице и бунари

Потпуно одбачено због нове компоненте картице.

Панели

  • .panelдо .card, сада изграђен са флекбок-ом.
  • .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Сасс мапе.

Напредак

  • Замењене контекстуалне .progress-bar-*класе .bg-*услужним програмима. На пример, class="progress-bar progress-bar-danger"постаје class="progress-bar bg-danger".
  • Замењено .activeза анимиране траке напретка са .progress-bar-animated.
  • Ремонтована је цела компонента да би се поједноставио дизајн и стил. Имамо мање стилова које можете заменити, нове индикаторе и нове иконе.
  • Сав ЦСС је неугнежђен и преименован, осигуравајући да свака класа има префикс .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, што значи да више не захтевају одређену основну класу.
  • Уклоњени су сви прилагодљиви стилови, одлажући се на услужне програме (нпр. приказивање натписа на одређеним оквирима за приказ) и прилагођене стилове по потреби.
  • Уклоњене су замене слика за слике у ставкама вртешке, које се односе на услужне програме.
  • Подешен пример карусела да укључи нове ознаке и стилове.

Табле

  • Уклоњена подршка за стилизоване угнежђене табеле. Сви стилови табеле су сада наслеђени у в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}.
  • Поравнање и размак:
  • Цлеарфик је ажуриран да укине подршку за старије верзије прегледача.

Миксини префикса добављача

Миксини префикса добављача Боотстрапа 3 , који су застарели у в3.2.0, уклоњени су у Боотстрап 4. Пошто користимо Аутопрефикер , више нису потребни.

Уклонили смо следеће мешавине : 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

Документација

Наша документација је такође добила надоградњу. Ево доњег дела:

  • Још увек користимо Јекилл, али имамо додатке у комбинацији:
    • bugify.rbкористи се за ефикасно исписивање уноса на нашој страници са грешкама у претраживачу .
    • example.rbје прилагођени форк подразумеваног highlight.rbдодатка, који омогућава лакше руковање примером кода.
    • callout.rbје слична прилагођена виљушка за то, али дизајнирана за наше посебне облачиће докумената.
    • јекилл-тоц се користи за генерисање нашег садржаја.
  • Сав садржај докумената је преписан у Маркдовн (уместо ХТМЛ) ради лакшег уређивања.
  • Странице су реорганизоване ради једноставнијег садржаја и приступачније хијерархије.
  • Прешли смо са обичног ЦСС-а на СЦСС да бисмо у потпуности искористили Боотстрап-ове променљиве, миксине и још много тога.

Респонсиве утилитиес

Све @screen-променљиве су уклоњене у в4.0.0. Уместо тога користите мешавине media-breakpoint-up(), media-breakpoint-down(), или media-breakpoint-only()Сасс или $grid-breakpointsСасс мапу.

Наше прилагодљиве услужне класе су углавном уклоњене у корист експлицитних displayуслужних програма.

  • Класе .hiddenи .showсу уклоњене јер су у сукобу са јКуери-јем $(...).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. приказује елемент само на средњим и великим уређајима).

Имајте на уму да промене тачака прекида мреже у в4 значе да ћете морати да повећате једну тачку прекида да бисте постигли исте резултате. Нове прилагодљиве услужне класе не покушавају да прилагоде мање уобичајене случајеве у којима се видљивост елемента не може изразити као један непрекидни опсег величина прозора; уместо тога ћете морати да користите прилагођени ЦСС у таквим случајевима.