V5 କୁ ସ୍ଥାନାନ୍ତରିତ |

v5.2.0

ସତେଜ ଡିଜାଇନ୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ v5.2.0 ପ୍ରୋଜେକ୍ଟରେ ହାତଗଣତି କିଛି ଉପାଦାନ ଏବଂ ଗୁଣ ପାଇଁ ଏକ ସୂକ୍ଷ୍ମ ଡିଜାଇନ୍ ଅପଡେଟ୍ ବ features ଶିଷ୍ଟ୍ୟ କରେ, ବିଶେଷତ but ବଟନ୍ ଏବଂ ଫର୍ମ କଣ୍ଟ୍ରୋଲରେ ବିଶୋଧିତ ମୂଲ୍ୟ ମାଧ୍ୟମରେborder-radius | ଆମର ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ମଧ୍ୟ ଏକ ନୂତନ ମୂଳପୃଷ୍ଠା, ସରଳ ଡକସ୍ ଲେଆଉଟ୍ ସହିତ ଅପଡେଟ୍ ହୋଇଛି ଯାହା ପାର୍ଶ୍ୱ ପଟିର ବିଭାଗଗୁଡ଼ିକୁ ଆଉ ଭାଙ୍ଗିବ ନାହିଁ, ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ଆଇକନ୍ ଗୁଡିକର ଅଧିକ ପ୍ରତିଷ୍ଠିତ ଉଦାହରଣ |

ଅଧିକ CSS ଭେରିଏବଲ୍ |

CSS ଭେରିଏବଲ୍ ବ୍ୟବହାର କରିବାକୁ ଆମେ ଆମର ସମସ୍ତ ଉପାଦାନକୁ ଅପଡେଟ୍ କରିଛୁ | ସାସ୍ ତଥାପି ସବୁକିଛି ଅଣ୍ଡରପାଇନ୍ କରୁଥିବାବେଳେ, ପ୍ରତ୍ୟେକ ଉପାଦାନକୁ CSS ଭେରିଏବଲ୍ଗୁଡ଼ିକୁ କମ୍ପୋନେଣ୍ଟ ବେସ୍ କ୍ଲାସରେ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ପାଇଁ ଅଦ୍ୟତନ କରାଯାଇଛି (ଯଥା, .btn), ବୁଟଷ୍ଟ୍ରାପର ଅଧିକ ରିଅଲ୍-ଟାଇମ୍ କଷ୍ଟମାଇଜେସନ୍ ପାଇଁ ଅନୁମତି ଦେଇଥାଏ | ପରବର୍ତ୍ତୀ ପ୍ରକାଶନରେ, ଆମେ ଆମର ଲେଆଉଟ୍, ଫର୍ମ, ହେଲପର ଏବଂ ୟୁଟିଲିଟିରେ CSS ଭେରିଏବଲ୍ ର ବ୍ୟବହାରକୁ ବିସ୍ତାର କରିବା ଜାରି ରଖିବା | ପ୍ରତ୍ୟେକ ଡକ୍ୟୁମେଣ୍ଟରେ CSS ଭେରିଏବଲ୍ସ ବିଷୟରେ ଅଧିକ ପ Read ନ୍ତୁ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ 6 ପର୍ଯ୍ୟନ୍ତ ଆମର CSS ଭେରିଏବଲ୍ ବ୍ୟବହାର କିଛି ମାତ୍ରାରେ ଅସମ୍ପୂର୍ଣ୍ଣ ହେବ | ଉଦାହରଣ ସ୍ୱରୂପ, ଯଦି ଆପଣ କ reason ଣସି କାରଣରୁ $alert-border-width: var(--bs-border-width)କରୁଛନ୍ତି ତେବେ ଆମର ଉତ୍ସ କୋଡ୍ ରେ ସେଟିଂ ଆପଣଙ୍କ ନିଜ କୋଡରେ ସମ୍ଭାବ୍ୟ ସାସ୍କୁ ଭାଙ୍ଗେ |$alert-border-width * 2

ଏହିପରି, ଯେଉଁଠାରେ ସମ୍ଭବ, ଆମେ ଅଧିକ CSS ଭେରିଏବଲ୍ ଆଡକୁ ଅଗ୍ରସର ହେବା ଜାରି ରଖିବୁ, କିନ୍ତୁ ଦୟାକରି ସ୍ୱୀକାର କରନ୍ତୁ ଯେ ଆମର କାର୍ଯ୍ୟକାରିତା v5 ରେ ସାମାନ୍ୟ ସୀମିତ ହୋଇପାରେ |

ନୂତନ_maps.scss

ବୁଟଷ୍ଟ୍ରାପ୍ v5.2.0 ସହିତ ଏକ ନୂତନ ସାସ୍ ଫାଇଲ୍ ଉପସ୍ଥାପନ କଲା _maps.scss| ଏକ ସମସ୍ୟା ସମାଧାନ କରିବା ପାଇଁ ଏହା ଅନେକ ସାସ୍ ମାନଚିତ୍ରଗୁଡିକୁ ଟାଣିଥାଏ _variables.scssଯେଉଁଠାରେ ଏକ ମୂଳ ମାନଚିତ୍ରର ଅଦ୍ୟତନଗୁଡିକ ଦ୍ secondary ିତୀୟ ମାନଚିତ୍ରରେ ପ୍ରୟୋଗ ହୋଇନଥିଲା ଯାହା ସେମାନଙ୍କୁ ବିସ୍ତାର କରିଥାଏ | ଉଦାହରଣ ସ୍ୱରୂପ, ଅପଡେଟ୍ ଗୁଡିକ $theme-colorsଅନ୍ୟ ଥିମ୍ ମାନଚିତ୍ରରେ ପ୍ରୟୋଗ କରାଯାଉ ନଥିଲା, ଯାହା $theme-colorsକି କଷ୍ଟୋମାଇଜେସନ୍ ୱାର୍କଫ୍ଲୋ ଭାଙ୍ଗିବା ଉପରେ ନିର୍ଭର କରୁଥିଲା | ସଂକ୍ଷେପରେ, ସାସ୍ ର ଏକ ସୀମା ଅଛି ଯେଉଁଠାରେ ଥରେ ଏକ ଡିଫଲ୍ଟ ଭେରିଏବଲ୍ କିମ୍ବା ମାନଚିତ୍ର ବ୍ୟବହାର ହୋଇଗଲେ , ଏହାକୁ ଅଦ୍ୟତନ କରାଯାଇପାରିବ ନାହିଁ | CSS ଭେରିଏବଲ୍ ସହିତ ସମାନ ଅଭାବ ଅଛି ଯେତେବେଳେ ସେମାନେ ଅନ୍ୟ CSS ଭେରିଏବଲ୍ ରଚନା କରିବାକୁ ବ୍ୟବହୃତ ହୁଅନ୍ତି |

ଏହି କାରଣରୁ ବୁଟଷ୍ଟ୍ରାପରେ ଭେରିଏବଲ୍ କଷ୍ଟୋମାଇଜେସନ୍ ପରେ ଆସିବାକୁ ପଡିବ @import "functions", କିନ୍ତୁ ପୂର୍ବରୁ @import "variables"ଏବଂ ଆମର ଆମଦାନୀ ଷ୍ଟାକ | ସାସ୍ ମାନଚିତ୍ରରେ ମଧ୍ୟ ଏହା ପ୍ରଯୁଜ୍ୟ - ସେଗୁଡିକ ବ୍ୟବହାର ହେବା ପୂର୍ବରୁ ଆପଣ ନିଶ୍ଚିତ ଭାବରେ ଡିଫଲ୍ଟଗୁଡ଼ିକୁ ନବଲିଖନ କରିବେ | ନିମ୍ନଲିଖିତ ମାନଚିତ୍ରଗୁଡିକ ନୂତନକୁ ସ୍ଥାନାନ୍ତରିତ ହୋଇଛି _maps.scss:

• $theme-colors-rgb
• $utilities-colors
• $utilities-text
• $utilities-text-colors
• $utilities-bg
• $utilities-bg-colors
• $negative-spacers
• $gutters

ତୁମର କଷ୍ଟମ୍ ବୁଟ୍ଷ୍ଟ୍ରାପ୍ CSS ନିର୍ମାଣଗୁଡିକ ବର୍ତ୍ତମାନ ଏକ ପୃଥକ ମାନଚିତ୍ର ଆମଦାନୀ ସହିତ ଏହିପରି କିଛି ଦେଖାଯିବା ଉଚିତ |

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

ନୂତନ ଉପଯୋଗିତା |

• ସେମିବୋଲ୍ଡ ଫଣ୍ଟ ପାଇଁ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ font-weightଉପଯୋଗୀତା |.fw-semibold
• ଦୁଇଟି ନୂତନ ଆକାର ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ border-radiusଉପଯୋଗୀତା , .rounded-4ଏବଂ .rounded-5, ଅଧିକ ବିକଳ୍ପ ପାଇଁ |

ଅତିରିକ୍ତ ପରିବର୍ତ୍ତନ

• ନୂତନ $enable-container-classesବିକଳ୍ପ ଉପସ୍ଥାପନ କଲା | - ବର୍ତ୍ତମାନ ପରୀକ୍ଷାମୂଳକ CSS ଗ୍ରୀଡ୍ ଲେଆଉଟ୍ ଚୟନ କରିବାବେଳେ .container-*, ଏହି ବିକଳ୍ପ ସେଟ୍ ନହେବା ପର୍ଯ୍ୟନ୍ତ ଶ୍ରେଣୀଗୁଡ଼ିକ ସଂକଳିତ ହେବ false| ପାତ୍ରଗୁଡିକ ବର୍ତ୍ତମାନ ସେମାନଙ୍କର ଗୁଟର ମୂଲ୍ୟ ମଧ୍ୟ ରଖନ୍ତି |

• ଅଫକାନଭାସ୍ ଉପାଦାନରେ ବର୍ତ୍ତମାନ ପ୍ରତିକ୍ରିୟାଶୀଳ ପରିବର୍ତ୍ତନ ଅଛି | ମୂଳ .offcanvasଶ୍ରେଣୀ ଅପରିବର୍ତ୍ତିତ ରହିଥାଏ - ଏହା ସମସ୍ତ ଦୃଶ୍ୟପଟ୍ଟରେ ବିଷୟବସ୍ତୁ ଲୁଚାଇଥାଏ | ଏହାକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ କରିବାକୁ, ସେହି .offcanvasଶ୍ରେଣୀକୁ ଯେକ any ଣସି .offcanvas-{sm|md|lg|xl|xxl}ଶ୍ରେଣୀକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

• ମୋଟା ଟେବୁଲ୍ ଡିଭାଇଡର୍ ଗୁଡିକ ବର୍ତ୍ତମାନ ଅପ୍ଟ-ଇନ୍ | - ଟେବୁଲ୍ ଗୋଷ୍ଠୀ ମଧ୍ୟରେ ସୀମାକୁ ନବଲିଖନ କରିବା ପାଇଁ ଆମେ ମୋଟା ଏବଂ ଅଧିକ କଷ୍ଟସାଧ୍ୟ ଅପସାରଣ କରିଛୁ ଏବଂ ଏହାକୁ ଆପଣ ଏକ ବ al କଳ୍ପିକ ଶ୍ରେଣୀକୁ ସ୍ଥାନାନ୍ତର କରିପାରିବେ ଯାହାକୁ ଆପଣ ପ୍ରୟୋଗ କରିପାରିବେ .table-group-divider| ଏକ ଉଦାହରଣ ପାଇଁ ଟେବୁଲ୍ ଡକସ୍ ଦେଖନ୍ତୁ |

