Source

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 3 دىن 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

  • Flexbox ئارقىلىق زاپچاسنى قايتا يېزىڭ.
  • چىقىرىۋېتىلدى .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
  • كاتەكچە سىستېمىسى ۋە زاپچاسلىرى ئۈچۈن ئەۋرىشىم دەرسلىك دەرسلىكى قوشۇلدى.

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

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

Pagination

  • Flexbox ئارقىلىق زاپچاسنى قايتا يېزىڭ.
  • ھازىر 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، ۋە بىزنىڭ Sass خەرىتىمىزدىن ھاسىل قىلىنغان ئاممىۋى مۇلازىمەتلەر ئۈچۈن تاشلاندى ..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

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

  • .hiddenJQuery ۋە ئۇسۇلى بىلەن زىددىيەتلىك بولغانلىقى ئۈچۈن ، .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 نى ئىشلىتىشىڭىز كېرەك.