Source

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

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

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

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

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

ಮೂರು ಕಾಲಮ್‌ಗಳಲ್ಲಿ ಒಂದು

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

ಮೇಲಿನ ಉದಾಹರಣೆಯು ನಮ್ಮ ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರಿಡ್ ತರಗತಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸಣ್ಣ, ಮಧ್ಯಮ, ದೊಡ್ಡ ಮತ್ತು ಹೆಚ್ಚುವರಿ ದೊಡ್ಡ ಸಾಧನಗಳಲ್ಲಿ ಮೂರು ಸಮಾನ ಅಗಲದ ಕಾಲಮ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ. ಆ ಕಾಲಮ್‌ಗಳು ಪೋಷಕರೊಂದಿಗೆ ಪುಟದಲ್ಲಿ ಕೇಂದ್ರೀಕೃತವಾಗಿವೆ .container.

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

ಕಂಟೈನರ್‌ಗಳು ನಿಮ್ಮ ಸೈಟ್‌ನ ವಿಷಯಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ಮತ್ತು ಅಡ್ಡಲಾಗಿ ಪ್ಯಾಡ್ ಮಾಡಲು ಸಾಧನವನ್ನು ಒದಗಿಸುತ್ತವೆ. .containerಸ್ಪಂದಿಸುವ ಪಿಕ್ಸೆಲ್ ಅಗಲಕ್ಕಾಗಿ ಅಥವಾ .container-fluidಎಲ್ಲಾ width: 100%ವ್ಯೂಪೋರ್ಟ್ ಮತ್ತು ಸಾಧನದ ಗಾತ್ರಗಳಾದ್ಯಂತ ಬಳಸಿ .
ಸಾಲುಗಳು ಕಾಲಮ್‌ಗಳಿಗೆ ಹೊದಿಕೆಗಳಾಗಿವೆ. ಪ್ರತಿ ಕಾಲಮ್ paddingಅವುಗಳ ನಡುವಿನ ಅಂತರವನ್ನು ನಿಯಂತ್ರಿಸಲು ಸಮತಲವನ್ನು (ಗಟರ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ) ಹೊಂದಿದೆ. ಇದನ್ನು paddingನಂತರ ಋಣಾತ್ಮಕ ಅಂಚುಗಳೊಂದಿಗೆ ಸಾಲುಗಳ ಮೇಲೆ ಪ್ರತಿರೋಧಿಸಲಾಗುತ್ತದೆ. ಈ ರೀತಿಯಾಗಿ, ನಿಮ್ಮ ಕಾಲಮ್‌ಗಳಲ್ಲಿನ ಎಲ್ಲಾ ವಿಷಯವನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಎಡಭಾಗದಲ್ಲಿ ಜೋಡಿಸಲಾಗಿದೆ.
ಗ್ರಿಡ್ ಲೇಔಟ್‌ನಲ್ಲಿ, ವಿಷಯವನ್ನು ಕಾಲಮ್‌ಗಳಲ್ಲಿ ಇರಿಸಬೇಕು ಮತ್ತು ಕಾಲಮ್‌ಗಳು ಮಾತ್ರ ಸಾಲುಗಳ ತಕ್ಷಣದ ಮಕ್ಕಳಾಗಿರಬಹುದು.
ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ಗೆ ಧನ್ಯವಾದಗಳು, ನಿರ್ದಿಷ್ಟಪಡಿಸದ ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳು widthಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಮಾನ ಅಗಲದ ಕಾಲಮ್‌ಗಳಾಗಿ ಲೇಔಟ್ ಮಾಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನಾಲ್ಕು ನಿದರ್ಶನಗಳು .col-smಸಣ್ಣ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನಿಂದ ಮತ್ತು ಮೇಲಕ್ಕೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ 25% ಅಗಲವಾಗಿರುತ್ತದೆ. ಹೆಚ್ಚಿನ ಉದಾಹರಣೆಗಳಿಗಾಗಿ ಸ್ವಯಂ-ಲೇಔಟ್ ಕಾಲಮ್‌ಗಳ ವಿಭಾಗವನ್ನು ನೋಡಿ .
ಕಾಲಮ್ ತರಗತಿಗಳು ಪ್ರತಿ ಸಾಲಿಗೆ ಸಂಭವನೀಯ 12 ರಲ್ಲಿ ನೀವು ಬಳಸಲು ಬಯಸುವ ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಸೂಚಿಸುತ್ತವೆ. ಆದ್ದರಿಂದ, ನೀವು ಅಡ್ಡಲಾಗಿ ಮೂರು ಸಮಾನ ಅಗಲದ ಕಾಲಮ್‌ಗಳನ್ನು ಬಯಸಿದರೆ, ನೀವು ಬಳಸಬಹುದು .col-4.
ಅಂಕಣಗಳನ್ನು widthಶೇಕಡಾವಾರುಗಳಲ್ಲಿ ಹೊಂದಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ ಅವು ಯಾವಾಗಲೂ ದ್ರವವಾಗಿರುತ್ತವೆ ಮತ್ತು ಅವುಗಳ ಮೂಲ ಅಂಶಕ್ಕೆ ಹೋಲಿಸಿದರೆ ಗಾತ್ರದಲ್ಲಿರುತ್ತವೆ.
ಪ್ರತ್ಯೇಕ ಕಾಲಮ್‌ಗಳ ನಡುವೆ ಗಟರ್‌ಗಳನ್ನು ರಚಿಸಲು ಕಾಲಮ್‌ಗಳು ಸಮತಲವನ್ನು ಹೊಂದಿರುತ್ತವೆ padding, ಆದಾಗ್ಯೂ, ನೀವು marginಸಾಲುಗಳಿಂದ ಮತ್ತು paddingಕಾಲಮ್‌ಗಳಿಂದ ನೊಂದಿಗೆ .no-guttersತೆಗೆದುಹಾಕಬಹುದು .row.
ಗ್ರಿಡ್ ಅನ್ನು ಸ್ಪಂದಿಸುವಂತೆ ಮಾಡಲು, ಐದು ಗ್ರಿಡ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಿವೆ, ಪ್ರತಿ ರೆಸ್ಪಾನ್ಸಿವ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗೆ ಒಂದು : ಎಲ್ಲಾ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು (ಹೆಚ್ಚುವರಿ ಸಣ್ಣ), ಸಣ್ಣ, ಮಧ್ಯಮ, ದೊಡ್ಡ ಮತ್ತು ಹೆಚ್ಚುವರಿ ದೊಡ್ಡವು.
ಗ್ರಿಡ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಕನಿಷ್ಟ ಅಗಲದ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಆಧರಿಸಿವೆ, ಅಂದರೆ ಅವುಗಳು ಆ ಒಂದು ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಮತ್ತು ಅದರ ಮೇಲಿನ ಎಲ್ಲದಕ್ಕೂ ಅನ್ವಯಿಸುತ್ತವೆ (ಉದಾ, .col-sm-4ಸಣ್ಣ, ಮಧ್ಯಮ, ದೊಡ್ಡ ಮತ್ತು ಹೆಚ್ಚುವರಿ ದೊಡ್ಡ ಸಾಧನಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ, ಆದರೆ ಮೊದಲ xsಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಅಲ್ಲ).
ಹೆಚ್ಚು ಲಾಕ್ಷಣಿಕ ಮಾರ್ಕ್‌ಅಪ್‌ಗಾಗಿ ನೀವು ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರಿಡ್ ತರಗತಿಗಳನ್ನು (ಉದಾಹರಣೆಗೆ .col-4) ಅಥವಾ ಸಾಸ್ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.

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

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

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಹೆಚ್ಚಿನ ಗಾತ್ರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ems ಅಥವಾ s ಅನ್ನು ಬಳಸುತ್ತದೆ, s ಅನ್ನು ಗ್ರಿಡ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಮತ್ತು ಕಂಟೇನರ್ ಅಗಲಗಳಿಗಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ. ಏಕೆಂದರೆ ವ್ಯೂಪೋರ್ಟ್ ಅಗಲವು ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿದೆ ಮತ್ತು ಫಾಂಟ್ ಗಾತ್ರದೊಂದಿಗೆ ಬದಲಾಗುವುದಿಲ್ಲ .rempx

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ನ ಅಂಶಗಳು ಹ್ಯಾಂಡಿ ಟೇಬಲ್‌ನೊಂದಿಗೆ ಬಹು ಸಾಧನಗಳಲ್ಲಿ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ನೋಡಿ.

	ಹೆಚ್ಚುವರಿ ಸಣ್ಣ <576px	ಚಿಕ್ಕದು ≥576px	ಮಧ್ಯಮ ≥768px	ದೊಡ್ಡದು ≥992px	ಹೆಚ್ಚು ದೊಡ್ಡದು ≥1200px