• ଛକ ପର୍ଯ୍ୟବେକ୍ଷକ API ବ୍ୟବହାର କରିବାକୁ ସ୍କ୍ରୋଲ୍ସପି ପୁନ rew ଲିଖିତ ହୋଇଛି , ଯାହାର ଅର୍ଥ ହେଉଛି ଆପଣ ଆଉ ଆପେକ୍ଷିକ ପ୍ୟାରେଣ୍ଟ୍ ରାପର୍ ଆବଶ୍ୟକoffsetକରନ୍ତି | ସେମାନଙ୍କର ସ୍କ୍ରୋଲ୍ସପି ପ୍ରୟୋଗଗୁଡ଼ିକୁ ସେମାନଙ୍କ ନାଭ ହାଇଲାଇଟିଂରେ ଅଧିକ ସଠିକ୍ ଏବଂ ସ୍ଥିର ହେବାକୁ ଖୋଜ |

• ପପୋଭର ଏବଂ ଟୁଲ୍ ଟିପ୍ସ ବର୍ତ୍ତମାନ CSS ଭେରିଏବଲ୍ ବ୍ୟବହାର କରେ | ଭେରିଏବଲ୍ ସଂଖ୍ୟା ହ୍ରାସ କରିବାକୁ କିଛି CSS ଭେରିଏବଲ୍ ଗୁଡିକ ସେମାନଙ୍କ ସାସ୍ ପ୍ରତିପକ୍ଷଙ୍କ ଠାରୁ ଅଦ୍ୟତନ କରାଯାଇଛି | ଫଳସ୍ୱରୂପ, ଏହି ପ୍ରକାଶନରେ ତିନୋଟି ଭେରିଏବଲ୍ ପୁରୁଣା ହୋଇଛି $popover-arrow-color:, $popover-arrow-outer-colorଏବଂ $tooltip-arrow-color।

• ନୂତନ .text-bg-{color}ସହାୟକକାରୀ ଯୋଗ କରାଯାଇଛି | ବ୍ୟକ୍ତିଗତ .text-*ଏବଂ .bg-*ଉପଯୋଗିତା ସେଟିଂ କରିବା ପରିବର୍ତ୍ତେ, ଆପଣ ବର୍ତ୍ତମାନ ବିପରୀତ ପୃଷ୍ଠଭୂମି ସହିତ ଏକ ସେଟ୍ କରିବାକୁ ହେଲପରମାନଙ୍କୁ .text-bg-*ବ୍ୟବହାର କରିପାରିବେ |background-colorcolor

• .form-check-reverseଲେବଲ୍ ଏବଂ ସଂପୃକ୍ତ ଚେକ୍ ବକ୍ସ / ରେଡିଓର କ୍ରମକୁ ଫ୍ଲିପ୍ କରିବା ପାଇଁ ମୋଡିଫାୟର୍ ଯୋଡାଗଲା |

• ନୂତନ ଶ୍ରେଣୀ ମାଧ୍ୟମରେ ଟେବୁଲଗୁଡିକରେ ଷ୍ଟ୍ରିପଡ୍ ସ୍ତମ୍ଭଗୁଡିକ ଯୋଗ କରାଯାଇଛି |.table-striped-columns

ପରିବର୍ତ୍ତନଗୁଡ଼ିକର ସମ୍ପୂର୍ଣ୍ଣ ତାଲିକା ପାଇଁ, GitHub ରେ v5.2.0 ପ୍ରୋଜେକ୍ଟ ଦେଖନ୍ତୁ |

v5.1.0

• CSS ଗ୍ରୀଡ୍ ଲେଆଉଟ୍ ପାଇଁ ପରୀକ୍ଷାମୂଳକ ସମର୍ଥନ ଯୋଗ କରାଯାଇଛି | - ଏହା ଏକ କାର୍ଯ୍ୟ ଚାଲିଛି, ଏବଂ ଉତ୍ପାଦନ ବ୍ୟବହାର ପାଇଁ ଏପର୍ଯ୍ୟନ୍ତ ପ୍ରସ୍ତୁତ ନୁହେଁ, କିନ୍ତୁ ଆପଣ ସାସ୍ ମାଧ୍ୟମରେ ନୂତନ ବ feature ଶିଷ୍ଟ୍ୟକୁ ଚୟନ କରିପାରିବେ | ଏହାକୁ ସକ୍ଷମ କରିବାକୁ, ସେଟିଂ $enable-grid-classes: falseଦ୍ୱାରା CSS ଗ୍ରୀଡ୍ ସେଟିଂ ଏବଂ ସକ୍ଷମ କରି ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ଅକ୍ଷମ କରନ୍ତୁ $enable-cssgrid: true|

• ଅଫକାନଭାସ୍କୁ ସମର୍ଥନ କରିବା ପାଇଁ ନାଭବାର୍ଗୁଡ଼ିକୁ ଅଦ୍ୟତନ କରାଯାଇଛି | - ପ୍ରତିକ୍ରିୟାଶୀଳ ଶ୍ରେଣୀ ଏବଂ କିଛି ଅଫକାନଭାସ୍ ମାର୍କଅପ୍ ସହିତ ଯେକ nav ଣସି ନାଭବାରରେ ଅଫକାନଭାସ୍ ଡ୍ରୟର ଯୋଡନ୍ତୁ |.navbar-expand-*

• ନୂତନ ସ୍ଥାନଧାରୀ ଉପାଦାନ ଯୋଗ କରାଯାଇଛି | - ଆମର ନୂତନ ଉପାଦାନ, ପ୍ରକୃତ ବିଷୟବସ୍ତୁ ବଦଳରେ ଅସ୍ଥାୟୀ ବ୍ଲକଗୁଡିକ ପ୍ରଦାନ କରିବାର ଏକ ଉପାୟ ଯାହା ସୂଚାଇବାକୁ ସାହାଯ୍ୟ କରେ ଯେ ଆପଣଙ୍କ ସାଇଟ୍ କିମ୍ବା ଆପରେ କିଛି ଲୋଡ୍ ହେଉଛି |

• କ୍ଲାସ୍ ପ୍ଲଗଇନ୍ ବର୍ତ୍ତମାନ ଭୂସମାନ୍ତର ଭୁଶୁଡ଼ିବାକୁ ସମର୍ଥନ କରେ | - ବଦଳରେ ଭୁଶୁଡ଼ିବା .collapse-horizontalପାଇଁ ତୁମ ସହିତ ଯୋଡ | ଏକ କିମ୍ବା ସେଟିଂ କରି ବ୍ରାଉଜର୍ ପୁନ ain ନିର୍ମାଣରୁ ଦୂରେଇ ରୁହନ୍ତୁ |.collapsewidthheightmin-heightheight

• ନୂତନ ଷ୍ଟାକ ଏବଂ ଭୂଲମ୍ବ ନିୟମ ସହାୟକକାରୀ ଯୋଗ କରାଯାଇଛି | - ଶୀଘ୍ର ଷ୍ଟାକ ସହିତ କଷ୍ଟମ୍ ଲେଆଉଟ୍ ସୃଷ୍ଟି କରିବାକୁ ଏକାଧିକ ଫ୍ଲେକ୍ସବକ୍ସ ଗୁଣଗୁଡିକ ଶୀଘ୍ର ପ୍ରୟୋଗ କରନ୍ତୁ | .hstackଭୂସମାନ୍ତର ( ) ଏବଂ ଭୂଲମ୍ବ ( .vstack) ଷ୍ଟାକରୁ ବାଛନ୍ତୁ | ନୂତନ ହେଲପରମାନଙ୍କ<hr> ସହିତ ଉପାଦାନ ପରି ସମାନ୍ତରାଳ ଭର୍ଟିକାଲ୍ ଡିଭାଇଡର୍ ଯୋଡନ୍ତୁ |.vr

• ନୂତନ ଗ୍ଲୋବାଲ୍ :rootCSS ଭେରିଏବଲ୍ ଯୋଡିଛି | -:root ଶ yles ଳୀ ନିୟନ୍ତ୍ରଣ ପାଇଁ ସ୍ତରରେ ଅନେକ ନୂତନ CSS ଭେରିଏବଲ୍ <body>ଯୋଡିଛି | ଆମର ଉପଯୋଗୀତା ଏବଂ ଉପାଦାନଗୁଡିକ ଅନ୍ତର୍ଭୂକ୍ତ କରି ଅଧିକ କାର୍ଯ୍ୟରେ ଅଛି, କିନ୍ତୁ ବର୍ତ୍ତମାନ ପାଇଁ କଷ୍ଟୋମାଇଜ୍ ବିଭାଗରେ CSS ଭେରିଏବଲ୍ ପ read ନ୍ତୁ |

• CSS ଭେରିଏବଲ୍ ବ୍ୟବହାର କରିବାକୁ ମରାମତି ହୋଇଥିବା ରଙ୍ଗ ଏବଂ ପୃଷ୍ଠଭୂମି ଉପଯୋଗୀତା, ଏବଂ ନୂତନ ପାଠ୍ୟ ସ୍ୱଚ୍ଛତା ଏବଂ ପୃଷ୍ଠଭୂମି ସ୍ୱଚ୍ଛତା ଉପଯୋଗୀତା ଯୋଗ କଲା | - .text-* ଏବଂ .bg-*ଉପଯୋଗିତା ବର୍ତ୍ତମାନ CSS ଭେରିଏବଲ୍ ଏବଂ rgba()ରଙ୍ଗ ମୂଲ୍ୟ ସହିତ ନିର୍ମିତ ହୋଇଛି, ଯାହା ଆପଣଙ୍କୁ ନୂତନ ସ୍ୱଚ୍ଛତା ଉପଯୋଗୀତା ସହିତ ଯେକ any ଣସି ଉପଯୋଗିତାକୁ ସହଜରେ କଷ୍ଟମାଇଜ୍ କରିବାକୁ ଅନୁମତି ଦିଏ |

• ଆମର ଉପାଦାନଗୁଡ଼ିକୁ କିପରି କଷ୍ଟମାଇଜ୍ କରାଯିବ ତାହା ଦେଖାଇବାକୁ ଆଧାର କରି ନୂତନ ସ୍ନିପେଟ୍ ଉଦାହରଣଗୁଡିକ ଯୋଡାଗଲା | - ଆମର ନୂତନ ସ୍ନିପେଟ୍ ଉଦାହରଣ ସହିତ କଷ୍ଟୋମାଇଜ୍ ହୋଇଥିବା ଉପାଦାନ ଏବଂ ଅନ୍ୟାନ୍ୟ ସାଧାରଣ ଡିଜାଇନ୍ s ାଞ୍ଚା ବ୍ୟବହାର କରିବାକୁ ପ୍ରସ୍ତୁତ | ଫୁଟର୍ , ଡ୍ରପ୍ ଡାଉନ୍ , ତାଲିକା ଗୋଷ୍ଠୀ , ଏବଂ ମୋଡାଲ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |

• ପପୋଭର ଏବଂ ଟୁଲ୍ ଟିପ୍ସରୁ ଅବ୍ୟବହୃତ ପୋଜିସନ୍ ଶ yles ଳୀକୁ ଅପସାରଣ କରାଗଲା ଯେହେତୁ ଏହା କେବଳ ପପର୍ ଦ୍ୱାରା ପରିଚାଳିତ | $tooltip-marginପୁରୁଣା ହୋଇଛି ଏବଂ nullପ୍ରକ୍ରିୟାରେ ସେଟ୍ ହୋଇଛି |

ଅଧିକ ସୂଚନା ଚାହୁଁଛନ୍ତି କି? V5.1.0 ବ୍ଲଗ୍ ପୋଷ୍ଟ ପ Read ନ୍ତୁ |

ନିର୍ଭରଶୀଳତା |

• JQuery ଡ୍ରପ୍ ହୋଇଛି |
• Popper v1.x ରୁ Popper v2.x କୁ ନବୀକରଣ କରାଯାଇଛି |
• ଲିବ୍ସାସ୍କୁ ଦିଆଯାଇଥିବା ଆମର ସାସ୍ କମ୍ପାଇଲର୍ ପୁରୁଣା ହୋଇଥିବାରୁ ଡାର୍ଟ ସାସ୍ ସହିତ ଲିବସାସ୍ ବଦଳାଗଲା |
• ଆମର ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ନିର୍ମାଣ ପାଇଁ ଜେକିଲରୁ ହୁଗୋକୁ ସ୍ଥାନାନ୍ତରିତ |

ବ୍ରାଉଜର୍ ସମର୍ଥନ

• ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 10 ଏବଂ 11 ଡ୍ରପ୍ ହୋଇଛି |
• ମାଇକ୍ରୋସଫ୍ଟ ଏଜ୍ <16 (ପୁରୁଣା ଏଜ୍) ଡ୍ରପ୍ ହୋଇଛି |
• ଫାୟାରଫକ୍ସ <60
• ସଫାରି <12
• IOS ସଫାରି <12
• ଡ୍ରପ୍ ହୋଇଥିବା କ୍ରୋମ୍ <60

ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ପରିବର୍ତ୍ତନ |

• ମୂଳପୃଷ୍ଠା, ଡକସ୍ ଲେଆଉଟ୍, ଏବଂ ଫୁଟର୍ |
• ନୂତନ ପାର୍ସଲ୍ ଗାଇଡ୍ ଯୋଗ କରାଯାଇଛି |
• Sass, ଗ୍ଲୋବାଲ୍ ବିନ୍ୟାସ ବିକଳ୍ପ, ରଙ୍ଗ ସ୍କିମ୍, CSS ଭେରିଏବଲ୍, ଏବଂ ଅଧିକ ବିଷୟରେ v4 ର ଥିମ୍ ପୃଷ୍ଠାକୁ ବଦଳାଇ ନୂତନ କଷ୍ଟୋମାଇଜ୍ ବିଭାଗ ଯୋଡାଗଲା |
• ସମସ୍ତ ଫର୍ମ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ କୁ ନୂତନ ଫର୍ମ ବିଭାଗରେ ପୁନ organ ସଂଗଠିତ କରି ବିଷୟବସ୍ତୁକୁ ଅଧିକ ଫୋକସ୍ ପୃଷ୍ଠାରେ ପୃଥକ କରି |
• ସେହିଭଳି, ଗ୍ରୀଡ୍ ବିଷୟବସ୍ତୁକୁ ଅଧିକ ସ୍ପଷ୍ଟ ଭାବରେ ଲେଆଉଟ୍ ବିଭାଗକୁ ଅପଡେଟ୍ କଲା |
• “ନାଭସ୍” ଉପାଦାନ ପୃଷ୍ଠାର ନାମ “ନାଭସ୍ ଏବଂ ଟ୍ୟାବ୍ସ” ରେ ନାମିତ |
• “ଚେକ୍” ପୃଷ୍ଠାର ନାମ “ଚେକ୍ ଏବଂ ରେଡିଓ” |
• ନାଭବାର୍କୁ ପୁନ es ଡିଜାଇନ୍ କରି ଆମର ସାଇଟ୍ ଏବଂ ଡକସ୍ ସଂସ୍କରଣକୁ ଯିବା ସହଜ କରିବାକୁ ଏକ ନୂତନ ସବନାଭ୍ ଯୋଡିଛି |
• ସନ୍ଧାନ କ୍ଷେତ୍ର ପାଇଁ ନୂତନ କୀବୋର୍ଡ୍ ସର୍ଟକଟ୍ ଯୋଡାଗଲା : Ctrl + /।

ସାସ୍ |

• ଅନାବଶ୍ୟକ ମୂଲ୍ୟଗୁଡିକ ଅପସାରଣ କରିବାକୁ ସହଜ କରିବାକୁ ଆମେ ଡିଫଲ୍ଟ ସାସ୍ ମାନଚିତ୍ର ମିଶ୍ରଣକୁ ଖୋଳିଛୁ | ମନେରଖନ୍ତୁ ତୁମକୁ ବର୍ତ୍ତମାନ ସାସ୍ ମାନଚିତ୍ରରେ ସମସ୍ତ ମୂଲ୍ୟ ବ୍ୟାଖ୍ୟା କରିବାକୁ ପଡିବ $theme-colors| ସାସ୍ ମାନଚିତ୍ରଗୁଡିକ ସହିତ କିପରି ମୁକାବିଲା କରିବେ ଦେଖନ୍ତୁ |

• ଭାଙ୍ଗିବାcolor-yiq()ଫଙ୍କସନ୍ ଏବଂ ଆନୁସଙ୍ଗିକ ଭେରିଏବଲ୍ସର ନାମ ପରିବର୍ତ୍ତନ ହୋଇଛି color-contrast()ଯେହେତୁ ଏହା ଆଉ YIQ ରଙ୍ଗ ସ୍ପେସ୍ ସହିତ ଜଡିତ ନୁହେଁ | # 30168 ଦେଖନ୍ତୁ |

  • $yiq-contrasted-thresholdକୁ ପୁନ amed ନାମିତ କରାଯାଇଛି $min-contrast-ratio|
  • $yiq-text-darkଏବଂ $yiq-text-lightଯଥାକ୍ରମେ ନାମିତ $color-contrast-darkଏବଂ $color-contrast-light|

• ଭାଙ୍ଗିବାଅଧିକ ଯୁକ୍ତିଯୁକ୍ତ ଆଭିମୁଖ୍ୟ ପାଇଁ ମିଡିଆ ଜିଜ୍ଞାସା ମିଶ୍ରଣ ପାରାମିଟରଗୁଡିକ ପରିବର୍ତ୍ତନ ହୋଇଛି |

  • media-breakpoint-down()ପରବର୍ତ୍ତୀ ବ୍ରେକପଏଣ୍ଟ ବଦଳରେ ବ୍ରେକପଏଣ୍ଟ ନିଜେ ବ୍ୟବହାର କରିଥାଏ (ଉଦାହରଣ ସ୍ୱରୂପ, ଏହାଠାରୁ ଛୋଟ ଟାର୍ଗେଟ ଭ୍ୟୁପୋର୍ଟ media-breakpoint-down(lg)ବଦଳରେ ) |media-breakpoint-down(md)lg
  • ସେହିଭଳି, ଦ୍ୱିତୀୟ ପାରାମିଟର media-breakpoint-between()ମଧ୍ୟ ପରବର୍ତ୍ତୀ ବ୍ରେକପଏଣ୍ଟ ପରିବର୍ତ୍ତେ ନିଜେ ବ୍ରେକପଏଣ୍ଟ ବ୍ୟବହାର କରେ (ଉଦାହରଣ ସ୍ୱରୂପ, ଏବଂ ମଧ୍ୟରେ ଲକ୍ଷ୍ୟସ୍ଥଳ ଦୃଶ୍ୟ media-between(sm, lg)ବଦଳରେ ) |media-breakpoint-between(sm, md)smlg

• ଭାଙ୍ଗିବାପ୍ରିଣ୍ଟ୍ ଶ yles ଳୀ ଏବଂ $enable-print-stylesଭେରିଏବଲ୍ ଅପସାରିତ | ପ୍ରିଣ୍ଟ୍ ଡିସପ୍ଲେ କ୍ଲାସ୍ ଗୁଡିକ ଏପର୍ଯ୍ୟନ୍ତ ଅଛି | # 28339 ଦେଖନ୍ତୁ |

• ଭାଙ୍ଗିବାଭେରିଏବଲ୍ ସପକ୍ଷରେ ଡ୍ରପ୍ color(), theme-color()ଏବଂ ଫଙ୍କସନ୍ସ | # 29083 ଦେଖନ୍ତୁ |gray()

• ଭାଙ୍ଗିବାtheme-color-level()ଫଙ୍କସନ୍ ର ନାମ ପରିବର୍ତ୍ତନ color-level()ଏବଂ ବର୍ତ୍ତମାନ କେବଳ ରଙ୍ଗ ବଦଳରେ ଆପଣ ଚାହୁଁଥିବା ଯେକ color ଣସି ରଙ୍ଗକୁ ଗ୍ରହଣ କରନ୍ତି $theme-color| ଦେଖନ୍ତୁ # 29083 ଦେଖନ୍ତୁ: color-level() ପରେ ଡ୍ରପ୍ ହୋଇଗଲା v5.0.0-alpha3|

• ଭାଙ୍ଗିବାନାମ ପରିବର୍ତ୍ତନ $enable-prefers-reduced-motion-media-queryଏବଂ ସଂକ୍ଷିପ୍ତତା $enable-pointer-cursor-for-buttonsପାଇଁ |$enable-reduced-motion$enable-button-pointers

• ଭାଙ୍ଗିବାମିଶ୍ରଣକୁ bg-gradient-variant()ହଟାଇଲେ | ଉତ୍ପାଦିତ ଶ୍ରେଣୀଗୁଡ଼ିକ .bg-gradientପରିବର୍ତ୍ତେ ଉପାଦାନଗୁଡ଼ିକରେ ଗ୍ରେଡିଏଣ୍ଟ୍ ଯୋଡିବାକୁ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ |.bg-gradient-*

• ଭାଙ୍ଗିବା ପୂର୍ବରୁ ପୁରୁଣା ହୋଇଥିବା ମିଶ୍ରଣଗୁଡିକ ଅପସାରଣ କରାଯାଇଛି:

  • hover,, ଏବଂ hover-focus_plain-hover-focushover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(ସଂପୃକ୍ତ ୟୁଟିଲିଟି କ୍ଲାସ୍ ମଧ୍ୟ ଛାଡିଦେଲା, .text-hide)
  • visibility()
  • form-control-focus()

