Миграција на в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-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виа микина, па .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компоненту јер је била скоро идентична ознакама. Уместо тога , користите .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}.
• Поравнање и размак:
  • Додате нове алатке за маргине и паддинг за све стране, плус вертикалне и хоризонталне стенограме.
  • Додато мноштво флекбок услужних програма .
  • Отпао .center-blockза нови .mx-autoразред.
• Цлеарфик је ажуриран да укине подршку за старије верзије прегледача.

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

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