in English

V4 غا كۆچۈش

Bootstrap 4 پۈتكۈل قۇرۇلۇشنىڭ ئاساسلىق قايتا يېزىلىشى. ئەڭ كۆرۈنەرلىك ئۆزگىرىشلەر تۆۋەندە يىغىنچاقلاندى ، ئاندىن مۇناسىۋەتلىك زاپچاسلارغا تېخىمۇ كونكرېت ئۆزگەرتىشلەر ئېلىپ بېرىلدى.

مۇقىم ئۆزگىرىش

Beta 3 دىن مۇقىم v4.x تارقىتىشىمىزغا يۆتكەلگەندە ، بۆسۈش خاراكتېرلىك ئۆزگىرىش يوق ، ئەمما بەزى كۆرۈنەرلىك ئۆزگىرىشلەر بار.

بېسىش

  • بۇزۇلغان باسما ئەسلىھەلىرى مۇقىم. ئىلگىرى ، بىر .d-print-*دەرس ئىشلىتىش ئويلىمىغان يەردىن باشقا .d-*دەرسلەرنى بېسىپ چۈشىدۇ. ھازىر ، ئۇلار بىزنىڭ باشقا كۆرسىتىش قوراللىرىمىزغا ماس كېلىدۇ ۋە پەقەت شۇ مېدىياغىلا ماس كېلىدۇ @media print.

  • ئىشلەتكىلى بولىدىغان باسما كۆرسىتىش قوراللىرىنى كېڭەيتىپ ، باشقا ئىقتىدارلارغا ماسلاشتۇردى. Beta 3 ۋە ئۇنىڭدىن چوڭلار پەقەت block، inline-block، inlineۋە none. مۇقىم v4 قوشۇلدى flex، inline-flex، table، table-rowۋە table-cell.

  • بەلگىلەنگەن يېڭى باسما ئۇسلۇبلىرى بىلەن توركۆرگۈچلەردە مۇقىم بېسىش ئالدىن كۆرۈش @page size.

Beta 3 ئۆزگىرىش

Beta 2 سىناق باسقۇچىدا بۆسۈش خاراكتېرلىك ئۆزگىرىشلىرىمىزنىڭ كۆپ قىسمىنى كۆرگەن بولسىمۇ ، ئەمما بىزدە يەنىلا Beta 3 ئېلان قىلىنىشىدا ھەل قىلىشقا تېگىشلىك بىر قانچە مەسىلە بار. ئەگەر سىز Beta 2 دىن Beta 3 ياكى Bootstrap نىڭ كونا نەشرىنى يېڭىلىسىڭىز ، بۇ ئۆزگەرتىشلەر قوللىنىلىدۇ.

ھەرخىل

  • ئىشلىتىلمىگەن $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، يەككە شەكىل ئېلېمېنتى ئەمەس.

Beta 2 ئۆزگىرىش

سىناقتا تۇرۇپ ، ھېچقانداق بۆسۈش خاراكتېرلىك ئۆزگىرىش بولماسلىقنى مەقسەت قىلىمىز. قانداقلا بولمىسۇن ، ئىشلار ھەمىشە پىلاندىكىدەك بولمايدۇ. تۆۋەندە Beta 1 دىن Beta 2 گە يۆتكەلگەندە ئەستە تۇتۇشقا تېگىشلىك بۆسۈش خاراكتېرلىك ئۆزگىرىشلەر.

