in English

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

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

ଏହି ପୃଷ୍ଠାରେ |

ଉଦାହରଣ |

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

ଫ୍ଲେକ୍ସବକ୍ସ ସହିତ ନୂଆ କି ଅପରିଚିତ? ପୃଷ୍ଠଭୂମି, ଶବ୍ଦ, ନିର୍ଦ୍ଦେଶାବଳୀ, ଏବଂ କୋଡ୍ ସ୍ନିପେଟ୍ ପାଇଁ ଏହି CSS ଟ୍ରିକ୍ସ ଫ୍ଲେକ୍ସବକ୍ସ ଗାଇଡ୍ ପ Read ନ୍ତୁ |

ସ୍ତମ୍ଭ

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

ଉପରୋକ୍ତ ଉଦାହରଣ ଆମର ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରି ସମସ୍ତ ଡିଭାଇସ୍ ଏବଂ ଭ୍ୟୁପୋର୍ଟରେ ତିନୋଟି ସମାନ-ଓସାର ସ୍ତମ୍ଭ ସୃଷ୍ଟି କରେ | ସେହି ସ୍ତମ୍ଭଗୁଡ଼ିକ ପିତାମାତାଙ୍କ ସହିତ ପୃଷ୍ଠାରେ କେନ୍ଦ୍ରୀଭୂତ .container|

ଏହା କିପରି କାମ କରେ |

ଏହାକୁ ଭାଙ୍ଗିବା, ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ କିପରି ଏକତ୍ର ହୁଏ ତାହା ଏଠାରେ ଅଛି:

