ବ୍ରେକପଏଣ୍ଟ |
ବ୍ରେକପଏଣ୍ଟଗୁଡ଼ିକ କଷ୍ଟମାଇଜେବଲ୍ ଓସାର ଯାହା ବୁଟଷ୍ଟ୍ରାପରେ ଡିଭାଇସ୍ କିମ୍ବା ଭ୍ୟୁପୋର୍ଟ ଆକାରରେ ଆପଣଙ୍କର ପ୍ରତିକ୍ରିୟାଶୀଳ ଲେଆଉଟ୍ କିପରି ବ୍ୟବହାର କରେ ତାହା ନିର୍ଣ୍ଣୟ କରେ |
ମୂଳ ଧାରଣା |
-
ବ୍ରେକପଏଣ୍ଟଗୁଡିକ ପ୍ରତିକ୍ରିୟାଶୀଳ ଡିଜାଇନ୍ ର ନିର୍ମାଣକାରୀ ବ୍ଲକ ଅଟେ | ଯେତେବେଳେ ଆପଣଙ୍କର ଲେଆଉଟ୍ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଭ୍ୟୁପୋର୍ଟ କିମ୍ବା ଡିଭାଇସ୍ ଆକାରରେ ଆଡାପ୍ଟ୍ଟ୍ ହୋଇପାରିବ ସେଗୁଡିକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ |
-
ବ୍ରେକପଏଣ୍ଟ ଦ୍ୱାରା ଆପଣଙ୍କର CSS ସ୍ଥାପତ୍ୟ କରିବାକୁ ମିଡିଆ ପ୍ରଶ୍ନଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ | ମିଡିଆ ଜିଜ୍ଞାସା ହେଉଛି CSS ର ଏକ ବ feature ଶିଷ୍ଟ୍ୟ ଯାହା ଆପଣଙ୍କୁ ବ୍ରାଉଜର୍ ଏବଂ ଅପରେଟିଂ ସିଷ୍ଟମ୍ ପାରାମିଟରର ଏକ ସେଟ୍ ଉପରେ ଆଧାର କରି ଶ yles ଳୀଗୁଡିକ ପ୍ରୟୋଗ କରିବାକୁ ଅନୁମତି ଦିଏ | ଆମେ ସାଧାରଣତ
min-width
our ଆମର ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକରେ ବ୍ୟବହାର କରୁ | -
ମୋବାଇଲ୍ ପ୍ରଥମେ, ପ୍ରତିକ୍ରିୟାଶୀଳ ଡିଜାଇନ୍ ହେଉଛି ଲକ୍ଷ୍ୟ | ଛୋଟ ବ୍ରେକପଏଣ୍ଟରେ ଏକ ଲେଆଉଟ୍ କାମ କରିବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର CSS ସର୍ବନିମ୍ନ ସର୍ବନିମ୍ନ ଶ yles ଳୀ ପ୍ରୟୋଗ କରିବାକୁ ଲକ୍ଷ୍ୟ ରଖିଥାଏ, ଏବଂ ତା’ପରେ ବୃହତ ଉପକରଣଗୁଡ଼ିକ ପାଇଁ ସେହି ଡିଜାଇନ୍କୁ ସଜାଡ଼ିବା ପାଇଁ ଶ yles ଳୀରେ ସ୍ତରଗୁଡିକ | ଏହା ତୁମର CSS କୁ ଅପ୍ଟିମାଇଜ୍ କରେ, ରେଣ୍ଡରିଂ ସମୟକୁ ଉନ୍ନତ କରେ ଏବଂ ତୁମର ଭ୍ରମଣକାରୀଙ୍କ ପାଇଁ ଏକ ଉତ୍ତମ ଅଭିଜ୍ଞତା ପ୍ରଦାନ କରେ |
ଉପଲବ୍ଧ ବ୍ରେକପଏଣ୍ଟ |
ପ୍ରତିକ୍ରିୟାଶୀଳ ଭାବରେ ନିର୍ମାଣ ପାଇଁ ବୁଟଷ୍ଟ୍ରାପରେ six ଟି ଡିଫଲ୍ଟ ବ୍ରେକପଏଣ୍ଟ ଅନ୍ତର୍ଭୂକ୍ତ ହୁଏ, ବେଳେବେଳେ ଗ୍ରୀଡ୍ ସ୍ତର ଭାବରେ କୁହାଯାଏ | ଯଦି ଆପଣ ଆମର ଉତ୍ସ ସାସ୍ ଫାଇଲ୍ ବ୍ୟବହାର କରୁଛନ୍ତି ତେବେ ଏହି ବ୍ରେକପଏଣ୍ଟଗୁଡିକ କଷ୍ଟମାଇଜ୍ ହୋଇପାରିବ |
ବ୍ରେକପଏଣ୍ଟ | | କ୍ଲାସ୍ ଇନଫିକ୍ସ | | ପରିମାପ |
---|---|---|
X- ଛୋଟ | | କିଛି ନୁହେଁ | | <576px |
ଛୋଟ | sm |
≥576px |
ମଧ୍ୟମ | md |
68768px |
ବଡ଼ | lg |
≥992px |
ଅତି ବଡ଼ | xl |
001200px |
ଅତିରିକ୍ତ ଅତିରିକ୍ତ ବଡ଼ | | xxl |
001400px |
ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟକୁ ଆରାମରେ ପାତ୍ରଗୁଡିକ ଧରି ରଖିବା ପାଇଁ ଚୟନ କରାଯାଇଥିଲା ଯାହାର ପ୍ରସ୍ଥ 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
ମୂଲ୍ୟ ଭାବରେ ବ୍ୟବହାର କରେ | ଉଦାହରଣ ସ୍ଵରୁପ:
// `xs` returns only a ruleset and no media query
// ... { ... }
// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
min-
ଏବଂ max-
ଉପସର୍ଗ ଏବଂ ଭ୍ୟୁପୋର୍ଟଗୁଡିକ ଉପରେ କାର୍ଯ୍ୟ କରୁ |ଏକକ ବ୍ରେକପଏଣ୍ଟ |
ସର୍ବନିମ୍ନ ଏବଂ ସର୍ବାଧିକ ବ୍ରେକପଏଣ୍ଟ ଓସାର ବ୍ୟବହାର କରି ସ୍କ୍ରିନ ଆକାରର ଗୋଟିଏ ସେଗମେଣ୍ଟକୁ ଟାର୍ଗେଟ କରିବା ପାଇଁ ମିଡିଆ ଜିଜ୍ଞାସା ଏବଂ ମିକ୍ସନ୍ସ ମଧ୍ୟ ଅଛି |
@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) { ... }