v4 ге көчүрүү

Bootstrap 4 бүткүл долбоордун негизги кайра жазуусу. Эң көрүнүктүү өзгөрүүлөр төмөндө жалпыланган, андан кийин тиешелүү компоненттерге конкреттүү өзгөртүүлөр келтирилген.

Туруктуу өзгөрүүлөр

Бета 3 версиясынан биздин туруктуу v4.x релизибизге көчүп, эч кандай өзгөрүү жок, бирок кээ бир көрүнүктүү өзгөрүүлөр бар.

Басып чыгаруу

• Түзүлгөн сынган басып чыгаруу утилиталары. Мурда .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 2ден же Bootstrap'тин кандайдыр бир эски версиясынан Бета 3 ге жаңыртып жатсаңыз колдонулат.

Ар кандай

• $thumbnail-transitionКолдонулбаган өзгөрмө алынып салынды . Биз эч нерсени өткөргөн жокпуз, андыктан бул жөн гана кошумча код болчу.
• npm топтому мындан ары биздин баштапкы жана дист файлдарынан башка файлдарды камтыбайт; эгерде сиз аларга таянып, биздин скрипттерди node_modulesпапка аркылуу иштетип жатсаңыз, анда сиз өзүңүздүн иш процессиңизди ыңгайлаштырыңыз.

Формалар

• Ыңгайлаштырылган жана демейки кутучаларды жана радиолорду кайра жазыңыз. Эми экөө тең дал келген HTML түзүмүнө ээ (сырткы <div>бир тууган <input>жана <label>) жана бирдей жайгашуу стилдери (стектелген демейки, өзгөрткүч классы менен сапта). Бул бизге киргизүүнүн абалына жараша энбелги стилин түзүүгө мүмкүндүк берет, disabledатрибутту колдоону жөнөкөйлөтөт (мурда ата-эне классты талап кылган) жана форманы текшерүүнү жакшыраак колдойт.

  Мунун бир бөлүгү катары, биз background-imageыңгайлаштырылган форманын белги кутучаларында жана радиолорунда бир нече s башкаруу үчүн CSSти өзгөрттүк. Мурда, азыр алынып салынган .custom-control-indicatorэлементте фон түсү, градиент жана SVG сөлөкөтү болгон. Фондук градиентти ыңгайлаштыруу бир гана өзгөртүү керек болгон сайын алардын баарын алмаштырууну билдирген. Эми бизде .custom-control-label::beforeтолтуруу жана градиент жана .custom-control-label::afterсөлөкөттү иштетүү бар.

  Ыңгайлаштырылган чекти сапта жасоо үчүн кошуңуз .custom-control-inline.

• Киргизүүгө негизделген баскыч топтору үчүн жаңыртылган селектор. [data-toggle="buttons"] { }Стиль жана жүрүм-турум үчүн эмес, биз атрибутту JS жүрүм-туруму үчүн гана колдонобуз жана стилдөө dataүчүн жаңы .btn-group-toggleкласска таянабыз.

• .col-form-legendбир аз жакшыртылган пайдасына алынып салынды .col-form-label. Бул жол .col-form-label-smменен элементтерде оңой .col-form-label-lgколдонсо болот .<legend>

• Ыңгайлаштырылган файл киргизүүлөрү алардын $custom-file-textSass өзгөрмөсүнө өзгөртүүнү алышты. Бул мындан ары уя салынган Sass картасы эмес жана азыр бир гана сапты иштетет — Browseбаскыч, анткени азыр биздин Sassдан түзүлгөн жалгыз псевдо-элемент. Текст Choose fileазыр .custom-file-label.

Киргизүү топтору

• Киргизүү тобунун кошумчалары эми киргизүүгө салыштырмалуу алардын жайгашуусуна өзгөчө. Биз эки жаңы класска .input-group-addonжана . Сиз азыр CSS'ибиздин көбүн жөнөкөйлөштүрүүчү тиркемени же препендентти ачык колдонушуңуз керек. Тиркеменин же баштагынын ичинде баскычтарыңызды башка жердегидей жайгаштырыңыз, бирок текстти ..input-group-btn.input-group-prepend.input-group-append.input-group-text

• Валидация стилдери азыр колдоого алынат, ошондой эле бир нече киргизүүлөр (бир топко бир гана киргизүүнү текшере аласыз).