• ଭାଙ୍ଗିବାସାସ୍ ର ନିଜସ୍ୱ ରଙ୍ଗ ସ୍କେଲିଂ ଫଙ୍କସନ୍ ସହିତ ଧକ୍କା ନହେବା scale-color()ପାଇଁ ପୁନ function ନାମକରଣ |shift-color()

• box-shadowମିକ୍ସିନଗୁଡ଼ିକ ବର୍ତ୍ତମାନ ମୂଲ୍ୟଗୁଡ଼ିକୁ ଅନୁମତି ଦିଏ ଏବଂ ଏକାଧିକ ଆର୍ଗୁମେଣ୍ଟରୁ nullଡ୍ରପ୍ ହୁଏ | # 30394 ଦେଖନ୍ତୁ |none

• ମିଶ୍ରଣର ବର୍ତ୍ତମାନ border-radius()ଏକ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ଅଛି |

ରଙ୍ଗ ବ୍ୟବସ୍ଥା |

• ରଙ୍ଗ ପ୍ରଣାଳୀ ଯାହା ସହିତ କାମ କଲା color-level()ଏବଂ $theme-color-intervalଏକ ନୂତନ ରଙ୍ଗ ପ୍ରଣାଳୀ ସପକ୍ଷରେ ଅପସାରିତ ହେଲା | ଆମର କୋଡବେସରେ ଥିବା ସମସ୍ତ lighten()ଏବଂ ଫଙ୍କସନ୍ ଗୁଡିକ ଦ୍ୱାରା darken()ବଦଳାଯାଏ | ଏହି କାର୍ଯ୍ୟଗୁଡ଼ିକ ନିର୍ଦ୍ଦିଷ୍ଟ ପରିମାଣରେ ଏହାର ହାଲୁକା ପରିବର୍ତ୍ତନ କରିବା ପରିବର୍ତ୍ତେ ଧଳା କିମ୍ବା କଳା ସହିତ ରଙ୍ଗକୁ ମିଶ୍ରଣ କରିବ | ଏହାର ଓଜନ ପାରାମିଟର ସକରାତ୍ମକ କିମ୍ବା ନକାରାତ୍ମକ ଉପରେ ନିର୍ଭର କରି ଇଚ୍ଛା ରଙ୍ଗକୁ ଛାଇ କିମ୍ବା ଛାଇ କରିବ | ଅଧିକ ବିବରଣୀ ପାଇଁ # 30622 ଦେଖନ୍ତୁ |tint-color()shade-color()shift-color()

• ପ୍ରତ୍ୟେକ ସାସ୍ ଭେରିଏବଲ୍ ଭାବରେ ପ୍ରତ୍ୟେକ ମୂଳ ରଙ୍ଗ ପାଇଁ ନଅଟି ଅଲଗା ରଙ୍ଗ ପ୍ରଦାନ କରି ପ୍ରତ୍ୟେକ ରଙ୍ଗ ପାଇଁ ନୂତନ ଟିଣ୍ଟ୍ ଏବଂ ଛାୟା ଯୋଗ କରାଯାଇଛି |

• ଉନ୍ନତ ରଙ୍ଗ ବିପରୀତ | 3: 1 ରୁ 4.5: 1 ପର୍ଯ୍ୟନ୍ତ ବମ୍ପଡ୍ ରଙ୍ଗ ବିପରୀତ ଅନୁପାତ ଏବଂ WCAG 2.1 AA ବିପରୀତ ନିଶ୍ଚିତ କରିବାକୁ ନୀଳ, ସବୁଜ, ସିଆନ୍, ଏବଂ ଗୋଲାପୀ ରଙ୍ଗ ଅପଡେଟ୍ | ଆମର ରଙ୍ଗ ବିପରୀତ ରଙ୍ଗକୁ ମଧ୍ୟ $gray-900ବଦଳାଇଲା $black|

• tint-color()ଆମର ରଙ୍ଗ ସିଷ୍ଟମକୁ ସମର୍ଥନ କରିବାକୁ, ଆମେ ଆମର ରଙ୍ଗକୁ ସଠିକ୍ ଭାବରେ ମିଶ୍ରଣ କରିବା ପାଇଁ ନୂତନ କଷ୍ଟମ୍ ଏବଂ shade-color()ଫଙ୍କସନ୍ ଯୋଡିଛୁ |

ଗ୍ରୀଡ୍ ଅଦ୍ୟତନଗୁଡିକ |

• ନୂତନ ବ୍ରେକପଏଣ୍ଟ! ଏବଂ ଅପ୍ ପାଇଁ ନୂତନ xxlବ୍ରେକପଏଣ୍ଟ ଯୋଡିଛି | 1400pxଅନ୍ୟ ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟରେ କ changes ଣସି ପରିବର୍ତ୍ତନ ନାହିଁ |

• ଉନ୍ନତ ଗୁଟଖା | ଗୁଟର୍ସ ବର୍ତ୍ତମାନ ରେମ୍ସରେ ସେଟ୍ ହୋଇଛି, ଏବଂ v4 ( 1.5remକିମ୍ବା ପ୍ରାୟ 24px, ତଳକୁ 30px) ଠାରୁ ସଂକୀର୍ଣ୍ଣ | ଏହା ଆମର ସ୍ପେସ୍ ୟୁଟିଲିଟି ସହିତ ଆମର ଗ୍ରୀଡ୍ ସିଷ୍ଟମର ଗୁଟର୍ଗୁଡ଼ିକୁ ଆଲାଇନ୍ କରେ |

  • ଭୂସମାନ୍ତର / ଭୂଲମ୍ବ ଗୁଟର, ଭୂସମାନ୍ତର ଗୁଟର ଏବଂ ଭୂଲମ୍ବ ଗୁଟରକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ ନୂତନ ଗୁଟର ଶ୍ରେଣୀ ( .g-*,, .gx-*ଏବଂ ) ଯୋଗ କରାଯାଇଛି |.gy-*
  • ଭାଙ୍ଗିବାନୂତନ ଗୁଟର ଉପଯୋଗିତା ସହିତ ମେଳ .no-guttersକରିବାକୁ ପୁନ amed ନାମିତ |.g-0

• ସ୍ତମ୍ଭଗୁଡିକ ଆଉ ପ୍ରୟୋଗ ହୋଇନାହିଁ, ତେଣୁ ସେହି ଆଚରଣକୁ ପୁନ restore ସ୍ଥାପନ କରିବା ପାଇଁ ଆପଣଙ୍କୁ କିଛି ଉପାଦାନରେ position: relativeଯୋଗ କରିବାକୁ ପଡିପାରେ |.position-relative

• ଭାଙ୍ଗିବାଅନେକ .order-*କ୍ଲାସ୍ ଛାଡିଦେଲେ ଯାହା ପ୍ରାୟତ un ଅବ୍ୟବହୃତ ହୋଇଗଲା | ଆମେ ବର୍ତ୍ତମାନ କେବଳ ବାକ୍ସ ବାହାରେ ଯୋଗାଇଦେଉ .order-1|.order-5

• ଭାଙ୍ଗିବାଉପାଦାନକୁ ଡ୍ରପ୍ .mediaକରାଗଲା କାରଣ ଏହା ସହଜରେ ଉପଯୋଗୀତା ସହିତ ନକଲ ହୋଇପାରିବ | ଏକ ଉଦାହରଣ ପାଇଁ # 28265 ଏବଂ ଫ୍ଲେକ୍ସ ୟୁଟିଲିଟିଜ୍ ପେଜ୍ ଦେଖନ୍ତୁ |

• ଭାଙ୍ଗିବା bootstrap-grid.cssବର୍ତ୍ତମାନ କେବଳ box-sizing: border-boxଗ୍ଲୋବାଲ୍ ବକ୍ସ-ସାଇଜ୍ ପୁନ res ସେଟ୍ କରିବା ପରିବର୍ତ୍ତେ ସ୍ତମ୍ଭରେ ପ୍ରଯୁଜ୍ୟ | ଏହି ଉପାୟରେ, ଆମର ଗ୍ରୀଡ୍ ଶ yles ଳୀଗୁଡିକ ବାଧା ବିନା ଅଧିକ ସ୍ଥାନରେ ବ୍ୟବହାର କରାଯାଇପାରିବ |

• $enable-grid-classesକଣ୍ଟେନର ଶ୍ରେଣୀର ପି generation ଼ିକୁ ଆଉ ଅକ୍ଷମ କରେ ନାହିଁ | # 29146 ଦେଖନ୍ତୁ |

• make-colନିର୍ଦ୍ଦିଷ୍ଟ ଆକାର ବିନା ସମାନ ସ୍ତମ୍ଭରେ ଡିଫଲ୍ଟ ଭାବରେ ମିକ୍ସିନକୁ ଅଦ୍ୟତନ କଲେ |

ବିଷୟବସ୍ତୁ, ପୁନ o ବୁଟ୍ ଇତ୍ୟାଦି |

• RFS ବର୍ତ୍ତମାନ ଡିଫଲ୍ଟ ଭାବରେ ସକ୍ଷମ ହୋଇଛି | ମିକ୍ସିନ ବ୍ୟବହାର କରୁଥିବାfont-size()ହେଡିଙ୍ଗଗୁଡ଼ିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେfont-sizeଭ୍ୟୁପୋର୍ଟ ସହିତ ସ୍କେଲ କରିବାକୁ ଆଡଜଷ୍ଟ କରିବ | ଏହି ବ feature ଶିଷ୍ଟ୍ୟ ପୂର୍ବରୁ v4 ସହିତ ଅପ୍ଟ-ଇନ୍ ଥିଲା |

• ଭାଙ୍ଗିବା$display-*ଆମର ଭେରିଏବଲ୍ ଏବଂ $display-font-sizesସାସ୍ ମାନଚିତ୍ର ସହିତ ବଦଳାଇବା ପାଇଁ ଆମର ପ୍ରଦର୍ଶନ ଟାଇପୋଗ୍ରାଫି ମରାମତି | $display-*-weightଏକକ $display-font-weightଏବଂ ଆଡଜଷ୍ଟେଡ୍ font-sizes ପାଇଁ ବ୍ୟକ୍ତିଗତ ଭେରିଏବଲ୍ ଗୁଡିକ ମଧ୍ୟ ଅପସାରଣ କରାଗଲା |

• .display-*ଦୁଇଟି ନୂତନ ହେଡିଙ୍ଗ୍ ସାଇଜ୍ ଯୋଡାଗଲା , .display-5ଏବଂ .display-6।

• ଲିଙ୍କଗୁଡିକ ଡିଫଲ୍ଟ ଭାବରେ ଅଣ୍ଡରଲାଇନ୍ ହୋଇଛି (କେବଳ ହୋଭରରେ ନୁହେଁ), ଯେପର୍ଯ୍ୟନ୍ତ ସେମାନେ ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନଗୁଡ଼ିକର ଅଂଶ ନୁହଁନ୍ତି |

• ସେମାନଙ୍କର ଶ yles ଳୀକୁ ସତେଜ କରିବା ଏବଂ ଷ୍ଟାଇଲିଂ ଉପରେ ଅଧିକ ନିୟନ୍ତ୍ରଣ ପାଇଁ CSS ଭେରିଏବଲ୍ ସହିତ ପୁନ build ନିର୍ମାଣ କରିବା ପାଇଁ ସାରଣୀଗୁଡ଼ିକୁ ପୁନ es ଡିଜାଇନ୍ କରାଯାଇଛି |

