ପାତ୍ରଗୁଡିକ |

ସେମାନେ କିପରି କାମ କରନ୍ତି |

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

ତିନୋଟି ଭିନ୍ନ ପାତ୍ର ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ଆସେ:

• .container, ଯାହା max-widthପ୍ରତ୍ୟେକ ପ୍ରତିକ୍ରିୟାଶୀଳ ବ୍ରେକପଏଣ୍ଟରେ ସେଟ୍ କରେ |
• .container-{breakpoint}, ଯାହାକି width: 100%ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟ ପର୍ଯ୍ୟନ୍ତ |
• .container-fluid, ଯାହା width: 100%ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟରେ ଅଛି |

ନିମ୍ନରେ ଥିବା ସାରଣୀଟି ପ୍ରତ୍ୟେକ ପାତ୍ରର ମୂଳ ଏବଂ ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟରେ କିପରି max-widthତୁଳନା କରେ ତାହା ବର୍ଣ୍ଣନା କରେ |.container.container-fluid

ସେମାନଙ୍କୁ କାର୍ଯ୍ୟରେ ଦେଖନ୍ତୁ ଏବଂ ଆମର ଗ୍ରୀଡ୍ ଉଦାହରଣରେ ତୁଳନା କରନ୍ତୁ |

ଡିଫଲ୍ଟ ପାତ୍ର |

ଆମର ଡିଫଲ୍ଟ .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();
}

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