ବ୍ରେକପଏଣ୍ଟ |

ମୂଳ ଧାରଣା |

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

• ବ୍ରେକପଏଣ୍ଟ ଦ୍ୱାରା ଆପଣଙ୍କର CSS ସ୍ଥାପତ୍ୟ କରିବାକୁ ମିଡିଆ ପ୍ରଶ୍ନଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ | ମିଡିଆ ଜିଜ୍ଞାସା ହେଉଛି CSS ର ଏକ ବ feature ଶିଷ୍ଟ୍ୟ ଯାହା ଆପଣଙ୍କୁ ବ୍ରାଉଜର୍ ଏବଂ ଅପରେଟିଂ ସିଷ୍ଟମ୍ ପାରାମିଟରର ଏକ ସେଟ୍ ଉପରେ ଆଧାର କରି ଶ yles ଳୀଗୁଡିକ ପ୍ରୟୋଗ କରିବାକୁ ଅନୁମତି ଦିଏ | ଆମେ ସାଧାରଣତ min-widthour ଆମର ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକରେ ବ୍ୟବହାର କରୁ |

• ମୋବାଇଲ୍ ପ୍ରଥମେ, ପ୍ରତିକ୍ରିୟାଶୀଳ ଡିଜାଇନ୍ ହେଉଛି ଲକ୍ଷ୍ୟ | ଛୋଟ ବ୍ରେକପଏଣ୍ଟରେ ଏକ ଲେଆଉଟ୍ କାମ କରିବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର CSS ସର୍ବନିମ୍ନ ସର୍ବନିମ୍ନ ଶ yles ଳୀ ପ୍ରୟୋଗ କରିବାକୁ ଲକ୍ଷ୍ୟ ରଖିଥାଏ, ଏବଂ ତା’ପରେ ବୃହତ ଉପକରଣଗୁଡ଼ିକ ପାଇଁ ସେହି ଡିଜାଇନ୍କୁ ସଜାଡ଼ିବା ପାଇଁ ଶ yles ଳୀରେ ସ୍ତରଗୁଡିକ | ଏହା ତୁମର CSS କୁ ଅପ୍ଟିମାଇଜ୍ କରେ, ରେଣ୍ଡରିଂ ସମୟକୁ ଉନ୍ନତ କରେ ଏବଂ ତୁମର ଭ୍ରମଣକାରୀଙ୍କ ପାଇଁ ଏକ ଉତ୍ତମ ଅଭିଜ୍ଞତା ପ୍ରଦାନ କରେ |

ଉପଲବ୍ଧ ବ୍ରେକପଏଣ୍ଟ |

ପ୍ରତିକ୍ରିୟାଶୀଳ ଭାବରେ ନିର୍ମାଣ ପାଇଁ ବୁଟଷ୍ଟ୍ରାପରେ six ଟି ଡିଫଲ୍ଟ ବ୍ରେକପଏଣ୍ଟ ଅନ୍ତର୍ଭୂକ୍ତ ହୁଏ, ବେଳେବେଳେ ଗ୍ରୀଡ୍ ସ୍ତର ଭାବରେ କୁହାଯାଏ | ଯଦି ଆପଣ ଆମର ଉତ୍ସ ସାସ୍ ଫାଇଲ୍ ବ୍ୟବହାର କରୁଛନ୍ତି ତେବେ ଏହି ବ୍ରେକପଏଣ୍ଟଗୁଡିକ କଷ୍ଟମାଇଜ୍ ହୋଇପାରିବ |

ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟକୁ ଆରାମରେ ପାତ୍ରଗୁଡିକ ଧରି ରଖିବା ପାଇଁ ଚୟନ କରାଯାଇଥିଲା ଯାହାର ପ୍ରସ୍ଥ 12 ଗୁଣ ଅଟେ | ବ୍ରେକପଏଣ୍ଟଗୁଡିକ ସାଧାରଣ ଉପକରଣ ଆକାର ଏବଂ ଭ୍ୟୁପୋର୍ଟ୍ ଡାଇମେନ୍ସର ଏକ ଉପସେଟର ପ୍ରତିନିଧୀ - ସେମାନେ ପ୍ରତ୍ୟେକ ବ୍ୟବହାର ମାମଲା କିମ୍ବା ଉପକରଣକୁ ନିର୍ଦ୍ଦିଷ୍ଟ ଭାବରେ ଟାର୍ଗେଟ୍ କରନ୍ତି ନାହିଁ | ଏହା ପରିବର୍ତ୍ତେ, ରେଞ୍ଜଗୁଡିକ ପ୍ରାୟ ଯେକ any ଣସି ଉପକରଣ ପାଇଁ ନିର୍ମାଣ କରିବାକୁ ଏକ ଦୃ strong ଏବଂ ସ୍ଥିର ଭିତ୍ତି ପ୍ରଦାନ କରିଥାଏ |

ଏହି ବ୍ରେକପଏଣ୍ଟଗୁଡିକ ସାସ୍ ମାଧ୍ୟମରେ କଷ୍ଟମାଇଜେବଲ୍ - ଆପଣ ସେଗୁଡିକୁ ଆମ _variables.scssଷ୍ଟାଇଲ୍ ଶୀଟ୍ ରେ ଏକ ସାସ୍ ମାନଚିତ୍ରରେ ପାଇବେ |

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