• ଭାଙ୍ଗିବାନେଷ୍ଟେଡ୍ ଟେବୁଲଗୁଡିକ ଶ yles ଳୀକୁ ଆଉ ଉତ୍ତରାଧିକାରୀ କରନ୍ତି ନାହିଁ |

• ଭାଙ୍ଗିବା .thead-lightଏବଂ ପ୍ରକାର ଶ୍ରେଣୀ .thead-darkସପକ୍ଷରେ ଛାଡି ଦିଆଗଲା ଯାହା ସମସ୍ତ ଟେବୁଲ୍ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ବ୍ୟବହୃତ ହୋଇପାରେ ( ,,, ଏବଂ ) |.table-*theadtbodytfoottrthtd

• ଭାଙ୍ଗିବାଏହି table-row-variant()ମିଶ୍ରଣର ନାମ ପରିବର୍ତ୍ତନ କରାଯାଇଛି table-variant()ଏବଂ କେବଳ 2 ପାରାମିଟର ଗ୍ରହଣ କରେ: $color(ରଙ୍ଗ ନାମ) ଏବଂ $value(ରଙ୍ଗ କୋଡ୍) | ଟେବୁଲ୍ ଫ୍ୟାକ୍ଟର୍ ଭେରିଏବଲ୍ ଉପରେ ଆଧାର କରି ସୀମା ରଙ୍ଗ ଏବଂ ଉଚ୍ଚାରଣ ରଙ୍ଗ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଗଣନା କରାଯାଏ |

• ଟେବୁଲ୍ ସେଲ୍ ପ୍ୟାଡିଂ ଭେରିଏବଲ୍ ଗୁଡିକୁ -yଏବଂ-x

• ଭାଙ୍ଗିବାଡ୍ରପ୍ .pre-scrollableକ୍ଲାସ୍ | # 29135 ଦେଖନ୍ତୁ |

• ଭାଙ୍ଗିବା .text-*ଉପଯୋଗିତାଗୁଡ଼ିକ ଆଉ ଲିଙ୍କ୍ ପାଇଁ ହୋଭର ଏବଂ ଫୋକସ୍ ଷ୍ଟେଟସ୍ ଯୋଡେ ନାହିଁ | .link-*ଏହା ବଦଳରେ ହେଲପର କ୍ଲାସ୍ ବ୍ୟବହାର କରାଯାଇପାରିବ | # 29267 ଦେଖନ୍ତୁ |

• ଭାଙ୍ଗିବାଡ୍ରପ୍ .text-justifyକ୍ଲାସ୍ | # 29793 ଦେଖନ୍ତୁ |

• ଭାଙ୍ଗିବା <hr>ଗୁଣବତ୍ତାକୁ ଭଲ ଭାବରେ ସମର୍ଥନ କରିବା heightପରିବର୍ତ୍ତେ ଉପାଦାନଗୁଡ଼ିକ ବର୍ତ୍ତମାନ ବ୍ୟବହାର କରନ୍ତୁ | ଏହା ମଧ୍ୟ ମୋଟା ଡିଭାଇଡର୍ (ଯଥା, ) ସୃଷ୍ଟି କରିବା ପାଇଁ ପ୍ୟାଡିଂ ଉପଯୋଗିତା ବ୍ୟବହାରକୁ ସକ୍ଷମ କରିଥାଏ |bordersize<hr class="py-1">

• ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟରୁ ଡିଫଲ୍ଟ ଭୂସମାନ୍ତର ଏବଂ ଉପାଦାନଗୁଡ଼ିକୁ ପୁନ Res ସେଟ୍ padding-leftକରନ୍ତୁ |<ul><ol>40px2rem

• ଯୋଡା ଯାଇଛି $enable-smooth-scroll, ଯାହା ସର୍ବଭାରତୀୟ ସ୍ତରରେ ପ୍ରଯୁଜ୍ୟ - ମିଡିଆ ଜିଜ୍ଞାସା scroll-behavior: smoothମାଧ୍ୟମରେ ହ୍ରାସ ହୋଇଥିବା ଗତି ମାଗୁଥିବା ବ୍ୟବହାରକାରୀଙ୍କ ବ୍ୟତୀତ | # 31877 ଦେଖନ୍ତୁ |prefers-reduced-motion

RTL

• ଭୂସମାନ୍ତର ଦିଗ ନିର୍ଦ୍ଦିଷ୍ଟ ଭେରିଏବଲ୍, ୟୁଟିଲିଟି, ଏବଂ ମିକ୍ସିନଗୁଡିକ ଲଜିକାଲ୍ ଗୁଣଗୁଡିକ ବ୍ୟବହାର କରିବାକୁ ନାମକରଣ କରାଯାଇଛି ଯେପରି ଫ୍ଲେକ୍ସବକ୍ସ ଲେଆଉଟ୍ ଗୁଡିକରେ ମିଳିଥାଏ - ଯଥା, startଏବଂ endଏହା ବଦଳରେ leftଏବଂ right|

ଫର୍ମଗୁଡିକ

• ନୂତନ ଭାସମାନ ଫର୍ମ ଯୋଡାଗଲା! ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ ସମର୍ଥିତ ଫର୍ମ ଉପାଦାନଗୁଡିକ ପାଇଁ ଆମେ ଫ୍ଲୋଟିଂ ଲେବଲ୍ ଉଦାହରଣକୁ ପ୍ରୋତ୍ସାହିତ କରିଛୁ | ନୂତନ ଫ୍ଲୋଟିଂ ଲେବଲ୍ ପୃଷ୍ଠା ଦେଖନ୍ତୁ |

• ଭାଙ୍ଗିବା ଏକତ୍ରିତ ଦେଶୀ ଏବଂ କଷ୍ଟମ୍ ଫର୍ମ ଉପାଦାନଗୁଡିକ | ଚେକ୍ ବକ୍ସ, ରେଡିଓ, ସିଲେକ୍ଟ, ଏବଂ ଅନ୍ୟାନ୍ୟ ଇନପୁଟ୍ ଯାହା v4 ରେ ଦେଶୀ ଏବଂ କଷ୍ଟମ୍ କ୍ଲାସ୍ ରହିଥିଲା ​​| ବର୍ତ୍ତମାନ ଆମର ପ୍ରାୟ ସମସ୍ତ ଫର୍ମ ଉପାଦାନଗୁଡ଼ିକ ସଂପୂର୍ଣ୍ଣ କଷ୍ଟମ୍, ଅଧିକାଂଶ କଷ୍ଟମ୍ HTML ର ଆବଶ୍ୟକତା ବିନା |

  • .custom-control.custom-checkboxବର୍ତ୍ତମାନ ଅଟେ .form-check|
  • .custom-control.custom-custom-radioବର୍ତ୍ତମାନ ଅଟେ .form-check|
  • .custom-control.custom-switchବର୍ତ୍ତମାନ ଅଟେ .form-check.form-switch|
  • .custom-selectବର୍ତ୍ତମାନ ଅଟେ .form-select|
  • .custom-fileଏବଂ .form-fileଉପରେ କଷ୍ଟମ୍ ଶ yles ଳୀ ଦ୍ୱାରା ସ୍ଥାନିତ ହୋଇଛି .form-control|
  • .custom-rangeବର୍ତ୍ତମାନ ଅଟେ .form-range|
  • ମୂଳ ଦେଶୀ .form-control-fileଏବଂ .form-control-range।

• ଭାଙ୍ଗିବାଡ୍ରପ୍ .input-group-appendଏବଂ .input-group-prepend। ଆପଣ ବର୍ତ୍ତମାନ କେବଳ ବଟନ୍ ଏବଂ .input-group-textଇନପୁଟ୍ ଗୋଷ୍ଠୀର ପ୍ରତ୍ୟକ୍ଷ ପିଲା ଭାବରେ ଯୋଗ କରିପାରିବେ |

• ବ valid ଧତା ମତାମତ ବଗ୍ ସହିତ ଇନପୁଟ୍ ଗ୍ରୁପ୍ ଉପରେ ଦୀର୍ଘ ଦିନର ନିଖୋଜ ସୀମା ବ୍ୟାସାର୍ଦ୍ଧ ଶେଷରେ ବ valid ଧତା ସହିତ ଇନପୁଟ୍ ଗୋଷ୍ଠୀକୁ ଏକ ଅତିରିକ୍ତ .has-validationଶ୍ରେଣୀ ଯୋଗ କରି ସ୍ଥିର ହୋଇଛି |

• ଭାଙ୍ଗିବା ଆମର ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ପାଇଁ ଫର୍ମ-ନିର୍ଦ୍ଦିଷ୍ଟ ଲେଆଉଟ୍ କ୍ଲାସ୍ ଡ୍ରପ୍ | .form-group, .form-rowକିମ୍ବା ପରିବର୍ତ୍ତେ ଆମର ଗ୍ରୀଡ୍ ଏବଂ ଉପଯୋଗିତା ବ୍ୟବହାର କରନ୍ତୁ .form-inline|

• ଭାଙ୍ଗିବାଫର୍ମ ଲେବଲ୍ ବର୍ତ୍ତମାନ ଆବଶ୍ୟକ କରେ .form-label|

• ଭାଙ୍ଗିବା .form-textଆଉ displayHTML ସେଟ୍ ବଦଳାଇ ଇନଲାଇନ ସୃଷ୍ଟି କରିବାକୁ କିମ୍ବା ହେଲପ୍ ଟେକ୍ସଟ୍ ବ୍ଲକ୍ କରିବାକୁ ଅନୁମତି ଦିଏ ନାହିଁ |

• ଫର୍ମ କଣ୍ଟ୍ରୋଲଗୁଡିକ ସମ୍ଭବ ହେଲେ ସ୍ଥିର ହୋଇନଥାଏ, ଏହା ପରିବର୍ତ୍ତେ କଷ୍ଟୋମାଇଜେସନ୍ ଏବଂ ଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକ ସହିତ ସୁସଙ୍ଗତତାକୁ ଉନ୍ନତ କରିବାକୁ heightସ୍ଥଗିତ ରଖେ |min-height

• <select>ବ with ଧତା ଆଇକନ୍ ଗୁଡିକ s ସହିତ ଆଉ ପ୍ରୟୋଗ କରାଯାଏ ନାହିଁ multiple|

• scss/forms/ଇନପୁଟ୍ ଗ୍ରୁପ୍ ଶ yles ଳୀ ଅନ୍ତର୍ଭୂକ୍ତ କରି ପୁନ arr ସଜ୍ଜିତ ଉତ୍ସ ସାସ୍ ଫାଇଲଗୁଡିକ |

ଉପାଦାନଗୁଡ଼ିକ |

• ଆମର ଭେରିଏବଲ୍ ଉପରେ ଆଧାରିତ ଆଲର୍ଟ, ବ୍ରେଡ୍ କ୍ରମ୍, କାର୍ଡ, ଡ୍ରପଡାଉନ୍, ତାଲିକା ଗୋଷ୍ଠୀ, ମୋଡାଲ୍, ପପୋଭର, ଏବଂ ଟୁଲଟିପ୍ ପାଇଁ ଏକୀକୃତ paddingମୂଲ୍ୟ | # 30564 ଦେଖନ୍ତୁ |$spacer