ଆମର ଗ୍ରୀଡ୍ six ଟି ପ୍ରତିକ୍ରିୟାଶୀଳ ବ୍ରେକପଏଣ୍ଟକୁ ସମର୍ଥନ କରେ | ବ୍ରେକପଏଣ୍ଟଗୁଡିକ ମିଡିଆ ପ୍ରଶ୍ନଗୁଡିକ ଉପରେ ଆଧାରିତ min-width, ଅର୍ଥାତ୍ ସେମାନେ ସେହି ବ୍ରେକପଏଣ୍ଟ ଏବଂ ଏହା ଉପରେ ଥିବା ସମସ୍ତଙ୍କୁ ପ୍ରଭାବିତ କରନ୍ତି (ଉଦାହରଣ ସ୍ୱରୂପ ,,, .col-sm-4ଏବଂ , smଏବଂ ) | ଏହାର ଅର୍ଥ ଆପଣ ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟ ଦ୍ୱାରା କଣ୍ଟେନର ଏବଂ ସ୍ତମ୍ଭ ଆକାର ଏବଂ ଆଚରଣକୁ ନିୟନ୍ତ୍ରଣ କରିପାରିବେ |mdlgxlxxl
ଧାରଣକାରୀ କେନ୍ଦ୍ର ଏବଂ ଭୂସମାନ୍ତର ଭାବରେ ଆପଣଙ୍କର ବିଷୟବସ୍ତୁକୁ ପ୍ୟାଡ୍ କରନ୍ତୁ | ସମସ୍ତ ଦୃଶ୍ୟମାନ ଏବଂ ଉପକରଣଗୁଡ଼ିକ ପାଇଁ , କିମ୍ବା ତରଳ ଏବଂ ପିକ୍ସେଲ ପ୍ରସ୍ଥର ମିଶ୍ରଣ ପାଇଁ .containerଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ ପିକ୍ସେଲ ଓସାର ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ |.container-fluidwidth: 100%.container-md
ଧାଡିଗୁଡ଼ିକ ସ୍ତମ୍ଭ ପାଇଁ ରାପର୍ | ସେମାନଙ୍କ ମଧ୍ୟରେ ଥିବା ସ୍ଥାନକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ ପ୍ରତ୍ୟେକ ସ୍ତମ୍ଭରେ ଭୂସମାନ୍ତର padding(ଏକ ଗୁଟର୍ କୁହାଯାଏ) ଥାଏ | ଏହା paddingପରେ ଧାଡିଗୁଡ଼ିକ ଉପରେ ନକାରାତ୍ମକ ମାର୍ଜିନ ସହିତ ପ୍ରତିକ୍ରିୟା କରାଯାଇଥାଏ, ଯାହା ନିଶ୍ଚିତ କରେ ଯେ ତୁମର ସ୍ତମ୍ଭରେ ଥିବା ବିଷୟବସ୍ତୁ ବାମ ପାର୍ଶ୍ୱରେ ଭିଜୁଆଲ୍ ଆଲାଇନ୍ ହୋଇଛି | ଧାଡିଗୁଡ଼ିକ ମଧ୍ୟ ତୁମର ବିଷୟବସ୍ତୁର ବ୍ୟବଧାନ ପରିବର୍ତ୍ତନ କରିବାକୁ ସ୍ତମ୍ଭ ଆକାର ଏବଂ ଗୁଟର ଶ୍ରେଣୀଗୁଡ଼ିକୁ ସମାନ ଭାବରେ ପ୍ରୟୋଗ କରିବା ପାଇଁ ମୋଡିଫାୟର୍ କ୍ଲାସ୍କୁ ସମର୍ଥନ କରେ |
ସ୍ତମ୍ଭଗୁଡ଼ିକ ଅବିଶ୍ୱସନୀୟ ଭାବରେ ନମନୀୟ | ଧାଡିରେ 12 ଟି ଟେମ୍ପଲେଟ୍ ସ୍ତମ୍ଭ ଉପଲବ୍ଧ, ଯାହା ଆପଣଙ୍କୁ ବିଭିନ୍ନ ଉପାଦାନଗୁଡ଼ିକର ମିଶ୍ରଣ ସୃଷ୍ଟି କରିବାକୁ ଅନୁମତି ଦେଇଥାଏ ଯାହାକି ଯେକ any ଣସି ସଂଖ୍ୟକ ସ୍ତମ୍ଭକୁ ବିସ୍ତାର କରିଥାଏ | ସ୍ତମ୍ଭ ଶ୍ରେଣୀଗୁଡିକ ବିସ୍ତାର କରିବାକୁ ଟେମ୍ପଲେଟ୍ ସ୍ତମ୍ଭ ସଂଖ୍ୟାକୁ ସୂଚିତ କରେ (ଉଦାହରଣ ସ୍ୱରୂପ, col-4ଚାରିଟି ବିସ୍ତାର କରେ) | widths ଶତକଡା ସେଟ୍ ହୋଇଛି ତେଣୁ ଆପଣଙ୍କର ସର୍ବଦା ସମାନ ଆପେକ୍ଷିକ ଆକାର ଅଛି |
ଗୁଟର୍ସ ମଧ୍ୟ ପ୍ରତିକ୍ରିୟାଶୀଳ ଏବଂ କଷ୍ଟମାଇଜେବଲ୍ | ଆମର ମାର୍ଜିନ ଏବଂ ପ୍ୟାଡିଂ ବ୍ୟବଧାନ ସହିତ ସମାନ ଆକାର ସହିତ ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟରେ ଗୁଟର୍ କ୍ଲାସ୍ ଉପଲବ୍ଧ | କ୍ଲାସ୍ ସହିତ ଭୂସମାନ୍ତର ଗେଟର୍ , ସହିତ ଭୂଲମ୍ବ ଗୁଟର୍ , କିମ୍ବା ଶ୍ରେଣୀ ସହିତ ସମସ୍ତ ଗୁଟର୍ ପରିବର୍ତ୍ତନ କରନ୍ତୁ | ଗୁଟରଗୁଡିକ ଅପସାରଣ କରିବାକୁ ମଧ୍ୟ ଉପଲବ୍ଧ |.gx-*.gy-*.g-*.g-0
ସାସ୍ ଭେରିଏବଲ୍, ମାନଚିତ୍ର, ଏବଂ ମିଶ୍ରଣ ଗ୍ରୀଡ୍ କୁ ଶକ୍ତି ପ୍ରଦାନ କରେ | ଯଦି ଆପଣ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ରେ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରିବାକୁ ଚାହୁଁନାହାଁନ୍ତି, ତେବେ ଆପଣ ଆମର ଗ୍ରୀଡ୍ ଉତ୍ସ ସାସ୍ ବ୍ୟବହାର କରି ଅଧିକ ଅର୍ଥଗତ ମାର୍କଅପ୍ ସହିତ ନିଜର ସୃଷ୍ଟି କରିପାରିବେ | ଆପଣଙ୍କ ପାଇଁ ଅଧିକ ନମନୀୟତା ପାଇଁ ଏହି ସାସ୍ ଭେରିଏବଲ୍ଗୁଡ଼ିକୁ ଗ୍ରାସ କରିବା ପାଇଁ ଆମେ କିଛି CSS କଷ୍ଟମ୍ ଗୁଣ ମଧ୍ୟ ଅନ୍ତର୍ଭୂକ୍ତ କରୁ |

