ପାତ୍ରଗୁଡିକ |
କଣ୍ଟେନରଗୁଡ଼ିକ ହେଉଛି ବୁଟଷ୍ଟ୍ରାପ୍ ର ଏକ ମ building ଳିକ ବିଲ୍ଡିଂ ବ୍ଲକ ଯାହା ଏକ ପ୍ରଦତ୍ତ ଉପକରଣ କିମ୍ବା ଭ୍ୟୁପୋର୍ଟ୍ ମଧ୍ୟରେ ଆପଣଙ୍କର ବିଷୟବସ୍ତୁ ଧାରଣ କରିଥାଏ, ପ୍ୟାଡ୍ କରେ |
ସେମାନେ କିପରି କାମ କରନ୍ତି |
କଣ୍ଟେନର୍ ଗୁଡିକ ବୁଟଷ୍ଟ୍ରାପ୍ ର ସବୁଠାରୁ ମ basic ଳିକ ଲେଆଉଟ୍ ଉପାଦାନ ଏବଂ ଆମର ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ବ୍ୟବହାର କରିବା ସମୟରେ ଆବଶ୍ୟକ | ଧାରଣକାରୀ, ପ୍ୟାଡ୍, ଏବଂ (ବେଳେବେଳେ) ସେମାନଙ୍କ ଭିତରେ ଥିବା ବିଷୟବସ୍ତୁକୁ କେନ୍ଦ୍ର କରିବା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ | ଯେତେବେଳେ ପାତ୍ରଗୁଡିକ ବସା ବାନ୍ଧିହେବ, ଅଧିକାଂଶ ଲେଆଉଟ୍ ଗୁଡିକ ଏକ ନେଷ୍ଟେଡ୍ ପାତ୍ରର ଆବଶ୍ୟକ କରନ୍ତି ନାହିଁ |
ତିନୋଟି ଭିନ୍ନ ପାତ୍ର ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ଆସେ:
.container, ଯାହାmax-widthପ୍ରତ୍ୟେକ ପ୍ରତିକ୍ରିୟାଶୀଳ ବ୍ରେକପଏଣ୍ଟରେ ସେଟ୍ କରେ |.container-fluid, ଯାହାwidth: 100%ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟରେ ଅଛି |.container-{breakpoint}, ଯାହାକିwidth: 100%ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟ ପର୍ଯ୍ୟନ୍ତ |
max-widthପ୍ରତ୍ୟେକ ସାରଣୀଟି ମୂଳ ସହିତ .containerଏବଂ .container-fluidପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟରେ କିପରି ତୁଳନା କରାଯାଏ, ନିମ୍ନରେ ଥିବା ସାରଣୀ ବର୍ଣ୍ଣନା କରେ |
ସେମାନଙ୍କୁ କାର୍ଯ୍ୟରେ ଦେଖନ୍ତୁ ଏବଂ ଆମ ଗ୍ରୀଡ୍ ଉଦାହରଣରେ ତୁଳନା କରନ୍ତୁ |
| ଅତିରିକ୍ତ ଛୋଟ <576px |
ଛୋଟ ≥576px |
ମଧ୍ୟମ ≥768px |
ବଡ଼ ≥992px |
X- ବଡ଼ ≥1200px | |
XX- ବଡ଼ ≥1400px | |
|
|---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
ଡିଫଲ୍ଟ ପାତ୍ର |
ଆମର ଡିଫଲ୍ଟ .containerଶ୍ରେଣୀ ହେଉଛି ଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ, ସ୍ଥିର-ଓସାର ପାତ୍ର, ଅର୍ଥାତ୍ max-widthପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟରେ ଏହାର ପରିବର୍ତ୍ତନ |
<div class="container">
<!-- Content here -->
</div>
ପ୍ରତିକ୍ରିୟାଶୀଳ ପାତ୍ରଗୁଡିକ |
ପ୍ରତିକ୍ରିୟାଶୀଳ ପାତ୍ରଗୁଡିକ ଆପଣଙ୍କୁ ଏକ ଶ୍ରେଣୀ ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଅନୁମତି ଦିଏ ଯାହା ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟ ପହଞ୍ଚିବା ପର୍ଯ୍ୟନ୍ତ 100% ଚଉଡା, ଯାହା ପରେ ଆମେ max-widthପ୍ରତ୍ୟେକ ଉଚ୍ଚ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ s ପ୍ରୟୋଗ କରୁ | ଉଦାହରଣ ସ୍ .ରୁପ, ବ୍ରେକପଏଣ୍ଟ ପହଞ୍ଚିବା .container-smପର୍ଯ୍ୟନ୍ତ ଆରମ୍ଭ କରିବା ପାଇଁ 100% ଚଉଡା , ଯେଉଁଠାରେ ଏହା ,, ଏବଂ smସହିତ ସ୍କେଲ ହେବ |mdlgxlxxl
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
ତରଳ ପାତ୍ରଗୁଡିକ |
.container-fluidଭ୍ୟୁପୋର୍ଟର ସମ୍ପୂର୍ଣ୍ଣ ଓସାରକୁ ବିସ୍ତାର କରି ଏକ ପୂର୍ଣ୍ଣ ଓସାର ପାତ୍ର ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ |
<div class="container-fluid">
...
</div>
ସାସ୍ |
ଉପରୋକ୍ତ ପରି, ବୁଟଷ୍ଟ୍ରାପ୍ ଆପଣ ଚାହୁଁଥିବା ଲେଆଉଟ୍ ଗଠନ କରିବାରେ ସାହାଯ୍ୟ କରିବା ପାଇଁ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ କଣ୍ଟେନର ଶ୍ରେଣୀର ଏକ ସିରିଜ୍ ସୃଷ୍ଟି କରେ | ଆପଣ ସାସ୍ ମାନଚିତ୍ରକୁ ପରିବର୍ତ୍ତନ କରି ଏହି ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ କଣ୍ଟେନର୍ ଶ୍ରେଣୀଗୁଡ଼ିକୁ କଷ୍ଟୋମାଇଜ୍ କରିପାରିବେ _variables.scssଯାହା ସେମାନଙ୍କୁ ଶକ୍ତି ପ୍ରଦାନ କରେ:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
ସାସ୍ କଷ୍ଟୋମାଇଜ୍ କରିବା ସହିତ, ଆପଣ ଆମର ସାସ୍ ମିକ୍ସିନ୍ ସହିତ ନିଜସ୍ୱ ପାତ୍ର ମଧ୍ୟ ସୃଷ୍ଟି କରିପାରିବେ |
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
ଆମର ସାସ୍ ମାନଚିତ୍ର ଏବଂ ଭେରିଏବଲ୍ ଗୁଡିକ କିପରି ରୂପାନ୍ତର କରାଯିବ ସେ ସମ୍ବନ୍ଧରେ ଅଧିକ ସୂଚନା ଏବଂ ଉଦାହରଣ ପାଇଁ, ଦୟାକରି ଗ୍ରୀଡ୍ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ସାସ୍ ବିଭାଗକୁ ଅନୁସରଣ କରନ୍ତୁ |