ଆକର୍ଡିଅନ୍ |

• ନୂତନ ଆକର୍ଡିଅନ୍ ଉପାଦାନ ଯୋଗ କରାଯାଇଛି |

ସତର୍କତା

• ଆଇକନ୍ ସହିତ ଆଲର୍ଟଗୁଡ଼ିକରେ ବର୍ତ୍ତମାନ ଉଦାହରଣ ଅଛି |

• <hr>ପ୍ରତ୍ୟେକ ଆଲର୍ଟରେ s ପାଇଁ କଷ୍ଟମ୍ ଶ yles ଳୀଗୁଡିକ ଅପସାରଣ କରାଯାଇଛି ଯେହେତୁ ସେମାନେ ପୂର୍ବରୁ ବ୍ୟବହାର କରନ୍ତି currentColor|

ବ୍ୟାଜ୍

• ଭାଙ୍ଗିବାପୃଷ୍ଠଭୂମି ଉପଯୋଗୀତା ପାଇଁ ସମସ୍ତ ରଙ୍ଗ ଶ୍ରେଣୀଗୁଡିକ ଡ୍ରପ୍ କରିଦେଲେ .badge-*(ଉଦାହରଣ ସ୍ୱରୂପ, .bg-primaryଏହା ବଦଳରେ ବ୍ୟବହାର କରନ୍ତୁ .badge-primary) |

• ଭାଙ୍ଗିବାଡ୍ରପ୍ .badge-pillହୋଇଛି - .rounded-pillଏହା ବଦଳରେ ଉପଯୋଗିତାକୁ ବ୍ୟବହାର କରନ୍ତୁ |

• ଭାଙ୍ଗିବା<a>ଉପାଦାନ ଏବଂ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ହୋଭର ଏବଂ ଫୋକସ୍ ଶ yles ଳୀଗୁଡିକ ଅପସାରଣ କରାଯାଇଛି <button>|

• .25em/ ରୁ / .5emପର୍ଯ୍ୟନ୍ତ .35emବ୍ୟାଜ୍ ପାଇଁ ଡିଫଲ୍ଟ ପ୍ୟାଡିଂ ବୃଦ୍ଧି .65em|

ରୁଟି ଖଣ୍ଡ |

• paddingଅପସାରଣ କରି background-color, ଏବଂ , ରୁଟି ଖଣ୍ଡଗୁଡ଼ିକର ଡିଫଲ୍ଟ ଦୃଶ୍ୟକୁ ସରଳୀକୃତ border-radius|

• --bs-breadcrumb-dividerCSS ର ପୁନ omp ସଂକଳନ ଆବଶ୍ୟକ ନକରି ସହଜ କଷ୍ଟମାଇଜେସନ୍ ପାଇଁ ନୂତନ CSS କଷ୍ଟମ୍ ପ୍ରପର୍ଟି ଯୋଡିଛି |

ବଟନ୍

• ଭାଙ୍ଗିବା ଚେକ୍ ବକ୍ସ କିମ୍ବା ରେଡିଓ ସହିତ ବଟନ୍ ଟୋଗଲ୍ କରନ୍ତୁ, ଆଉ ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କରେ ନାହିଁ ଏବଂ ନୂତନ ମାର୍କଅପ୍ ଅଛି | ଆମେ ଆଉ ଏକ ରାପିଙ୍ଗ୍ ଉପାଦାନ ଆବଶ୍ୟକ କରୁନାହୁଁ, ଏହାକୁ ଯୋଡିବା.btn-checkଏବଂ<input>ଏହାକୁ ଯେକ any ଣସି.btnଶ୍ରେଣୀ<label>| # 30650 ଦେଖନ୍ତୁ | ଏଥିପାଇଁ ଡକସ୍ ଆମର ବଟନ୍ ପୃଷ୍ଠାରୁ ନୂତନ ଫର୍ମ ବିଭାଗକୁ ଚାଲିଯାଇଛି |

• ଭାଙ୍ଗିବା .btn-blockଉପଯୋଗିତା ପାଇଁ ଡ୍ରପ୍ | .btn-blockଉପରେ ବ୍ୟବହାର କରିବା ପରିବର୍ତ୍ତେ .btn, ଆପଣଙ୍କର ବଟନ୍ଗୁଡ଼ିକୁ ଗୁଡ଼ାଇ ରଖନ୍ତୁ .d-gridଏବଂ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ସ୍ପେସ୍ କରିବା ପାଇଁ ଏକ .gap-*ଉପଯୋଗୀତା | ସେମାନଙ୍କ ଉପରେ ଅଧିକ ନିୟନ୍ତ୍ରଣ ପାଇଁ ପ୍ରତିକ୍ରିୟାଶୀଳ ଶ୍ରେଣୀକୁ ସୁଇଚ୍ କରନ୍ତୁ | କିଛି ଉଦାହରଣ ପାଇଁ ଡକସ୍ ପ Read ନ୍ତୁ |

• ଅତିରିକ୍ତ ପାରାମିଟରଗୁଡିକୁ ସମର୍ଥନ କରିବାକୁ ଆମର button-variant()ଏବଂ ମିଶ୍ରଣକୁ ଅଦ୍ୟତନ କଲେ |button-outline-variant()

• ହୋଭର ଏବଂ ସକ୍ରିୟ ସ୍ଥିତି ଉପରେ ବର୍ଦ୍ଧିତ ବିପରୀତ ନିଶ୍ଚିତ କରିବାକୁ ବଟନ୍ଗୁଡ଼ିକୁ ଅଦ୍ୟତନ କରାଯାଇଛି |

• ଅକ୍ଷମ ବଟନ୍ ଗୁଡିକ ବର୍ତ୍ତମାନ ଅଛି pointer-events: none;|

କାର୍ଡ

• ଭାଙ୍ଗିବା.card-deckଆମର ଗ୍ରୀଡ୍ ସପକ୍ଷରେ ଡ୍ରପ୍ | ସ୍ତମ୍ଭ କ୍ଲାସରେ ତୁମର କାର୍ଡ ଗୁଡ଼ାଇ ରଖ ଏବଂ .row-cols-*କାର୍ଡ ଡେକ୍ସ ସୃଷ୍ଟି କରିବାକୁ ଏକ ପ୍ୟାରେଣ୍ଟ୍ ପାତ୍ର ଧାରଣ କର (କିନ୍ତୁ ପ୍ରତିକ୍ରିୟାଶୀଳ ଆଲାଇନ୍ମେଣ୍ଟ ଉପରେ ଅଧିକ ନିୟନ୍ତ୍ରଣ ସହିତ) |

• ଭାଙ୍ଗିବାମାନସଙ୍କ .card-columnsସପକ୍ଷରେ ଛାଡିଦେଲେ | # 28922 ଦେଖନ୍ତୁ |

• ଭାଙ୍ଗିବା.cardଆଧାରିତ ଆକର୍ଡିଅନ୍ କୁ ଏକ ନୂତନ ଆକର୍ଡିଅନ୍ ଉପାଦାନ ସହିତ ବଦଳାଇଲା |

କାରୁସେଲ |

• ଗା dark ଼ ପାଠ୍ୟ, ନିୟନ୍ତ୍ରଣ, ଏବଂ ସୂଚକଗୁଡ଼ିକ ପାଇଁ ନୂତନ .carousel-darkପ୍ରକାର ଯୋଗ କରାଯାଇଛି (ହାଲୁକା ପୃଷ୍ଠଭୂମି ପାଇଁ ଉତ୍ତମ) |

• ବୁଟଷ୍ଟ୍ରାପ୍ ଆଇକନ୍ ଗୁଡିକରୁ ନୂତନ SVG ସହିତ କାରୁସେଲ୍ ନିୟନ୍ତ୍ରଣ ପାଇଁ ସେଭ୍ରନ୍ ଆଇକନ୍ ଗୁଡିକ ସ୍ଥାନାନ୍ତରିତ |

ବଟନ୍ ବନ୍ଦ କରନ୍ତୁ |

• ଭାଙ୍ଗିବାକମ୍ ଜେନେରିକ୍ ନାମ ପାଇଁ .closeପୁନ amed ନାମିତ |.btn-close

• ବନ୍ଦ ବଟନ୍ ଗୁଡିକ ବର୍ତ୍ତମାନ HTML ରେ background-imageପରିବର୍ତ୍ତେ ଏକ (ଏମ୍ବେଡ୍ ହୋଇଥିବା SVG) ବ୍ୟବହାର ×କରନ୍ତୁ, ଯାହା ଆପଣଙ୍କର ମାର୍କଅପ୍ ଛୁଇଁବାର ଆବଶ୍ୟକତା ବିନା ସହଜ କଷ୍ଟମାଇଜେସନ୍ ପାଇଁ ଅନୁମତି ଦିଏ |

• ନୂତନ ପ୍ରକାର ଯୋଡା ଯାଇଛି ଯାହାକି ଗା dark ଼ ପୃଷ୍ଠଭୂମି ବିରୁଦ୍ଧରେ ଉଚ୍ଚ ବିପରୀତ ବରଖାସ୍ତ ଆଇକନ୍ ସକ୍ଷମ କରିବାକୁ .btn-close-whiteବ୍ୟବହାର କରେ |filter: invert(1)

ଭୁଶୁଡ଼ିବା |

• ଆକର୍ଡିଅନ୍ ପାଇଁ ସ୍କ୍ରୋଲ୍ ଆଙ୍କରିଙ୍ଗ୍ ଅପସାରଣ କରାଯାଇଛି |

ଡ୍ରପଡାଉନ୍

• .dropdown-menu-darkଅନ୍-ଡିମାଣ୍ଡ ଡାର୍କ ଡ୍ରପଡାଉନ୍ ପାଇଁ ନୂତନ ଭାରିଆଣ୍ଟ ଏବଂ ଆନୁଷଙ୍ଗିକ ଭେରିଏବଲ୍ ଯୋଡାଗଲା |

• ପାଇଁ ନୂଆ ଭେରିଏବଲ୍ ଯୋଡିଛି $dropdown-padding-x|

• ଉନ୍ନତ ବିପରୀତ ପାଇଁ ଡ୍ରପଡାଉନ୍ ଡିଭାଇଡର୍ ଅନ୍ଧକାର |

• ଭାଙ୍ଗିବାଡ୍ରପଡାଉନ୍ ପାଇଁ ସମସ୍ତ ଘଟଣା ବର୍ତ୍ତମାନ ଡ୍ରପଡାଉନ୍ ଟୋଗଲ୍ ବଟନ୍ ଉପରେ ଟ୍ରିଗର ହୋଇଛି ଏବଂ ତା’ପରେ ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନ ପର୍ଯ୍ୟନ୍ତ ବବୁଲ୍ ହୋଇଛି |