ಗರಿಷ್ಠ ಕಂಟೇನರ್ ಅಗಲ	ಯಾವುದೂ ಇಲ್ಲ (ಸ್ವಯಂ)	540px	720px	960px	1140px
ವರ್ಗ ಪೂರ್ವಪ್ರತ್ಯಯ	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ಕಾಲಮ್‌ಗಳು	12
ಗಟರ್ ಅಗಲ	30px (ಕಾಲಮ್‌ನ ಪ್ರತಿ ಬದಿಯಲ್ಲಿ 15px)
ನೆಸ್ಟೆಬಲ್	ಹೌದು
ಕಾಲಮ್ ಆದೇಶ	ಹೌದು

ಸ್ವಯಂ ಲೇಔಟ್ ಕಾಲಮ್‌ಗಳು

ನಂತಹ ಸ್ಪಷ್ಟ ಸಂಖ್ಯೆಯ ವರ್ಗವಿಲ್ಲದೆ ಸುಲಭವಾದ ಕಾಲಮ್ ಗಾತ್ರಕ್ಕಾಗಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್-ನಿರ್ದಿಷ್ಟ ಕಾಲಮ್ ತರಗತಿಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಿ .col-sm-6.

ಸಮಾನ ಅಗಲ

xsಉದಾಹರಣೆಗೆ, ಪ್ರತಿ ಸಾಧನ ಮತ್ತು ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ಗೆ ಅನ್ವಯಿಸುವ ಎರಡು ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳು ಇಲ್ಲಿವೆ xl. ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಪ್ರತಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗೆ ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಘಟಕ-ಕಡಿಮೆ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಪ್ರತಿ ಕಾಲಮ್ ಒಂದೇ ಅಗಲವಾಗಿರುತ್ತದೆ.