ଫ୍ଲେକ୍ସବକ୍ସ ଚାରିପାଖରେ ଥିବା ସୀମିତତା ଏବଂ ତ୍ରୁଟି ବିଷୟରେ ସଚେତନ ରୁହନ୍ତୁ , ଯେପରି କିଛି HTML ଉପାଦାନକୁ ଫ୍ଲେକ୍ସ ପାତ୍ର ଭାବରେ ବ୍ୟବହାର କରିବାରେ ଅକ୍ଷମତା |

ଗ୍ରୀଡ୍ ବିକଳ୍ପଗୁଡିକ |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ସମସ୍ତ six ଟି ଡିଫଲ୍ଟ ବ୍ରେକପଏଣ୍ଟ ଏବଂ ଆପଣ କଷ୍ଟୋମାଇଜ୍ କରୁଥିବା ଯେକ any ଣସି ବ୍ରେକପଏଣ୍ଟ ମଧ୍ୟରେ ଆଡାପ୍ଟ୍ଟ୍ ହୋଇପାରେ | ଛଅଟି ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସ୍ତରଗୁଡିକ ନିମ୍ନଲିଖିତ ଅଟେ:

ଅତିରିକ୍ତ ଛୋଟ (xs)
ଛୋଟ (sm)
ମଧ୍ୟମ (md)
ବଡ଼ (lg)
ଅତିରିକ୍ତ ବଡ଼ (xl)
ଅତିରିକ୍ତ ଅତିରିକ୍ତ ବଡ଼ (xxl)

ଉପରୋକ୍ତ ପରି, ଏହି ବ୍ରେକପଏଣ୍ଟଗୁଡ଼ିକର ପ୍ରତ୍ୟେକର ନିଜସ୍ୱ ପାତ୍ର, ଅନନ୍ୟ ଶ୍ରେଣୀ ଉପସର୍ଗ ଏବଂ ପରିବର୍ତ୍ତନକାରୀ ଥାଏ | ଏହି ବ୍ରେକପଏଣ୍ଟଗୁଡ଼ିକରେ ଗ୍ରୀଡ୍ କିପରି ପରିବର୍ତ୍ତନ ହୁଏ ତାହା ଏଠାରେ ଅଛି:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
ଧାରଣକାରୀ`max-width`	କିଛି ନୁହେଁ (ଅଟୋ)	540px	720px	960px	1140px	1320px
କ୍ଲାସ୍ ଉପସର୍ଗ \|	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# ସ୍ତମ୍ଭଗୁଡିକ	12
ଗୁଟର ମୋଟେଇ \|	1.5rem (ବାମ ଏବଂ ଡାହାଣରେ .75rem)
କଷ୍ଟମ୍ ଗୁଟର୍ସ \|	ହଁ
ନାଷ୍ଟେବଲ୍ \|	ହଁ
ସ୍ତମ୍ଭ ଅର୍ଡର \|	ହଁ

