Source

Мигрирање на v4

Bootstrap 4 е главното препишување на целиот проект. Најзначајните промени се сумирани подолу, проследени со поконкретни промени на релевантните компоненти.

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

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

Печатење

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

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

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

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

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

Разно

  • Ја отстрани неискористената $thumbnail-transitionпроменлива. Ништо не префрлавме, па тоа беше само дополнителен код.
  • Пакетот npm повеќе не вклучува други датотеки освен нашите изворни и дистални датотеки; ако се потпиравте на нив и ги извршувавте нашите скрипти преку node_modulesпапката, треба да го прилагодите вашиот работен тек.

Форми

  • Повторно напишани и прилагодени и стандардни полиња за избор и радија. Сега, и двете имаат соодветна HTML структура (надворешна <div>со брат или сестра <input>и <label>) и исти стилови на распоред (наредени стандардни, вградени со класа на модификатор). Ова ни овозможува да ја стилизираме етикетата врз основа на состојбата на влезот, поедноставувајќи ја поддршката за disabledатрибутот (претходно бараше родителска класа) и подобро поддржувајќи ја нашата валидација на формуларот.

    Како дел од ова, го сменивме CSS за управување со повеќе background-images на полињата за избор на сопствени формулари и радија. Претходно, сега отстранетиот .custom-control-indicatorелемент имаше боја на позадина, градиент и икона SVG. Приспособувањето на градиентот на заднината значеше замена на сите тие секогаш кога ќе требаше да промените само еден. Сега, имаме .custom-control-label::beforeза полнење и градиент и .custom-control-label::afterсе справува со иконата.

    За да направите приспособена проверка, додадете .custom-control-inline.

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

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

  • Прилагодените влезови на датотеки добија промена на нивната $custom-file-textпроменлива Sass. Веќе не е вгнездена Sass карта и сега напојува само една низа - Browseкопчето бидејќи тоа сега е единствениот псевдоелемент генериран од нашиот Sass. Текстот Choose fileсега доаѓа од .custom-file-label.

Влезни групи

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

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

  • Класите за одредување на големината мора да бидат на матичните .input-group, а не на поединечните елементи на формата.

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

Додека е во бета верзија, се стремиме да немаме промени во прекин. Сепак, работите не одат секогаш според планираното. Подолу се дадени промените што треба да ги имате на ум кога се движите од Бета 1 во Бета 2.