• ଡ୍ରପଡାଉନ୍ ମେନୁଗୁଡ଼ିକର ବର୍ତ୍ତମାନ ଏକ data-bs-popper="static"ଆଟ୍ରିବ୍ୟୁଟ୍ ସେଟ୍ ଅଛି ଯେତେବେଳେ ଡ୍ରପଡାଉନ୍ ର ପୋଜିସନ୍ ଷ୍ଟାଟିକ୍ ଥାଏ, କିମ୍ବା ଡ୍ରପଡାଉନ୍ ନାଭବାରରେ ଥାଏ | ଏହା ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଦ୍ୱାରା ଯୋଡା ଯାଇଛି ଏବଂ ପପର୍ ର ପୋଜିସନ୍ରେ ହସ୍ତକ୍ଷେପ ନକରି କଷ୍ଟମ୍ ପୋଜିସନ୍ ଷ୍ଟାଇଲ୍ ବ୍ୟବହାର କରିବାରେ ସାହାଯ୍ୟ କରେ |

• ଭାଙ୍ଗିବାflipଦେଶୀ ପପର୍ ବିନ୍ୟାସ ସପକ୍ଷରେ ଡ୍ରପଡାଉନ୍ ପ୍ଲଗଇନ୍ ପାଇଁ ଡ୍ରପ୍ ଅପ୍ସନ୍ | ଫ୍ଲିପ୍ ମୋଡିଫାୟର୍ରେ fallbackPlacementsବିକଳ୍ପ ପାଇଁ ଏକ ଖାଲି ଆରେ ପାସ୍ କରି ଆପଣ ବର୍ତ୍ତମାନ ଫ୍ଲପିଂ ଆଚରଣକୁ ଅକ୍ଷମ କରିପାରିବେ |

• ଅଟୋ ବନ୍ଦ ଆଚରଣକୁ ପରିଚାଳନା କରିବା ପାଇଁ ଡ୍ରପଡାଉନ୍ ମେନୁଗୁଡ଼ିକ ବର୍ତ୍ତମାନ ଏକ ନୂତନ autoCloseବିକଳ୍ପ ସହିତ କ୍ଲିକ୍ ହୋଇପାରିବ | ଏହାକୁ ଇଣ୍ଟରାକ୍ଟିଭ୍ କରିବା ପାଇଁ ଡ୍ରପଡାଉନ୍ ମେନୁ ଭିତରେ କିମ୍ବା ବାହାରେ କ୍ଲିକ୍ ଗ୍ରହଣ କରିବାକୁ ଆପଣ ଏହି ବିକଳ୍ପକୁ ବ୍ୟବହାର କରିପାରିବେ |

• ଡ୍ରପଡାଉନ୍ ଗୁଡିକ ବର୍ତ୍ତମାନ .dropdown-items ରେ ଗୁଡ଼ାଯାଇଥିବା <li>s କୁ ସମର୍ଥନ କରେ |

ଜମ୍ବୋଟ୍ରନ୍ |

• ଭାଙ୍ଗିବାଜମ୍ବୋଟ୍ରନ୍ ଉପାଦାନକୁ ଡ୍ରପ୍ କରିଦେଲେ ଯେହେତୁ ଏହା ୟୁଟିଲିଟି ସହିତ ନକଲ ହୋଇପାରିବ | ଏକ ଡେମୋ ପାଇଁ ଆମର ନୂତନ ଜମ୍ବୋଟ୍ରନ୍ ଉଦାହରଣ ଦେଖନ୍ତୁ |

ଗୋଷ୍ଠୀ ତାଲିକା |

• ଗୋଷ୍ଠୀ ତାଲିକା ପାଇଁ ନୂତନ .list-group-numberedରୂପାନ୍ତରକାରୀ ଯୋଗ କରାଯାଇଛି |

ନାଭସ୍ ଏବଂ ଟ୍ୟାବ୍ସ |

• ,, ଏବଂ ଶ୍ରେଣୀ ପାଇଁ ନୂତନ nullଭେରିଏବଲ୍ ଯୋଡିଛି |font-sizefont-weightcolor:hover color.nav-link

ନାଭବର୍ସ |

• ଭାଙ୍ଗିବାନାଭବର୍ସ ବର୍ତ୍ତମାନ ଭିତରେ ଏକ ପାତ୍ର ଆବଶ୍ୟକ କରେ (ବ୍ୟବଧାନ ଆବଶ୍ୟକତା ଏବଂ CSS ଆବଶ୍ୟକତାକୁ ସରଳ କରିବାକୁ) |
• ଭାଙ୍ଗିବାକ୍ଲାସ୍ ଆଉ s ରେ .activeପ୍ରୟୋଗ ହୋଇପାରିବ ନାହିଁ .nav-item, ଏହାକୁ ସିଧାସଳଖ .nav-links ରେ ପ୍ରୟୋଗ କରାଯିବା ଆବଶ୍ୟକ |

ଅଫକାନଭାସ୍ |

• ନୂତନ ଅଫକାନଭାସ୍ ଉପାଦାନ ଯୋଗ କରାଯାଇଛି |

ପୃଷ୍ଠା

• ପେଜିନେସନ୍ ଲିଙ୍କଗୁଡ଼ିକରେ ବର୍ତ୍ତମାନ କଷ୍ଟମାଇଜେବଲ୍ ଅଛି margin-leftଯାହାକି ପରସ୍ପରଠାରୁ ଅଲଗା ହେବା ସମୟରେ ଗତିଶୀଳ ଭାବରେ ସମସ୍ତ କୋଣରେ ଗୋଲାକାର |

• transitionପୃଷ୍ଠା ଲିଙ୍କରେ s ଯୋଡା ଯାଇଛି |

ପପୋଭର୍ସ |

• ଭାଙ୍ଗିବାଆମର ଡିଫଲ୍ଟ ପପଓଭର ଟେମ୍ପଲେଟରେ ନାମିତ .arrow|.popover-arrow

• ର ନାମ ପରିବର୍ତ୍ତନ whiteListକରାଯାଇଛି allowList|

ସ୍ପିନର୍ସ |

• ସ୍ପିନରମାନେ ବର୍ତ୍ତମାନ prefers-reduced-motion: reduceଆନିମେସନ୍ ମନ୍ଥର କରି ସମ୍ମାନିତ କରନ୍ତି | # 31882 ଦେଖନ୍ତୁ |

• ଉନ୍ନତ ସ୍ପିନର ଭୂଲମ୍ବ ଆଲାଇନ୍ମେଣ୍ଟ |

ଟୋଷ୍ଟ

• ଟୋଷ୍ଟଗୁଡିକ ବର୍ତ୍ତମାନ ପୋଜିସନ୍ ୟୁଟିଲିଟିଜ୍ ସାହାଯ୍ୟରେ ଏକ ପୋଜିସନ୍ ହୋଇପାରିବ |.toast-container

• ଡିଫଲ୍ଟ ଟୋଷ୍ଟ ଅବଧି 5 ସେକେଣ୍ଡକୁ ପରିବର୍ତ୍ତନ କରାଯାଇଛି |

• ଟୋଷ୍ଟରୁ ଅପସାରିତ ହୋଇଛି ଏବଂ ଫଙ୍କସନ୍ overflow: hiddenସହିତ ସଠିକ୍ border-radiuss ସହିତ ସ୍ଥାନିତ ହୋଇଛି |calc()

ସାଧନଗୁଡ଼ିକ

• ଭାଙ୍ଗିବାଆମର ଡିଫଲ୍ଟ ଟୁଲ୍ ଟିପ୍ ଟେମ୍ପଲେଟ୍ ରେ .arrowନାମିତ |.tooltip-arrow

• ଭାଙ୍ଗିବାପପର୍ ଉପାଦାନଗୁଡିକର ଉନ୍ନତ ସ୍ଥାନିତ ପାଇଁ the ପାଇଁ ଡିଫଲ୍ଟ ମୂଲ୍ୟକୁ fallbackPlacementsପରିବର୍ତ୍ତନ କରାଯାଇଛି |['top', 'right', 'bottom', 'left']

• ଭାଙ୍ଗିବାର ନାମ ପରିବର୍ତ୍ତନ whiteListକରାଯାଇଛି allowList|

ଉପଯୋଗିତା

• ଭାଙ୍ଗିବାRTL ସମର୍ଥନ ସହିତ ନିର୍ଦ୍ଦେଶନାତ୍ମକ ନାମ ପରିବର୍ତ୍ତେ ଲଜିକାଲ୍ ପ୍ରପର୍ଟି ନାମ ବ୍ୟବହାର କରିବାକୁ ଅନେକ ଉପଯୋଗିତାକୁ ପୁନ amed ନାମିତ କରାଗଲା:

  • ନାମ ପରିବର୍ତ୍ତନ .left-*ଏବଂ ଏବଂ .right-*_.start-*.end-*
  • ନାମ ପରିବର୍ତ୍ତନ .float-leftଏବଂ ଏବଂ .float-right_.float-start.float-end
  • ନାମ ପରିବର୍ତ୍ତନ .border-leftଏବଂ ଏବଂ .border-right_.border-start.border-end
  • ନାମ ପରିବର୍ତ୍ତନ .rounded-leftଏବଂ ଏବଂ .rounded-right_.rounded-start.rounded-end
  • ନାମ ପରିବର୍ତ୍ତନ .ml-*ଏବଂ ଏବଂ .mr-*_.ms-*.me-*
  • ନାମ ପରିବର୍ତ୍ତନ .pl-*ଏବଂ ଏବଂ .pr-*_.ps-*.pe-*
  • ନାମ ପରିବର୍ତ୍ତନ .text-leftଏବଂ ଏବଂ .text-right_.text-start.text-end

• ଭାଙ୍ଗିବାଡିଫଲ୍ଟ ଭାବରେ ନକାରାତ୍ମକ ମାର୍ଜିନଗୁଡିକ ଅକ୍ଷମ କରନ୍ତୁ |

• ଅତିରିକ୍ତ ଉପାଦାନଗୁଡ଼ିକରେ ଶୀଘ୍ର ପୃଷ୍ଠଭୂମି .bg-bodyସେଟିଂ ପାଇଁ ନୂତନ ଶ୍ରେଣୀ ଯୋଡାଗଲା |<body>

• ପାଇଁ , ଏବଂ , ପାଇଁ ନୂତନ ସ୍ଥିତି ଉପଯୋଗିତା ଯୋଗ କରାଯାଇଛି | ମୂଲ୍ୟଗୁଡିକ ଅନ୍ତର୍ଭୂକ୍ତ କରେ ଏବଂ ପ୍ରତ୍ୟେକ ସମ୍ପତ୍ତି ପାଇଁ |toprightbottomleft050%100%

• ଭୂସମାନ୍ତରାଳ କିମ୍ବା ଭୂଲମ୍ବ ଭାବରେ ସଂପୂର୍ଣ୍ଣ / ସ୍ଥିର ସ୍ଥିତ ଉପାଦାନଗୁଡ଼ିକରେ ନୂତନ .translate-middle-xଏବଂ ଉପଯୋଗିତା ଯୋଗ କରାଯାଇଛି |.translate-middle-y

• ନୂତନ border-widthଉପଯୋଗିତା ଯୋଗ କରାଯାଇଛି |