ଅଟୋ-ଲେଆଉଟ୍ ସ୍ତମ୍ଭଗୁଡିକ |

ଯେପରି ଏକ ସ୍ପଷ୍ଟ ନମ୍ବରଯୁକ୍ତ ଶ୍ରେଣୀ ବିନା ସହଜ ସ୍ତମ୍ଭ ଆକାର ପାଇଁ ବ୍ରେକପଏଣ୍ଟ-ନିର୍ଦ୍ଦିଷ୍ଟ ସ୍ତମ୍ଭ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ .col-sm-6|

ସମାନ ଓସାର |

ଉଦାହରଣ ସ୍ୱରୂପ, ଏଠାରେ ଦୁଇଟି ଗ୍ରୀଡ୍ ଲେଆଉଟ୍ ଅଛି ଯାହା ପ୍ରତ୍ୟେକ ଡିଭାଇସ୍ ଏବଂ ଭ୍ୟୁପୋର୍ଟରେ xsପ୍ରଯୁଜ୍ୟ xxl| ଆପଣ ଆବଶ୍ୟକ କରୁଥିବା ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ ଯେକ number ଣସି ସଂଖ୍ୟକ ୟୁନିଟ୍-କମ୍ ଶ୍ରେଣୀ ଯୋଡନ୍ତୁ ଏବଂ ପ୍ରତ୍ୟେକ ସ୍ତମ୍ଭ ସମାନ ପ୍ରସ୍ଥ ହେବ |

2 ର 1

2 ର 2

3 ର 1

3 ର 2

3 ର 3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ଗୋଟିଏ ସ୍ତମ୍ଭ ପ୍ରସ୍ଥ ସେଟିଂ କରିବା |

ଫ୍ଲେକ୍ସବକ୍ସ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭଗୁଡ଼ିକ ପାଇଁ ଅଟୋ-ଲେଆଉଟ୍ ମଧ୍ୟ ଏହାର ଅର୍ଥ ହେଉଛି ଯେ ଆପଣ ଗୋଟିଏ ସ୍ତମ୍ଭର ମୋଟେଇ ସେଟ୍ କରିପାରିବେ ଏବଂ ଭାଇଭଉଣୀ ସ୍ତମ୍ଭଗୁଡ଼ିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏହାର ଆକାର ବଦଳାଇ ପାରିବେ | ଆପଣ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ କ୍ଲାସ୍ (ନିମ୍ନରେ ଦେଖାଯାଇଥିବା ପରି), ଗ୍ରୀଡ୍ ମିକ୍ସିନ୍ କିମ୍ବା ଇନଲାଇନ ପ୍ରସ୍ଥ ବ୍ୟବହାର କରିପାରିବେ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଅନ୍ୟ ସ୍ତମ୍ଭଗୁଡ଼ିକ କେନ୍ଦ୍ର ସ୍ତମ୍ଭର ମୋଟେଇକୁ ଗୁରୁତ୍ୱ ନଦେଇ ଆକାର ପରିବର୍ତ୍ତନ କରିବ |

3 ର 1

3 ର 2 (ବିସ୍ତୃତ)

3 ର 3

3 ର 1

3 ର 2 (ବିସ୍ତୃତ)

3 ର 3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ଭେରିଏବଲ୍ ଓସାର ବିଷୟବସ୍ତୁ |

col-{breakpoint}-autoସେମାନଙ୍କର ବିଷୟବସ୍ତୁର ପ୍ରାକୃତିକ ମୋଟେଇ ଉପରେ ଆଧାର କରି ସ୍ତମ୍ଭଗୁଡିକ ଆକାର କରିବାକୁ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |

3 ର 1

ଭେରିଏବଲ୍ ଓସାର ବିଷୟବସ୍ତୁ |

3 ର 3

3 ର 1

ଭେରିଏବଲ୍ ଓସାର ବିଷୟବସ୍ତୁ |

3 ର 3

html

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