Breaking

  • $badge-colorئۆزگەرگۈچى مىقدار ۋە ئۇنىڭ ئىشلىتىلىشى چىقىرىۋېتىلدى .badge. بىز رەڭ سېلىشتۇرما ئىقتىدارىنى ئىشلىتىپ ، ئاساسنى تاللايمىز color، background-colorشۇڭا ئۆزگەرگۈچى مىقدار ھاجەتسىز.
  • CSS يەرلىك سۈزگۈچ بىلەن زىددىيەتنى بۇزۇشتىن ساقلىنىش ئۈچۈن grayscale()فۇنكسىيەنىڭ نامىنى ئۆزگەرتتى .gray()grayscale
  • باشقا جايدا ئىشلىتىلگەن رەڭ لايىھەلىرىمىزگە .table-inverseئۆزگەرتىلدى .thead-inverseۋە ماسلاشتى ..thead-default.*-dark.*-light
  • مەسئۇلىيەتچان جەدۋەللەر ھازىر ھەر بىر كاتەكچە بۆلىكى ئۈچۈن دەرس ھاسىل قىلىدۇ. بۇ .table-responsiveسىز ئىشلىتىۋاتقان Beta 1 دىن بۆلىنىدۇ .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ئۇ <label>توغرىسىغا توغرىلىنىدۇ.
  • color-yiqخاسلىقنى ئۆز ئىچىگە ئالغان ئارىلاشما ماددىدىن colorقىممەت قايتۇرىدىغان ئىقتىدارغا ئۆزگەرتىپ ، ئۇنى ھەر قانداق CSS خاسلىقى ئۈچۈن ئىشلىتەلەيسىز . مەسىلەن ، ئۇنىڭ ئورنىغا color-yiq(#000)سىز يازالايسىز color: color-yiq(#000);.

يارقىن نۇقتىلار

  • مودېللارغا يېڭى pointer-eventsئىشلىتىشنى تونۇشتۇردى. سىرتقى كۆرۈنۈشنى ئىختىيارى چېكىش ئارقىلىق بىر تەرەپ قىلىش (ھەر بىر چېكىش ئارقىلىقلا ئاڭلاشنى مۇمكىن قىلىدۇ ) .modal-dialogئارقىلىق ۋەقەلەردىن ئۆتىدۇ ، ئاندىن ئۇنى ئەمەلىي ئىشلارغا قارشى تۇرىدۇ .pointer-events: none.modal-backdrop.modal-contentpointer-events: auto

خۇلاسە

بۇ يەردە v3 دىن v4 غا يۆتكەلگەندە دىققەت قىلماقچى بولغان چوڭ بېلەت تۈرلىرى بار.

توركۆرگۈنى قوللاش

  • IE8 ، IE9 ۋە iOS 6 قوللاشنى ئەمەلدىن قالدۇردى. v4 ھازىر پەقەت IE10 + ۋە iOS 7+. بۇلارنىڭ بىرىگە ئېھتىياجلىق تور بېكەتلەرگە v3 نى ئىشلىتىڭ.
  • ئاندىرويىد v5.0 Lollipop نىڭ تور كۆرگۈسى ۋە WebView نى رەسمىي قوللىدى. ئاندىرويىد توركۆرگۈ ۋە WebView نىڭ ئىلگىرىكى نەشرى پەقەت غەيرىي رەسمىي قوللاشقا ئېرىشكەن.

يەر شارى ئۆزگىرىشى

  • Flexbox سۈكۈتتىكى ھالەتتە قوزغىتىلغان. ئومۇمەن ، بۇ بىزنىڭ زاپچاسلىرىمىزدىن لەيلىمە شەكىلدىن يىراقلىشىشنى كۆرسىتىدۇ.
  • مەنبە CSS ھۆججىتىمىز ئۈچۈن Less دىن Sass غا ئالماشتۇرۇلدى .
  • بىزنىڭ ئاساسلىق CSS بىرلىكىمىزگە ئالماشتۇرۇلدى px، remگەرچە پىكسېل يەنىلا مېدىيا سوئاللىرى ۋە تور ھەرىكىتى ئۈچۈن ئىشلىتىلىدۇ ، چۈنكى ئۈسكۈنىلەرنىڭ كۆرۈنۈش شەكلى چوڭ-كىچىكلىكىنىڭ تەسىرىگە ئۇچرىمايدۇ.
  • 14pxيەر شارى خەت نۇسخىسى چوڭايدى 16px.
  • كاتەكچە دەرىجىسىنى ئۆزگەرتىپ ، بەشىنچى تاللاشنى قوشۇش ( 576pxئاستىدىكى ۋە ئاستىدىكى كىچىك ئۈسكۈنىلەرگە خىتاب قىلىش) ۋە -xsبۇ دەرسلەردىن infix نى چىقىرىۋەتتى. مىسال : .col-6.col-sm-4.col-md-3.
  • ئايرىم ئىختىيارى باشتېمىنى SCSS ئۆزگەرگۈچى مىقدار ئارقىلىق تەڭشىگىلى بولىدىغان تاللاشلار بىلەن ئالماشتۇردى (مەسىلەن ، $enable-gradients: true).
  • Grunt نىڭ ئورنىغا بىر يۈرۈش npm قوليازمىلىرىنى ئىشلىتىش ئۈچۈن سىستېما رېمونت قىلىندى. package.jsonبارلىق ئورگىناللارنى ياكى يەرلىك تەرەققىيات ئېھتىياجى ئۈچۈن تۈر ئوقۇش پروگراممىمىزنى كۆرۈڭ .
  • Bootstrap نىڭ ئىنكاسسىز ئىشلىتىلىشىنى ئەمدى قوللىمايدۇ.
  • توردىكى خاسلاشتۇرغۇچنى تېخىمۇ كەڭ كۆلەمدە تەڭشەش ھۆججىتى ۋە خاسلاشتۇرۇلغان قۇرۇلۇشلارغا پايدىلىق قىلىپ تاشلىدى.
  • ئورتاق CSS مۈلۈك قىممىتى جۈپلىرى ۋە margin / padding بوشلۇق تېزلەتمىسى ئۈچۈن ئون نەچچە يېڭى پايدىلىق دەرسلەر قوشۇلدى.

تور سىستېمىسى

  • Flexbox غا يۆتكەلدى.
    • كاتەكچە ئارىلاشما ۋە ئالدىن بېكىتىلگەن دەرسلەردە flexbox نى قوللىدى.
    • ئەۋرىشىم ساندۇقنىڭ بىر قىسمى سۈپىتىدە ، تىك ۋە توغرىسىغا توغرىلاش سىنىپىنى قوللاشنى ئۆز ئىچىگە ئالىدۇ.
  • كاتەكچە سىنىپ ئىسمى ۋە يېڭى كاتەكچە دەرىجىسى يېڭىلاندى.
    • تېخىمۇ كۆپ دانچە كونترول قىلىش ئۈچۈن smتۆۋەندە يېڭى تور دەرىجىسى قوشۇلدى . 768pxھازىر بىزدە xs، sm، md، lgۋە xlبار. بۇ يەنە ھەر بىر قاتلامنىڭ بىر دەرىجە ئۆرلىگەنلىكىدىن دېرەك بېرىدۇ (شۇڭا .col-md-6v3 ھازىر .col-lg-6v4 دە).
    • xsكاتەكچە سىنىپلىرى ئۆزگەرتىلگەندىن كېيىن ، min-width: 0پىكسېلنىڭ قىممەتنى ئەمەس ، بەلكى ئۇسلۇبنى ئىشلىتىشكە باشلىغانلىقىنى تېخىمۇ ئېنىق ئىپادىلەشنى تەلەپ قىلمايدۇ. ئۇنىڭ ئورنىغا .col-xs-6، ھازىر .col-6. باشقا بارلىق تور قاتلاملىرى infix نى تەلەپ قىلىدۇ (مەسىلەن ، sm).
  • كاتەكچە چوڭلۇقى ، ئارىلاشما ۋە ئۆزگەرگۈچى مىقدار يېڭىلاندى.
    • كاتەكچە ئۆستەڭنىڭ ھازىر Sass خەرىتىسى بار ، شۇڭا ھەر بىر ئۆتكەلدە ئالاھىدە ئۆستەڭ كەڭلىكىنى بەلگىلىيەلەيسىز.
    • يېڭىلانغان كاتەكچە ئارىلاشما دېتاللار make-col-readyئالدىن تەييار ئارىلاشتۇرۇش ۋە a ۋە يەككە ئىستوننىڭ چوڭ-كىچىكلىكىنى تەڭشەش ئۈچۈن ئىشلىتىلىدۇ make-col.flexmax-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) { ... })
    • ئەگەر سىز قوشۇمچە ، ئۇسلۇبسىز قوشۇمچە قوللىنىشچان پروگراممىلارنى ئىشلىتىۋاتقان بولسىڭىز position، پولىفىللار سىزنىڭ ئىشلىتىشىڭىزنى قوللىماسلىقى مۇمكىن. بۇ خىل ئىشلىتىشنىڭ بىر تاللىشى ئۈچىنچى تەرەپ ScrollPos-Styler كۈتۈپخانىسى.
  • قەغەز زاپچاسنى ئاساسىي جەھەتتىن سەل خاسلاشتۇرۇلغان كۇنۇپكىلار بولغاچقا تاشلىدى.
  • بارلىق زاپچاسلارنى دېگۈدەك پىششىقلاپ ئىشلەپ ، ئالاھىدە تاللانغان بالىلار تاللىغۇچىلارنىڭ ئورنىغا تېخىمۇ كۆپ ئۇۋىسىز سىنىپ تاللىغۇچىلارنى ئىشلىتىڭ.