• Өлчөм класстары .input-groupжеке форма элементтеринде эмес, ата-энеде болушу керек.

Бета 2 өзгөрүүлөр

Бета версиясында биз эч кандай өзгөрүү болууну максат кылабыз. Бирок, баары эле пландалгандай боло бербейт. Төмөндө Бета 1ден Бета 2ге өтүүдө эстен чыгарбоо керек болгон олуттуу өзгөрүүлөр бар.

Breaking

• Өчүрүлгөн $badge-colorөзгөрмө жана анын колдонулушу .badge. Биз түстүү контраст функциясын колдонуп, ге colorнегизделген түстү тандап алабыз background-color, андыктан өзгөрмөнүн кереги жок.
• CSS түпкү чыпкасы менен конфликттерди болтурбоо үчүн grayscale()функциянын аталышы өзгөртүлдү .gray()grayscale
• Башка жерде колдонулган түс схемаларыбызга дал келген .table-inverse, .thead-inverse, жана .thead-defaultto .*-darkжана деп өзгөртүлдү ..*-light
• Жооптуу таблицалар азыр ар бир тордун үзүлүү чекити үчүн класстарды жаратат. Бул Бета 1ден үзүлүп, .table-responsiveсиз колдонуп жаткан нерсе көбүрөөк окшош .table-responsive-md. Сиз азыр колдоно аласыз .table-responsiveже .table-responsive-{sm,md,lg,xl}керек болсо.
• Пакет менеджери альтернативалар үчүн (мисалы, Yarn же npm) эскиргендиктен, Бауэрдин колдоосу ташталды. Чоо-жайы үчүн bower/bower #2298 караңыз.
• Bootstrap дагы деле jQuery 1.9.1 же андан жогорураак версиясын талап кылат, бирок сизге 3.x версиясын колдонуу сунушталат, анткени v3.x колдоого алынган браузерлер Bootstrap колдогон браузерлер жана 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.

Жыйынтык

Бул жерде сиз v3төн v4кө өткөндө билгиңиз келген чоң билеттер.

Браузерди колдоо

• IE8, IE9 жана iOS 6 колдоого алынбай калды. v4 азыр IE10+ жана iOS 7+ гана. Алардын бирине муктаж болгон сайттар үчүн v3 колдонуңуз.
• Android v5.0 Lollipop браузери жана WebView үчүн расмий колдоо кошулду. Android Браузеринин жана WebViewдин мурунку версиялары расмий эмес түрдө гана колдоого алынган.

Глобалдык өзгөрүүлөр

• Flexbox демейки боюнча иштетилген. Жалпысынан алганда, бул флоаттардан жана башка компоненттерден алыстап кетүү дегенди билдирет.
• Биздин баштапкы CSS файлдарыбыз үчүн Less'тен Sass'ка которулду .
• Негизги CSS бирдигибизге которулду px, remбирок пикселдер дагы эле медиа сурамдары жана тордун жүрүм-туруму үчүн колдонулат, анткени түзмөктүн көрүнүшү түрдүн өлчөмүнө таасир этпейт.
• Глобалдык шрифт өлчөмү 14px.16px
• Бешинчи вариантты кошуу үчүн тордун деңгээли жаңыртылды (кичинекей түзмөктөрдө жана ылдыйда) жана бул класстардан инфикс 576pxалынып салынды . -xsМисал: .col-6.col-sm-4.col-md-3.
• Өзүнчө кошумча теманы SCSS өзгөрмөлөрү аркылуу конфигурациялануучу опциялар менен алмаштырды (мисалы, $enable-gradients: true).
• Grunt ордуна бир катар npm скрипттерин колдонуу үчүн системаны түзүңүз. Бардык сценарийлерди караңыз package.json, же жергиликтүү өнүгүү муктаждыктары үчүн биздин долбоор Readme.
• Bootstrap'тин жооп бербеген колдонулушу мындан ары колдоого алынбайт.
• Кеңири орнотуу документтеринин жана жекелештирилген түзүлүштөрдүн пайдасына онлайн Ыңгайлаштыргычты таштады.
• Жалпы CSS касиет-наркы жуптары жана маржа/толтуруучу аралык жарлыктары үчүн ондогон жаңы пайдалуу класстар кошулду.

Тор системасы

• Flexbox'ка жылдырылды.
  • Тор аралашмаларында жана алдын ала аныкталган класстарда flexbox үчүн кошумча колдоо.
  • Flexbox'тун бир бөлүгү катары, вертикалдуу жана горизонталдуу тегиздөө класстары үчүн колдоо камтылган.
