Source

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

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ 4 ହେଉଛି ସମଗ୍ର ପ୍ରୋଜେକ୍ଟର ଏକ ପ୍ରମୁଖ ପୁନ r ଲିଖନ | ସବୁଠାରୁ ଉଲ୍ଲେଖନୀୟ ପରିବର୍ତ୍ତନଗୁଡିକ ନିମ୍ନରେ ସଂକ୍ଷିପ୍ତ ହୋଇଛି, ତା’ପରେ ପ୍ରାସଙ୍ଗିକ ଉପାଦାନଗୁଡ଼ିକରେ ଅଧିକ ନିର୍ଦ୍ଦିଷ୍ଟ ପରିବର୍ତ୍ତନଗୁଡ଼ିକ |

ସ୍ଥିର ପରିବର୍ତ୍ତନ |

ବିଟା 3 ରୁ ଆମର ସ୍ଥିର v4.0 ପ୍ରକାଶନକୁ ଯିବା, କ breaking ଣସି ଭାଙ୍ଗିବା ପରିବର୍ତ୍ତନ ନାହିଁ, କିନ୍ତୁ କିଛି ଉଲ୍ଲେଖନୀୟ ପରିବର୍ତ୍ତନ ଅଛି |

ମୁଦ୍ରଣ

  • ସ୍ଥିର ଭଙ୍ଗା ମୁଦ୍ରଣ ଉପଯୋଗିତା | ପୂର୍ବରୁ, ଏକ .d-print-*ଶ୍ରେଣୀ ବ୍ୟବହାର କରିବା ଅପ୍ରତ୍ୟାଶିତ ଭାବରେ ଅନ୍ୟ କ class ଣସି ଶ୍ରେଣୀକୁ ଅତିକ୍ରମ କରିବ .d-*| ବର୍ତ୍ତମାନ, ସେମାନେ ଆମର ଅନ୍ୟ ପ୍ରଦର୍ଶନ ଉପଯୋଗୀତା ସହିତ ମେଳ କରନ୍ତି ଏବଂ କେବଳ ସେହି ମିଡିଆ ( @media print) ରେ ପ୍ରଯୁଜ୍ୟ |

  • ଅନ୍ୟାନ୍ୟ ଉପଯୋଗିତା ସହିତ ମେଳ ଖାଇବା ପାଇଁ ଉପଲବ୍ଧ ପ୍ରିଣ୍ଟ ଡିସପ୍ଲେ ଉପଯୋଗିତା | ବିଟା 3 ଏବଂ ତଦୁର୍ଦ୍ଧ୍ୱ କେବଳ block,,, ଏବଂ inline-blockଥିଲା | ସ୍ଥିର v4 ଯୋଡି ,,,, ଏବଂ ।inlinenoneflexinline-flextabletable-rowtable-cell

  • ନୂତନ ମୁଦ୍ରଣ ଶ yles ଳୀ ସହିତ ବ୍ରାଉଜର୍ ଗୁଡିକରେ ଫିକ୍ସଡ୍ ପ୍ରିଣ୍ଟ୍ ପ୍ରିଭ୍ୟୁ ରେଣ୍ଡରିଂ ଯାହା ନିର୍ଦ୍ଦିଷ୍ଟ କରେ @page size|

ବିଟା changes ପରିବର୍ତ୍ତନ |

ଯେତେବେଳେ ବିଟା 2 ଆମର ବ୍ରେକିଙ୍ଗ୍ ପରିବର୍ତ୍ତନଗୁଡିକର ଅଧିକାଂଶ ଅଂଶ ବିଟା ପର୍ଯ୍ୟାୟରେ ଦେଖିଥିଲା, କିନ୍ତୁ ଆମ ପାଖରେ ତଥାପି କିଛି ଅଛି ଯାହା ବିଟା release ପ୍ରକାଶନରେ ସମାଧାନ ହେବା ଆବଶ୍ୟକ | ଯଦି ଆପଣ ବିଟା 2 ରୁ କିମ୍ବା ବୁଟଷ୍ଟ୍ରାପର କ older ଣସି ପୁରୁଣା ସଂସ୍କରଣରୁ ବିଟା 3 କୁ ଅପଡେଟ୍ କରୁଛନ୍ତି ତେବେ ଏହି ପରିବର୍ତ୍ତନଗୁଡିକ ପ୍ରଯୁଜ୍ୟ |

ବିବିଧ

  • ଅବ୍ୟବହୃତ $thumbnail-transitionଭେରିଏବଲ୍ ଅପସାରିତ ହେଲା | ଆମେ କିଛି ପରିବର୍ତ୍ତନ କରୁନାହୁଁ, ତେଣୁ ଏହା କେବଳ ଅତିରିକ୍ତ କୋଡ୍ ଥିଲା |
  • Npm ପ୍ୟାକେଜ୍ ଆଉ ଆମର ଉତ୍ସ ଏବଂ dist ଫାଇଲ୍ ବ୍ୟତୀତ ଅନ୍ୟ କ files ଣସି ଫାଇଲ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ ନାହିଁ | ଯଦି ଆପଣ ସେମାନଙ୍କ ଉପରେ ନିର୍ଭର କରନ୍ତି ଏବଂ node_modulesଫୋଲ୍ଡର ମାଧ୍ୟମରେ ଆମର ସ୍କ୍ରିପ୍ଟ ଚଳାଉଛନ୍ତି, ତେବେ ଆପଣ ଆପଣଙ୍କର କାର୍ଯ୍ୟଧାରାକୁ ଅନୁକୂଳ କରିବା ଉଚିତ୍ |

ଫର୍ମଗୁଡିକ

  • ଉଭୟ କଷ୍ଟମ୍ ଏବଂ ଡିଫଲ୍ଟ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓଗୁଡ଼ିକୁ ପୁନ r ଲେଖନ୍ତୁ | ବର୍ତ୍ତମାନ, ଉଭୟଙ୍କର HTML ସଂରଚନା ସହିତ ମେଳ ଖାଉଛି (ଭାଇଭାଇନ୍ <div>ସହିତ ବାହ୍ୟ) <input>ଏବଂ <label>ସମାନ ଲେଆଉଟ୍ ଶ yles ଳୀ (ଷ୍ଟାଫ୍ ଡିଫଲ୍ଟ, ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ସହିତ ଇନଲାଇନ) | ଏହା ଆମକୁ ଇନପୁଟ୍ ସ୍ଥିତିକୁ ଆଧାର କରି ଲେବଲ୍ ଷ୍ଟାଇଲ୍ କରିବାକୁ ଅନୁମତି ଦିଏ, disabledଗୁଣ ପାଇଁ ସମର୍ଥନକୁ ସରଳ କରିଥାଏ (ପୂର୍ବରୁ ଏକ ପ୍ୟାରେଣ୍ଟ୍ କ୍ଲାସ୍ ଆବଶ୍ୟକ କରେ) ଏବଂ ଆମର ଫର୍ମ ବ ation ଧତାକୁ ଭଲ ଭାବରେ ସମର୍ଥନ କରେ |

    ଏହାର ଏକ ଅଂଶ ଭାବରେ, ଆମେ background-imageକଷ୍ଟମ୍ ଫର୍ମ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓରେ ଏକାଧିକ s ପରିଚାଳନା ପାଇଁ CSS ପରିବର୍ତ୍ତନ କରିଛୁ | ପୂର୍ବରୁ, ବର୍ତ୍ତମାନ ଅପସାରିତ .custom-control-indicatorଉପାଦାନର ପୃଷ୍ଠଭୂମି ରଙ୍ଗ, ଗ୍ରେଡିଏଣ୍ଟ୍ ଏବଂ SVG ଆଇକନ୍ ଥିଲା | ବ୍ୟାକଗ୍ରାଉଣ୍ଡ ଗ୍ରେଡିଏଣ୍ଟକୁ କଷ୍ଟମାଇଜ୍ କରିବା ଅର୍ଥ ପ୍ରତ୍ୟେକ ଥର ତୁମେ କେବଳ ଗୋଟିଏ ବଦଳାଇବାକୁ ଆବଶ୍ୟକ କରୁଥିବା ସମସ୍ତଙ୍କୁ ବଦଳାଇବା | ବର୍ତ୍ତମାନ, ଆମ ପାଖରେ .custom-control-label::beforeଫିଲ୍ ଏବଂ ଗ୍ରେଡିଏଣ୍ଟ୍ ଅଛି ଏବଂ .custom-control-label::afterଆଇକନ୍ ନିୟନ୍ତ୍ରଣ କରେ |

    ଏକ କଷ୍ଟମ୍ ଚେକ୍ ଇନଲାଇନ କରିବାକୁ, ଯୋଡନ୍ତୁ .custom-control-inline|

  • ଇନପୁଟ୍-ଆଧାରିତ ବଟନ୍ ଗୋଷ୍ଠୀଗୁଡ଼ିକ ପାଇଁ ଚୟନକର୍ତ୍ତା ଅଦ୍ୟତନ କରାଯାଇଛି | ଶ [data-toggle="buttons"] { }style ଳୀ ଏବଂ ଆଚରଣ ପାଇଁ, ଆମେ କେବଳ JS ଆଚରଣ ପାଇଁ ଗୁଣ ବ୍ୟବହାର କରୁ ଏବଂ ଷ୍ଟାଇଲିଂ ପାଇଁ ଏକ ନୂତନ ଶ୍ରେଣୀ dataଉପରେ ନିର୍ଭର କରୁ |.btn-group-toggle

  • .col-form-legendସାମାନ୍ୟ ଉନ୍ନତ ସପକ୍ଷରେ ଅପସାରିତ .col-form-label| ଏହି ଉପାୟରେ .col-form-label-smଏବଂ ସହଜରେ ଉପାଦାନଗୁଡ଼ିକରେ .col-form-label-lgବ୍ୟବହାର କରାଯାଇପାରିବ |<legend>

  • କଷ୍ଟମ୍ ଫାଇଲ୍ ଇନପୁଟ୍ ଗୁଡିକ ସେମାନଙ୍କର $custom-file-textସାସ୍ ଭେରିଏବଲ୍ ରେ ଏକ ପରିବର୍ତ୍ତନ ଗ୍ରହଣ କଲା | ଏହା ଆଉ ଏକ ନେଷ୍ଟେଡ୍ ସାସ୍ ମାନଚିତ୍ର ନୁହେଁ ଏବଂ ବର୍ତ୍ତମାନ କେବଳ ଗୋଟିଏ ଷ୍ଟ୍ରିଙ୍ଗ୍କୁ ଶକ୍ତି ପ୍ରଦାନ କରେ - Browseବଟନ୍ ଯେହେତୁ ବର୍ତ୍ତମାନ ଆମର ସାସ୍ ରୁ ଉତ୍ପନ୍ନ ଏକମାତ୍ର ଛଉ-ଉପାଦାନ | ଟେକ୍ସଟ୍ ବର୍ତ୍ତମାନ Choose fileଠାରୁ ଆସିଛି .custom-file-label|