زاپچاس بويىچە

بۇ تىزىملىكتە v3.xx بىلەن v4.0.0 ئارىسىدىكى زاپچاسلارنىڭ مۇھىم ئۆزگىرىشى گەۋدىلەندۈرۈلگەن.

قايتا قوزغىتىش

Bootstrap 4 نىڭ يېڭىسى Reboot بولۇپ ، يېڭى ئۇسلۇب جەدۋىلى ئۆزىمىزنىڭ مەلۇم دەرىجىدە ئويلىغان ئەسلىگە كەلتۈرۈش ئۇسلۇبى بىلەن نورماللاشتۇرۇشنى ئاساس قىلىدۇ. بۇ ھۆججەتتە كۆرۈنىدىغان تاللىغۇچىلار پەقەت ئېلېمېنتلارنىلا ئىشلىتىدۇ - بۇ يەردە دەرس يوق. بۇ بىزنىڭ قايتا تەڭشەش ئۇسلۇبىمىزنى تېخىمۇ كۆپ مودۇللۇق ئۇسۇل ئۈچۈن زاپچاس ئۇسلۇبىمىزدىن ئايرىپ تۇرىدۇ. بۇ ئۆز ئىچىگە ئالغان بىر قىسىم مۇھىم ئەسلىگە كەلتۈرۈشلەر ئۆزگەرتىش box-sizing: border-box، نۇرغۇن ئېلېمېنتلار ، ئۇلىنىش ئۇسلۇبى ۋە نۇرغۇن شەكىل ئېلېمېنتلىرىنى ئەسلىگە كەلتۈرۈش.emrem