ପ୍ରତିକ��ରିୟାଶୀଳ ଶ୍ରେଣୀଗୁଡିକ |

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

ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟ |

ଗ୍ରୀଡ୍ ପାଇଁ ଯାହା ଛୋଟ ଉପକରଣରୁ ବଡ ପର୍ଯ୍ୟନ୍ତ ସମାନ, .colଏବଂ .col-*ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ | ଯେତେବେଳେ ଆପଣ ଏକ ବିଶେଷ ଆକାରର ସ୍ତମ୍ଭ ଆବଶ୍ୟକ କରନ୍ତି ଏକ ନମ୍ବରଯୁକ୍ତ ଶ୍ରେଣୀ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ; ନଚେତ୍, ସ୍ଥିର ରହିବାକୁ ମୁକ୍ତ ହୁଅ .col|

କଲ

col-8

col-4

html

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

ଭୂସମାନ୍ତର

ଶ୍ରେଣୀର ଗୋଟିଏ ସେଟ୍ ବ୍ୟବହାର କରି .col-sm-*, ଆପଣ ଏକ ମ basic ଳିକ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ସୃଷ୍ଟି କରିପାରିବେ ଯାହା ଷ୍ଟାକ୍ ହୋଇ ଆରମ୍ଭ ହୁଏ ଏବଂ ଛୋଟ ବ୍ରେକପଏଣ୍ଟରେ ଭୂସମାନ୍ତର ହୋଇଯାଏ sm|

col-sm-8

col-sm-4

col-sm

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

ମିଶ୍ରଣ ଏବଂ ମେଳ କରନ୍ତୁ |

ତୁମର ସ୍ତମ୍ଭଗୁଡିକ କେବଳ କିଛି ଗ୍ରୀଡ୍ ସ୍ତରରେ ଷ୍ଟକ୍ କରିବାକୁ ଚାହୁଁନାହାଁନ୍ତି କି? ଆବଶ୍ୟକ ଅନୁଯାୟୀ ପ୍ରତ୍ୟେକ ପର୍ଯ୍ୟାୟ ପାଇଁ ବିଭିନ୍ନ ଶ୍ରେଣୀର ମିଶ୍ରଣ ବ୍ୟବହାର କରନ୍ତୁ | ଏହା କିପରି କାର୍ଯ୍ୟ କରେ ତାହାର ଏକ ଉତ୍ତମ ଧାରଣା ପାଇଁ ନିମ୍ନରେ ଥିବା ଉଦାହରଣ ଦେଖନ୍ତୁ |

.col-md-8

.col-6 .col-md-4

.col-6

html

<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

ଧାଡି ସ୍ତମ୍ଭ

.row-cols-*ସ୍ତମ୍ଭ ସଂଖ୍ୟାକୁ ଶୀଘ୍ର ସେଟ୍ କରିବାକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ ଯାହା ଆପଣଙ୍କର ବିଷୟବସ୍ତୁ ଏବଂ ଲେଆଉଟ୍କୁ ସର୍ବୋତ୍ତମ ପ୍ରଦର୍ଶନ କରେ | ଯେଉଁଠାରେ ସାଧାରଣ .col-*ଶ୍ରେଣୀଗୁଡ଼ିକ ବ୍ୟକ୍ତିଗତ ସ୍ତମ୍ଭଗୁଡ଼ିକ ପାଇଁ ପ୍ରଯୁଜ୍ୟ (ଯଥା, .col-md-4), ଧାଡି ସ୍ତମ୍ଭ ଶ୍ରେଣୀଗୁଡ଼ିକ .rowଏକ ସର୍ଟକଟ୍ ଭାବରେ ପିତାମାତା ଉପରେ ସେଟ୍ ହୋଇଛି | ଆପଣ ସହିତ .row-cols-autoସ୍ତମ୍ଭଗୁଡ଼ିକୁ ସେମାନଙ୍କର ପ୍ରାକୃତିକ ମୋଟେଇ ଦେଇପାରିବେ |