2 ರಲ್ಲಿ 1

2 ರಲ್ಲಿ 2

3 ರಲ್ಲಿ 1

3 ರಲ್ಲಿ 2

3 ರಲ್ಲಿ 3

<div class="container">
  <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>

ಸಮಾನ-ಅಗಲದ ಕಾಲಮ್‌ಗಳನ್ನು ಬಹು ಸಾಲುಗಳಾಗಿ ವಿಭಜಿಸಬಹುದು, ಆದರೆ ಸಫಾರಿ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ದೋಷವುflex-basis ಸ್ಪಷ್ಟ ಅಥವಾ ಇಲ್ಲದೆ ಕೆಲಸ ಮಾಡುವುದನ್ನು ತಡೆಯುತ್ತದೆ border. ಹಳೆಯ ಬ್ರೌಸರ್ ಆವೃತ್ತಿಗಳಿಗೆ ಪರಿಹಾರೋಪಾಯಗಳಿವೆ, ಆದರೆ ನೀವು ಅಪ್-ಟು-ಡೇಟ್ ಆಗಿದ್ದರೆ ಅವುಗಳು ಅಗತ್ಯವಿರುವುದಿಲ್ಲ.

ಅಂಕಣ

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ಒಂದು ಕಾಲಮ್ ಅಗಲವನ್ನು ಹೊಂದಿಸಲಾಗುತ್ತಿದೆ

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳಿಗೆ ಸ್ವಯಂ-ಲೇಔಟ್ ಎಂದರೆ ನೀವು ಒಂದು ಕಾಲಮ್‌ನ ಅಗಲವನ್ನು ಹೊಂದಿಸಬಹುದು ಮತ್ತು ಅದರ ಸುತ್ತಲೂ ಒಡಹುಟ್ಟಿದ ಕಾಲಮ್‌ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮರುಗಾತ್ರಗೊಳಿಸಬಹುದು. ನೀವು ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರಿಡ್ ತರಗತಿಗಳನ್ನು (ಕೆಳಗೆ ತೋರಿಸಿರುವಂತೆ), ಗ್ರಿಡ್ ಮಿಕ್ಸಿನ್‌ಗಳು ಅಥವಾ ಇನ್‌ಲೈನ್ ಅಗಲಗಳನ್ನು ಬಳಸಬಹುದು. ಮಧ್ಯದ ಕಾಲಮ್‌ನ ಅಗಲವನ್ನು ಲೆಕ್ಕಿಸದೆ ಇತರ ಕಾಲಮ್‌ಗಳು ಮರುಗಾತ್ರಗೊಳಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.

3 ರಲ್ಲಿ 1

3 ರಲ್ಲಿ 2 (ಅಗಲ)

3 ರಲ್ಲಿ 3

3 ರಲ್ಲಿ 1

3 ರಲ್ಲಿ 2 (ಅಗಲ)

3 ರಲ್ಲಿ 3

<div class="container">
  <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

<div class="container">
  <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>

ಸಮಾನ-ಅಗಲ ಬಹು-ಸಾಲು

.w-100ಹೊಸ ಸಾಲಿಗೆ ಕಾಲಮ್‌ಗಳನ್ನು ಮುರಿಯಲು ನೀವು ಬಯಸುವ ಸ್ಥಳದಲ್ಲಿ ಸೇರಿಸುವ ಮೂಲಕ ಬಹು ಸಾಲುಗಳನ್ನು ವ್ಯಾಪಿಸಿರುವ ಸಮಾನ ಅಗಲದ ಕಾಲಮ್‌ಗಳನ್ನು ರಚಿಸಿ . .w-100ಕೆಲವು ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸ್‌ಪ್ಲೇ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಮಿಶ್ರಣ ಮಾಡುವ ಮೂಲಕ ವಿರಾಮಗಳನ್ನು ಸ್ಪಂದಿಸುವಂತೆ ಮಾಡಿ .

ಕಲಂ

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

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

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

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

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

ಕಲಂ

ಕೊಲ್-8

ಕೊಲ್-4

<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>

ಸಮತಲಕ್ಕೆ ಜೋಡಿಸಲಾಗಿದೆ

ತರಗತಿಗಳ ಒಂದು ಸೆಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು .col-sm-*, ನೀವು ಮೂಲಭೂತ ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಬಹುದು ಅದು ಸ್ಟ್ಯಾಕ್ ಆಗಿ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಮತ್ತು ಸಣ್ಣ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ( sm) ನಲ್ಲಿ ಅಡ್ಡಲಾಗಿ ಆಗುತ್ತದೆ.

col-sm-8

col-sm-4

col-sm

<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>

ಮಿಶ್ರಣ ಮತ್ತು ಹೊಂದಾಣಿಕೆ

ನಿಮ್ಮ ಕಾಲಮ್‌ಗಳನ್ನು ಕೆಲವು ಗ್ರಿಡ್ ಶ್ರೇಣಿಗಳಲ್ಲಿ ಸರಳವಾಗಿ ಜೋಡಿಸಲು ಬಯಸುವುದಿಲ್ಲವೇ? ಅಗತ್ಯವಿರುವಂತೆ ಪ್ರತಿ ಹಂತಕ್ಕೂ ವಿಭಿನ್ನ ವರ್ಗಗಳ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸಿ. ಅದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂಬುದರ ಉತ್ತಮ ಕಲ್ಪನೆಗಾಗಿ ಕೆಳಗಿನ ಉದಾಹರಣೆಯನ್ನು ನೋಡಿ.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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 class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

ಮೂರು ಕಾಲಮ್‌ಗಳಲ್ಲಿ ಒಂದು

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

ಸಮತಲ ಜೋಡಣೆ

ಎರಡು ಕಾಲಮ್‌ಗಳಲ್ಲಿ ಒಂದು

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ಗಟಾರಗಳಿಲ್ಲ