ଗୋଷ୍ଠୀଗୁଡିକ ଇନପୁଟ୍ କରନ୍ତୁ |

  • ଇନପୁଟ୍ ଗ୍ରୁପ୍ ଆଡୋନ୍ ଗୁଡିକ ବର୍ତ୍ତମାନ ଏକ ଇନପୁଟ୍ ସହିତ ସେମାନଙ୍କର ସ୍ଥାନିତ ପାଇଁ ନିର୍ଦ୍ଦିଷ୍ଟ | ଆମେ ଛାଡିଛୁ .input-group-addonଏବଂ .input-group-btnଦୁଇଟି ନୂତନ ଶ୍ରେଣୀ ପାଇଁ, .input-group-prependଏବଂ .input-group-append। ଆମର CSS ର ଅନେକ ସରଳୀକରଣ କରି ତୁମେ ନିଶ୍ଚିତ ଭାବରେ ଏକ ଆପେଣ୍ଡ୍ କିମ୍ବା ଏକ ପ୍ରିପେଣ୍ଡ୍ ବ୍ୟବହାର କରିବା ଜରୁରୀ | ଏକ ପରିଶିଷ୍ଟ କିମ୍ବା ପ୍ରିପେଣ୍ଡ ମଧ୍ୟରେ, ତୁମର ବଟନ୍ଗୁଡ଼ିକୁ ରଖ, ଯେହେତୁ ସେମାନେ ଅନ୍ୟ କ exist ଣସି ସ୍ଥାନରେ ବିଦ୍ୟମାନ ଥିବେ, କିନ୍ତୁ ପାଠ୍ୟକୁ ଗୁଡ଼ାଇ ରଖ .input-group-text|

  • ଏକାଧିକ ଇନପୁଟ୍ ପରି ବ id ଧତା ଶ yles ଳୀଗୁଡିକ ବର୍ତ୍ତମାନ ସମର୍ଥିତ (ଯଦିଓ ଆପଣ ପ୍ରତି ଗୋଷ୍ଠୀ ପାଇଁ କେବଳ ଗୋଟିଏ ଇନପୁଟ୍ ବ valid ଧ କରିପାରିବେ) |

  • ସାଇଜ୍ କ୍ଲାସ୍ ନିଶ୍ଚିତ ଭାବରେ ପିତାମାତାଙ୍କ ଉପରେ ରହିବା ଆବଶ୍ୟକ .input-groupଏବଂ ବ୍ୟକ୍ତିଗତ ଫର୍ମ ଉପାଦାନଗୁଡିକ ନୁହେଁ |

ବିଟା 2 ପରିବର୍ତ୍ତନ |

ବେଟା ଥିବାବେଳେ, ଆମର କ breaking ଣସି ଭାଙ୍ଗିବା ପରିବର୍ତ୍ତନ ନହେବାକୁ ଲକ୍ଷ୍ୟ ରଖିଛୁ | ତଥାପି, ଜିନିଷ ସବୁବେଳେ ଯୋଜନା ଅନୁସାରେ ଯାଏ ନାହିଁ | ବିଟା from ରୁ ବିଟା to କୁ ଯିବାବେଳେ ମନେରଖିବାକୁ ଥିବା ବ୍ରେକିଙ୍ଗ ପରିବର୍ତ୍ତନଗୁଡ଼ିକ ତଳେ ଦିଆଯାଇଛି |