ଶୀଘ୍ର ମ basic ଳିକ ଗ୍ରୀଡ୍ ଲେଆଉଟ୍ ସୃଷ୍ଟି କରିବାକୁ କିମ୍ବା ଆପଣଙ୍କର କାର୍ଡ ଲେଆଉଟ୍ ନିୟନ୍ତ୍ରଣ କରିବାକୁ ଏହି ଧାଡି ସ୍ତମ୍ଭ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |

ସ୍ତମ୍ଭ

html

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ସ୍ତମ୍ଭ

html

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ସ୍ତମ୍ଭ

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ସ୍ତମ୍ଭ

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ସ୍ତମ୍ଭ

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ସ୍ତମ୍ଭ

html

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ଆପଣ ସାସ୍ ମିଶ୍ରଣକୁ ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବେ , row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

ବସା ବାନ୍ଧିବା |

ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସହିତ ଆପଣଙ୍କର ବିଷୟବସ୍ତୁକୁ ବସା କରିବାକୁ, ଏକ ବିଦ୍ୟମାନ ସ୍ତମ୍ଭ ମଧ୍ୟରେ ଏକ ନୂତନ .rowଏବଂ ସ୍ତମ୍ଭର ସେଟ୍ ଯୋଡନ୍ତୁ | ନେଷ୍ଟେଡ୍ ଧାଡିଗୁଡିକ ସ୍ତମ୍ଭର ଏକ ସେଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ ଯାହାକି 12 କିମ୍ବା ତା’ଠାରୁ କମ୍ ଯୋଗ କରିଥାଏ (ଆପଣ ସମସ୍ତ 12 ଉପଲବ୍ଧ ସ୍ତମ୍ଭ ବ୍ୟବହାର କରିବା ଆବଶ୍ୟକ ନୁହେଁ) |.col-sm-*.col-sm-*

ସ୍ତର 1: .col-sm-3 |

ସ୍ତର 2: .col-8 .col-sm-6 |

ସ୍ତର 2: .col-4 .col-sm-6 |

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

ସାସ୍ |

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

ଭେରିଏବଲ୍ |

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

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

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

ମିଶ୍ରଣ

ବ୍ୟକ୍ତିଗତ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭଗୁଡ଼ିକ ପାଇଁ ଅର୍ଥଗତ CSS ସୃଷ୍ଟି କରିବାକୁ ଗ୍ରୀଡ୍ ଭେରିଏବଲ୍ ସହିତ ମିଶି ମିକ୍ସନ୍ସ ବ୍ୟବହୃତ ହୁଏ |

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

ଉଦାହରଣ ବ୍ୟବହାର

ଆପଣ ନିଜ ନିଜ କଷ୍ଟମ୍ ମୂଲ୍ୟରେ ଭେରିଏବଲ୍ ଗୁଡିକୁ ରୂପାନ୍ତର କରିପାରିବେ, କିମ୍ବା କେବଳ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ସହିତ ମିକ୍ସିନ ବ୍ୟବହାର କରିପାରିବେ | ମଧ୍ୟରେ ଏକ ଫାଙ୍କ ସହିତ ଦୁଇଟି ସ୍ତମ୍ଭ ଲେଆଉଟ୍ ସୃଷ୍ଟି କରିବାକୁ ଡିଫଲ୍ଟ ସେଟିଂସମୂହ ବ୍ୟବହାର କରିବାର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି |

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

ମୁଖ୍ୟ ବିଷୟବସ୍ତୁ |

ଦ୍ Secondary ିତୀୟ ବିଷୟବସ୍ତୁ |

html

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ଗ୍ରୀଡ୍ କଷ୍ଟୋମାଇଜ୍