ನಮ್ಮ ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರಿಡ್ ತರಗತಿಗಳಲ್ಲಿ ಕಾಲಮ್‌ಗಳ ನಡುವಿನ ಗಟರ್‌ಗಳನ್ನು ಇದರೊಂದಿಗೆ ತೆಗೆದುಹಾಕಬಹುದು .no-gutters. ಇದು ಎಲ್ಲಾ ತಕ್ಷಣದ ಮಕ್ಕಳ ಕಾಲಮ್‌ಗಳಿಂದ ಋಣಾತ್ಮಕ marginಗಳನ್ನು .rowಮತ್ತು ಅಡ್ಡಲಾಗಿ ತೆಗೆದುಹಾಕುತ್ತದೆ.padding

ಈ ಶೈಲಿಗಳನ್ನು ರಚಿಸಲು ಮೂಲ ಕೋಡ್ ಇಲ್ಲಿದೆ. ಕಾಲಮ್ ಅತಿಕ್ರಮಣಗಳನ್ನು ಮೊದಲ ಮಕ್ಕಳ ಕಾಲಮ್‌ಗಳಿಗೆ ಮಾತ್ರ ಸ್ಕೋಪ್ ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಗುಣಲಕ್ಷಣ ಆಯ್ಕೆಯ ಮೂಲಕ ಗುರಿಪಡಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ . ಇದು ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ರಚಿಸಿದಾಗ, ಕಾಲಮ್ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಅಂತರದ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಇನ್ನೂ ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು .

ಎಡ್ಜ್-ಟು-ಎಡ್ಜ್ ವಿನ್ಯಾಸ ಬೇಕೇ? ಪೋಷಕರನ್ನು ಬಿಡಿ .containerಅಥವಾ .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

ಪ್ರಾಯೋಗಿಕವಾಗಿ, ಅದು ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ. ಎಲ್ಲಾ ಇತರ ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರಿಡ್ ತರಗತಿಗಳೊಂದಿಗೆ (ಕಾಲಮ್ ಅಗಲಗಳು, ಸ್ಪಂದಿಸುವ ಶ್ರೇಣಿಗಳು, ಮರುಕ್ರಮಗೊಳಿಸುವಿಕೆಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳನ್ನು ಒಳಗೊಂಡಂತೆ) ನೀವು ಇದನ್ನು ಬಳಸುವುದನ್ನು ಮುಂದುವರಿಸಬಹುದು ಎಂಬುದನ್ನು ಗಮನಿಸಿ.

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

ಕಾಲಮ್ ಸುತ್ತುವುದು

ಒಂದೇ ಸಾಲಿನಲ್ಲಿ 12 ಕ್ಕೂ ಹೆಚ್ಚು ಕಾಲಮ್‌ಗಳನ್ನು ಇರಿಸಿದರೆ, ಹೆಚ್ಚುವರಿ ಕಾಲಮ್‌ಗಳ ಪ್ರತಿಯೊಂದು ಗುಂಪು, ಒಂದು ಘಟಕದಂತೆ, ಹೊಸ ಸಾಲಿನ ಮೇಲೆ ಸುತ್ತುತ್ತದೆ.

.col-9

.col-4
9 + 4 = 13 > 12 ರಿಂದ, ಈ 4-ಕಾಲಮ್-ಅಗಲದ ವಿಭಾಗವು ಒಂದು ಹೊಸ ಸಾಲಿನ ಮೇಲೆ ಒಂದು ಪಕ್ಕದ ಘಟಕವಾಗಿ ಸುತ್ತುತ್ತದೆ.

.col-6
ನಂತರದ ಕಾಲಮ್‌ಗಳು ಹೊಸ ಸಾಲಿನಲ್ಲಿ ಮುಂದುವರಿಯುತ್ತವೆ.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

ಕಾಲಮ್ ಒಡೆಯುತ್ತದೆ

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನಲ್ಲಿ ಹೊಸ ಸಾಲಿಗೆ ಕಾಲಮ್‌ಗಳನ್ನು ಮುರಿಯಲು ಸಣ್ಣ ಹ್ಯಾಕ್ ಅಗತ್ಯವಿದೆ: width: 100%ನಿಮ್ಮ ಕಾಲಮ್‌ಗಳನ್ನು ಹೊಸ ಸಾಲಿಗೆ ಕಟ್ಟಲು ನೀವು ಎಲ್ಲಿ ಬೇಕಾದರೂ ಒಂದು ಅಂಶವನ್ನು ಸೇರಿಸಿ. ಸಾಮಾನ್ಯವಾಗಿ ಇದನ್ನು ಬಹು .rows ಗಳೊಂದಿಗೆ ಸಾಧಿಸಲಾಗುತ್ತದೆ, ಆದರೆ ಪ್ರತಿಯೊಂದು ಅನುಷ್ಠಾನ ವಿಧಾನವೂ ಇದಕ್ಕೆ ಕಾರಣವಾಗುವುದಿಲ್ಲ.

.col-6 .col-sm-3

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

ನಮ್ಮ ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸ್‌ಪ್ಲೇ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ನಿರ್ದಿಷ್ಟ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಲ್ಲಿ ನೀವು ಈ ವಿರಾಮವನ್ನು ಅನ್ವಯಿಸಬಹುದು .

.col-6 .col-sm-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

ಮರುಕ್ರಮಗೊಳಿಸಲಾಗುತ್ತಿದೆ

ಆರ್ಡರ್ ತರಗತಿಗಳು

ನಿಮ್ಮ ವಿಷಯದ ದೃಶ್ಯ ಕ್ರಮವನ್ನು.order- ನಿಯಂತ್ರಿಸಲು ತರಗತಿಗಳನ್ನು ಬಳಸಿ . ಈ ತರಗತಿಗಳು ಸ್ಪಂದಿಸುತ್ತವೆ, ಆದ್ದರಿಂದ ನೀವು ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಮೂಲಕ ಹೊಂದಿಸಬಹುದು (ಉದಾ, ). ಎಲ್ಲಾ ಐದು ಗ್ರಿಡ್ ಶ್ರೇಣಿಗಳ ಮೂಲಕ ಬೆಂಬಲವನ್ನು ಒಳಗೊಂಡಿದೆ .order.order-1.order-md-2112

ಮೊದಲ, ಆದರೆ ಕ್ರಮಬದ್ಧವಾಗಿಲ್ಲ

ಎರಡನೆಯದು, ಆದರೆ ಕೊನೆಯದು

ಮೂರನೆಯದು, ಆದರೆ ಮೊದಲು

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

ಅನುಕ್ರಮವಾಗಿ ಮತ್ತು ( ) ಅನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ ಅಂಶವನ್ನು ಬದಲಾಯಿಸುವ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ .order-firstಮತ್ತು ತರಗತಿಗಳು ಸಹ ಇವೆ . ಈ ವರ್ಗಗಳನ್ನು ಅಗತ್ಯವಿರುವಂತೆ ಸಂಖ್ಯೆಯ ವರ್ಗಗಳೊಂದಿಗೆ ಬೆರೆಸಬಹುದು ..order-lastorderorder: -1order: 13order: $columns + 1.order-*

ಮೊದಲ, ಆದರೆ ಕೊನೆಯ

ಎರಡನೆಯದು, ಆದರೆ ಕ್ರಮಬದ್ಧವಾಗಿಲ್ಲ

ಮೂರನೆಯದು, ಆದರೆ ಮೊದಲು

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

ಕಾಲಮ್‌ಗಳನ್ನು ಸರಿದೂಗಿಸುವುದು

ನೀವು ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳನ್ನು ಎರಡು ರೀತಿಯಲ್ಲಿ ಸರಿದೂಗಿಸಬಹುದು: ನಮ್ಮ ರೆಸ್ಪಾನ್ಸಿವ್ .offset-ಗ್ರಿಡ್ ತರಗತಿಗಳು ಮತ್ತು ನಮ್ಮ ಮಾರ್ಜಿನ್ ಉಪಯುಕ್ತತೆಗಳು . ಗ್ರಿಡ್ ತರಗತಿಗಳು ಕಾಲಮ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ಗಾತ್ರದಲ್ಲಿರುತ್ತವೆ ಆದರೆ ಆಫ್‌ಸೆಟ್‌ನ ಅಗಲವು ವೇರಿಯಬಲ್ ಆಗಿರುವ ತ್ವರಿತ ಲೇಔಟ್‌ಗಳಿಗೆ ಅಂಚುಗಳು ಹೆಚ್ಚು ಉಪಯುಕ್ತವಾಗಿವೆ.

ಆಫ್‌ಸೆಟ್ ತರಗತಿಗಳು