ଭାଙ୍ଗିବା

  • $badge-colorଭେରିଏବଲ୍ ଅପସାରିତ ହୋଇଛି ଏବଂ ଏହାର ବ୍ୟବହାର ଅନ୍ ଅଛି .badge| colorଉପରେ ଆଧାର କରି ବାଛିବା ପାଇଁ ଆମେ ଏକ ରଙ୍ଗ କଣ୍ଟ୍ରାସ୍ ଫଙ୍କସନ୍ ବ୍ୟବହାର କରୁ background-color, ତେଣୁ ଭେରିଏବଲ୍ ଅନାବଶ୍ୟକ |
  • CSS ଦେଶୀ ଫିଲ୍ଟର ସହିତ ଦ୍ୱନ୍ଦ୍ୱକୁ ଏଡ଼ାଇବା grayscale()ପାଇଁ ପୁନ function ନାମକରଣ |gray()grayscale
  • ଅନ୍ୟ ସ୍ଥାନରେ ବ୍ୟବହୃତ ଆମର ରଙ୍ଗ ସ୍କିମ୍ ସହିତ ପୁନ amed ନାମକରଣ .table-inverse, .thead-inverseଏବଂ .thead-defaultସହିତ |.*-dark.*-light
  • ପ୍ରତିକ୍ରିୟାଶୀଳ ସାରଣୀଗୁଡ଼ିକ ବର୍ତ୍ତମାନ ପ୍ରତ୍ୟେକ ଗ୍ରୀଡ୍ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ କ୍ଲାସ୍ ସୃଷ୍ଟି କରନ୍ତି | ଏହା ବିଟା 1 ରୁ ଭାଙ୍ଗେ ଯେଉଁଥିରେ .table-responsiveଆପଣ ବ୍ୟବହାର କରୁଛନ୍ତି ତାହା ଅଧିକ ଅଟେ .table-responsive-md| ଆପଣ ବର୍ତ୍ତମାନ .table-responsiveକିମ୍ବା .table-responsive-{sm,md,lg,xl}ଆବଶ୍ୟକ ଅନୁଯାୟୀ ବ୍ୟବହାର କରିପାରିବେ |
  • ପ୍ୟାକେଜ୍ ମ୍ୟାନେଜର୍ ଭାବରେ ଡ୍ରପ୍ ହୋଇଥିବା ବୱାର୍ ସମର୍ଥନ ବିକଳ୍ପ ପାଇଁ (ଯେପରିକି ସୂତା କିମ୍ବା npm) ପାଇଁ ପୁରୁଣା ହୋଇଛି | ବିବରଣୀ ପାଇଁ ବାଉର୍ / ବାଉର୍ # 2298 ଦେଖନ୍ତୁ |
  • ବୁଟଷ୍ଟ୍ରାପ୍ ତଥାପି jQuery 1.9.1 କିମ୍ବା ତଦୁର୍ଦ୍ଧ ଆବଶ୍ୟକ କରେ, କିନ୍ତୁ ଆପଣଙ୍କୁ ସଂସ୍କରଣ 3.x ବ୍ୟବହାର କରିବାକୁ ପରାମର୍ଶ ଦିଆଯାଇଛି କାରଣ v3.x ର ସମର୍ଥିତ ବ୍ରାଉଜର୍ଗୁଡ଼ିକ ହେଉଛି ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ଲସ୍ v3.x ର କିଛି ସୁରକ୍ଷା ଫିକ୍ସ ଅଛି |
  • ଅବ୍ୟବହୃତ .form-control-labelଶ୍ରେଣୀକୁ ହଟାଇଲେ | ଯଦି ତୁମେ ଏହି ଶ୍ରେଣୀର ବ୍ୟବହାର କରିଛ, ଏହା ଶ୍ରେଣୀର ନକଲ ଥିଲା ଯାହା ଭୂସମାନ୍ତର ଫର୍ମ ଲେଆଉଟ୍ ସହିତ ଏହାର ଜଡିତ ଇନପୁଟ୍ ସହିତ .col-form-labelଭୂଲମ୍ବ ଭାବରେ କେନ୍ଦ୍ରିତ |<label>
  • ଏକ ମିଶ୍ରଣରୁ ପରିବର୍ତ୍ତନ ହୋଇଛି ଯେଉଁଥିରେ ପ୍ରପର୍ଟି ଏକ ଫଙ୍କସନ୍ color-yiqରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି colorଯାହା ଏକ ମୂଲ୍ୟ ଫେରସ୍ତ କରେ, ଏହାକୁ ଯେକ any ଣସି CSS ସମ୍ପତ୍ତି ପାଇଁ ବ୍ୟବହାର କରିବାକୁ ଅନୁମତି ଦିଏ | ଉଦାହରଣ ସ୍ୱରୂପ, ଏହା ପରିବର୍ତ୍ତେ color-yiq(#000), ଆପଣ ଲେଖିବେ color: color-yiq(#000);|

ହାଇଲାଇଟ୍ସ |

  • ମୋଡାଲରେ ନୂତନ pointer-eventsବ୍ୟବହାର ଆରମ୍ଭ କଲା | କଷ୍ଟମ୍ କ୍ଲିକ୍ ହ୍ୟାଣ୍ଡଲିଂ ସହିତ ବାହ୍ୟ .modal-dialogଇଭେଣ୍ଟଗୁଡିକ ଦେଇ ଗତି pointer-events: noneକରେ (ଯେକ any ଣସି କ୍ଲିକ୍ ପାଇଁ କେବଳ ଶୁଣିବା ସମ୍ଭବ ହୁଏ .modal-backdrop), ଏବଂ ତାପରେ ଏହାକୁ ପ୍ରକୃତ .modal-contentସହିତ ପ୍ରତିରୋଧ କରେ pointer-events: auto|

ସାରାଂଶ

V3 ରୁ v4 କୁ ଯିବାବେଳେ ଏଠାରେ ଏକ ବଡ଼ ଟିକେଟ୍ ଆଇଟମ୍ ଅଛି |

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

  • IE8, IE9, ଏବଂ iOS 6 ସମର୍ଥନ ଡ୍ରପ୍ ହୋଇଛି | v4 ବର୍ତ୍ତମାନ କେବଳ IE10 + ଏବଂ iOS 7+ ଅଟେ | ସେହି ସାଇଟଗୁଡିକ ପାଇଁ ଆବଶ୍ୟକ କରୁଥିବା ସାଇଟଗୁଡିକ ପାଇଁ, v3 ବ୍ୟବହାର କରନ୍ତୁ |
  • ଆଣ୍ଡ୍ରଏଡ୍ v5.0 ଲଲିପପ୍ ର ବ୍ରାଉଜର୍ ଏବଂ ୱେବ୍ ଭିଭ୍ ପାଇଁ ଅଫିସିଆଲ୍ ସମର୍ଥନ ଯୋଡିଛି | ଆଣ୍ଡ୍ରଏଡ୍ ବ୍ରାଉଜର୍ ଏବଂ ୱେବ୍ ଭିଭ୍ ର ପୂର୍ବ ସଂସ୍କରଣଗୁଡ଼ିକ କେବଳ ଅନ of ପଚାରିକ ଭାବରେ ସମର୍ଥିତ |

ବିଶ୍ୱ ପରିବର୍ତ୍ତନ |

  • ଡିଫଲ୍ଟ ଭାବରେ ଫ୍ଲେକ୍ସବକ୍ସ ସକ୍ଷମ ହୋଇଛି | ସାଧାରଣତ this ଏହାର ଅର୍ଥ ହେଉଛି ଆମର ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ଭାସମାନଠାରୁ ଅଧିକ ଦୂରରେ |
  • ଆମର ଉତ୍ସ CSS ଫାଇଲଗୁଡ଼ିକ ପାଇଁ କମ୍ ରୁ ସାସ୍ କୁ ସୁଇଚ୍ |
  • ଆମର ପ୍ରାଥମିକ CSS ୟୁନିଟ୍ ଭାବରେ ସୁଇଚ୍ ହୋଇଛି px, remଯଦିଓ ପିକ୍ସେଲଗୁଡିକ ମିଡିଆ ଜିଜ୍ଞାସା ଏବଂ ଗ୍ରୀଡ୍ ଆଚରଣ ପାଇଁ ବ୍ୟବହୃତ ହୁଏ କାରଣ ଉପକରଣ ଦୃଶ୍ୟ ପ୍ରକାର ଆକାର ଦ୍ୱାରା ପ୍ରଭାବିତ ହୁଏ ନାହିଁ |
  • ଗ୍ଲୋବାଲ୍ ଫଣ୍ଟ୍ ସାଇଜ୍ ରୁ ବୃଦ୍ଧି 14pxପାଇଲା 16px|
  • ଏକ ପଞ୍ଚମ ବିକଳ୍ପ ଯୋଡିବା ପାଇଁ ଗ୍ରୀଡ୍ ସ୍ତରଗୁଡିକର ପୁନ amp ନିର୍ମାଣ (ଛୋଟ ଏବଂ ଛୋଟ ଉପକରଣଗୁଡ଼ିକୁ ଠିକଣା କରିବା 576px) ଏବଂ -xsସେହି ଶ୍ରେଣୀଗୁଡ଼ିକରୁ ଇନଫିକ୍ସ ଅପସାରଣ କଲା | ଉଦାହରଣ : .col-6.col-sm-4.col-md-3।
  • ପୃଥକ ବ option କଳ୍ପିକ ଥିମ୍ କୁ SCSS ଭେରିଏବଲ୍ (ଯଥା, $enable-gradients: true) ମାଧ୍ୟମରେ ବିନ୍ୟାସଯୋଗ୍ୟ ବିକଳ୍ପ ସହିତ ବଦଳାଇଲା |
  • ଗ୍ରାଣ୍ଟ ପରିବର୍ତ୍ତେ npm ସ୍କ୍ରିପ୍ଟଗୁଡ଼ିକର ଏକ ସିରିଜ୍ ବ୍ୟବହାର କରିବାକୁ ସିଷ୍ଟମ୍ ମରାମତି କରନ୍ତୁ | package.jsonସମସ୍ତ ସ୍କ୍ରିପ୍ଟ, କିମ୍ବା ସ୍ଥାନୀୟ ବିକାଶ ଆବଶ୍ୟକତା ପାଇଁ ଆମର ପ୍ରୋଜେକ୍ଟ ରିଡମେ ଦେଖନ୍ତୁ |
  • ବୁଟଷ୍ଟ୍ରାପ୍ ର ପ୍ରତିକ୍ରିୟାଶୀଳ ବ୍ୟବହାର ଆଉ ସମର୍ଥିତ ନୁହେଁ |
  • ଅଧିକ ବିସ୍ତୃତ ସେଟଅପ୍ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ କଷ୍ଟୋମାଇଜ୍ ବିଲ୍ଡ ସପକ୍ଷରେ ଅନ୍ଲାଇନ୍ କଷ୍ଟମାଇଜର୍ ଡ୍ରପ୍ କରିଦେଲେ |
  • ସାଧାରଣ CSS ସମ୍ପତ୍ତି-ମୂଲ୍ୟ ଯୁଗଳ ଏବଂ ମାର୍ଜିନ୍ / ପ୍ୟାଡିଂ ବ୍ୟବଧାନ ସର୍ଟକଟ୍ ପାଇଁ ଅନେକଗୁଡ଼ିଏ ନୂତନ ଉପଯୋଗୀ ଶ୍ରେଣୀ ଯୋଡାଗଲା |

ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ |

  • ଫ୍ଲେକ୍ସବକ୍ସକୁ ଘୁଞ୍ଚିଗଲା |
    • ଗ୍ରୀଡ୍ ମିଶ୍ରଣ ଏବଂ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଶ୍ରେଣୀଗୁଡ଼ିକରେ ଫ୍ଲେକ୍ସବକ୍ସ ପାଇଁ ସମର୍ଥନ ଯୋଗ କରାଯାଇଛି |
    • ଫ୍ଲେକ୍ସବକ୍ସର ଏକ ଅଂଶ ଭାବରେ, ଭୂଲମ୍ବ ଏବଂ ଭୂସମାନ୍ତର ଆଲାଇନ୍ମେଣ୍ଟ ଶ୍ରେଣୀଗୁଡ଼ିକ ପାଇଁ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |
  • ଗ୍ରୀଡ୍ ଶ୍ରେଣୀର ନାମ ଏବଂ ଏକ ନୂତନ ଗ୍ରୀଡ୍ ସ୍ତର ଅଦ୍ୟତନ କରାଯାଇଛି |
    • ଅଧିକ ଗ୍ରାନୁଲାର୍ ନିୟନ୍ତ୍ରଣ ପାଇଁ ନିମ୍ନରେ ଏକ ନୂତନ smଗ୍ରୀଡ୍ ସ୍ତର ଯୋଡାଗଲା | 768pxଆମର ବର୍ତ୍ତମାନ xs,,, ଏବଂ ଅଛି | ଏହାର ଅର୍ଥ ହେଉଛି ପ୍ରତ୍ୟେକ ପର୍ଯ୍ୟାୟ ଗୋଟିଏ ସ୍ତରକୁ ବାମ୍ପ କରାଯାଇଛି (ତେଣୁ v3 ରେ ବର୍ତ୍ତମାନ v4 ରେ ଅଛି) |smmdlgxl.col-md-6.col-lg-6
    • xsଅଧିକ ସଠିକ୍ ଭାବରେ ପ୍ରତିନିଧିତ୍ inf କରିବାକୁ ଇନଫିକ୍ସ ଆବଶ୍ୟକ ନକରିବା ପାଇଁ ଗ୍ରୀଡ୍ କ୍ଲାସ୍ ଗୁଡିକ ସଂଶୋଧିତ ହୋଇଛି ଯେ ସେମାନେ min-width: 0ଏକ ପିକ୍ସେଲ ମୂଲ୍ୟରେ ନୁହେଁ ଏବଂ ଶ yles ଳୀ ପ୍ରୟୋଗ କରିବା ଆରମ୍ଭ କରନ୍ତି | ଏହା ବଦଳରେ .col-xs-6, ଏହା ବର୍ତ୍ତମାନ .col-6| ଅନ୍ୟ ସମସ୍ତ ଗ୍ରୀଡ୍ ସ୍ତରଗୁଡ଼ିକ ଇନଫିକ୍ସ ଆବଶ୍ୟକ କରନ୍ତି (ଯଥା, sm) |
  • ଗ୍ରୀଡ୍ ଆକାର, ମିଶ୍ରଣ, ଏବଂ ଭେରିଏବଲ୍ ଅପଡେଟ୍ ହୋଇଛି |
    • ଗ୍ରୀଡ୍ ଗେଟର୍ ଗୁଡିକରେ ବର୍ତ୍ତମାନ ଏକ ସାସ୍ ମାନଚିତ୍ର ଅଛି ତେଣୁ ଆପଣ ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟରେ ନିର୍ଦ୍ଦିଷ୍ଟ ଗୁଟର ପ୍ରସ୍ଥ ନିର୍ଦ୍ଦିଷ୍ଟ କରିପାରିବେ |
    • make-col-readyଏକ ପ୍ରିପ୍ ମିକ୍ସିନ୍ ବ୍ୟବହାର କରିବାକୁ ଏବଂ ବ୍ୟକ୍ତିଗତ ସ୍ତମ୍ଭ ଆକାର ପାଇଁ make-colସେଟ୍ କରିବାକୁ ଗ୍ରୀଡ୍ ମିକ୍ସନ୍ସ ଅପଡେଟ୍ |flexmax-width
    • 12ପରିବର୍ତ୍ତିତ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ମିଡିଆ ଜିଜ୍ଞାସା ବ୍ରେକପଏଣ୍ଟ ଏବଂ କଣ୍ଟେନର୍ ଓସାର ନୂତନ ଗ୍ରୀଡ୍ ସ୍ତର ପାଇଁ ଆକାଉଣ୍ଟ୍ କରିବାକୁ ଏବଂ ସ୍ତମ୍ଭଗୁଡିକ ସେମାନଙ୍କର ସର୍ବାଧିକ ଓସାରରେ ସମାନ ଭାବରେ ବିଭାଜିତ ହେବା ନିଶ୍ଚିତ କରିବାକୁ |
    • ଗ୍ରୀଡ୍ ବ୍ରେକପଏଣ୍ଟ ଏବଂ କଣ୍ଟେନର ଓସାର ବର୍ତ୍ତମାନ ହାତଗଣତି ଅଲଗା ଭେରିଏବଲ୍ ବଦଳରେ ସାସ୍ ମାନଚିତ୍ର ( $grid-breakpointsଏବଂ ) ମାଧ୍ୟମରେ ନିୟନ୍ତ୍ରିତ | $container-max-widthsଏଗୁଡ଼ିକ @screen-*ଭେରିଏବଲ୍ଗୁଡ଼ିକୁ ସଂପୂର୍ଣ୍ଣ ରୂପେ ବଦଳାଇଥାଏ ଏବଂ ଗ୍ରୀଡ୍ ସ୍ତରଗୁଡ଼ିକୁ ସଂପୂର୍ଣ୍ଣ କଷ୍ଟମାଇଜ୍ କରିବାକୁ ଅନୁମତି ଦିଏ |
    • ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକ ମଧ୍ୟ ପରିବର୍ତ୍ତନ ହୋଇଛି | ପ୍ରତ୍ୟେକ ଥର ସମାନ ମୂଲ୍ୟ ସହିତ ଆମର ମିଡିଆ ଜିଜ୍ଞାସା ଘୋଷଣାର ପୁନରାବୃତ୍ତି କରିବା ପରିବର୍ତ୍ତେ, ଆମର ବର୍ତ୍ତମାନ ଅଛି @include media-breakpoint-up/down/only| ବର୍ତ୍ତମାନ, ଲେଖିବା ପରିବର୍ତ୍ତେ @media (min-width: @screen-sm-min) { ... }, ଆପଣ ଲେଖିପାରିବେ @include media-breakpoint-up(sm) { ... }|

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

  • ଏକ ନୂତନ ସର୍ବଦଳୀୟ ଉପାଦାନ, କାର୍ଡ ପାଇଁ ଡ୍ରପ୍ ହୋଇଥିବା ପ୍ୟାନେଲ୍, ଥମ୍ na ନେଲ୍ ଏବଂ କୂଅ |
  • ଗ୍ଲାଇଫିକନ୍ ଆଇକନ୍ ଫଣ୍ଟ୍ ଡ୍ରପ୍ କଲା | ଯଦି ଆପଣ ଆଇକନ୍ ଆବଶ୍ୟକ କରନ୍ତି, କିଛି ବିକଳ୍ପଗୁଡ଼ିକ ହେଉଛି:
  • ଆଫିକ୍ସ jQuery ପ୍ଲଗଇନ୍ ଡ୍ରପ୍ କଲା |
    • position: stickyଆମେ ଏହା ବଦଳରେ ବ୍ୟବହାର କରିବାକୁ ସୁପାରିଶ କରୁ | HTML5 ଦେଖନ୍ତୁ ଦୟାକରି ବିବରଣୀ ଏବଂ ନିର୍ଦ୍ଦିଷ୍ଟ ପଲିଫିଲ୍ ସୁପାରିଶ ପାଇଁ ପ୍ରବେଶ କରନ୍ତୁ | ଗୋଟିଏ ପରାମର୍ଶ ହେଉଛି @supportsଏହାକୁ କାର୍ଯ୍ୟକାରୀ କରିବା ପାଇଁ ଏକ ନିୟମ ବ୍ୟବହାର କରିବା (ଯଥା, @supports (position: sticky) { ... }) /
    • ଯଦି ଆପଣ ଅତିରିକ୍ତ, ଅଣ-ଶ yles ଳୀ ପ୍ରୟୋଗ କରିବାକୁ ଆଫିକ୍ସ ବ୍ୟବହାର କରୁଥିଲେ position, ପଲିଫିଲ୍ ହୁଏତ ଆପଣଙ୍କର ବ୍ୟବହାର ମାମଲାକୁ ସମର୍ଥନ କରିନପାରେ | ଏହିପରି ବ୍ୟବହାର ପାଇଁ ଗୋଟିଏ ବିକଳ୍ପ ହେଉଛି ତୃତୀୟ-ପକ୍ଷ ସ୍କ୍ରୋଲପୋସ୍-ଷ୍ଟାଇଲର୍ ଲାଇବ୍ରେରୀ |
  • ପେଜର୍ ଉପାଦାନକୁ ଡ୍ରପ୍ କରିଦେଲା କାରଣ ଏହା ମୂଳତ slightly ସାମାନ୍ୟ କଷ୍ଟୋମାଇଜ୍ ହୋଇଥିବା ବଟନ୍ |
  • ଅତ୍ୟଧିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଶିଶୁ ଚୟନକାରୀଙ୍କ ପରିବର୍ତ୍ତେ ଅଧିକ ଅଣ-ନେଷ୍ଟେଡ୍ ଶ୍ରେଣୀ ଚୟନକର୍ତ୍ତା ବ୍ୟବହାର କରିବାକୁ ପ୍ରାୟ ସମସ୍ତ ଉପାଦାନକୁ ରିଫାକ୍ଟୋର୍ଡ୍ |

ଉପାଦାନ ଦ୍ୱାରା |

ଏହି ତାଲିକା v3.xx ଏବଂ v4.0.0 ମଧ୍ୟରେ ଉପାଦାନ ଦ୍ୱାରା ମୁଖ୍ୟ ପରିବର୍ତ୍ତନଗୁଡ଼ିକୁ ଆଲୋକିତ କରେ |

ପୁନ o ଚାଳନ କରନ୍ତୁ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ 4 ପାଇଁ ନୂତନ ହେଉଛି ପୁନ o ବୁଟ୍ , ଏକ ନୂତନ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ଯାହା ଆମର କିଛି ମାତ୍ରାରେ ମତାମତପ୍ରାପ୍ତ ପୁନ et ସେଟ୍ ଶ yles ଳୀ ସହିତ ନର୍ମାଲାଇଜ୍ ଉପରେ ନିର୍ମିତ | ଏହି ଫାଇଲରେ ଦେଖାଯାଉଥିବା ଚୟନକର୍ତ୍ତାମାନେ କେବଳ ଉପାଦାନ ବ୍ୟବହାର କରନ୍ତି - ଏଠାରେ କ classes ଣସି ଶ୍ରେଣୀ ନାହିଁ | ଅଧିକ ମଡ୍ୟୁଲାର୍ ଆଭିମୁଖ୍ୟ ପାଇଁ ଏହା ଆମର ପୁନ et ସେଟ୍ ଶ yles ଳୀକୁ ଆମର ଉପାଦାନ ଶ yles ଳୀରୁ ପୃଥକ କରେ | ଏଥିରେ କେତେକ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ପୁନ ets ସେଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, box-sizing: border-boxପରିବର୍ତ୍ତନ ହେଉଛି, ଅନେକ ଉପାଦାନ, ୟୁନିଟ୍ ଶ yles ଳୀ, ଏବଂ ଅନେକ ଫର୍ମ ଉପାଦାନ ପୁନ ets ସେଟ୍ ଉପରେ ୟୁନିଟ୍ କୁ emଯିବା |rem

ଟାଇପୋଗ୍ରାଫି |

  • .text-ସମସ୍ତ ଉପଯୋଗିତାକୁ _utilities.scssଫାଇଲ୍ କୁ ଘୁଞ୍ଚାଇଲା |
  • ସୀମା ବ୍ୟତୀତ, ଏହାର ସମସ୍ତ ଶ yles ଳୀ .page-headerୟୁଟିଲିଟି ମାଧ୍ୟମରେ ପ୍ରୟୋଗ କରାଯାଇପାରିବ |
  • .dl-horizontalଛାଡି ଦିଆଯାଇଛି ଏହା ପରିବର୍ତ୍ତେ, ଏହାର ଏବଂ ପିଲାମାନଙ୍କ ଉପରେ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ କ୍ଲାସ୍ (କିମ୍ବା ମିଶ୍ରଣ) ବ୍ୟବହାର .rowକରନ୍ତୁ ଏବଂ ବ୍ୟବହାର କରନ୍ତୁ |<dl><dt><dd>
  • କଷ୍ଟମ୍ ଷ୍ଟାଇଲିଂ କ୍ଲାସ୍ - ଏବଂ ମୋଡିଫାୟର୍ <blockquote>କୁ ଚାଲିଯାଇଛି |.blockquote.blockquote-reverse
  • .list-inlineବର୍ତ୍ତମାନ ଆବଶ୍ୟକ କରେ ଯେ ଏହାର ପିଲାମାନେ ତାଲିକା ଆଇଟମ୍ ଗୁଡିକ ସେମାନଙ୍କ ପାଇଁ ନୂତନ .list-inline-itemଶ୍ରେଣୀ ପ୍ରୟୋଗ କରନ୍ତୁ |

ପ୍ରତିଛବିଗୁଡିକ

  • କୁ ପୁନ amed ନାମିତ .img-responsiveକରାଯାଇଛି .img-fluid|
  • କୁ ପୁନ amed ନାମିତ .img-roundedକରାଯାଇଛି |.rounded
  • କୁ ପୁନ amed ନାମିତ .img-circleକରାଯାଇଛି |.rounded-circle

ଟେବୁଲ୍ |

  • ଚୟନକର୍ତ୍ତାଙ୍କ ପ୍ରାୟ ସମସ୍ତ ଉଦାହରଣ >ଅପସାରିତ ହୋଇଛି, ଅର୍ଥାତ୍ ନେଷ୍ଟେଡ୍ ଟେବୁଲଗୁଡ଼ିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ସେମାନଙ୍କ ପିତାମାତାଙ୍କଠାରୁ ଶ yles ଳୀଗୁଡିକ ଉତ୍ତରାଧିକାରୀ ହେବ | ଏହା ଆମର ଚୟନକର୍ତ୍ତା ଏବଂ ସମ୍ଭାବ୍ୟ କଷ୍ଟୋମାଇଜେସନ୍ କୁ ବହୁତ ସରଳ କରିଥାଏ |
  • ପ୍ରତିକ୍ରିୟାଶୀଳ ସାରଣୀଗୁଡ଼ିକ ଆଉ ଏକ ଗୁଡ଼େଇବା ଉପାଦାନ ଆବଶ୍ୟକ କରେ ନାହିଁ | ଏହା ପରିବର୍ତ୍ତେ, କେବଳ .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ଫାଇଲକୁ ପୁନ ets ସେଟ୍ କରେ |
  • କୁ ପୁନ amed ନାମିତ .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ମିକ୍ସିନ୍ ମାଧ୍ୟମରେ ଆଉ ଶ yles ଳୀ ପ୍ରୟୋଗ ହୁଏ ନାହିଁ .row, ତେଣୁ .rowବର୍ତ୍ତମାନ ଭୂସମାନ୍ତର ଗ୍ରୀଡ୍ ଲେଆଉଟ୍ ପାଇଁ ଆବଶ୍ୟକ (ଯଥା, <div class="form-group row">) |
    • .col-form-labelS ସହିତ ଭର୍ଟିକାଲ୍ ସେଣ୍ଟର୍ ଲେବଲ୍ ରେ ନୂତନ ଶ୍ରେଣୀ ଯୋଡିଛି .form-control|
    • .form-rowଗ୍ରୀଡ୍ କ୍ଲାସ୍ ସହିତ କମ୍ପାକ୍ଟ ଫର୍ମ ଲେଆଉଟ୍ ପାଇଁ ନୂତନ ଯୋଡା ଯାଇଛି (ତୁମ .rowପାଇଁ ସ୍ୱାପ୍ କର .form-rowଏବଂ ଯାଅ) |
  • କଷ୍ଟମ୍ ଫର୍ମ ସମର୍ଥନ ଯୋଗ କରାଯାଇଛି (ଚେକ୍ ବକ୍ସ, ରେଡିଓ, ଚୟନ, ଏବଂ ଫାଇଲ୍ ଇନପୁଟ୍ ପାଇଁ) |
  • CS5 ର ଏବଂ ସିଉଡୋ-କ୍ଲାସ୍ ମାଧ୍ୟମରେ HTML5 ଫର୍ମ ବ valid ଧତା ସହିତ ବଦଳାଗଲା .has-error, .has-warningଏବଂ ଶ୍ରେଣୀଗୁଡିକ |.has-success:invalid:valid
  • କୁ ପୁନ amed ନାମିତ .form-control-staticକରାଯାଇଛି .form-control-plaintext|

ବଟନ୍

  • କୁ ପୁନ amed ନାମିତ .btn-defaultକରାଯାଇଛି .btn-secondary|
  • V3 ତୁଳନାରେ ଆନୁପାତିକ ଭାବରେ ବହୁତ ଛୋଟ .btn-xsଯେପରି ଶ୍ରେଣୀକୁ ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ ଡ୍ରପ୍ କରିଦେଲା |.btn-sm
  • JQuery ପ୍ଲଗଇନ୍ ର ଷ୍ଟେଟଫୁଲ୍ ବଟନ୍ ବ feature ଶିଷ୍ଟ୍ୟକୁ ଡ୍ରପ୍ କରାଯାଇଛି | button.jsଏଥିରେ $().button(string)ଏବଂ $().button('reset')ପଦ୍ଧତି ଅନ୍ତର୍ଭୁକ୍ତ | ଆମେ ଏହା ବଦଳରେ ଏକ ଛୋଟ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରିବାକୁ ପରାମର୍ଶ ଦେଇଥାଉ, ଯାହାକି ଆପଣ ଚାହୁଁଥିବା ପରି ଆଚରଣ କରିବାର ଲାଭ ପାଇବେ |
    • ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ପ୍ଲଗଇନ୍ ର ଅନ୍ୟାନ୍ୟ ବ features ଶିଷ୍ଟ୍ୟଗୁଡିକ (ବଟନ୍ ଚେକ୍ ବକ୍ସ, ବଟନ୍ ରେଡିଓ, ସିଙ୍ଗଲ୍ ଟୋଗଲ୍ ବଟନ୍) v4 ରେ ରଖାଯାଇଛି |
  • IE9 + ସମର୍ଥନ [disabled]କରୁଥିବା ପରି ବଟନ୍ଗୁଡ଼ିକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ | ତଥାପି ତଥାପି ଆବଶ୍ୟକ କାରଣ IE11 ରେ ଦେଶୀ ଅକ୍ଷମ ଫିଲ୍ଡସେଟଗୁଡ଼ିକ ବଗି ଅଛି |:disabled:disabledfieldset[disabled]

ବଟନ୍ ଗୋଷ୍ଠୀ |

  • ଫ୍ଲେକ୍ସବକ୍ସ ସହିତ ଉପାଦାନକୁ ପୁନ r ଲେଖନ୍ତୁ |
  • ଅପସାରିତ .btn-group-justifiedହୋଇଛି | ଏକ ବଦଳ ଭାବରେ ଆପଣ <div class="btn-group d-flex" role="group"></div>ଉପାଦାନଗୁଡିକ ସହିତ ଏକ ରାପର୍ ଭାବରେ ବ୍ୟବହାର କରିପାରିବେ .w-100|
  • .btn-group-xsଅପସାରଣକୁ ସମ୍ପୁର୍ଣ୍ଣ ଭାବରେ ଦିଆଯାଇଥିବା ଶ୍ରେଣୀକୁ ଡ୍ରପ୍ କରିଦେଲା .btn-xs|
  • ବଟନ୍ ଟୁଲ୍ ବାର୍ ରେ ବଟନ୍ ଗୋଷ୍ଠୀ ମଧ୍ୟରେ ସ୍ପଷ୍ଟ ବ୍ୟବଧାନ ଅପସାରଣ କରାଯାଇଛି; ବର୍ତ୍ତମାନ ମାର୍ଜିନ୍ ଉପଯୋଗିତା ବ୍ୟବହାର କରନ୍ତୁ |
  • ଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକ ସହିତ ବ୍ୟବହାର ପାଇଁ ଉନ୍ନତ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ |
  • ପ୍ୟାରେଣ୍ଟ୍ ଚୟନକର୍ତ୍ତାଙ୍କ ଠାରୁ ସମସ୍ତ ଉପାଦାନ, ମୋଡିଫାୟର୍ ଇତ୍ୟାଦି ପାଇଁ ଏକକ ଶ୍ରେଣୀକୁ ସୁଇଚ୍ |
  • ସରଳୀକୃତ ଡ୍ରପଡାଉନ୍ ଶ yles ଳୀଗୁଡ଼ିକ ଡ୍ରପଡାଉନ୍ ମେନୁ ସହିତ ସଂଲଗ୍ନ ଉପର କିମ୍ବା ତଳ ମୁହାଁ ତୀର ସହିତ ଆଉ ପଠାଯିବ ନାହିଁ |
  • ଡ୍ରପ୍ ଡାଉନ୍ ଗୁଡିକ ବର୍ତ୍ତମାନ <div>s କିମ୍ବା s ସହିତ ନିର୍ମାଣ ହୋଇପାରିବ |<ul>
  • <a>ସହଜ, ବିଲ୍ଟ-ଇନ୍ ସମର୍ଥନ ଏବଂ <button>ଆଧାରିତ ଡ୍ରପଡାଉନ୍ ଆଇଟମ୍ ଯୋଗାଇବା ପାଇଁ ପୁନ drop ନିର୍ମାଣ ଡ୍ରପଡାଉନ୍ ଶ yles ଳୀ ଏବଂ ମାର୍କଅପ୍ |
  • କୁ ପୁନ amed ନାମିତ .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|
  • ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ଏବଂ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ଫ୍ଲେକ୍ସବକ୍ସ ୟୁଟିଲିଟି କ୍ଲାସ୍ ଯୋଡାଗଲା |

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

  • ଫ୍ଲେକ୍ସବକ୍ସ ସହିତ ଉପାଦାନକୁ ପୁନ r ଲେଖନ୍ତୁ |
  • ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମଗୁଡିକର ଷ୍ଟାଇଲ୍ ଲିଙ୍କ୍ ଏବଂ ବଟନ୍ ସଂସ୍କରଣ ପାଇଁ a.list-group-itemଏକ ସ୍ପଷ୍ଟ ଶ୍ରେଣୀ ସହିତ ବଦଳାଗଲା |.list-group-item-action
  • .list-group-flushକାର୍ଡ ସହିତ ବ୍ୟବହାର ପାଇଁ ଶ୍ରେଣୀ ଯୋଡା ଯାଇଛି |
  • ଫ୍ଲେକ୍ସବକ୍ସ ସହିତ ଉପାଦାନକୁ ପୁନ r ଲେଖନ୍ତୁ |
  • ଫ୍ଲେକ୍ସବକ୍ସକୁ ସ୍ଥାନାନ୍ତରିତ, ହେଡର୍ ରେ ବରଖାସ୍ତ ଆଇକନ୍ ଗୁଡିକର ଆଲାଇନ୍ମେଣ୍ଟ ସମ୍ଭବତ broken ଭାଙ୍ଗି ଯାଇଛି କାରଣ ଆମେ ଆଉ ଫ୍ଲୋଟ୍ ବ୍ୟବହାର କରୁନାହୁଁ | ଭାସମାନ ବିଷୟବସ୍ତୁ ପ୍ରଥମେ ଆସେ, କିନ୍ତୁ ଫ୍ଲେକ୍ସବକ୍ସ ସହିତ ତାହା ଆଉ ନୁହେଁ | ଠିକ୍ କରିବାକୁ ମୋଡାଲ୍ ଟାଇଟଲ୍ ପରେ ଆସିବାକୁ ତୁମର ବରଖାସ୍ତ ଆଇକନ୍ ଗୁଡିକୁ ଅପଡେଟ୍ କର |
  • remoteବିକଳ୍ପ (ଯାହା ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏକ ମୋଡାଲରେ ବାହ୍ୟ ବିଷୟବସ୍ତୁ ଲୋଡ୍ ଏବଂ ଇଞ୍ଜେକ୍ସନ ଦେବା ପାଇଁ ବ୍ୟବହୃତ ହୋଇପାରେ) ଏବଂ ସଂପୃକ୍ତ ଇଭେଣ୍ଟକୁ loaded.bs.modalଅପସାରଣ କରାଯାଇଥିଲା | ଆମେ ଏହା ପରିବର୍ତ୍ତେ କ୍ଲାଏଣ୍ଟ-ସାଇଡ୍ ଟେମ୍ପଲେଟିଂ କିମ୍ବା ଏକ ଡାଟା ବାଇଣ୍ଡିଂ framework ାଞ୍ଚା ବ୍ୟବହାର କରିବା, କିମ୍ବା jQuery.load କୁ କଲ୍ କରିବା ପାଇଁ ସୁପାରିଶ କରୁ |
  • ଫ୍ଲେକ୍ସବକ୍ସ ସହିତ ଉପାଦାନକୁ ପୁନ r ଲେଖନ୍ତୁ |
  • >ଅଣ-ନେଷ୍ଟେଡ୍ କ୍ଲାସ୍ ମାଧ୍ୟମରେ ସରଳ ଷ୍ଟାଇଲ୍ ପାଇଁ ପ୍ରାୟ ସମସ୍ତ ଚୟନକର୍ତ୍ତାଙ୍କୁ ଡ୍ରପ୍ କରିଦେଲେ |
  • ଯେପରି HTML- ନିର୍ଦ୍ଦିଷ୍ଟ ଚୟନକର୍ତ୍ତାଙ୍କ ବଦଳରେ , ଆମେ s, s, ଏବଂ s .nav > li > aପାଇଁ ପୃଥକ ଶ୍ରେଣୀ ବ୍ୟବହାର କରୁ | ବର୍ଦ୍ଧିତ ବିସ୍ତାରତା ଆଣିବା ସହିତ ଏହା ଆପଣଙ୍କର HTML କୁ ଅଧିକ ନମନୀୟ କରିଥାଏ |.nav.nav-item.nav-link

ଆଲାଇନ୍ମେଣ୍ଟ, ପ୍ରତିକ୍ରିୟାଶୀଳତା ଏବଂ କଷ୍ଟମାଇଜେସନ୍ ପାଇଁ ଉନ୍ନତ ସମର୍ଥନ ସହିତ ନାଭବାର୍ ସଂପୂର୍ଣ୍ଣ ଭାବରେ ଫ୍ଲେକ୍ସବକ୍ସରେ ପୁନ r ଲିଖିତ ହୋଇଛି |

  • ପ୍ରତିକ୍ରିୟାଶୀଳ ନାଭବାର୍ ଆଚରଣ ବର୍ତ୍ତମାନ ଆବଶ୍ୟକୀୟ.navbar ଶ୍ରେଣୀରେ ପ୍ରୟୋଗ କରାଯାଏ ଯେଉଁଠାରେ ଆପଣ ନାଭବାର୍ କୁ କେଉଁଠାରେ ଭାଙ୍ଗିବେ ତାହା ବାଛନ୍ତୁ | ପୂର୍ବରୁ ଏହା ଏକ କମ୍ ଭେରିଏବଲ୍ ମୋଡିଫିକେସନ୍ ଏବଂ ଆବଶ୍ୟକ ପୁନ omp ସଂକଳନ ଆବଶ୍ୟକ | .navbar-expand-{breakpoint}
  • .navbar-defaultବର୍ତ୍ତମାନ ଅଛି .navbar-light, ଯଦିଓ .navbar-darkସମାନ ଅଟେ | ପ୍ରତ୍ୟେକ ନାଭବାରରେ ଏଥି ମଧ୍ୟରୁ ଗୋଟିଏ ଆବଶ୍ୟକ | ତଥାପି, ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକ ଆଉ background-colors ସେଟ୍ କରନ୍ତି ନାହିଁ; ଏହା ପରିବର୍ତ୍ତେ ସେମାନେ କେବଳ ପ୍ରଭାବିତ କରନ୍ତି color|
  • ନାଭର୍ସ ବର୍ତ୍ତମାନ ଏକ ପ୍ରକାରର ପୃଷ୍ଠଭୂମି ଘୋଷଣା ଆବଶ୍ୟକ କରେ | ଆମର ବ୍ୟାକଗ୍ରାଉଣ୍ଡ୍ ଉପଯୋଗିତା () ରୁ ବାଛନ୍ତୁ କିମ୍ବା ପାଗଳ କଷ୍ଟମାଇଜେସନ୍ ପାଇଁ.bg-* ଉପରୋକ୍ତ ଆଲୋକ / ଓଲଟା କ୍ଲାସ୍ ସହିତ ନିଜର ସେଟ୍ କରନ୍ତୁ |
  • ଦିଆଯାଇଥିବା ଫ୍ଲେକ୍ସବକ୍ସ ଶ yles ଳୀ, ନାଭର୍ସ ବର୍ତ୍ତମାନ ସହଜ ଆଲାଇନ୍ମେଣ୍ଟ ବିକଳ୍ପ ପାଇଁ ଫ୍ଲେକ୍ସବକ୍ସ ୟୁଟିଲିଟି ବ୍ୟବହାର କରିପାରିବ |
  • .navbar-toggleବର୍ତ୍ତମାନ .navbar-togglerଏବଂ ଏହାର ଭିନ୍ନ ଶ yles ଳୀ ଏବଂ ଭିତର ମାର୍କଅପ୍ ଅଛି (ଆଉ ତିନୋଟି <span>s ନାହିଁ) |
  • .navbar-formକ୍ଲାସ୍କୁ ସଂପୂର୍ଣ୍ଣ ଭାବେ ଛାଡିଦେଲା | ଏହା ଆଉ ଆବଶ୍ୟକ ନୁହେଁ; ଏହା ପରିବର୍ତ୍ତେ, କେବଳ .form-inlineଆବଶ୍ୟକ ଅନୁଯାୟୀ ମାର୍ଜିନ୍ ୟୁଟିଲିଟି ବ୍ୟବହାର ଏବଂ ପ୍ରୟୋଗ କର |
  • ନାଭବର୍ ଗୁଡିକ ଆଉ ଅନ୍ତର୍ଭୂକ୍ତ କରେ ନାହିଁ margin-bottomକିମ୍ବା border-radiusଡିଫଲ୍ଟ ଭାବରେ | ଆବଶ୍ୟକ ଅନୁଯାୟୀ ଉପଯୋଗିତା ବ୍ୟବହାର କରନ୍ତୁ |
  • ନୂତନ ମାର୍କଅପ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ପାଇଁ ନାଭବାର୍ ବିଶିଷ୍ଟ ସମସ୍ତ ଉଦାହରଣକୁ ଅଦ୍ୟତନ କରାଯାଇଛି |

ପୃଷ୍ଠା

  • ଫ୍ଲେକ୍ସବକ୍ସ ସହିତ ଉପାଦାନକୁ ପୁନ r ଲେଖନ୍ତୁ |
  • S ର ବଂଶଧରମାନଙ୍କ ଉପରେ ସ୍ପଷ୍ଟ କ୍ଲାସ୍ ( .page-item, .page-link) ବର୍ତ୍ତମାନ ଆବଶ୍ୟକ |.pagination
  • .pagerକଷ୍ଟୋମାଇଜ୍ ହୋଇଥିବା ବାହ୍ୟରେଖା ବଟନ୍ ଅପେକ୍ଷା ଏହା ଉପାଦାନକୁ ସମ୍ପୁର୍ଣ୍ଣ ଭାବରେ ଡ୍ରପ୍ କରିଦେଲା |
  • ଏକ ସ୍ପଷ୍ଟ ଶ୍ରେଣୀ ,, .breadcrumb-itemବର୍ତ୍ତମାନ .breadcrumbs ଙ୍କ ବଂଶଧରମାନଙ୍କ ପାଇଁ ଆବଶ୍ୟକ |

ଲେବଲ୍ ଏବଂ ବ୍ୟାଜ୍ |

  • ଉପାଦାନରୁ ଅଲଗା .labelହେବା ପାଇଁ ନାମ ପରିବର୍ତ୍ତନ କରାଯାଇଛି |.badge<label>
  • .badgeଉପାଦାନକୁ ଲେବଲ୍ ସହିତ ସମାନ ଥିବାରୁ ଡ୍ରପ୍ କରିଦେଲେ | .badge-pillସେହି ଗୋଲାକାର ଲୁକ୍ ବଦଳରେ ଲେବଲ୍ ଉପାଦାନ ସହିତ ମୋଡିଫାୟର୍ ବ୍ୟବହାର କରନ୍ତୁ |
  • ତାଲିକା ଗୋଷ୍ଠୀ ଏବଂ ଅନ୍ୟାନ୍ୟ ଉପାଦାନଗୁଡ଼ିକରେ ବ୍ୟାଜ୍ଗୁଡ଼ିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଭାସମାନ ହୁଏ ନାହିଁ | ଏଥିପାଇଁ ୟୁଟିଲିଟି କ୍ଲାସ୍ ବର୍ତ୍ତମାନ ଆବଶ୍ୟକ |
  • .badge-defaultଡ୍ରପ୍ ହୋଇଛି ଏବଂ .badge-secondaryଅନ୍ୟ ସ୍ଥାନରେ ବ୍ୟବହୃତ ଉପାଦାନ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ସହିତ ମେଳ ହୋଇଛି |

ପ୍ୟାନେଲ୍, ଥମ୍ na ନେଲ୍ ଏବଂ କୂଅ |

ନୂତନ କାର୍ଡ ଉପାଦାନ ପାଇଁ ସଂପୂର୍ଣ୍ଣ ଭାବେ ଡ୍ରପ୍ ହୋଇଛି |

ପ୍ୟାନେଲ୍ |

  • .panelକୁ .card, ବର୍ତ୍ତମାନ ଫ୍ଲେକ୍ସବକ୍ସ ସହିତ ନିର୍ମିତ |
  • .panel-defaultଅପସାରିତ ହୋଇଛି ଏବଂ କ no ଣସି ପ୍ରତିସ୍ଥାପନ ନାହିଁ |
  • .panel-groupଅପସାରିତ ହୋଇଛି ଏବଂ କ no ଣସି ପ୍ରତିସ୍ଥାପନ ନାହିଁ | .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.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|
  • ଡିଜାଇନ୍ ଏବଂ ଷ୍ଟାଇଲିଂକୁ ସରଳ କରିବା ପାଇଁ ସମଗ୍ର ଉପାଦାନକୁ ମରାମତି କରନ୍ତୁ | ଆପଣଙ୍କ ପାଇଁ ଅଳ୍ପ ଶ yles ଳୀ ଅଛି, ନୂତନ ସୂଚକ, ଏବଂ ନୂତନ ଆଇକନ୍ |
  • ସମସ୍ତ CSS ଅଣ-ନାଷ୍ଟ ହୋଇଛି ଏବଂ ପୁନ amed ନାମକରଣ କରାଯାଇଛି, ପ୍ରତ୍ୟେକ ଶ୍ରେଣୀ ସହିତ ଉପସର୍ଗ ନିଶ୍ଚିତ ହୋଇଛି .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, ଅର୍ଥାତ୍ ସେମାନେ ଆଉ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଆଧାର ଶ୍ରେଣୀ ଆବଶ୍ୟକ କରନ୍ତି ନାହିଁ |
  • ସମସ୍ତ ପ୍ରତିକ୍ରିୟାଶୀଳ ଶ yl ଳୀକୁ ଅପସାରଣ କରି, ଉପଯୋଗିତାକୁ ବିଳମ୍ବ କରି (ଯଥା, ନିର୍ଦ୍ଦିଷ୍ଟ ଦୃଶ୍ୟରେ କ୍ୟାପସନ୍ ଦେଖାଇବା) ଏବଂ ଆବଶ୍ୟକ ଅନୁଯାୟୀ କଷ୍ଟମ୍ ଶ yles ଳୀଗୁଡିକ |
  • ଅପସାରିତ ପ୍ରତିଛବି କାରୁସେଲ ଆଇଟମଗୁଡିକରେ ପ୍ରତିଛବିଗୁଡିକ ପାଇଁ ଓଭରବ୍ରିଡ୍ କରେ, ୟୁଟିଲିଟିଜ୍ କୁ ବିଳମ୍ବ କରେ |
  • ନୂତନ ମାର୍କଅପ୍ ଏବଂ ଶ yles ଳୀକୁ ଅନ୍ତର୍ଭୁକ୍ତ କରିବା ପାଇଁ କାରୁସେଲ୍ ଉଦାହରଣକୁ ଟ୍ୱିକ୍ କରନ୍ତୁ |

ଟେବୁଲ୍ |

  • ଷ୍ଟାଇଲ୍ ନେଷ୍ଟେଡ୍ ଟେବୁଲ୍ ପାଇଁ ସମର୍ଥନ ଅପସାରଣ କରାଯାଇଛି | ସମସ୍ତ ଟେବୁଲ୍ ଶ yles ଳୀଗୁଡିକ ସରଳ ଚୟନକର୍ତ୍ତାମାନଙ୍କ ପାଇଁ 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}|
  • ଶ୍ରେଣୀବଦ୍ଧତା ଏବଂ ବ୍ୟବଧାନ:
  • ପୁରୁଣା ବ୍ରାଉଜର୍ ସଂସ୍କରଣ ପାଇଁ ସମର୍ଥନ ଡ୍ରପ୍ କରିବାକୁ କ୍ଲିୟରଫିକ୍ସ ଅପଡେଟ୍ |

