Миграција на в4
Боотстрап 4 је велика преинака целог пројекта. Најзначајније промене су сажете у наставку, праћене конкретнијим променама релевантних компоненти.
Стабилне промене
Прелазећи са Бета 3 на наше стабилно издање в4.к, нема значајних промена, али постоје неке значајне промене.
Штампање
-
Поправљени покварени услужни програми за штампање. Раније, коришћење
.d-print-*
класе би неочекивано поништило било коју другу.d-*
класу. Сада се поклапају са нашим другим услужним програмима за приказ и примењују се само на тај медиј (@media print
). -
Проширени доступни услужни програми за приказ штампања како би одговарали другим услужним програмима. Бета 3 и старије су имале само
block
,inline-block
,inline
, иnone
. Додата је стабилна верзија 4flex
,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}
.
- Додали смо прилагодљиве варијације нашим класама за поравнање текста
- Поравнање и размак:
- Додате нове алатке за маргине и паддинг за све стране, плус вертикалне и хоризонталне стенограме.
- Додато мноштво флекбок услужних програма .
- Отпао
.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
,translate3d
user-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
- Уклоњено из в3:
- Услужни програми за штампање више не почињу са
.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 значе да ћете морати да повећате једну тачку прекида да бисте постигли исте резултате. Нове прилагодљиве услужне класе не покушавају да прилагоде мање уобичајене случајеве у којима се видљивост елемента не може изразити као један непрекидни опсег величина прозора; уместо тога ћете морати да користите прилагођени ЦСС у таквим случајевима.