Source

Пераход на v4

Bootstrap 4 - гэта сур'ёзная перапрацоўка ўсяго праекта. Найбольш прыкметныя змены прыведзены ніжэй, за імі ідуць больш канкрэтныя змены адпаведных кампанентаў.

Стабільныя змены

Пры пераходзе ад бэта-версіі 3 да нашай стабільнай версіі v4.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 больш не ўключае файлы, акрамя нашых зыходных файлаў і файлаў dist; калі вы спадзяваліся на іх і запускалі нашы скрыпты праз node_modulesтэчку, вам варта адаптаваць свой працоўны працэс.

Формы

  • Перапісаў карыстальніцкія і стандартныя сцяжкі і радыё. Цяпер абодва маюць адпаведную структуру HTML (знешні <div>з роднасным <input>і <label>) і аднолькавыя стылі макета (складаны па змаўчанні, убудаваны з класам-мадыфікатарам). Гэта дазваляе нам стылізаваць этыкетку ў залежнасці ад стану ўводу, што спрашчае падтрымку disabledатрыбута (раней патрабаваўся бацькоўскі клас) і лепш падтрымлівае нашу праверку формы.

    У рамках гэтага мы змянілі CSS для кіравання некалькімі background-imageсцяжкамі і радыёстанцыямі карыстальніцкай формы. Раней цяпер выдалены .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 змены

Падчас бэта-версіі мы імкнемся не рабіць рэзкіх змен. Аднак не заўсёды ўсё ідзе так, як планавалася. Ніжэй прыведзены важныя змены, якія трэба мець на ўвазе пры пераходзе з Beta 1 на Beta 2.

Ламанне

  • Выдалена $badge-colorзменная і яе выкарыстанне на .badge. Мы выкарыстоўваем функцыю каляровага кантрасту, каб выбраць на colorаснове background-color, таму зменная непатрэбная.
  • Перайменаваная grayscale()функцыя, gray()каб пазбегнуць канфлікту з уласным grayscaleфільтрам CSS.
  • Перайменаваны .table-inverse, .thead-inverse, і .thead-defaultў .*-darkі .*-light, у адпаведнасці з нашымі каляровымі схемамі, якія выкарыстоўваюцца ў іншых месцах.
  • Спагадныя табліцы цяпер ствараюць класы для кожнай кропкі разрыву сеткі. Гэта адрозніваецца ад Beta 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, паколькі Bootstrap падтрымлівае браўзеры v3.x, плюс у v3.x ёсць некаторыя выпраўленні бяспекі.
  • Выдалены невыкарыстоўваемы .form-control-labelклас. Калі вы выкарыстоўвалі гэты клас, гэта быў дублікат .col-form-labelкласа, які размяшчаўся па вертыкальным цэнтры <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.

Рэзюмэ

Вось важныя пункты білетаў, пра якія вы хочаце ведаць, пераходзячы з версіі 3 на версію 4.

Падтрымка браўзераў

  • Адменена падтрымка IE8, IE9 і iOS 6. v4 цяпер толькі IE10+ і iOS 7+. Для сайтаў, якія маюць патрэбу ў любым з іх, выкарыстоўвайце v3.
  • Дададзена афіцыйная падтрымка браўзера Android v5.0 Lollipop і WebView. Больш раннія версіі браўзера Android і 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ўсе скрыпты або файл чытання нашага праекта для патрэб мясцовага развіцця.
  • Выкарыстанне Bootstrap без адказу больш не падтрымліваецца.
  • Выключылі онлайн-наладчык на карысць больш шырокай дакументацыі па наладцы і наладжаных зборак.
  • Дададзены дзясяткі новых карысных класаў для агульных пар уласцівасць-значэнне 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падрыхтоўчага міксіна і 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 , новая табліца стыляў, якая абапіраецца на Normalize з нашымі ўласнымі некалькі ўпэўненымі стылямі скіду. Селектары, якія з'яўляюцца ў гэтым файле, выкарыстоўваюць толькі элементы - тут няма класаў. Гэта ізалюе нашы стылі скіду ад стыляў нашых кампанентаў для больш модульнага падыходу. Некаторыя з найбольш важных скідаў, якія сюды ўваходзяць, - гэта box-sizing: border-boxзмяненне, пераход ад emда remадзінак на многіх элементах, стылі спасылак і скіды многіх элементаў формы.

Тыпаграфіка

  • .text-Усе ўтыліты перанесены ў _utilities.scssфайл.
  • Выключана .page-header, бо яго стылі можна ўжываць з дапамогай утыліт.
  • .dl-horizontalбыў адкінуты. Замест гэтага выкарыстоўвайце .rowon <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больш не прымяняе стылі з .rowvia mixin, таму .rowцяпер патрабуецца для макетаў гарызантальнай сеткі (напрыклад, <div class="form-group row">).
    • Дададзены новы .col-form-labelклас для цэтлікаў па вертыкальным цэнтры з .form-controls.
    • Дададзена новае .form-rowдля кампактных макетаў формаў з класамі сеткі (памяняйце .rowіх на .form-rowі ідзіце).
  • Дададзена падтрымка карыстальніцкіх формаў (для сцяжкоў, радыё, выбараў і ўводу файлаў).
  • .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 і 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.
  • Цяпер панэлі навігацыі патрабуюць фонавай дэкларацыі. Выберыце з нашых фонавых утыліт ( .bg-*) або ўсталюйце свае ўласныя з класамі святла/інверсіі вышэй для шалёнай налады .
  • Улічваючы стылі flexbox, панэлі навігацыі цяпер могуць выкарыстоўваць утыліты 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-colorsкарты Sass.

Прагрэс

  • Кантэкстныя .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, што азначае, што яны больш не патрабуюць пэўнага базавага класа.
  • Выдалены ўсе адаптыўныя стылі, адкладаючыся на ўтыліты (напрыклад, паказ подпісаў на пэўных вокнах прагляду) і карыстальніцкія стылі па меры неабходнасці.
  • Выдалены перавызначэнні відарысаў у элементах каруселі, адкладаючыся на ўтыліты.
  • Дапрацаваны прыклад Carousel, каб уключыць новую разметку і стылі.

Табліцы

  • Выдалена падтрымка стылізаваных укладзеных табліц. Усе стылі табліц цяпер успадкаваны ў 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-function, transition-transform, translate, translate3d,user-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(), або media-breakpoint-only()Sass або $grid-breakpointsкарту Sass.

Нашы спагадныя класы ўтыліт у асноўным былі выдалены на карысць відавочных 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, паказвае элемент толькі на сярэдніх і вялікіх прыладах).

Звярніце ўвагу, што змены ў кропках разрыву сеткі ў версіі 4 азначаюць, што для дасягнення тых жа вынікаў вам трэба будзе павялічыць на адну кропку разрыву. Новыя спагадныя класы ўтыліт не спрабуюць прыстасавацца да менш распаўсюджаных выпадкаў, калі бачнасць элемента не можа быць выяўлена ў выглядзе аднаго бесперапыннага дыяпазону памераў вокны прагляду; замест гэтага вам трэба будзе выкарыстоўваць уласны CSS у такіх выпадках.