v4 වෙත සංක්‍රමණය වේ

Bootstrap 4 යනු සමස්ත ව්‍යාපෘතියේම ප්‍රධාන නැවත ලිවීමකි. වඩාත්ම කැපී පෙනෙන වෙනස්කම් පහත සාරාංශ කර ඇත, පසුව අදාළ සංරචක සඳහා වඩාත් නිශ්චිත වෙනස්කම්.

ස්ථාවර වෙනස්කම්

Beta 3 සිට අපගේ ස්ථායී v4.0 නිකුතුව වෙත ගමන් කිරීම, බිඳෙන වෙනස්කම් නොමැත, නමුත් සැලකිය යුතු වෙනස්කම් කිහිපයක් තිබේ.

මුද්රණය කිරීම

• ස්ථාවර කැඩුණු මුද්‍රණ උපයෝගිතා. මීට පෙර, පන්තියක් භාවිතා කිරීම .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 පැකේජයට තවදුරටත් අපගේ මූලාශ්‍ර සහ dist ගොනු හැර වෙනත් ගොනු ඇතුළත් නොවේ; ඔබ ඒවා මත විශ්වාසය තබා අපගේ ස්ක්‍රිප්ට් 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-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 සහාය අවලංගු කර ඇත (උදා, නූල් හෝ npm). විස්තර සඳහා bower/bower#2298 බලන්න.
• Bootstrap සඳහා තවමත් jQuery 1.9.1 හෝ ඉහළ අවශ්‍ය වේ, නමුත් v3.x හි සහය දක්වන බ්‍රවුසරයන් Bootstrap සහය දක්වන ඒවා වන අතර v3.x හි සමහර ආරක්ෂක නිවැරදි කිරීම් ඇති බැවින් 3.x අනුවාදය භාවිතා කිරීමට ඔබට උපදෙස් දෙනු ලැබේ.
• භාවිත නොකළ .form-control-labelපන්තිය ඉවත් කළා. ඔබ මෙම පන්තිය භාවිතා කළේ නම්, එය තිරස් ආකාර පිරිසැලසුම් තුළ එයට සම්බන්ධ ආදානය සමඟ .col-form-labelසිරස්ව කේන්ද්‍රගත වූ පන්තියේ අනුපිටපතකි.<label>
• color-yiqදේපල ඇතුළත් මිශ්‍රණයකින් අගයක් ලබා දෙන ශ්‍රිතයකට වෙනස් colorකර, ඔබට එය ඕනෑම CSS දේපලක් සඳහා භාවිතා කිරීමට ඉඩ සලසයි. උදාහරණයක් ලෙස, වෙනුවට color-yiq(#000), ඔබ ලියන්නේ color: color-yiq(#000);.

ඉස්මතු කිරීම්

• මාදිලිවල නව pointer-eventsභාවිතයක් හඳුන්වා දෙන ලදී. අභිරුචි ක්ලික් හැසිරවීම සඳහා පිටත .modal-dialogසිදුවීම් හරහා ගමන් කරයි pointer-events: none(ඕනෑම ක්ලික් කිරීම් සඳහා සවන් දීමට හැකි වන පරිදි .modal-backdrop), පසුව එය .modal-contentසමඟ සත්‍ය සඳහා ප්‍රතික්‍රියා කරයි pointer-events: auto.

සාරාංශය

මෙන්න ඔබ v3 සිට v4 දක්වා ගමන් කරන විට දැන ගැනීමට අවශ්‍ය විශාල ටිකට් අයිතම වේ.

බ්රවුසර සහාය

• IE8, IE9, සහ iOS 6 සහය අත්හැරිය. v4 දැන් IE10+ සහ iOS 7+ පමණි. ඒවායින් එකක් අවශ්‍ය අඩවි සඳහා, v3 භාවිතා කරන්න.
• Android v5.0 Lollipop හි බ්‍රව්සරය සහ WebView සඳහා නිල සහාය එක් කරන ලදී. Android බ්‍රවුසරයේ සහ WebView හි පෙර අනුවාද පවතිනුයේ නිල නොවන සහය පමණි.

ගෝලීය වෙනස්කම්

• Flexbox පෙරනිමියෙන් සක්‍රීය කර ඇත. සාමාන්‍යයෙන් මෙයින් අදහස් කරන්නේ අපගේ සංරචක හරහා floats සහ තවත් දේවලින් ඉවත් වීමයි.
• අපගේ මූලාශ්‍ර 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සියලුම ස්ක්‍රිප්ට් සඳහා බලන්න , නැතහොත් ප්‍රාදේශීය සංවර්ධන අවශ්‍යතා සඳහා අපගේ ව්‍යාපෘතිය කියවන්න.
• Bootstrap හි ප්‍රතිචාරාත්මක නොවන භාවිතය තවදුරටත් සහාය නොදක්වයි.
• වඩාත් විස්තීර්ණ ස්ථාපන ලියකියවිලි සහ අභිරුචි කළ ගොඩනැගීම් සඳහා සබැඳි අභිරුචිකරණය අතහැර දමා ඇත.
• පොදු CSS දේපල වටිනාකම් යුගල සහ ආන්තික/පඩිං පරතරය කෙටිමං සඳහා නව උපයෝගිතා පන්ති දුසිම් ගණනක් එකතු කරන ලදී.

ජාල පද්ධතිය

• flexbox වෙත ගෙන යන ලදී.
  • ග්‍රිඩ් මික්සින් සහ පූර්ව නිශ්චිත පන්තිවල flexbox සඳහා සහය එක් කරන ලදී.
  • flexbox හි කොටසක් ලෙස, සිරස් සහ තිරස් පෙළගැස්වීමේ පන්ති සඳහා සහය ඇතුළත් වේ.
• යාවත්කාලීන ජාල පන්ති නම් සහ නව ජාල ස්ථරයක්.
  • වඩාත් කැටිති පාලනය සඳහා පහත නව smජාල ස්ථරයක් එක් කරන ලදී. අපට 768pxදැන් xs,,,, සහ . sm_ මෙයින් අදහස් කරන්නේ සෑම ස්ථරයක්ම එක් මට්ටමක් ඉහළ නංවා ඇති බවයි (එබැවින් v3 හි දැන් v4 හි ඇත).mdlgxl.col-md-6.col-lg-6
  • xsmin-width: 0ග්‍රිඩ් පන්ති වෙනස් කර ඇත්තේ ඒවා පික්සල් අගයකින් නොව මෝස්තර යෙදීමට පටන් ගන්නා බව වඩාත් නිවැරදිව නිරූපණය කිරීමට ඉන්ෆික්ස් අවශ්‍ය නොවන පරිදිය . ඒ වෙනුවට .col-xs-6, එය දැන් .col-6. අනෙකුත් සියලුම ජාල ස්ථර වලට infix අවශ්‍ය වේ (උදා, sm).
• ජාලක ප්‍රමාණ, මිශ්‍රණ සහ විචල්‍ය යාවත්කාලීන කරන ලදී.
  • Grid gutters හට දැන් Sass සිතියමක් ඇති නිසා ඔබට එක් එක් කඩඉම් ලක්ෂ්‍යයේ දී නිශ්චිත කානු පළල නියම කළ හැක.
  • make-col-readyප්‍රෙප් මික්සින් භාවිතා කිරීමට සහ තනි තීරු ප්‍රමාණය make-colසැකසීමට a භාවිතා කිරීමට ජාල මිශ්‍රණ යාවත්කාලීන කරන ලදී.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 හි upstream අනුවාදය
  • ඔක්ටිකන්ස්
  • ෆොන්ට් Awesome
  • විකල්ප ලැයිස්තුවක් සඳහා දිගු පිටුව බලන්න . අමතර යෝජනා තිබේද? කරුණාකර ගැටලුවක් හෝ PR විවෘත කරන්න.
• Affix jQuery ප්ලගිනය අතහැරියා.
  • ඒ වෙනුවට භාවිතා කිරීමට අපි නිර්දේශ කරමු position: sticky. HTML5 බලන්න විස්තර සහ විශේෂිත බහු පිරවුම් නිර්දේශ සඳහා කරුණාකර ඇතුල් වන්න. එක් යෝජනාවක් නම් @supportsඑය ක්‍රියාත්මක කිරීම සඳහා රීතියක් භාවිතා කිරීමයි (උදා, @supports (position: sticky) { ... })/
  • ඔබ අමතර, positionශෛලීන් නොවන යෙදුම් යෙදීමට Affix භාවිතා කරන්නේ නම්, පොලිෆිල්ස් ඔබේ භාවිත අවස්ථාවට සහාය නොදක්වයි. එවැනි භාවිතයන් සඳහා එක් විකල්පයක් වන්නේ තෙවන පාර්ශවීය ScrollPos-Styler පුස්තකාලයයි.
• එය අත්‍යවශ්‍යයෙන්ම තරමක් අභිරුචිකරණය කරන ලද බොත්තම් බැවින් පේජර් සංරචකය අතහැර දමා ඇත.
• අධික විශේෂිත ළමා තේරීම් වෙනුවට වැඩිපුර නොබැඳි පන්ති තේරීම් භාවිතා කිරීමට සියලුම සංරචක පාහේ ප්‍රතිනිර්මාණය කරන ලදී.

සංරචකය අනුව

මෙම ලැයිස්තුව v3.xx සහ v4.0.0 අතර සංරචක අනුව ප්‍රධාන වෙනස්කම් ඉස්මතු කරයි.

නැවත ආරම්භ කරන්න

Bootstrap 4 වෙත අලුත් වන්නේ Reboot , නව මෝස්තර පත්‍රිකාවක් වන අතර එය සාමාන්‍යකරණය මත ගොඩනැගෙන අපගේම තරමක් මතිමතාන්තර යළි පිහිටුවීමේ විලාසයන් වේ. මෙම ගොනුවේ දිස්වන තේරීම් මූලද්‍රව්‍ය පමණක් භාවිතා කරයි - මෙහි පන්ති නොමැත. මෙය වඩාත් මොඩියුලර් ප්‍රවේශයක් සඳහා අපගේ යළි පිහිටුවීමේ විලාසයන් අපගේ සංරචක මෝස්තර වලින් හුදකලා කරයි. මෙයට ඇතුළත් වන ඉතා වැදගත් යළි පිහිටුවීම් නම්, බොහෝ මූලද්‍රව්‍යවල box-sizing: border-boxසිට ඒකක emවෙත remමාරුවීම, සබැඳි විලාසයන් සහ බොහෝ ආකෘති මූලද්‍රව්‍ය යළි පිහිටුවීමයි.

මුද්‍රණ ශිල්පය

• සියලුම .text-උපයෝගිතා _utilities.scssගොනුව වෙත ගෙන යන ලදී.
• එහි මෝස්තර .page-headerඋපයෝගිතා හරහා යෙදිය හැකි බැවින් අතහැර දමා ඇත.
• .dl-horizontalඅතහැර දමා ඇත. ඒ වෙනුවට, එහි සහ ළමයින් .rowමත <dl>ජාලක තීරු පන්ති (හෝ මික්සින්) භාවිතා කරන්න .<dt><dd>
• ප්‍රතිනිර්මාණය කරන ලද බ්ලොක්කෝට්, ඒවායේ මෝස්තර <blockquote>මූලද්‍රව්‍යයේ සිට තනි පන්තියකට ගෙන යාම, .blockquote. .blockquote-reverseපෙළ උපයෝගිතා සඳහා විකරණය කිරීම අතහැර දමා ඇත.
• .list-inlineදැන් එහි ළමා ලැයිස්තු අයිතමවලට නව .list-inline-itemපන්තිය යෙදිය යුතුය.

රූප

• ලෙස නැවත නම් කරන .img-responsiveලදී .img-fluid.
• ලෙස නැවත නම් කරන .img-roundedලදී.rounded
• ලෙස නැවත නම් කරන .img-circleලදී.rounded-circle

මේස

• තේරීම් කාරකයේ සියලුම අවස්ථා පාහේ >ඉවත් කර ඇත, එයින් අදහස් කරන්නේ කැදලි වගු දැන් ස්වයංක්‍රීයව ඔවුන්ගේ දෙමාපියන්ගෙන් මෝස්තර උරුම වනු ඇති බවයි. මෙය අපගේ තේරීම්කරුවන් සහ විභව අභිරුචිකරණයන් බෙහෙවින් සරල කරයි.
• අනුකූලතාව සඳහා නැවත නම් .table-condensedකරන .table-smලදී.
• නව .table-inverseවිකල්පයක් එක් කරන ලදී.
• වගු ශීර්ෂ විකරණයන් එකතු කරන ලදී: .thead-defaultසහ .thead-inverse.
• -උපසර්ගයක් තිබීම සඳහා සන්දර්භීය පන්ති නැවත නම් කරන .table-ලදී. එබැවින් .active, .success, සහ වෙත , , සහ . .warning_ _.danger.info.table-active.table-success.table-warning.table-danger.table-info

ආකෘති පත්ර

• _reboot.scssගොනුව වෙත ගෙන ගිය මූලාංග යළි පිහිටුවීම .
• ලෙස නැවත නම් කරන .control-labelලදී .col-form-label.
• පිළිවෙළින් නැවත .input-lgනම් කර .input-smඇත ..form-control-lg.form-control-sm
• .form-group-*සරල බව වෙනුවෙන් පන්ති අතහැරියා . .form-control-*ඒ වෙනුවට දැන් පන්ති භාවිතා කරන්න .
• අතහැර .help-blockදමා එය .form-textඅවහිර මට්ටමේ උදවු පෙළ සඳහා ප්‍රතිස්ථාපනය කරන ලදී. පේළිගත උපකාර පෙළ සහ වෙනත් නම්‍යශීලී විකල්ප සඳහා, වැනි උපයෝගිතා පන්ති භාවිතා කරන්න .text-muted.
• අතහැර .radio-inlineදමා සහ .checkbox-inline.
• ඒකාබද්ධ .checkboxසහ විවිධ පන්තිවලට .radio..form-check.form-check-*
• තිරස් ආකෘති නැවත සකස් කර ඇත:
  • .form-horizontalපන්ති අවශ්‍යතාවය අත්හැරියා .
  • .form-group.rowමික්සින් හරහා මෝස්තර තවදුරටත් අදාළ නොවේ , එබැවින් .rowදැන් තිරස් ජාලක පිරිසැලසුම් සඳහා අවශ්‍ය වේ (උදා, <div class="form-group row">).
  • .col-form-labels සහිත සිරස් මැද ලේබල වෙත නව පන්තිය එක් කරන .form-controlලදී.
  • .form-rowජාල පන්ති සමඟ සංයුක්ත ආකෘති පිරිසැලසුම් සඳහා නව එකතු කරන ලදි (ඔබගේ .rowa සඳහා මාරු කර .form-rowයන්න).
• අභිරුචි පෝරම සහය එක් කරන ලදි (පරික්ෂණ කොටු, රේඩියෝ, තේරීම් සහ ගොනු ආදාන සඳහා).
• CSS සහ ව්‍යාජ පන්ති හරහා HTML5 පෝරම වලංගු කිරීම සමඟ ප්‍රතිස්ථාපනය .has-errorකරන ලද , .has-warning, සහ පන්ති..has-success:invalid:valid
• ලෙස නැවත නම් කරන .form-control-staticලදී .form-control-plaintext.

බොත්තම්

• ලෙස නැවත නම් කරන .btn-defaultලදී .btn-secondary.
• v3 වලට වඩා සමානුපාතිකව ඉතා කුඩා .btn-xsබැවින් පන්තිය සම්පූර්ණයෙන්ම අතහැර දමා ඇත..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 හෝ 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}
• නව 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 වෙත ගෙන යාමෙන්, අපි තවදුරටත් floats භාවිතා නොකරන බැවින් ශීර්ෂයේ ඉවතලන අයිකන පෙළගැස්වීම කැඩී යාමට ඉඩ ඇත. පාවෙන අන්තර්ගතය පළමුව පැමිණේ, නමුත් flexbox සමඟ එය තවදුරටත් එසේ නොවේ. නිවැරදි කිරීමට මාදිලියේ මාතෘකා වලට පසුව පැමිණීමට ඔබේ ඉවතලන අයිකන යාවත්කාලීන කරන්න.
• විකල්පය ( බාහිර remoteඅන්තර්ගතය ස්වයංක්‍රීයව පූරණය කිරීමට සහ මාදිලියකට එන්නත් කිරීමට භාවිතා කළ හැකි) සහ අදාළ loaded.bs.modalසිදුවීම ඉවත් කරන ලදී. අපි ඒ වෙනුවට සේවාදායකයා-පාර්ශවීය සැකිලි හෝ දත්ත බන්ධන රාමුවක් භාවිතා කිරීම හෝ jQuery.load ඔබම ඇමතීමට නිර්දේශ කරමු.