مەتبەئە

  • .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-labelS بىلەن تىك مەركىزى بەلگىسىگە يېڭى دەرس قوشۇلدى .form-control.
    • .form-rowكاتەكچە سىنىپلىرى بىلەن ئىخچام شەكىل ئورۇنلاشتۇرۇشىغا يېڭى قوشۇلدى ( .rowa نى ئالماشتۇرۇڭ .form-row).
  • ئىختىيارى جەدۋەل قوللاش (تەكشۈرۈش رامكىسى ، رادىئو ، تاللاش ۋە ھۆججەت كىرگۈزۈش ئۈچۈن) قوشۇلدى.
  • ئالماشتۇرۇلغان .has-errorۋە HTML5 شەكلىدىكى دەرسلەر CSS ۋە ساختا دەرسلەر ئارقىلىق دەلىللەش .has-warningشەكلىنى دەلىللەيدۇ ..has-success:invalid:valid
  • ئۆزگەرتىلگەن . .form-control-static_.form-control-plaintext

كۇنۇپكىلار

  • ئۆزگەرتىلگەن . .btn-default_.btn-secondary
  • دەرسنى .btn-xsپۈتۈنلەي .btn-smv3 دىن كىچىكرەك قىلىپ تاشلىدى.
  • JQuery قىستۇرمىسىنىڭ دۆلەت دەرىجىلىك كۇنۇپكا ئىقتىدارى چۈشۈپ كەتتى. button.jsبۇ ئۇسۇل $().button(string)ۋە $().button('reset')ئۇسۇللارنى ئۆز ئىچىگە ئالىدۇ. بىز ئۇنىڭ ئورنىغا ئازراق JavaScript ئىشلىتىشنى تەۋسىيە قىلىمىز ، بۇ سىزنىڭ ئويلىغىنىڭىزدەك ھەرىكەت قىلىشنىڭ پايدىسى بولىدۇ.
    • شۇنىڭغا دىققەت قىلىڭكى ، قىستۇرمىنىڭ باشقا ئىقتىدارلىرى (كۇنۇپكا تەكشۈرۈش رامكىسى ، كۇنۇپكا رادىئوسى ، تاق تاقاش كۇنۇپكىسى) v4 دا ساقلاپ قېلىندى.
  • كۇنۇپكىلارنى IE9 + قوللايدىغان [disabled]قىلىپ ئۆزگەرتىڭ . قانداقلا بولمىسۇن يەنىلا زۆرۈر ، چۈنكى يەرلىك مېيىپ مەيدانلار IE11 دا يەنىلا كەمتۈك .:disabled:disabledfieldset[disabled]

