in English

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 бағдарламасының кез келген ескі нұсқасынан Beta 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-textПайдаланушы файл кірістері Sass айнымалысына өзгеріс алды . Бұл енді кірістірілген 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-ге көшу кезінде ескеру қажет үзіліссіз өзгерістер берілген.

Бұзылу

  • Жойылған $badge-colorайнымалы және оны пайдалану .badge. Біз түс контрасты функциясын colorнегізінде таңдау үшін пайдаланамыз background-color, сондықтан айнымалы мән қажет емес.
  • CSS жергілікті сүзгісімен қайшылықты бұзбау үшін 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}қажетінше пайдалана аласыз.
  • 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 браузері мен 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үшін a.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түсірілді. Оның орнына, оның және балалардағы тор бағанының сыныптарын (немесе араластырғыштарын) пайдаланыңыз және пайдаланыңыз .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.

Түймелер

  • .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Карталармен пайдалануға арналған сынып қосылды .
  • Flexbox көмегімен құрамдас қайта жазылды.
  • Flexbox-қа көшуді ескере отырып, тақырыптағы өшіру белгішелерінің туралануы бұзылған болуы мүмкін, өйткені біз енді қалтқыларды пайдаланбаймыз. Қалқымалы мазмұн бірінші орынға шығады, бірақ flexbox-та бұл енді болмайды. Түзету үшін модальды тақырыптардан кейін келетін өшіру белгішелерін жаңартыңыз.
  • Опция remote(сыртқы мазмұнды модальға автоматты түрде жүктеу және енгізу үшін пайдаланылуы мүмкін) және сәйкес loaded.bs.modalоқиға жойылды. Оның орнына клиенттік үлгіні немесе деректерді байланыстыру құрылымын пайдалануды немесе jQuery.load файлын өзіңіз шақыруды ұсынамыз.
  • Flexbox көмегімен құрамдас қайта жазылды.
  • >Кірістірілген сыныптар арқылы қарапайым сәндеу үшін барлық дерлік селекторларды тастады.
  • сияқты HTML-арнайы селекторлардың орнына s, s және s .nav > li > aүшін бөлек сыныптарды қолданамыз . Бұл сіздің HTML-ді икемді етеді, сонымен бірге кеңейтімділікті арттырады..nav.nav-item.nav-link

Шарлау тақтасы теңестіру, жауап беру және теңшеу үшін жақсартылған қолдауымен flexbox ішінде толығымен қайта жазылды.

  • Жауапты шарлау тақтасының әрекеттері енді .navbarсыныпқа шарлау тақтасын жию керек жерді таңдайтын талап арқылы қолданылады. .navbar-expand-{breakpoint}Бұрын бұл аз айнымалы модификация болды және қайта құрастыруды қажет етті.
  • .navbar-defaultқазір .navbar-lightболса да, сол .navbar-darkкүйінде қалады. Олардың біреуі әрбір шарлау тақтасында қажет. Дегенмен, бұл сыныптар енді background-colors орнатпайды; орнына олар негізінен тек әсер етеді color.
  • Navbars енді қандай да бір фондық декларацияны қажет етеді. Біздің фондық утилиталарымыздан ( ) таңдаңыз немесе ақылсыз теңшеу үшін.bg-* жоғарыдағы жарық/кері сыныптармен өзіңізді орнатыңыз .
  • Flexbox мәнерлерін ескере отырып, навигаторлар енді оңай туралау опциялары үшін flexbox утилиталарын пайдалана алады.
  • .navbar-toggleқазір .navbar-togglerжәне әртүрлі стильдері мен ішкі белгілеулері бар (үш <span>секундтан артық емес).
  • Сабақты .navbar-formмүлде тастады. Бұл енді қажет емес; оның орнына .form-inlineқажетінше маржа утилиталарын пайдаланыңыз және қолданыңыз.
  • Шарлау жолақтары енді margin-bottomнемесе border-radiusәдепкі бойынша қосылмайды. Қажет болса, утилиталарды пайдаланыңыз.
  • Шарлау тақталары бар барлық мысалдар жаңа белгілерді қосу үшін жаңартылды.

Беттеу

  • Flexbox көмегімен құрамдас қайта жазылды.
  • Айқын сыныптар ( .page-item, .page-link) енді .paginations ұрпақтарында қажет
  • Құрамдас бөлікті толығымен алып тастады, .pagerсебебі ол теңшелген контур түймелерінен сәл ғана артық болды.
  • Енді s ұрпақтарында анық класс, .breadcrumb-item, қажет.breadcrumb

Белгілер мен белгілер

  • Біріктірілген .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}.
  • Туралау және аралық:
  • Clearfix браузердің ескі нұсқаларына қолдау көрсетуді тоқтату үшін жаңартылды.

Жеткізуші префикс араластырғыштары

v3.2.0 нұсқасында ескірген Bootstrap 3 жеткізуші префикс араластырғыштары 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.rbhighlight.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 пайдалану қажет болады.