• Жаңыртылган тор классынын аталыштары жана жаңы тор деңгээли.
  • Көбүрөөк башкаруу үчүн төмөндө жаңы smтор деңгээли кошулду. 768pxБизде азыр xs, sm, md, lgжана xl. Бул ошондой эле ар бир деңгээл бир деңгээлге көтөрүлгөнүн билдирет (ошондуктан .col-md-6v3 азыр .col-lg-6v4 да).
  • xsmin-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 сөлөкөтү шрифти түшүрүлдү. Эгер сизге иконалар керек болсо, кээ бир параметрлер:
  • Glyphicons'тун жогорку версиясы
  • Octicons
  • Font Awesome
  • Альтернативалардын тизмеси үчүн Кеңейтүү барагын караңыз . Кошумча сунуштарыңыз барбы? Сураныч, маселе же пиар ачыңыз.
• Affix jQuery плагини түшүрүлдү.
  • Биз position: stickyанын ордуна колдонууну сунуштайбыз. Чоо-жайын жана конкреттүү polyfill сунуштарын көрүү үчүн HTML5 Сураныч жазуусун караңыз . Бир сунуш, @supportsаны ишке ашыруу үчүн эрежени колдонуу (мисалы, @supports (position: sticky) { ... })/
  • Эгер сиз кошумча positionстилдерди колдонуу үчүн Affix'ти колдонуп жатсаңыз, политолтурлар колдонуу жагдайыңызды колдоого албашы мүмкүн. Мындай колдонуу үчүн бир вариант - үчүнчү тараптын 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мындан ары .rowvia mixin стилдерин колдонбойт, ошондуктан .rowазыр горизонталдуу тор макеттери үчүн талап кылынат (мисалы, <div class="form-group row">).
  • s .col-form-labelменен энбелгилердин вертикалдуу ортосуна жаңы класс кошулду..form-control
  • Тор класстары менен компакт форма макеттери үчүн жаңы .form-rowкошулду (өзүңүздү .rowа .form-rowжана өтүңүз).
• Кошулган ыңгайлаштырылган формаларды колдоо (белгилөө кутучалары, радиолор, тандоолор жана файл киргизүү үчүн).
• .has-error, .has-warning, жана класстары CSS жана псевдокласстар .has-successаркылуу HTML5 форманы текшерүү менен алмаштырылды .:invalid:valid
• .form-control-staticдеп өзгөртүлдү .form-control-plaintext.

Buttons

• .btn-defaultдеп өзгөртүлдү .btn-secondary.
• .btn-xsКлассты толугу менен таштады, анткени v3 класстарына .btn-smкараганда пропорционалдуу түрдө бир топ кичине.
• jQuery плагининин абалды аныктоочу баскычыbutton.js өчүрүлдү . Бул $().button(string)жана $().button('reset')ыкмаларын камтыйт. Биз анын ордуна бир аз ыңгайлаштырылган JavaScript колдонууну сунуштайбыз, ал сиз каалагандай жүрүм-турумга ээ болот.
  • Плагиндин башка мүмкүнчүлүктөрү (баскычтарды белгилөө кутучалары, баскыч радиолору, бир которуштуруу баскычтары) v4 ичинде сакталып калганына көңүл буруңуз.
• IE9+ колдогон баскычтарды' деп [disabled]өзгөртүңүз . Бирок дагы деле зарыл, анткени жергиликтүү өчүрүлгөн талаалар IE11де дагы эле ката .:disabled:disabledfieldset[disabled]

Баскыч тобу

• 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}
• 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Карталар менен колдонуу үчүн класс кошулду .

Modal

• Flexbox менен компонентти кайра жаздыңыз.
• Flexbox'ка өтүүнү эске алганда, баш баштагы четке кагуу сүрөтчөлөрүнүн тегиздөөсү бузулушу мүмкүн, анткени биз мындан ары сүзгүчтөрдү колдонбойбуз. Floated мазмун биринчи орунда турат, бирок flexbox менен мындан ары андай эмес. Оңдоо үчүн модалдык аталыштардан кийин келүү үчүн четке кагуу сүрөтчөлөрүн жаңыртыңыз.
• Опция ( модалга remoteтышкы мазмунду автоматтык түрдө жүктөө жана киргизүү үчүн колдонулушу мүмкүн) жана тиешелүү loaded.bs.modalокуя алынып салынды. Биз анын ордуна кардар тарабындагы шаблонду же берилиштерди байланыштыруучу алкакты колдонууну же jQuery.load'га өзүңүз чалууну сунуштайбыз.