ଆମର ବିଲ୍ଟ-ଇନ୍ ଗ୍ରୀଡ୍ ସାସ୍ ଭେରିଏବଲ୍ ଏବଂ ମାନଚିତ୍ରଗୁଡିକ ବ୍ୟବହାର କରି, ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ ଶ୍ରେଣୀଗୁଡ଼ିକୁ ସଂପୂର୍ଣ୍ଣ କଷ୍ଟମାଇଜ୍ କରିବା ସମ୍ଭବ | ସ୍ତର ସଂଖ୍ୟା, ମିଡିଆ ଜିଜ୍ଞାସା ପରିମାଣ, ଏବଂ ପାତ୍ରର ମୋଟେଇ ପରିବର୍ତ୍ତନ କରନ୍ତୁ - ତା’ପରେ ପୁନ omp କମ୍ପାଇଲ୍ କରନ୍ତୁ |

ସ୍ତମ୍ଭ ଏବଂ ଗୁଟଖା |

ଗ୍ରୀସ୍ ସ୍ତମ୍ଭ ସଂଖ୍ୟାକୁ ସାସ୍ ଭେରିଏବଲ୍ ମାଧ୍ୟମରେ ପରିବର୍ତ୍ତନ କରାଯାଇପାରିବ | $grid-columnsପ୍ରତ୍ୟେକ ବ୍ୟକ୍ତିଗତ ସ୍ତମ୍ଭର ମୋଟେଇ (ଶତକଡା) ସୃଷ୍ଟି କରିବାକୁ ବ୍ୟବହୃତ ହୁଏ ଯେତେବେଳେ $grid-gutter-widthସ୍ତମ୍ଭ ଗୁଟରଗୁଡ଼ିକ ପାଇଁ ମୋଟେଇ ସେଟ୍ କରେ | $grid-row-columnsସର୍ବାଧିକ ସଂଖ୍ୟକ ସ୍ତମ୍ଭ ସେଟ୍ କରିବାକୁ ବ୍ୟବହୃତ ହୁଏ .row-cols-*, ଏହି ସୀମା ଉପରେ ଯେକ number ଣସି ସଂଖ୍ୟାକୁ ଅଣଦେଖା କରାଯାଏ |

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

ଗ୍ରୀଡ୍ ସ୍ତରଗୁଡିକ |

ନିଜେ ସ୍ତମ୍ଭଗୁଡିକ ଅତିକ୍ରମ କରି, ଆପଣ ଗ୍ରୀଡ୍ ସ୍ତର ସଂଖ୍ୟା ମଧ୍ୟ କଷ୍ଟମାଇଜ୍ କରିପାରିବେ | ଯଦି ତୁମେ କେବଳ ଚାରୋଟି ଗ୍ରୀଡ୍ ସ୍ତର ଚାହୁଁଛ, ତୁମେ ଏହାକୁ $grid-breakpointsଏବଂ $container-max-widthsଏହିପରି କିଛି ଅପଡେଟ୍ କରିବ:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

ସାସ୍ ଭେରିଏବଲ୍ କିମ୍ବା ମାନଚିତ୍ରରେ କ changes ଣସି ପରିବର୍ତ୍ତନ କରିବାବେଳେ, ତୁମର ପରିବର୍ତ୍ତନଗୁଡ଼ିକୁ ସଞ୍ଚୟ କରିବାକୁ ଏବଂ ପୁନ omp କମ୍ପାଇଲ୍ କରିବାକୁ ପଡିବ | ଏହା କରିବା ଦ୍ column ାରା ସ୍ତମ୍ଭ ପ୍ରସ୍ଥ, ଅଫସେଟ୍, ଏବଂ ଅର୍ଡର ପାଇଁ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ ଶ୍ରେଣୀର ଏକ ନୂତନ-ସେଟ୍ ନିର୍ଗତ ହେବ | କଷ୍ଟମ୍ ବ୍ରେକପଏଣ୍ଟ ବ୍ୟବହାର କରିବାକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ ଭିଜିବିଲିଟି ୟୁଟିଲିଟିଗୁଡିକ ମଧ୍ୟ ଅପଡେଟ୍ ହେବ | ଗ୍ରୀଡ୍ ମୂଲ୍ୟ ସେଟ୍ କରିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ px(ନୁହେଁ rem, emକିମ୍ବା %) |