Button group

  • ئەۋرىشىم زاپچاس بىلەن زاپچاسنى قايتا يېزىڭ.
  • چىقىرىۋېتىلدى .btn-group-justified. <div class="btn-group d-flex" role="group"></div>ئالماشتۇرۇش ئورنىدا ئېلېمېنتلار بىلەن ئورالغان ئورالما ئورنىدا ئىشلەتسىڭىز بولىدۇ .w-100.
  • چىقىرىۋېتىلگەن .btn-group-xsدەرسنى پۈتۈنلەي تاشلىدى .btn-xs.
  • كۇنۇپكا قورال بالداقلىرىدىكى كۇنۇپكا گۇرۇپپىلىرى ئارىسىدىكى ئېنىق ئارىلىق ئۆچۈرۈلدى. ھازىر ئىشلىتىڭ.
  • باشقا زاپچاسلار بىلەن ئىشلىتىش ئۈچۈن ياخشىلانغان ھۆججەتلەر.
  • ئاتا-ئانىلار تاللىغۇچىلاردىن بارلىق زاپچاسلار ، ئۆزگەرتكۈچلەر قاتارلىق يەككە دەرسلەرگە ئالماشتۇرۇلدى.
  • ئاددىيلاشتۇرۇلغان تامچە ئۇسلۇبلار چۈشۈش تىزىملىكىگە ئۇلانغان ياكى تۆۋەنگە قارىغان ئوقيا بىلەن توشۇلمايدۇ.
  • <div>تامچە چۈشۈشنى ھازىر s ياكى s ئارقىلىق قۇرغىلى بولىدۇ <ul>.
  • <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}تور سىنىپىغا ئۆزگەرتتى.
  • يېڭى ئەۋرىشىم ھەرىكەتلەندۈرگۈچ كۈچ orderسىنىپى ئۈچۈن ئىتتىرىش ۋە تارتىش ئۆزگەرتىش سىنىپىنى تاشلىدى. مەسىلەن ، ئۇنىڭ ئورنىغا .col-8.push-4، .col-4.pull-8سىز .col-8.order-2ۋە .col-4.order-1.
  • كاتەكچە سىستېمىسى ۋە زاپچاسلىرى ئۈچۈن ئەۋرىشىم دەرسلىك دەرسلىكى قوشۇلدى.