නව්ස්

• Flexbox සමඟ සංරචකය නැවත ලිවීය.
• >කැදලි රහිත පන්ති හරහා සරල හැඩගැන්වීම් සඳහා සියලුම තේරීම්කරුවන් පාහේ අතහැර දමා ඇත.
• වැනි HTML-විශේෂිත තේරීම් වෙනුවට අපි s, s, සහ s .nav > li > aසඳහා වෙනම පන්ති භාවිතා කරමු . මෙය ඔබේ HTML වඩාත් නම්‍යශීලී කරන අතරම වැඩි විස්තාරණයක් ගෙන එයි..nav.nav-item.nav-link

නවබාර්

පෙළගැස්ම, ප්‍රතිචාර දැක්වීම සහ අභිරුචිකරණය සඳහා වැඩිදියුණු කළ සහාය ඇතිව navbar සම්පූර්ණයෙන්ම flexbox තුළ නැවත ලියා ඇත.

• ප්‍රතිචාරාත්මක navbar හැසිරීම් දැන් ඔබට අවශ්‍ය ස්ථානය හරහා නව තීරුව බිඳ දැමිය යුතු ස්ථානය තෝරාගෙන .navbarපන්තියට යොදනු ලැබේ. මීට පෙර මෙය අඩු විචල්‍ය වෙනස් කිරීමක් වූ අතර නැවත සම්පාදනය කිරීම අවශ්‍ය විය. .navbar-expand-{breakpoint}
• .navbar-defaultදැනට පවතින .navbar-lightනමුත් .navbar-darkඑය එලෙසම පවතී. එක් එක් navbar මත මෙයින් එකක් අවශ්‍ය වේ. කෙසේ වෙතත්, මෙම පන්ති තවදුරටත් background-colors සකසා නැත; ඒ වෙනුවට ඔවුන් මූලික වශයෙන් බලපාන්නේ පමණි color.
• Navbar වලට දැන් යම් ආකාරයක පසුබිම් ප්‍රකාශයක් අවශ්‍ය වේ. අපගේ පසුබිම් උපයෝගිතා වලින් තෝරන්න ( ) හෝ පිස්සු අභිරුචිකරණය සඳහා.bg-* ඉහත ආලෝකය/ප්‍රතිලෝම පන්ති සමඟ ඔබේම ඒවා සකසන්න .
• flexbox styles අනුව, navbars හට දැන් පහසු පෙළගැස්වීමේ විකල්ප සඳහා flexbox උපයෝගිතා භාවිතා කළ හැක.
• .navbar-toggleදැන් වන .navbar-togglerඅතර විවිධ මෝස්තර සහ අභ්‍යන්තර සලකුණු ඇත (තවත් තුනක් නැත <span>).
• .navbar-formපන්තිය සම්පූර්ණයෙන්ම අත්හැරියා . එය තවදුරටත් අවශ්ය නොවේ; ඒ වෙනුවට, .form-inlineඅවශ්‍ය පරිදි ආන්තික උපයෝගිතා භාවිතා කර යොදන්න.
• Navbars තවදුරටත් ඇතුළත් නොවේ margin-bottomහෝ border-radiusපෙරනිමියෙන්. අවශ්ය පරිදි උපයෝගිතා භාවිතා කරන්න.
• navbars විශේෂාංගී වන සියලුම උදාහරණ නව සලකුණු ඇතුළත් කිරීමට යාවත්කාලීන කර ඇත.