ଆମର ସାସ୍ ମାନଚିତ୍ର ଏବଂ ଭେରିଏବଲ୍ ଗୁଡିକ କିପରି ରୂପାନ୍ତର କରାଯିବ ସେ ସମ୍ବନ୍ଧରେ ଅଧିକ ସୂଚନା ଏବଂ ଉଦାହରଣ ପାଇଁ, ଦୟାକରି ଗ୍ରୀଡ୍ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ସାସ୍ ବିଭାଗକୁ ଅନୁସରଣ କରନ୍ତୁ |

ମିଡିଆ ପ୍ରଶ୍ନଗୁଡିକ |

ଯେହେତୁ ପ୍ରଥମେ ମୋବାଇଲ୍ ହେବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ବିକଶିତ ହୋଇଛି, ଆମେ ଆମର ଲେଆଉଟ୍ ଏବଂ ଇଣ୍ଟରଫେସ୍ ପାଇଁ ସମ୍ବେଦନଶୀଳ ବ୍ରେକପଏଣ୍ଟ ସୃଷ୍ଟି କରିବାକୁ ମୁଠାଏ ମିଡିଆ ଜିଜ୍ଞାସା ବ୍ୟବହାର କରୁ | ଏହି ବ୍ରେକପଏଣ୍ଟଗୁଡ଼ିକ ପ୍ରାୟତ minimum ସର୍ବନିମ୍ନ ଭ୍ୟୁପୋର୍ଟ ପ୍ରସ୍ଥ ଉପରେ ଆଧାରିତ ଏବଂ ଭ୍ୟୁପୋର୍ଟ ପରିବର୍ତ୍ତନ ହେବା ସହିତ ଆମକୁ ଉପାଦାନଗୁଡିକ ସ୍କେଲ କରିବାକୁ ଅନୁମତି ଦିଏ |

ସର୍ବନିମ୍ନ ଓସାର |

ଆମର ଲେଆଉଟ୍, ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍, ଏବଂ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ମୁଖ୍ୟତ the ନିମ୍ନଲିଖିତ ମିଡିଆ ଜିଜ୍ଞାସା ରେଞ୍ଜ - କିମ୍ବା ବ୍ରେକପଏଣ୍ଟ ବ୍ୟବହାର କରେ |

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

ଏହି ସାସ୍ ମିକ୍ସିନଗୁଡିକ ଆମର ସ୍ୟାସ୍ ଭେରିଏବଲ୍ସରେ ଘୋଷିତ ମୂଲ୍ୟଗୁଡିକ ବ୍ୟବହାର କରି ଆମର ସଂକଳିତ CSS ରେ ଅନୁବାଦ କରେ | ଉଦାହରଣ ସ୍ଵରୁପ:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

ସର୍ବାଧିକ ଓସାର |

ଆମେ ବେଳେବେଳେ ମିଡିଆ ଜିଜ୍ଞାସା ବ୍ୟବହାର କରୁ ଯାହା ଅନ୍ୟ ଦିଗକୁ ଯାଏ (ପ୍ରଦତ୍ତ ସ୍କ୍ରିନ୍ ସାଇଜ୍ କିମ୍ବା ଛୋଟ ):

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

ଏହି ମିଶ୍ରଣଗୁଡିକ ସେହି ଘୋଷିତ ବ୍ରେକପଏଣ୍ଟଗୁଡ଼ିକୁ ନେଇଥାଏ, .02pxସେମାନଙ୍କଠାରୁ ବାହାର କରିଦିଏ ଏବଂ ସେଗୁଡିକୁ ଆମର max-widthମୂଲ୍ୟ ଭାବରେ ବ୍ୟବହାର କରେ | ଉଦାହରଣ ସ୍ଵରୁପ:

// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

ଏକକ ବ୍ରେକପଏଣ୍ଟ |

ସର୍ବନିମ୍ନ ଏବଂ ସର୍ବାଧିକ ବ୍ରେକପଏଣ୍ଟ ଓସାର ବ୍ୟବହାର କରି ସ୍କ୍ରିନ ଆକାରର ଗୋଟିଏ ସେଗମେଣ୍ଟକୁ ଟାର୍ଗେଟ କରିବା ପାଇଁ ମିଡିଆ ଜିଜ୍ଞାସା ଏବଂ ମିକ୍ସନ୍ସ ମଧ୍ୟ ଅଛି |

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

ଉଦାହରଣ ସ୍ୱରୂପ @include media-breakpoint-only(md) { ... }ଫଳାଫଳ ଫଳାଫଳ ହେବ:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

ବ୍ରେକପଏଣ୍ଟ ମଧ୍ୟରେ |

ସେହିଭଳି, ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକ ଏକାଧିକ ବ୍ରେକପଏଣ୍ଟ ଓସାର ବିସ୍ତାର କରିପାରେ:

@include media-breakpoint-between(md, xl) { ... }

ଯାହା ଫଳାଫଳ:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }