ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆ

ಹನ್ನೆರಡು ಕಾಲಮ್ ಸಿಸ್ಟಮ್, ಆರು ಡೀಫಾಲ್ಟ್ ರೆಸ್ಪಾನ್ಸಿವ್ ಶ್ರೇಣಿಗಳು, ಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ಡಜನ್‌ಗಟ್ಟಲೆ ಪೂರ್ವನಿರ್ಧರಿತ ತರಗತಿಗಳಿಗೆ ಧನ್ಯವಾದಗಳು ಎಲ್ಲಾ ಆಕಾರಗಳು ಮತ್ತು ಗಾತ್ರಗಳ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಮ್ಮ ಪ್ರಬಲ ಮೊಬೈಲ್-ಮೊದಲ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಗ್ರಿಡ್ ಅನ್ನು ಬಳಸಿ.

ಈ ಪುಟದಲ್ಲಿ

ಉದಾಹರಣೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ವಿಷಯವನ್ನು ಲೇಔಟ್ ಮಾಡಲು ಮತ್ತು ಜೋಡಿಸಲು ಕಂಟೇನರ್‌ಗಳು, ಸಾಲುಗಳು ಮತ್ತು ಕಾಲಮ್‌ಗಳ ಸರಣಿಯನ್ನು ಬಳಸುತ್ತದೆ. ಇದು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ ಮತ್ತು ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಪಂದಿಸುತ್ತದೆ. ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಹೇಗೆ ಒಟ್ಟಿಗೆ ಬರುತ್ತದೆ ಎಂಬುದಕ್ಕೆ ಒಂದು ಉದಾಹರಣೆ ಮತ್ತು ಆಳವಾದ ವಿವರಣೆಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ.

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ಗೆ ಹೊಸದು ಅಥವಾ ಪರಿಚಯವಿಲ್ಲವೇ? ಹಿನ್ನೆಲೆ, ಪರಿಭಾಷೆ, ಮಾರ್ಗಸೂಚಿಗಳು ಮತ್ತು ಕೋಡ್ ತುಣುಕುಗಳಿಗಾಗಿ ಈ CSS ಟ್ರಿಕ್ಸ್ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಓದಿ .

ಅಂಕಣ

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.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಅದನ್ನು ಒಡೆಯುವುದು, ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಹೇಗೆ ಒಟ್ಟಿಗೆ ಬರುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

ನಮ್ಮ ಗ್ರಿಡ್ ಆರು ಸ್ಪಂದಿಸುವ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ . ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಆಧರಿಸಿವೆ min-width, ಅಂದರೆ ಅವುಗಳು ಆ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಮತ್ತು ಅದರ ಮೇಲಿನ ಎಲ್ಲದರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ (ಉದಾ, , , , , ಮತ್ತು ) .col-sm-4ಗೆ ಅನ್ವಯಿಸುತ್ತದೆ . ಇದರರ್ಥ ನೀವು ಪ್ರತಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಮೂಲಕ ಕಂಟೇನರ್ ಮತ್ತು ಕಾಲಮ್ ಗಾತ್ರ ಮತ್ತು ನಡವಳಿಕೆಯನ್ನು ನಿಯಂತ್ರಿಸಬಹುದು.smmdlgxlxxl
ಕಂಟೈನರ್‌ಗಳು ನಿಮ್ಮ ವಿಷಯವನ್ನು ಮಧ್ಯದಲ್ಲಿ ಮತ್ತು ಅಡ್ಡಲಾಗಿ ಪ್ಯಾಡ್ ಮಾಡಿ. ಎಲ್ಲಾ ವ್ಯೂಪೋರ್ಟ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಾದ್ಯಂತ .containerಸ್ಪಂದಿಸುವ ಪಿಕ್ಸೆಲ್ ಅಗಲಕ್ಕಾಗಿ ಅಥವಾ ದ್ರವ ಮತ್ತು ಪಿಕ್ಸೆಲ್ ಅಗಲಗಳ ಸಂಯೋಜನೆಗಾಗಿ ಸ್ಪಂದಿಸುವ ಕಂಟೇನರ್ (ಉದಾ, ) ಬಳಸಿ ..container-fluidwidth: 100%.container-md
ಸಾಲುಗಳು ಕಾಲಮ್‌ಗಳಿಗೆ ಹೊದಿಕೆಗಳಾಗಿವೆ. ಪ್ರತಿ ಕಾಲಮ್ paddingಅವುಗಳ ನಡುವಿನ ಅಂತರವನ್ನು ನಿಯಂತ್ರಿಸಲು ಸಮತಲವನ್ನು (ಗಟರ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ) ಹೊಂದಿದೆ. paddingನಿಮ್ಮ ಕಾಲಮ್‌ಗಳಲ್ಲಿನ ವಿಷಯವು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಎಡಭಾಗದಲ್ಲಿ ಜೋಡಿಸಲ್ಪಟ್ಟಿದೆ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಋಣಾತ್ಮಕ ಅಂಚುಗಳೊಂದಿಗೆ ಸಾಲುಗಳಲ್ಲಿ ಇದನ್ನು ಪ್ರತಿರೋಧಿಸಲಾಗುತ್ತದೆ . ನಿಮ್ಮ ವಿಷಯದ ಅಂತರವನ್ನು ಬದಲಾಯಿಸಲು ಕಾಲಮ್ ಗಾತ್ರ ಮತ್ತು ಗಟರ್ ತರಗತಿಗಳನ್ನು ಏಕರೂಪವಾಗಿ ಅನ್ವಯಿಸಲು ಸಾಲುಗಳು ಮಾರ್ಪಡಿಸುವ ತರಗತಿಗಳನ್ನು ಸಹ ಬೆಂಬಲಿಸುತ್ತವೆ .
ಕಾಲಮ್‌ಗಳು ನಂಬಲಾಗದಷ್ಟು ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ. ಪ್ರತಿ ಸಾಲಿನಲ್ಲಿ 12 ಟೆಂಪ್ಲೇಟ್ ಕಾಲಮ್‌ಗಳು ಲಭ್ಯವಿದ್ದು, ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಕಾಲಮ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸಿರುವ ಅಂಶಗಳ ವಿಭಿನ್ನ ಸಂಯೋಜನೆಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತದೆ. ಕಾಲಮ್ ತರಗತಿಗಳು ವ್ಯಾಪಿಸಬೇಕಾದ ಟೆಂಪ್ಲೇಟ್ ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಸೂಚಿಸುತ್ತವೆ (ಉದಾ, col-4ನಾಲ್ಕು ವ್ಯಾಪಿಸುತ್ತದೆ). widthಗಳನ್ನು ಶೇಕಡಾವಾರುಗಳಲ್ಲಿ ಹೊಂದಿಸಲಾಗಿದೆ ಆದ್ದರಿಂದ ನೀವು ಯಾವಾಗಲೂ ಒಂದೇ ರೀತಿಯ ಗಾತ್ರವನ್ನು ಹೊಂದಿರುತ್ತೀರಿ.
ಗಟರ್‌ಗಳು ಸಹ ಸ್ಪಂದಿಸುವ ಮತ್ತು ಗ್ರಾಹಕೀಯಗೊಳಿಸಬಲ್ಲವು. ಗಟರ್ ತರಗತಿಗಳು ಎಲ್ಲಾ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಲ್ಲಿ ಲಭ್ಯವಿವೆ , ನಮ್ಮ ಅಂಚು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಅಂತರದಂತೆಯೇ ಎಲ್ಲಾ ಗಾತ್ರಗಳೊಂದಿಗೆ . ತರಗತಿಗಳೊಂದಿಗೆ ಸಮತಲವಾದ ಗಟರ್‌ಗಳು, ಜೊತೆಗೆ .gx-*ಲಂಬವಾದ ಗಟರ್‌ಗಳು .gy-*ಅಥವಾ ತರಗತಿಗಳೊಂದಿಗೆ ಎಲ್ಲಾ ಗಟರ್‌ಗಳನ್ನು ಬದಲಾಯಿಸಿ .g-*. .g-0ಗಟಾರಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಸಹ ಲಭ್ಯವಿದೆ.
ಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗಳು, ನಕ್ಷೆಗಳು ಮತ್ತು ಮಿಕ್ಸಿನ್‌ಗಳು ಗ್ರಿಡ್‌ಗೆ ಶಕ್ತಿ ನೀಡುತ್ತವೆ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರಿಡ್ ತರಗತಿಗಳನ್ನು ಬಳಸಲು ನೀವು ಬಯಸದಿದ್ದರೆ, ಹೆಚ್ಚು ಲಾಕ್ಷಣಿಕ ಮಾರ್ಕ್‌ಅಪ್‌ನೊಂದಿಗೆ ನಿಮ್ಮದೇ ಆದದನ್ನು ರಚಿಸಲು ನಮ್ಮ ಗ್ರಿಡ್‌ನ ಮೂಲ ಸಾಸ್ ಅನ್ನು ನೀವು ಬಳಸಬಹುದು. ನಿಮಗಾಗಿ ಇನ್ನೂ ಹೆಚ್ಚಿನ ನಮ್ಯತೆಗಾಗಿ ಈ ಸಾಸ್ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸಲು ನಾವು ಕೆಲವು CSS ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸಹ ಸೇರಿಸುತ್ತೇವೆ.

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನ ಸುತ್ತಲಿನ ಮಿತಿಗಳು ಮತ್ತು ದೋಷಗಳ ಬಗ್ಗೆ ತಿಳಿದಿರಲಿ , ಕೆಲವು HTML ಅಂಶಗಳನ್ನು ಫ್ಲೆಕ್ಸ್ ಕಂಟೈನರ್‌ಗಳಾಗಿ ಬಳಸಲು ಅಸಮರ್ಥತೆ .

ಗ್ರಿಡ್ ಆಯ್ಕೆಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಎಲ್ಲಾ ಆರು ಡೀಫಾಲ್ಟ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಮತ್ತು ನೀವು ಕಸ್ಟಮೈಸ್ ಮಾಡುವ ಯಾವುದೇ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಲ್ಲಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ. ಆರು ಡೀಫಾಲ್ಟ್ ಗ್ರಿಡ್ ಶ್ರೇಣಿಗಳು ಈ ಕೆಳಗಿನಂತಿವೆ:

ಹೆಚ್ಚುವರಿ ಸಣ್ಣ (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. ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಪ್ರತಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗೆ ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಘಟಕ-ಕಡಿಮೆ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಪ್ರತಿ ಕಾಲಮ್ ಒಂದೇ ಅಗಲವಾಗಿರುತ್ತದೆ.

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>

ರೆಸ್ಪಾನ್ಸಿವ್ ತರಗತಿಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಗ್ರಿಡ್ ಸಂಕೀರ್ಣವಾದ ಸ್ಪಂದಿಸುವ ವಿನ್ಯಾಸಗಳನ್ನು ನಿರ್ಮಿಸಲು ಪೂರ್ವನಿರ್ಧರಿತ ತರಗತಿಗಳ ಆರು ಹಂತಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ಹೆಚ್ಚುವರಿ ಸಣ್ಣ, ಸಣ್ಣ, ಮಧ್ಯಮ, ದೊಡ್ಡ ಅಥವಾ ಹೆಚ್ಚುವರಿ ದೊಡ್ಡ ಸಾಧನಗಳಲ್ಲಿ ನಿಮ್ಮ ಕಾಲಮ್‌ಗಳ ಗಾತ್ರವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ.

ಎಲ್ಲಾ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು

ಗ್ರಿಡ್‌ಗಳಿಗಾಗಿ ಚಿಕ್ಕದಾದ ಸಾಧನದಿಂದ ದೊಡ್ಡದಕ್ಕೆ ಒಂದೇ ಆಗಿರುತ್ತದೆ, .colಮತ್ತು .col-*ತರಗತಿಗಳನ್ನು ಬಳಸಿ. ನಿಮಗೆ ನಿರ್ದಿಷ್ಟ ಗಾತ್ರದ ಕಾಲಮ್ ಅಗತ್ಯವಿರುವಾಗ ಸಂಖ್ಯೆಯ ವರ್ಗವನ್ನು ಸೂಚಿಸಿ; ಇಲ್ಲದಿದ್ದರೆ, ಅಂಟಿಕೊಳ್ಳಲು ಹಿಂಜರಿಯಬೇಡಿ .col.

ಕಲಂ

ಕೊಲ್-8

ಕೊಲ್-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-*, ನೀವು ಮೂಲಭೂತ ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಬಹುದು ಅದು ಸ್ಟ್ಯಾಕ್ ಆಗಿ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಮತ್ತು ಸಣ್ಣ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ( 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ಕಾಲಮ್‌ಗಳಿಗೆ ಅವುಗಳ ನೈಸರ್ಗಿಕ ಅಗಲವನ್ನು ನೀಡಬಹುದು.

ಮೂಲಭೂತ ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳನ್ನು ತ್ವರಿತವಾಗಿ ರಚಿಸಲು ಅಥವಾ ನಿಮ್ಮ ಕಾರ್ಡ್ ಲೇಔಟ್‌ಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು ಈ ಸಾಲು ಕಾಲಮ್‌ಗಳ ತರಗತಿಗಳನ್ನು ಬಳಸಿ.

ಅಂಕಣ

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ಮತ್ತು .col-sm-*ಕಾಲಮ್‌ಗಳ ಸೆಟ್ ಅನ್ನು ಸೇರಿಸಿ. .col-sm-*ನೆಸ್ಟೆಡ್ ಸಾಲುಗಳು 12 ಅಥವಾ ಅದಕ್ಕಿಂತ ಕಡಿಮೆ ಇರುವ ಕಾಲಮ್‌ಗಳ ಗುಂಪನ್ನು ಒಳಗೊಂಡಿರಬೇಕು (ನೀವು ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ 12 ಕಾಲಮ್‌ಗಳನ್ನು ಬಳಸುವ ಅಗತ್ಯವಿಲ್ಲ).

ಹಂತ 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);
  }
}