පේජිනේෂන්

• Flexbox සමඟ සංරචකය නැවත ලිවීය.
• පැහැදිලි පන්ති ( .page-item, .page-link) දැන් .paginations ගෙන් පැවත එන්නන් සඳහා අවශ්‍ය වේ
• .pagerඑය අභිරුචි කළ දළ සටහන් බොත්තම් වලට වඩා මඳක් වැඩි වූ බැවින් සංරචකය සම්පූර්ණයෙන්ම අතහැර දමන ලදී .

පාන් කුඩු

• පැහැදිලි පන්තියක්, .breadcrumb-item, දැන් .breadcrumbs ගෙන් පැවත එන්නන් සඳහා අවශ්‍ය වේ

ලේබල් සහ ලාංඡන

• ඒකාබද්ධ කිරීම .labelසහ මූලද්‍රව්‍යයෙන් .badgeඅපැහැදිලි <label>කිරීම සහ අදාළ සංරචක සරල කිරීම.
• .badge-pillවටකුරු "පෙති" පෙනුම සඳහා modifier ලෙස එකතු කරන ලදී.
• ලැයිස්තු කණ්ඩායම් සහ අනෙකුත් සංරචක තුළ ලාංඡන තවදුරටත් ස්වයංක්‍රීයව පාවෙන්නේ නැත. ඒ සඳහා දැන් උපයෝගිතා පන්ති අවශ්‍ය වේ.
• .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, සහ අපගේ Sass සිතියමෙන් ජනනය කරන ලද , , සහ උපයෝගිතා .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.
  • .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}.