ବିକ୍ରେତା ଉପସର୍ଗ ମିଶ୍ରଣ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ 3 ର ବିକ୍ରେତା ଉପସର୍ଗ ମିଶ୍ରଣ, ଯାହା v3.2.0 ରେ ପୁରୁଣା, ବୁଟଷ୍ଟ୍ରାପ୍ 4 ରେ ଅପସାରିତ ହୋଇଛି, ଯେହେତୁ ଆମେ ଅଟୋଫ୍ରେଫିକ୍ସର୍ ବ୍ୟବହାର କରୁ , ସେଗୁଡ଼ିକ ଆଉ ଆବଶ୍ୟକ ନାହିଁ |

ନିମ୍ନଲିଖିତ ମିଶ୍ରଣଗୁଡିକ ଅପସାରଣ 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-functiontransition-transformtranslatetranslate3duser-select

ଡକ୍ୟୁମେଣ୍ଟେସନ୍

ଆମର ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ବୋର୍ଡରେ ଏକ ଅପଗ୍ରେଡ୍ ମଧ୍ୟ ପାଇଲା | ଏଠାରେ ନିମ୍ନ ନିମ୍ନ:

  • ଆମେ ତଥାପି Jekyll ବ୍ୟବହାର କରୁଛୁ, କିନ୍ତୁ ଆମର ମିଶ୍ରଣରେ ପ୍ଲଗଇନ୍ ଅଛି:
    • bugify.rbଆମର ବ୍ରାଉଜର୍ ବଗ୍ ପୃଷ୍ଠାରେ ଏଣ୍ଟ୍ରିଗୁଡ଼ିକୁ ଫଳପ୍ରଦ ଭାବରେ ତାଲିକାଭୁକ୍ତ କରିବାକୁ ବ୍ୟବହୃତ ହୁଏ |
    • example.rbଡିଫଲ୍ଟ ପ୍ଲଗଇନ୍ ର ଏକ କଷ୍ଟମ୍ ଫଙ୍କ highlight.rb, ସହଜ ଉଦାହରଣ-କୋଡ୍ ନିୟନ୍ତ୍ରଣ ପାଇଁ ଅନୁମତି ଦିଏ |
    • callout.rbଏହାର ଏକ ସମାନ କଷ୍ଟମ୍ ଫଙ୍କ, କିନ୍ତୁ ଆମର ସ୍ୱତନ୍ତ୍ର ଡକସ୍ କଲଆଉଟ୍ ପାଇଁ ଡିଜାଇନ୍ ହୋଇଛି |
    • markdown-block.rbଟେବୁଲ୍ ପରି HTML ଉପାଦାନ ମଧ୍ୟରେ ମାର୍କଡାଉନ୍ ସ୍ନିପେଟ୍ ରେଣ୍ଡର୍ କରିବାକୁ ବ୍ୟବହୃତ ହୁଏ |
    • jekyll-toc ଆମର ବିଷୟବସ୍ତୁ ସାରଣୀ ସୃଷ୍ଟି କରିବାକୁ ବ୍ୟବହୃତ ହୁଏ |
  • ସହଜ ସମ୍ପାଦନା ପାଇଁ ମାର୍କଡାଉନରେ (HTML ବଦଳରେ) ସମସ୍ତ ଡକସ୍ ବିଷୟବସ୍ତୁ ପୁନ rew ଲିଖିତ ହୋଇଛି |
  • ସରଳ ବିଷୟବସ୍ତୁ ଏବଂ ଅଧିକ ନିକଟତର ହାଇରାର୍କି ପାଇଁ ପୃଷ୍ଠାଗୁଡ଼ିକୁ ପୁନ organ ସଂଗଠିତ କରାଯାଇଛି |
  • ବୁଟଷ୍ଟ୍ରାପ୍ ର ଭେରିଏବଲ୍, ମିକ୍ସିନ ଏବଂ ଅଧିକର ସମ୍ପୂର୍ଣ୍ଣ ଲାଭ ଉଠାଇବାକୁ ଆମେ ନିୟମିତ CSS ରୁ SCSS କୁ ଚାଲିଗଲୁ |

ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପଯୋଗିତା |

ସମସ୍ତ @screen-ଭେରିଏବଲ୍ ଗୁଡିକ v4.0.0 ରେ ଅପସାରିତ ହୋଇଛି | media-breakpoint-up()ଏହା ପରିବର୍ତ୍ତେ , media-breakpoint-down()କିମ୍ବା media-breakpoint-only()ସାସ୍ ମିଶ୍ରଣ କିମ୍ବା $grid-breakpointsସାସ୍ ମାନଚିତ୍ର ବ୍ୟବହାର କରନ୍ତୁ |

ଆମର ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପଯୋଗିତା ଶ୍ରେଣୀଗୁଡିକ ସ୍ପଷ୍ଟ ଉପଯୋଗୀତା ସପକ୍ଷରେ ମୁଖ୍ୟତ removed ଅପସାରିତ ହୋଇଛି display|

  • .hiddenଏବଂ .showଶ୍ରେଣୀଗୁଡିକ ଅପସାରିତ ହୋଇଛି କାରଣ ସେମାନେ jQuery ଏବଂ ପଦ୍ଧତି ସହିତ ବିବାଦ $(...).hide()କରିଥିଲେ $(...).show()| ଏହା ପରିବର୍ତ୍ତେ, [hidden]ଆଟ୍ରିବ୍ୟୁଟ୍ ଟୋଗଲ୍ କରିବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ କିମ୍ବା ପରି ଇନଲାଇନ ଶ yles ଳୀ ବ୍ୟବହାର style="display: none;"କରନ୍ତୁ style="display: block;"|
  • ସମସ୍ତ .hidden-ଶ୍ରେଣୀଗୁଡିକ ଅପସାରିତ ହୋଇଛି, ପ୍ରିଣ୍ଟ୍ ୟୁଟିଲିଟିଗୁଡିକ ପାଇଁ ପୁନ save ନାମକରଣ କରାଯାଇଛି |
    • 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 ବ୍ୟବହାର କରିବାକୁ ପଡିବ |