Navs

• Flexbox менен компонентти кайра жаздыңыз.
• >Кыстарылган класстар аркылуу жөнөкөй стилдөө үчүн дээрлик бардык селекторлор алынып салынды.
• сыяктуу HTML-спецификалык селекторлордун ордуна s, s жана s .nav > li > aүчүн өзүнчө класстарды колдонобуз . Бул сиздин HTML'иңизди ийкемдүү кылат, ал эми кеңейтүү мүмкүнчүлүгүн жогорулатат..nav.nav-item.nav-link

Navbar

Чабыттоо тилкеси тегиздөө, жооп кайтаруу жана ыңгайлаштыруу үчүн жакшыртылган колдоо менен flexboxто толугу менен кайра жазылган.

• Жооптуу навигациянын жүрүм-турумдары азыр .navbarкласска талап кылынган .navbar-expand-{breakpoint} жер аркылуу колдонулат, анда сиз навигабарды жыйыштыра турган жерди тандайсыз. Буга чейин бул Less өзгөрүлмө модификация болгон жана кайра компиляцияны талап кылган.
• .navbar-defaultазыр .navbar-light, бирок .navbar-darkошол эле бойдон калууда. Алардын бири ар бир навигация тилкесинде талап кылынат. Бирок, бул класстар мындан ары background-colorс белгиленген; тескерисинче, алар негизинен гана таасир этет color.
• Navbars азыр кандайдыр бир фондо декларацияны талап кылат. Акылсыз ыңгайлаштыруу үчүн фонубуздан ( .bg-*) тандаңыз же жогорудагы жарык/тескери класстар менен өзүңүздүнүңүздүн орнотуңуз .
• Flexbox стилдерин эске алуу менен, навигаторлор эми тегиздөөнүн оңой варианттары үчүн flexbox утилиталарын колдоно алышат.
• .navbar-toggleазыр .navbar-togglerжана ар кандай стилдерге жана ички белгилерге ээ (үчтөн ашык эмес <span>).
• .navbar-formКлассты толугу менен таштады . Бул кереги жок; анын ордуна, жөн гана .form-inlineкерек болсо, маржа утилиталарын колдонуңуз жана колдонуңуз.
• Navbars мындан ары камтылган 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үчүн алынып салынды жана биздин Sass картабыздан түзүлгөн коммуналдык кызматтар ..bg-.text-.border$theme-colors

Прогресс

• Контексттик .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}.
• Тегиздөө жана аралык:
  • Бардык тараптар үчүн жаңы жооп берүүчү маржа жана толтуруучу утилиталар , ошондой эле тик жана горизонталдуу стенографиялар кошулду.
  • Flexbox утилиталарынын кайыктары кошулду .
  • .center-blockЖаңы .mx-autoкласска тапшырдым .
• Clearfix браузердин эски версияларын колдоону токтотуу үчүн жаңыртылды.

Сатуучу префикс аралашмасы

Bootstrap 3'тун v3.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дин ордуна) кайра жазылган.
• Барактар ​​жөнөкөй мазмун жана жеткиликтүү иерархия үчүн кайра түзүлдү.
• Bootstrap өзгөрмөлөрүнүн, миксиндердин жана башкаларын толук пайдалануу үчүн биз кадимки CSSден SCSSке өттүк.

Жооптуу коммуналдык кызматтар

Бардык @screen-өзгөрмөлөр v4.0.0 версиясында алынып салынды. media-breakpoint-up()Анын ордуна , media-breakpoint-down(), же media-breakpoint-only()Sass аралашмасын же $grid-breakpointsSass картасын колдонуңуз .

displayБиздин жооп берүүчү утилита класстарыбыз негизинен ачык-айкын утилиталардын пайдасына алынып салынды .

• жана класстары jQuery .hiddenжана методдоруна карама - .showкаршы келгендиктен алынып салынды . Анын ордуна, атрибутту өчүрүп-күйгүзүп көрүңүз же жана сыяктуу ички стилдерди колдонуңуз .$(...).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 колдонушуңуз керек болот.