V4 غا كۆچۈش

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

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

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

بېسىش

• بۇزۇلغان باسما ئەسلىھەلىرى مۇقىم. ئىلگىرى ، بىر .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خاس جەدۋەل تەكشۈرۈش رامكىسى ۋە رادىئودا كۆپ خىل باشقۇرۇش ئۈچۈن 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 سىنبەلگىسى خەت نۇسخىسىنى تاشلىدى. سىنبەلگە ئېھتىياجلىق بولسىڭىز ، بەزى تاللاشلار:
  • Glyphicons نىڭ يۇقىرى ئېقىمى
  • Octicons
  • Font Awesome
  • تاللاش تىزىملىكى ئۈچۈن كېڭەيتىش بېتىنى كۆرۈڭ . قوشۇمچە تەكلىپ-پىكىرلىرىڭىز بارمۇ؟ مەسىلە ياكى PR نى ئېچىڭ.
• 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-responsiveئوڭ تەرەپكە قويۇڭ <table>.
• ئىزچىللىق .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-errorHTML5 بىلەن ئالماشتۇرۇلغان .has-warningۋە .has-successدەرسلەر CSS :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ۋە ۋە ) بار.smmdlgxl
• ئىنكاسچان تور ئۆزگەرتىش سىنىپىنىڭ نامىنى .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كارتا بىلەن ئىشلىتىش ئۈچۈن دەرس قوشۇلدى .

Modal

• ئەۋرىشىم زاپچاس بىلەن زاپچاسنى قايتا يېزىڭ.
• ئەۋرىشىم ساندۇققا يۆتكىلىشنى كۆزدە تۇتقاندا ، بىز ئەمدى لەيلىمە دېتال ئىشلەتمىگەچكە ، ماۋزۇدىكى قويۇپ بېرىش سىنبەلگىسىنىڭ توغرىلىنىشى بۇزۇلغان بولۇشى مۇمكىن. لەيلىمە مەزمۇن بىرىنچى ئورۇندا تۇرىدۇ ، ئەمما ئەۋرىشىم ساندۇق بىلەن ئۇنداق بولمايدۇ. ئىشتىن بوشىتىلغان سىنبەلگىلەرنى يېڭىلاپ مودېل ماۋزۇدىن كېيىن كېلىدۇ.
• تاللاش ( سىرتقى remoteمەزمۇننى ئاپتوماتىك يۈكلەشكە ۋە مودېلغا ئوكۇل قىلىشقا ئىشلىتىلىدۇ) ۋە مۇناسىپ loaded.bs.modalھادىسە چىقىرىۋېتىلدى. ئۇنىڭ ئورنىغا خېرىدار تەرەپ قېلىپىنى ياكى سانلىق مەلۇمات باغلاش رامكىسىنى ئىشلىتىشنى ياكى jQuery غا تېلېفون قىلىشنى تەۋسىيە قىلىمىز .

ناۋرىز

• ئەۋرىشىم زاپچاس بىلەن زاپچاسنى قايتا يېزىڭ.
• >ئۇلانمىغان دەرسلەر ئارقىلىق ئاددىي ئۇسلۇب ئۈچۈن بارلىق تاللىغۇچىلارنى دېگۈدەك تاشلىدى .
• HTML غا ئوخشاش تاللىغۇچىلارنىڭ ئورنىغا s ، s ۋە s .nav > li > aئۈچۈن ئايرىم دەرسلەرنى ئىشلىتىمىز . بۇ كېڭەيتىلگەن كېڭەيتىش ئېلىپ بارغاندا HTML نى تېخىمۇ جانلىق قىلىدۇ..nav.nav-item.nav-link

Navbar

يولباشچى ماسلاشتۇرۇش ، ئىنكاس قايتۇرۇش ۋە خاسلاشتۇرۇشنى قوللاش ئارقىلىق 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بەلگە بىلەن ئاساسەن ئوخشاش بولغاچقا زاپچاسنى تاشلىدى . .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.

Carousel

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

پۈتۈك

ھۆججەتلىرىمىز تاختا كومپيۇتېرنىڭ دەرىجىسىنى ئۆستۈردى. تۆۋەندە تۆۋەندىكىلەر بار:

• بىز يەنىلا Jekyll نى ئىشلىتىۋاتىمىز ، ئەمما بىزنىڭ قىستۇرمىلىرىمىز بار:
  • bugify.rbتور كۆرگۈمىزنىڭ كەمتۈك بېتىدىكى مەزمۇنلارنى ئۈنۈملۈك تىزىشقا ئىشلىتىلىدۇ .
  • example.rbسۈكۈتتىكى highlight.rbقىستۇرمىنىڭ ئىختىيارى چاتاق بولۇپ ، تېخىمۇ ئاسان مىسال-كود بىر تەرەپ قىلىشقا يول قويىدۇ.
  • callout.rbئۇ مۇشۇنىڭغا ئوخشاش خاسلاشتۇرۇلغان چاتما ، ئەمما بىزنىڭ ئالاھىدە ھۆججەت چاقىرىشلىرىمىز ئۈچۈن لايىھەلەنگەن.
  • markdown-block.rbجەدۋەلگە ئوخشاش HTML ئېلېمېنتلىرىنىڭ ئىچىدە Markdown پارچىلىرىنى كۆرسىتىشكە ئىشلىتىلىدۇ.
  • 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 نى ئىشلىتىشىڭىز كېرەك.