Source

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

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

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

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

Штампање

  • Поправљени покварени услужни програми за штампање. Раније, коришћење .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 значе да ћете морати да повећате једну тачку прекида да бисте постигли исте резултате. Нове прилагодљиве услужне класе не покушавају да прилагоде мање уобичајене случајеве у којима се видљивост елемента не може изразити као један непрекидни опсег величина прозора; уместо тога ћете морати да користите прилагођени ЦСС у таквим случајевима.