ಮುಖ್ಯ ವಿಷಯ

ದ್ವಿತೀಯಕ ವಿಷಯ

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>

ಗ್ರಿಡ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲಾಗುತ್ತಿದೆ

ನಮ್ಮ ಅಂತರ್ನಿರ್ಮಿತ ಗ್ರಿಡ್ ಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ನಕ್ಷೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು, ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರಿಡ್ ತರಗತಿಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಸಾಧ್ಯವಿದೆ. ಶ್ರೇಣಿಗಳ ಸಂಖ್ಯೆ, ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯ ಆಯಾಮಗಳು ಮತ್ತು ಕಂಟೇನರ್ ಅಗಲಗಳನ್ನು ಬದಲಾಯಿಸಿ-ನಂತರ ಮರುಕಂಪೈಲ್ ಮಾಡಿ.

ಕಾಲಮ್‌ಗಳು ಮತ್ತು ಗಟಾರಗಳು

ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗಳ ಮೂಲಕ ಮಾರ್ಪಡಿಸಬಹುದು. ಕಾಲಮ್ ಗಟರ್‌ಗಳಿಗೆ ಅಗಲವನ್ನು ಹೊಂದಿಸುವಾಗ $grid-columnsಪ್ರತಿಯೊಂದು ಕಾಲಮ್‌ನ ಅಗಲಗಳನ್ನು (ಶೇಕಡಾದಲ್ಲಿ) ಉತ್ಪಾದಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ . ಗರಿಷ್ಠ ಸಂಖ್ಯೆಯ ಕಾಲಮ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ, ಈ ಮಿತಿಯನ್ನು ಮೀರಿದ ಯಾವುದೇ ಸಂಖ್ಯೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ.$grid-gutter-width$grid-row-columns.row-cols-*

$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
);

Sass ವೇರಿಯೇಬಲ್‌ಗಳು ಅಥವಾ ನಕ್ಷೆಗಳಿಗೆ ಯಾವುದೇ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡುವಾಗ, ನಿಮ್ಮ ಬದಲಾವಣೆಗಳನ್ನು ನೀವು ಉಳಿಸಬೇಕು ಮತ್ತು ಮರುಕಂಪೈಲ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಹಾಗೆ ಮಾಡುವುದರಿಂದ ಕಾಲಮ್ ಅಗಲಗಳು, ಆಫ್‌ಸೆಟ್‌ಗಳು ಮತ್ತು ಆದೇಶಕ್ಕಾಗಿ ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರಿಡ್ ತರಗತಿಗಳ ಹೊಚ್ಚಹೊಸ ಸೆಟ್ ಅನ್ನು ಔಟ್‌ಪುಟ್ ಮಾಡುತ್ತದೆ. ಕಸ್ಟಮ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಬಳಸಲು ರೆಸ್ಪಾನ್ಸಿವ್ ಗೋಚರತೆಯ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಸಹ ನವೀಕರಿಸಲಾಗುತ್ತದೆ. ಗ್ರಿಡ್ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ px(ಅಲ್ಲ rem, emಅಥವಾ %).