Кршење

  • Отстранета $badge-colorпроменлива и нејзината употреба на .badge. Ние користиме функција за контраст на бои за да избереме colorврз основа на background-color, така што променливата е непотребна.
  • grayscale()Функцијата е преименувана во за gray()да се избегне прекинување на конфликтот со природниот grayscaleфилтер на CSS.
  • Преименувано .table-inverse, .thead-inverse, и .thead-defaultдо .*-darkи .*-light, што одговара на нашите шеми на бои што се користат на друго место.
  • Одговорните табели сега генерираат класи за секоја точка на прекин на мрежата. Ова се одвојува од Бета 1 со тоа што она .table-responsiveшто го користевте е повеќе како .table-responsive-md. Сега можете да користите .table-responsiveили .table-responsive-{sm,md,lg,xl}по потреба.
  • Исфрлена поддршката за Bower бидејќи менаџерот на пакети е застарен за алтернативи (на пр., Yarn или npm). Видете bower/bower#2298 за детали.
  • Bootstrap сè уште бара jQuery 1.9.1 или понова верзија, но ви се советува да ја користите верзијата 3.x бидејќи поддржаните прелистувачи на v3.x се оние што ги поддржува Bootstrap плус v3.x има одредени безбедносни поправки.
  • Ја отстрани неискористената .form-control-labelкласа. Ако навистина ја искористивте оваа класа, таа беше дупликат на .col-form-labelкласата што вертикално центрираше a <label>со неговиот поврзан влез во распоредот на хоризонтална форма.
  • Го color-yiqсменивме од миксин што го вклучуваше colorсвојството во функција што враќа вредност, овозможувајќи ви да ја користите за која било CSS својство. На пример, наместо color-yiq(#000), ќе напишете color: color-yiq(#000);.

Определување

  • Воведе нова pointer-eventsупотреба на модали. Надворешниот .modal-dialogминува низ настани со pointer-events: noneза прилагодено ракување со кликнување (што овозможува само слушање на .modal-backdropбило какви кликови), а потоа се спротивставува на вистинскиот .modal-contentсо pointer-events: auto.

Резиме

Еве ги големите ставки на билетите за кои сакате да бидете свесни кога се движите од v3 на v4.

Поддршка на прелистувачот

  • Исфрлена поддршка за IE8, IE9 и iOS 6. v4 сега е само IE10+ и iOS 7+. За сајтови на кои им треба едно од нив, користете v3.
  • Додадена е официјална поддршка за Android v5.0 Lollipop's Browser и WebView. Претходните верзии на Android Browser и WebView остануваат само неофицијално поддржани.

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

  • Flexbox е стандардно овозможен. Општо земено, ова значи оддалечување од плови и повеќе од нашите компоненти.
  • Се префрли од Less на Sass за нашите изворни CSS-датотеки.
  • Префрлено од pxво remкако наша примарна CSS единица, иако пикселите сè уште се користат за барања за медиуми и однесување на мрежата бидејќи пристаништата за гледање на уредот не се засегнати од големината на типот.
  • Глобалната големина на фонтот се зголеми од 14pxна 16px.
  • Обновени мрежни нивоа за да се додаде петта опција (адресирање на помали уреди на 576pxи подолу) и отстранета -xsинфикс од тие класи. Пример: .col-6.col-sm-4.col-md-3.
  • Заменетата посебна опционална тема со опции што може да се конфигурираат преку SCSS променливи (на пр., $enable-gradients: true).
  • Изградбата на системот е ремонтиран за да користи серија npm скрипти наместо Grunt. Погледнете package.jsonги сите скрипти или нашиот проект readme за потребите за локален развој.
  • Неодговорното користење на Bootstrap веќе не е поддржано.
  • Го исфрли онлајн Customizer во корист на пообемна документација за поставување и приспособени изданија.
  • Додадени се десетици нови услужни класи за заеднички парови на својства-вредност на CSS и кратенки за растојание за маргина/полнење.

Мрежен систем

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

Компоненти

  • Испуштени панели, сликички и бунари за нова сеопфатна компонента, картички .
  • Го исфрли фонтот на иконата Glyphicons. Ако ви требаат икони, некои опции се:
  • Испадна додатокот Affix jQuery.
    • Препорачуваме да користите position: stickyнаместо тоа. Видете го записот HTML5 Ве молиме за детали и конкретни препораки за полифил. Еден предлог е да се користи @supportsправило за нејзино спроведување (на пр., @supports (position: sticky) { ... })/
    • Ако користевте Affix за да примените дополнителни, не- positionстилови, полифилите можеби нема да го поддржат вашиот случај на употреба. Една опција за таква употреба е библиотеката ScrollPos-Styler од трета страна .
  • Ја исфрли компонентата пејџер бидејќи во суштина беа малку приспособени копчиња.
  • Рефакторирани речиси сите компоненти за да се користат повеќе невгнездени избирачи на класи наместо преспецифични деца избирачи.

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

Оваа листа ги истакнува клучните промени по компонента помеѓу v3.xx и v4.0.0.

Рестартирај

Ново за Bootstrap 4 е Reboot , нов лист со стилови што се надоврзува на Нормализирање со нашите сопствени стилови на ресетирање донекаде според мислењето. Избирачите што се појавуваат во оваа датотека користат само елементи - тука нема класи. Ова ги изолира нашите стилови за ресетирање од нашите стилови на компоненти за помодуларен пристап. Некои од најважните ресетирање што ги вклучува се 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-controls.
    • Додадено е ново .form-rowза компактни распореди на форми со класите на мрежа (заменете го вашиот .rowза a .form-rowи go).
  • Додадена е поддршка за приспособени формулари (за полиња за избор, радија, избирања и влезови на датотеки).
  • Заменети .has-error, .has-warning, и .has-successкласи со валидација на формата HTML5 преку CSS :invalidи :validпсевдо-класи.
  • Преименувано .form-control-staticво .form-control-plaintext.

Копчиња

  • Преименувано .btn-defaultво .btn-secondary.
  • Целосно ја исфрли .btn-xsкласата бидејќи .btn-smе пропорционално многу помала од v3.
  • Функцијата за државно копче на button.jsприклучокот jQuery е исфрлена. Ова ги вклучува $().button(string)и $().button('reset')методите. Наместо тоа, советуваме да користите мал дел од приспособениот JavaScript, што ќе има корист да се однесува токму онака како што сакате.
    • Забележете дека другите карактеристики на приклучокот (поле за избор на копчиња, радија на копчиња, копчиња за едно вклучување) се задржани во v4.
  • Променете ги копчињата [disabled]во :disabledкако што поддржува IE9+ :disabled. Сепак fieldset[disabled], сè уште е неопходно бидејќи родните оневозможени полиња сè уште се кабриолет во IE11 .

Група на копчиња

  • Преработи компонента со flexbox.
  • Отстранет .btn-group-justified. Како замена можете да го користите <div class="btn-group d-flex" role="group"></div>како обвивка околу елементи со .w-100.
  • Целосно се откажа од .btn-group-xsкласот со оглед на отстранувањето на .btn-xs.
  • Отстрането експлицитно растојание помеѓу групите на копчиња во алатниците на копчињата; користат маргина комунални услуги сега.
  • Подобрена документација за употреба со други компоненти.
  • Префрлено од родителски селектори во еднина класи за сите компоненти, модификатори итн.
  • Поедноставени стилови на паѓање за повеќе да не се испорачуваат со стрелки свртени нагоре или надолу прикачени на паѓачкото мени.
  • Паѓачките списоци може да се градат со <div>s или <ul>s сега.
  • Повторно изградени стилови на паѓање и означување за да се обезбеди лесна, вградена поддршка за <a>и <button>засновани паѓачки ставки.
  • Преименувано .dividerво .dropdown-divider.
  • Ставките за паѓање сега бараат .dropdown-item.
  • Паѓачките копчиња повеќе не бараат експлицитно <span class="caret"></span>; ова сега се обезбедува автоматски преку CSS ::afterна .dropdown-toggle.

Мрежен систем

  • Додадена е нова 576pxточка на прекин на мрежата како sm, што значи дека сега има вкупно пет нивоа ( xs, sm, md, lg, и xl).
  • Ги преименуваше класите на модификатори на одговорна мрежа од .col-{breakpoint}-{modifier}-{size}во .{modifier}-{breakpoint}-{size}за поедноставни класи на мрежа.
  • Исфрлени класи на модификатори на push and pull за новите класи напојувани со flexbox order. На пример, наместо .col-8.push-4и .col-4.pull-8, ќе користите .col-8.order-2и .col-4.order-1.
  • Додадени се корисни класи на flexbox за мрежен систем и компоненти.

Наведете групи

  • Преработи компонента со flexbox.
  • Заменет a.list-group-itemсо експлицитна класа, .list-group-item-action, за стилизирање на врската и верзии на копчиња на ставки од групата од списокот.
  • Додадена е .list-group-flushкласа за употреба со картички.
  • Преработи компонента со flexbox.
  • Со преместување во flexbox, порамнувањето на иконите за отфрлање во заглавието е веројатно скршено бидејќи повеќе не користиме плови. Пловената содржина е на прво место, но со flexbox тоа веќе не е случај. Ажурирајте ги иконите за отфрлање за да се поправат по модалните наслови.
  • Опцијата remote(која можеше да се користи за автоматско вчитување и инјектирање на надворешна содржина во модал) и соодветниот loaded.bs.modalнастан беа отстранети. Наместо тоа, препорачуваме да користите шаблони од страна на клиентот или рамка за врзување податоци или сами да го повикате jQuery.load .
  • Преработи компонента со flexbox.
  • Исфрлени речиси сите >избирачи за поедноставно стајлинг преку невгнездени класи.
  • Наместо селектори специфични за HTML како .nav > li > a, ние користиме посебни класи за .navs, .nav-items и .nav-links. Ова го прави вашиот HTML пофлексибилен додека носи зголемена екстензибилност.

Навивачката лента е целосно препишана во flexbox со подобрена поддршка за усогласување, реакција и прилагодување.

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

Пагинација

  • Преработи компонента со flexbox.
  • Сега се потребни експлицитни класи ( .page-item, .page-link) за потомците на .paginations
  • Компонентата .pagerцелосно ја исфрли бидејќи беше малку повеќе од приспособени копчиња за преглед.
  • Сега е потребна експлицитна класа, .breadcrumb-item, за потомците на .breadcrumbs

Етикети и беџови

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

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

Целосно исфрлен за новата компонента на картичката.

Панели

  • .panelдо .card, сега изградена со flexbox.
  • .panel-defaultотстранети и без замена.
  • .panel-groupотстранети и без замена. .card-groupне е замена, различно е.
  • .panel-headingдо.card-header
  • .panel-titleдо .card-title. Во зависност од саканиот изглед, можеби ќе сакате да користите и елементи или класи на наслов (на пр <h3>. , .h3) или задебелени елементи или класи (на пр <strong>. , <b>, .font-weight-bold). Забележете дека .card-title, иако е слично именуван, дава различен изглед од .panel-title.
  • .panel-bodyдо.card-body
  • .panel-footerдо.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, и .panel-dangerсе исфрлени за .bg-, .text-, и .borderалатките генерирани од нашата $theme-colorsSass карта.

Напредок

  • Заменетите контекстуални .progress-bar-*класи со .bg-*комунални услуги. На пример, class="progress-bar progress-bar-danger"станува class="progress-bar bg-danger".
  • Заменети .activeза анимирани ленти за напредок со .progress-bar-animated.
  • Ремонт на целата компонента за да се поедностави дизајнот и стилот. Имаме помалку стилови за отфрлање, нови индикатори и нови икони.
  • Целата CSS е невгнездена и преименувана, обезбедувајќи секоја класа да има префикс со .carousel-.
    • За ставки од рингишпил, .next, .prev, .left, и .rightсега се .carousel-item-next, .carousel-item-prev, .carousel-item-left, и .carousel-item-right.
    • .itemисто така е сега .carousel-item.
    • За претходни/следни контроли, .carousel-control.rightи .carousel-control.leftсе сега .carousel-control-nextи .carousel-control-prev, што значи дека повеќе не бараат одредена основна класа.
  • Отстранети се сите респонзивни стајлинг, одложување на услужните програми (на пр., прикажување натписи на одредени пристаништа за гледање) и приспособени стилови по потреба.
  • Отстранетите отфрлања на сликата за сликите во ставките на рингишпилот, одложувајќи се на комуналните услуги.
  • Го прилагоди примерот на вртелешка за да ги вклучи новите ознаки и стилови.

Табели

  • Отстранета поддршка за стилизирани вгнездени маси. Сите стилови на табели сега се наследени во v4 за поедноставни избирачи.
  • Додадена е варијанта на инверзна табела.

Комунални услуги

  • Прикажи, скриени и повеќе:
    • Направени алатките за приказ да реагираат (на пр. .d-noneи d-{sm,md,lg,xl}-none).
    • Исфрлен најголемиот дел од .hidden-*комуналните услуги за новите алатки за приказ . На пример, наместо .hidden-sm-up, користете .d-sm-none. Ги преименуваше .hidden-printалатките за да ја користи шемата за именување на алатката за приказ. Повеќе информации во делот „Одговорни комунални услуги“ на оваа страница.
    • Додадени .float-{sm,md,lg,xl}-{left,right,none}класи за одговорни плови и отстранети .pull-leftи .pull-rightбидејќи тие се вишок на .float-leftи .float-right.
  • Тип:
    • Додадени одговорни варијации на нашите класи за порамнување на текст .text-{sm,md,lg,xl}-{left,center,right}.
  • Порамнување и растојание:
  • Clearfix е ажуриран за да се откаже од поддршката за постарите верзии на прелистувачот.

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

Префиксните мешавини на продавачот на Bootstrap 3 , кои беа застарени во верзијата 3.2.0, се отстранети во Bootstrap 4. Бидејќи користиме Autoprefixer , тие повеќе не се потребни.

Отстранети се следните мешавини : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate_ rotateX_ rotateY_ scale_ scaleX_ scaleY_ skew_ transform-origin_ transition-delay_ transition-duration_ transition-property_transition-timing-functiontransition-transformtranslatetranslate3duser-select

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

Нашата документација доби и сеопфатна надградба. Еве го ниското ниво:

  • Сè уште користиме Jekyll, но имаме приклучоци во мешавината:
    • bugify.rbсе користи за ефикасно наведување на записите на страницата со грешки на нашиот прелистувач .
    • example.rbе приспособена вилушка на стандардниот highlight.rbприклучок, што овозможува полесно ракување со пример-код.
    • callout.rbе слична приспособена вилушка за тоа, но дизајнирана за нашите специјални пораки за документи.
    • jekyll-toc се користи за генерирање на нашата табела со содржини.
  • Целата содржина на документите е препишана во Markdown (наместо HTML) за полесно уредување.
  • Страниците се реорганизирани за поедноставна содржина и попристапна хиерархија.
  • Се преселивме од обичен CSS во SCSS за целосно да ги искористиме променливите, миксините и многу повеќе на Bootstrap.

Одговорни комунални услуги

Сите @screen-променливи се отстранети во v4.0.0. Наместо тоа, користете ги мешаниците media-breakpoint-up(), media-breakpoint-down(), или Sass или картата Sass.media-breakpoint-only()$grid-breakpoints

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

  • Класите .hiddenи .showсе отстранети бидејќи беа во конфликт со jQuery $(...).hide()и $(...).show()методите. Наместо тоа, обидете се да го вклучите [hidden]атрибутот или користете вградени стилови како style="display: none;"и style="display: block;".
  • Сите .hidden-класи се отстранети, освен алатките за печатење кои се преименувани.
    • Отстрането од v3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • Отстрането од v4 алфи:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Услужните програми за печатење повеќе не започнуваат со .hidden-или .visible-, туку со .d-print-.
    • Стари имиња: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Нови часови: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Наместо да користите експлицитни .visible-*класи, вие правите елемент видлив со едноставно несокривање на таа големина на екранот. Може да комбинирате една .d-*-noneкласа со една .d-*-blockкласа за да прикажете елемент само на даден интервал на големини на екранот (на пр .d-none.d-md-block.d-xl-none. го прикажува елементот само на средни и големи уреди).

Забележете дека промените на точките на прекин на мрежата во v4 значат дека ќе треба да ја зголемите точката на прекин за да ги постигнете истите резултати. Новите одговорни класи на услужни програми не се обидуваат да приспособат на поретки случаи каде што видливоста на елементот не може да се изрази како единствен опсег на големини на приказни приклучоци; наместо тоа, ќе треба да користите сопствен CSS во такви случаи.