.offset-md-*ತರಗತಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಕಾಲಮ್‌ಗಳನ್ನು ಬಲಕ್ಕೆ ಸರಿಸಿ . ಈ ವರ್ಗಗಳು ಕಾಲಮ್‌ನ ಎಡ ಅಂಚನ್ನು *ಕಾಲಮ್‌ಗಳಿಂದ ಹೆಚ್ಚಿಸುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ನಾಲ್ಕು ಕಾಲಮ್‌ಗಳ ಮೇಲೆ .offset-md-4ಚಲಿಸುತ್ತದೆ ..col-md-4

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

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

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

ಮಾರ್ಜಿನ್ ಉಪಯುಕ್ತತೆಗಳು

v4 ರಲ್ಲಿ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ಗೆ ಸರಿಸುವುದರೊಂದಿಗೆ, .mr-autoಒಡಹುಟ್ಟಿದವರ ಕಾಲಮ್‌ಗಳನ್ನು ಪರಸ್ಪರ ದೂರವಿರಿಸಲು ನೀವು ಮಾರ್ಜಿನ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಬಹುದು.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

ಗೂಡುಕಟ್ಟುವ

ಡೀಫಾಲ್ಟ್ ಗ್ರಿಡ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ವಿಷಯವನ್ನು ನೆಸ್ಟ್ ಮಾಡಲು, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕಾಲಮ್‌ನಲ್ಲಿ ಹೊಸ .rowಮತ್ತು .col-sm-*ಕಾಲಮ್‌ಗಳ ಸೆಟ್ ಅನ್ನು ಸೇರಿಸಿ. .col-sm-*ನೆಸ್ಟೆಡ್ ಸಾಲುಗಳು 12 ಅಥವಾ ಅದಕ್ಕಿಂತ ಕಡಿಮೆ ಇರುವ ಕಾಲಮ್‌ಗಳ ಗುಂಪನ್ನು ಒಳಗೊಂಡಿರಬೇಕು (ನೀವು ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ 12 ಕಾಲಮ್‌ಗಳನ್ನು ಬಳಸುವ ಅಗತ್ಯವಿಲ್ಲ).

ಹಂತ 1: .col-sm-9

ಹಂತ 2: .col-8 .col-sm-6

ಹಂತ 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .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>

ಸಾಸ್ ಮಿಕ್ಸಿನ್ಸ್

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

ಅಸ್ಥಿರ

ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ನಕ್ಷೆಗಳು ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆ, ಗಟರ್ ಅಗಲ ಮತ್ತು ಫ್ಲೋಟಿಂಗ್ ಕಾಲಮ್‌ಗಳನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆ ಬಿಂದುವನ್ನು ನಿರ್ಧರಿಸುತ್ತವೆ. ಮೇಲೆ ದಾಖಲಿಸಲಾದ ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರಿಡ್ ವರ್ಗಗಳನ್ನು ಮತ್ತು ಕೆಳಗೆ ಪಟ್ಟಿ ಮಾಡಲಾದ ಕಸ್ಟಮ್ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ರಚಿಸಲು ನಾವು ಇವುಗಳನ್ನು ಬಳಸುತ್ತೇವೆ.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

ಮಿಕ್ಸಿನ್ಸ್

ಪ್ರತ್ಯೇಕ ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳಿಗೆ ಲಾಕ್ಷಣಿಕ 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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

ಉದಾಹರಣೆ ಬಳಕೆ

ನೀವು ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ನಿಮ್ಮ ಸ್ವಂತ ಕಸ್ಟಮ್ ಮೌಲ್ಯಗಳಿಗೆ ಮಾರ್ಪಡಿಸಬಹುದು ಅಥವಾ ಅವುಗಳ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ನಡುವೆ ಅಂತರವಿರುವ ಎರಡು-ಕಾಲಮ್ ವಿನ್ಯಾಸವನ್ನು ರಚಿಸಲು ಡೀಫಾಲ್ಟ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಬಳಸುವ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ.

.example-container {
  width: 800px;
  @include make-container();
}

.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);
  }
}

ಮುಖ್ಯ ವಿಷಯ

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

<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-columns: 12 !default;
$grid-gutter-width: 30px !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ಅಥವಾ %).