گۇرۇپپىلارنى تىزىڭ

  • ئەۋرىشىم زاپچاس بىلەن زاپچاسنى قايتا يېزىڭ.
  • تىزىملىك ​​گۇرۇپپىسىنىڭ تۈرلىرىنىڭ ئۇسلۇب ئۇلىنىشى ۋە كۇنۇپكا نۇسخىسى ئۈچۈن a.list-group-itemئېنىق سىنىپقا ئالماشتۇرۇلدى ..list-group-item-action
  • .list-group-flushكارتا بىلەن ئىشلىتىش ئۈچۈن دەرس قوشۇلدى .
  • ئەۋرىشىم زاپچاس بىلەن زاپچاسنى قايتا يېزىڭ.
  • ئەۋرىشىم ساندۇققا يۆتكىلىشنى كۆزدە تۇتقاندا ، بىز لەيلىمە دېتال ئىشلەتمىگەچكە ، ماۋزۇدىكى قويۇپ بېرىش سىنبەلگىسىنىڭ توغرىلىنىشى بۇزۇلۇشى مۇمكىن. لەيلىمە مەزمۇن بىرىنچى ئورۇندا تۇرىدۇ ، ئەمما ئەۋرىشىم ساندۇق بىلەن ئۇنداق بولمايدۇ. ئىشتىن بوشىتىلغان سىنبەلگىلەرنى يېڭىلاپ مودېل ماۋزۇدىن كېيىن كېلىدۇ.
  • تاللاش ( سىرتقى remoteمەزمۇننى ئاپتوماتىك يۈكلەشكە ۋە مودېلغا ئوكۇل قىلىشقا ئىشلىتىلىدۇ) ۋە مۇناسىپ loaded.bs.modalھادىسە چىقىرىۋېتىلدى. ئۇنىڭ ئورنىغا خېرىدار تەرەپ قېلىپىنى ياكى سانلىق مەلۇمات باغلاش رامكىسىنى ئىشلىتىشنى ياكى jQuery غا تېلېفون قىلىشنى تەۋسىيە قىلىمىز .
  • ئەۋرىشىم زاپچاس بىلەن زاپچاسنى قايتا يېزىڭ.
  • >ئۇلانمىغان دەرسلەر ئارقىلىق ئاددىي ئۇسلۇب ئۈچۈن تاللىغۇچىلارنىڭ ھەممىسىنى دېگۈدەك تاشلىدى .
  • بۇنىڭغا ئوخشاش 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 قورالىدىن پايدىلىنالايدۇ.
  • .navbar-toggleھازىر .navbar-togglerۋە ئوخشىمىغان ئۇسلۇب ۋە ئىچكى بەلگە بار (ئۈچ <span>s دىن ئېشىپ كەتمەيدۇ).
  • دەرسنى .navbar-formپۈتۈنلەي تاشلىدى. ئۇ ئەمدى لازىم ئەمەس. ئۇنىڭ ئورنىغا ، .form-inlineزۆرۈر تېپىلغاندا margin قوراللىرىنى ئىشلىتىڭ ۋە ئىشلىتىڭ.
  • Navbars ئەمدى ئۆز ئىچىگە ئالمايدۇ margin-bottomياكى border-radiusسۈكۈتتىكى ھالەتتە. زۆرۈر تېپىلغاندا ئاممىۋى ئەسلىھەلەرنى ئىشلىتىڭ.
  • ناۋادا بار بولغان بارلىق مىساللار يېڭىلاندى.

Pagination

  • ئەۋرىشىم زاپچاس بىلەن زاپچاسنى قايتا يېزىڭ.
  • ھازىر s نىڭ ئەۋلادلىرىغا ئېنىق دەرسلەر ( .page-item، ) تەلەپ قىلىنىدۇ.page-link.pagination
  • خاسلاشتۇرۇلغان .pagerسىزىق كۇنۇپكىسىدىن ئازراق بولغاچقا زاپچاسنى پۈتۈنلەي تاشلىدى.
  • ئېنىق بىر سىنىپ ، .breadcrumb-itemھازىر .breadcrumbs نىڭ ئەۋلادلىرىغا تەلەپ قىلىنىدۇ

بەلگە ۋە بەلگە

  • ئېلېمېنتنى مۇستەھكەملەش .labelۋە .badgeپارچىلاش <label>ۋە مۇناسىۋەتلىك زاپچاسلارنى ئاددىيلاشتۇرۇش.
  • .badge-pillيۇمىلاق «دورا» كۆرۈنۈشىگە ئۆزگەرتكۈچ سۈپىتىدە قوشۇلدى .
  • بەلگە تىزىملىك ​​گۇرۇپپىلىرى ۋە باشقا زاپچاسلاردا ئاپتوماتىك لەيلىمەيدۇ. ھازىر بۇنىڭ ئۈچۈن پايدىلىق دەرسلەر تەلەپ قىلىنىدۇ.
  • .badge-defaultتاشلىۋېتىلدى ۋە .badge-secondaryباشقا جايدا ئىشلىتىلگەن زاپچاس ئۆزگەرتىش سىنىپىغا قوشۇلدى.

تاختاي ، كىچىك كۆرۈنۈش ۋە قۇدۇق

پۈتۈنلەي يېڭى كارتا زاپچاسلىرى ئۈچۈن تاشلاندى.