• ଭାଙ୍ଗିବାକୁ ପୁନ amed ନାମିତ .text-monospaceକରାଯାଇଛି .font-monospace|

• ଭାଙ୍ଗିବାପାଠ୍ୟ ଲୁଚାଇବା ପାଇଁ ଏହା ଏକ ପୁରାତନ ପଦ୍ଧତି ଭାବରେ ଅପସାରିତ .text-hideହୋଇଛି ଯାହା ଆଉ ବ୍ୟବହାର ହେବା ଉଚିତ ନୁହେଁ |

• .fs-*ଉପଯୋଗିତା ପାଇଁ ଉପଯୋଗିତା ଯୋଗ କରାଯାଇଛି font-size(RFS ସକ୍ଷମ ସହିତ) | ଏମାନେ HTML ର ଡିଫଲ୍ଟ ହେଡିଙ୍ଗ୍ ସହିତ ସମାନ ସ୍କେଲ୍ ବ୍ୟବହାର କରନ୍ତି (1-6, ବଡରୁ ଛୋଟ), ଏବଂ ସାସ୍ ମାନଚିତ୍ର ମାଧ୍ୟମରେ ପରିବର୍ତ୍ତନ କରାଯାଇପାରିବ |

• ଭାଙ୍ଗିବାକ୍ଷୁଦ୍ରତା ଏବଂ ସ୍ଥିରତା ପାଇଁ .font-weight-*ଉପଯୋଗିତାଗୁଡ଼ିକର ନାମ ପରିବର୍ତ୍ତନ କରାଯାଇଛି |.fw-*

• ଭାଙ୍ଗିବାକ୍ଷୁଦ୍ରତା ଏବଂ ସ୍ଥିରତା ପାଇଁ .font-style-*ଉପଯୋଗିତାଗୁଡ଼ିକର ନାମ ପରିବର୍ତ୍ତନ କରାଯାଇଛି |.fst-*

• CSS ଗ୍ରୀଡ୍ ଏବଂ ଫ୍ଲେକ୍ସବକ୍ସ ଲେଆଉଟ୍ ପାଇଁ .d-gridୟୁଟିଲିଟି ଏବଂ ନୂତନ gapୟୁଟିଲିଟି ( ) ପ୍ରଦର୍ଶନ କରିବାକୁ ଯୋଡା ଯାଇଛି |.gap

• ଭାଙ୍ଗିବାଅପସାରିତ ହୋଇଛି .rounded-smଏବଂ rounded-lg, ଏବଂ ଶ୍ରେଣୀର ଏକ ନୂତନ ସ୍କେଲ୍ ଉପସ୍ଥାପନ .rounded-0କରିଛି .rounded-3| # 31687 ଦେଖନ୍ତୁ |

• ନୂତନ line-heightଉପଯୋଗିତା .lh-1ଯୋଗ କରାଯାଇଛି :, .lh-smଏବଂ .lh-base। ଏଠାରେ.lh-lg ଦେଖନ୍ତୁ |

• .d-noneଅନ୍ୟ CSS ଉପଯୋଗୀତା ଉପରେ ଏହାକୁ ଅଧିକ ଓଜନ ଦେବା ପାଇଁ ଆମର CSS ରେ ଉପଯୋଗିତାକୁ ଘୁଞ୍ଚାଇଲା |

• .visually-hidden-focusableବ୍ୟବହାର କରି ପାତ୍ରରେ କାମ କରିବାକୁ ହେଲପରକୁ ବିସ୍ତାର କର :focus-within|

ସାହାଯ୍ୟକାରୀ

• ଭାଙ୍ଗିବା ପ୍ରତିକ୍ରିୟାଶୀଳ ଏମ୍ବେଡ୍ ହେଲପର୍ ମାନଙ୍କୁ ନୂତନ ଶ୍ରେଣୀ ନାମ ଏବଂ ଉନ୍ନତ ଆଚରଣ ସହିତ ଅନୁପାତ ସହାୟକକାରୀଙ୍କ ନାମରେ ନାମିତ କରାଯାଇଛି, ଏବଂ ଏକ ସହାୟକ CSS ଭେରିଏବଲ୍ |

  • ଦିଗ ଅନୁପାତରେ ପରିବର୍ତ୍ତନ byକରିବାକୁ ଶ୍ରେଣୀଗୁଡ଼ିକର ନାମ ପରିବର୍ତ୍ତନ କରାଯାଇଛି | xଉଦାହରଣ ସ୍ୱରୂପ, .ratio-16by9ବର୍ତ୍ତମାନ ଅଟେ .ratio-16x9|
  • ଆମେ .embed-responsive-itemଏକ ସରଳ ଚୟନକର୍ତ୍ତାଙ୍କ ସପକ୍ଷରେ ଏବଂ ଉପାଦାନ ଗୋଷ୍ଠୀ ଚୟନକର୍ତ୍ତାଙ୍କୁ .ratio > *ଛାଡିଛୁ | ଆଉ କ class ଣସି ଶ୍ରେଣୀର ଆବଶ୍ୟକତା ନାହିଁ, ଏବଂ ଅନୁପାତ ସହାୟକ ବର୍ତ୍ତମାନ କ HTML ଣସି HTML ଉପାଦାନ ସହିତ କାମ କରେ |
  • $embed-responsive-aspect-ratiosସାସ୍ ମାନଚିତ୍ରର ନାମ ପରିବର୍ତ୍ତନ କରାଯାଇଛି ଏବଂ ଏହାର $aspect-ratiosମୂଲ୍ୟଗୁଡିକ ଶ୍ରେଣୀ ନାମ ଏବଂ ଶତକଡା key: valueଯୋଡି ଭାବରେ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ପାଇଁ ସରଳୀକୃତ ହୋଇଛି |
  • CSS ଭେରିଏବଲ୍ ଗୁଡିକ ବର୍ତ୍ତମାନ ସୃଷ୍ଟି ହୋଇଛି ଏବଂ ସାସ୍ ମାନଚିତ୍ରରେ ପ୍ରତ୍ୟେକ ମୂଲ୍ୟ ପାଇଁ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି | ଯେକ any ଣସି କଷ୍ଟମ୍ ଆସପେକ୍ଟ ଅନୁପାତ ସୃଷ୍ଟି କରିବାକୁ --bs-aspect-ratioଭେରିଏବଲ୍ କୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |.ratio

• ଭାଙ୍ଗିବା “ସ୍କ୍ରିନ୍ ରିଡର୍” କ୍ଲାସ୍ଗୁଡ଼ିକ ବର୍ତ୍ତମାନ “ଭିଜୁଆଲ୍ ଲୁକ୍କାୟିତ” କ୍ଲାସ୍ |

  • ସାସ୍ ଫାଇଲ୍ କୁ ବଦଳାଇଲା scss/helpers/_screenreaders.scss|scss/helpers/_visually-hidden.scss
  • ନାମ ପରିବର୍ତ୍ତନ .sr-onlyଏବଂ ଏବଂ.sr-only-focusable.visually-hidden.visually-hidden-focusable
  • ଏବଂ ଏହାର ନାମ ପରିବର୍ତ୍ତନ sr-only()ଏବଂ sr-only-focusable()ମିଶ୍ରିତ |visually-hidden()visually-hidden-focusable()

• bootstrap-utilities.cssବର୍ତ୍ତମାନ ଆମର ସହାୟକମାନଙ୍କୁ ମଧ୍ୟ ଅନ୍ତର୍ଭୁକ୍ତ କରେ | କଷ୍ଟମ ବିଲ୍ଡ���େ ହେଲପରମାନଙ୍କୁ ଆମଦାନୀ କରିବା ଆବଶ୍ୟକ ନାହିଁ |

ଜାଭାସ୍କ୍ରିପ୍ଟ |

• ନିୟମିତ ଜାଭାସ୍କ୍ରିପ୍ଟରେ ରହିବାକୁ jQuery ନିର୍ଭରଶୀଳତା ଏବଂ ପ୍ଲଗଇନଗୁଡ଼ିକୁ ପୁନ r ଲିଖନ କର |

• ଭାଙ୍ଗିବାସମସ୍ତ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ପାଇଁ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବର୍ତ୍ତମାନ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ କାର୍ଯ୍ୟକାରିତାକୁ ତୃତୀୟ ପକ୍ଷ ଏବଂ ଆପଣଙ୍କ ନିଜ କୋଡ୍ ଠାରୁ ଭିନ୍ନ କରିବାରେ ସାହାଯ୍ୟ କରିବାକୁ ନାମ ସ୍ଥାନିତ ହୋଇଛି | ଉଦାହରଣ ସ୍ୱରୂପ, ଆମେ data-bs-toggleଏହା ବଦଳରେ ବ୍ୟବହାର କରୁ data-toggle|

• ସମସ୍ତ ପ୍ଲଗଇନ୍ ବର୍ତ୍ତମାନ ପ୍ରଥମ ଆର୍ଗୁମେଣ୍ଟ୍ ଭାବରେ ଏକ CSS ଚୟନକର୍ତ୍ତା ଗ୍ରହଣ କରିପାରିବ | ପ୍ଲଗଇନ୍ ର ଏକ ନୂତନ ଉଦାହରଣ ସୃଷ୍ଟି କରିବାକୁ ଆପଣ ଏକ DOM ଉପାଦାନ କିମ୍ବା ଯେକ valid ଣସି ବ valid ଧ CSS ଚୟନକର୍ତ୍ତା ପାସ୍ କରିପାରିବେ:

  const modal = new bootstrap.Modal('#myModal')
  const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
  

• popperConfigଏକ ଫଙ୍କସନ୍ ଭାବରେ ପାସ୍ ହୋଇପାରିବ ଯାହା ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡିଫଲ୍ଟ ପପର୍ ବିନ୍ୟାସକୁ ଏକ ଯୁକ୍ତି ଭାବରେ ଗ୍ରହଣ କରେ, ଯାହା ଦ୍ you ାରା ତୁମେ ଏହି ଡିଫଲ୍ଟ ବିନ୍ୟାସକୁ ତୁମ ପଥରେ ମିଶ୍ରଣ କରିପାରିବ | ଡ୍ରପଡାଉନ୍, ପପୋଭର, ଏବଂ ଟୁଲଟିପ୍ ପାଇଁ ପ୍ରଯୁଜ୍ୟ |

• ପପର୍ ଉପାଦାନଗୁଡିକର ଉନ୍ନତ ସ୍ଥାନିତ ପାଇଁ the ପାଇଁ ଡିଫଲ୍ଟ ମୂଲ୍ୟକୁ fallbackPlacementsପରିବର୍ତ୍ତନ କରାଯାଇଛି | ଡ୍ରପଡାଉନ୍, ପପୋଭର, ଏବଂ ଟୁଲଟିପ୍ ପାଇଁ ପ୍ରଯୁଜ୍ୟ |['top', 'right', 'bottom', 'left']

• _getInstance()Public ପରି ସର୍ବସାଧାରଣ ଷ୍ଟାଟିକ୍ ପଦ୍ଧତିରୁ ଅଣ୍ଡରସ୍କୋର୍ ଅପସାରିତ getInstance()|