• පෙළගැස්ම සහ පරතරය:
  • සියලුම පැති සඳහා නව ප්‍රතිචාරාත්මක ආන්තිකය සහ පිරවුම් උපයෝගිතා , සහ සිරස් සහ තිරස් කෙටිකතා එක් කරන ලදී.
  • ෆ්ලෙක්ස්බොක්ස් උපයෝගිතා බෝට්ටු ප්‍රමාණයක් එකතු කරන ලදී .
  • .center-blockඅලුත් .mx-autoපන්තියට දැම්මා .
• පැරණි බ්‍රවුසර අනුවාද සඳහා සහය අත්හැරීමට Clearfix යාවත්කාලීන කරන ලදී.

විකුණුම්කරු උපසර්ග මික්සින්

v3.2.0 හි අත්හරින ලද Bootstrap 3 හි විකුණුම් උපසර්ග මික්සින්, Bootstrap 4 හි ඉවත් කර ඇත. අපි Autoprefixer භාවිතා කරන බැවින් , ඒවා තවදුරටත් අවශ්‍ය නොවේ.

පහත මිශ්‍රණයන් ඉවත් animationකරන ලදී : ,,,,,,,,,,,,,,,,,,,,,,, _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-timing-functionbackface-visibilitybox-sizingcontent-columnshyphensopacityperspectiveperspective-originrotaterotateXrotateYscalescaleXscaleYskewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

ලේඛනගත කිරීම

අපගේ ලියකියවිලි පුවරුව හරහාද උසස්වීමක් ලැබිණි. පහත දැක්වෙන්නේ පහත දැක්වේ.

• අපි තවමත් ජෙකිල් භාවිතා කරනවා, නමුත් අපට මිශ්‍රණයේ ප්ලගීන තිබේ:
  • 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 mixins හෝ $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 alphas වෙතින් ඉවත් කරන ලදී:.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 භාවිතා කිරීමට අවශ්‍ය වනු ඇත.