Panels

  • .panelto .card, now flexbox.
  • .panel-defaultچىقىرىۋېتىلدى ۋە ئالماشتۇرمىدى.
  • .panel-groupچىقىرىۋېتىلدى ۋە ئالماشتۇرمىدى. .card-groupئالماشتۇرغۇچى ئەمەس ، ئۇ ئوخشىمايدۇ.
  • .panel-headingto.card-header
  • .panel-titleto .card-title. كۆزلىگەن كۆرۈنۈشكە ئاساسەن ، سىز يەنە ماۋزۇ ئېلېمېنتلىرى ياكى دەرسلەرنى (مەسىلەن <h3>، .h3) ياكى توم ئېلېمېنت ياكى دەرسلەرنى (مەسىلەن <strong>، ) ئىشلىتىشنى ئويلىسىڭىز <b>بولىدۇ .font-weight-bold. شۇنىڭغا دىققەت قىلىڭكى ، .card-titleئوخشاش ئىسىم قويۇلغان بىلەن ، باشقىچە كۆرۈنۈش ھاسىل قىلىدۇ .panel-title.
  • .panel-bodyto.card-body
  • .panel-footerto.card-footer
  • .panel-primary,,,,,,,,,,,,,,,,,,,,,,,,,,,,, _ .panel-success_ .panel-info_ .panel-warning_ _ _ _ _.panel-danger.bg-.text-.border$theme-colors

ئىلگىرىلەش

  • مەزمۇن خاراكتېرلىك .progress-bar-*دەرسلەرنى ئاممىۋى .bg-*ئەسلىھەلەرگە ئالماشتۇردى. مەسىلەن ، class="progress-bar progress-bar-danger"بولىدۇ class="progress-bar bg-danger".
  • .activeھەرىكەتچان ئىلگىرىلەش بالدىقىغا ئالماشتۇرۇلدى .progress-bar-animated.
  • لايىھىلەش ۋە ئۇسلۇبنى ئاددىيلاشتۇرۇش ئۈچۈن پۈتكۈل زاپچاسنى رېمونت قىلدى. سىزدە قاپلىغىلى بولىدىغان ئۇسلۇبلار ، يېڭى كۆرسەتكۈچلەر ۋە يېڭى سىنبەلگىلەر ئاز.
  • بارلىق CSS ئۇلانمىغان ۋە ئۆزگەرتىلگەن بولۇپ ، ھەر بىر سىنىپنىڭ ئالدىن قوشۇلۇشىغا كاپالەتلىك قىلىنغان .carousel-.
    • كارۇسېل بۇيۇملىرى ئۈچۈن ، .next، .prev، .leftۋە .rightھازىر .carousel-item-next، .carousel-item-prev، .carousel-item-leftۋە .carousel-item-right.
    • .itemis is now .carousel-item.
    • ئالدىنقى / كېيىنكى كونتروللار ئۈچۈن ، .carousel-control.rightھازىر .carousel-control.leftبار .carousel-control-next، .carousel-control-prevيەنى ئۇلار ئەمدى مەلۇم بىر ئاساسىي سىنىپنى تەلەپ قىلمايدۇ.
  • ئېھتىياجغا ئاساسەن بارلىق ئىنكاس قايتۇرۇش ئۇسلۇبىنى ئۆچۈرۈۋەتتى ، ئاممىۋى ئەسلىھەلەرگە كېچىكتۈرۈلدى (مەسىلەن ، بەزى كۆرۈنۈش نۇقتىلىرىدا خەت يېزىش) ۋە ئىختىيارى ئۇسلۇب.
  • چىقىرىۋېتىلگەن رەسىم كارۇسېل بۇيۇملىرىدىكى رەسىملەرنى قاپلاپ ، ئاممىۋى مۇلازىمەتنى كېچىكتۈردى.
  • يېڭى ماركا ۋە ئۇسلۇبلارنى ئۆز ئىچىگە ئالغان كارۇسېل مىسالى.

جەدۋەل

  • ئۇسلۇبتىكى ئۇلانغان جەدۋەللەرنى قوللاش ئۆچۈرۈلدى. بارلىق جەدۋەل ئۇسلۇبلىرى ھازىر ئاددىي تاللىغۇچىلار ئۈچۈن v4 غا ۋارىسلىق قىلدى.
  • تەتۈر جەدۋەل ئۆزگەرتىلگەن.

Utilities

  • كۆرسىتىش ، يوشۇرۇن ۋە تېخىمۇ كۆپ:
    • كۆرسىتىش ئەسلىھەلىرىنى ئىنكاسچان قىلدى (مەسىلەن ، .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 نىڭ 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-transformtranslatetranslate3duser-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 نى ئىشلىتىشىڭىز كېرەك.