ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ಉದಾಹರಣೆಗಳು
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಂನಲ್ಲಿ ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಪರಿಚಿತವಾಗಲು ಮೂಲ ಗ್ರಿಡ್ ವಿನ್ಯಾಸಗಳು.
ಈ ಉದಾಹರಣೆಗಳಲ್ಲಿ .themed-grid-colಕೆಲವು ಥೀಮಿಂಗ್ ಅನ್ನು ಸೇರಿಸಲು ಕಾಲಮ್‌ಗಳಿಗೆ ವರ್ಗವನ್ನು ಸೇರಿಸಲಾಗುತ್ತದೆ. ಇದು ಡೀಫಾಲ್ಟ್ ಆಗಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ವರ್ಗವಲ್ಲ.
ಐದು ಗ್ರಿಡ್ ಶ್ರೇಣಿಗಳು
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ಗೆ ಐದು ಹಂತಗಳಿವೆ, ನಾವು ಬೆಂಬಲಿಸುವ ಪ್ರತಿಯೊಂದು ಸಾಧನಗಳಿಗೆ ಒಂದು. ಪ್ರತಿ ಶ್ರೇಣಿಯು ಕನಿಷ್ಟ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರದಲ್ಲಿ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಮತ್ತು ಅತಿಕ್ರಮಿಸದ ಹೊರತು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ದೊಡ್ಡ ಸಾಧನಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ.
ಮೂರು ಸಮಾನ ಕಾಲಮ್‌ಗಳು
ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳಿಂದ ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ದೊಡ್ಡ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳಿಗೆ ಸ್ಕೇಲಿಂಗ್ ಮಾಡುವ ಮೂರು ಸಮಾನ-ಅಗಲ ಕಾಲಮ್‌ಗಳನ್ನು ಪಡೆಯಿರಿ . ಮೊಬೈಲ್ ಸಾಧನಗಳು, ಟ್ಯಾಬ್ಲೆಟ್‌ಗಳು ಮತ್ತು ಕೆಳಗಿನವುಗಳಲ್ಲಿ, ಕಾಲಮ್‌ಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸ್ಟ್ಯಾಕ್ ಆಗುತ್ತವೆ.
ಮೂರು ಸಮಾನ ಕಾಲಮ್‌ಗಳ ಪರ್ಯಾಯ
ತರಗತಿಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ .row-cols-*, ನೀವು ಸಮಾನ ಕಾಲಮ್‌ಗಳೊಂದಿಗೆ ಗ್ರಿಡ್ ಅನ್ನು ಸುಲಭವಾಗಿ ರಚಿಸಬಹುದು.
.colನ ಮಗು
.row-cols-md-3
.colನ ಮಗು
.row-cols-md-3
.colನ ಮಗು
.row-cols-md-3
ಮೂರು ಅಸಮಾನ ಕಾಲಮ್‌ಗಳು
ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಮೂರು ಕಾಲಮ್‌ಗಳನ್ನು ಪಡೆಯಿರಿ ಮತ್ತು ವಿವಿಧ ಅಗಲಗಳ ದೊಡ್ಡ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳಿಗೆ ಸ್ಕೇಲಿಂಗ್ ಮಾಡಿ. ನೆನಪಿಡಿ, ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳು ಒಂದೇ ಸಮತಲ ಬ್ಲಾಕ್‌ಗೆ ಹನ್ನೆರಡು ವರೆಗೆ ಸೇರಿಸಬೇಕು. ಅದಕ್ಕಿಂತ ಹೆಚ್ಚು, ಮತ್ತು ಕಾಲಮ್‌ಗಳು ವ್ಯೂಪೋರ್ಟ್ ಅನ್ನು ಲೆಕ್ಕಿಸದೆ ಪೇರಿಸುವುದನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತವೆ.
ಎರಡು ಕಾಲಮ್‌ಗಳು
ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಎರಡು ಕಾಲಮ್‌ಗಳನ್ನು ಪಡೆಯಿರಿ ಮತ್ತು ದೊಡ್ಡ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳಿಗೆ ಸ್ಕೇಲಿಂಗ್ ಮಾಡಿ .
ಪೂರ್ಣ ಅಗಲ, ಏಕ ಕಾಲಮ್
ಪೂರ್ಣ-ಅಗಲ ಅಂಶಗಳಿಗೆ ಯಾವುದೇ ಗ್ರಿಡ್ ತರಗತಿಗಳು ಅಗತ್ಯವಿಲ್ಲ.
ಎರಡು ನೆಸ್ಟೆಡ್ ಕಾಲಮ್‌ಗಳೊಂದಿಗೆ ಎರಡು ಕಾಲಮ್‌ಗಳು
ದಸ್ತಾವೇಜನ್ನು ಪ್ರತಿಯಾಗಿ, ಗೂಡುಕಟ್ಟುವುದು ಸುಲಭ - ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕಾಲಮ್‌ನಲ್ಲಿ ಕಾಲಮ್‌ಗಳ ಸಾಲನ್ನು ಇರಿಸಿ. ಇದು ನಿಮಗೆ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಎರಡು ಕಾಲಮ್‌ಗಳನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ದೊಡ್ಡ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳಿಗೆ ಸ್ಕೇಲಿಂಗ್ ಮಾಡುತ್ತದೆ , ದೊಡ್ಡ ಕಾಲಮ್‌ನೊಳಗೆ ಇನ್ನೆರಡು (ಸಮಾನ ಅಗಲಗಳು) ಇರುತ್ತದೆ.
ಮೊಬೈಲ್ ಸಾಧನದ ಗಾತ್ರಗಳು, ಟ್ಯಾಬ್ಲೆಟ್‌ಗಳು ಮತ್ತು ಕೆಳಗೆ, ಈ ಕಾಲಮ್‌ಗಳು ಮತ್ತು ಅವುಗಳ ನೆಸ್ಟೆಡ್ ಕಾಲಮ್‌ಗಳು ಸ್ಟ್ಯಾಕ್ ಆಗುತ್ತವೆ.
ಮಿಶ್ರಿತ: ಮೊಬೈಲ್ ಮತ್ತು ಡೆಸ್ಕ್‌ಟಾಪ್
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ v5 ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯು ಆರು ಹಂತದ ವರ್ಗಗಳನ್ನು ಹೊಂದಿದೆ: xs (ಹೆಚ್ಚುವರಿ ಚಿಕ್ಕದಾಗಿದೆ, ಈ ವರ್ಗದ ಇನ್ಫಿಕ್ಸ್ ಅನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ), sm (ಸಣ್ಣ), md (ಮಧ್ಯಮ), lg (ದೊಡ್ಡದು), xl (x-ದೊಡ್ಡದು), ಮತ್ತು xxl (xx -ದೊಡ್ಡದು). ಹೆಚ್ಚು ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನೀವು ಈ ವರ್ಗಗಳ ಯಾವುದೇ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸಬಹುದು.
ಪ್ರತಿಯೊಂದು ಶ್ರೇಣಿಯ ತರಗತಿಗಳು ಹೆಚ್ಚಾಗುತ್ತವೆ, ಅಂದರೆ ನೀವು md, lg, xl ಮತ್ತು xxl ಗಾಗಿ ಒಂದೇ ಅಗಲವನ್ನು ಹೊಂದಿಸಲು ಯೋಜಿಸಿದರೆ, ನೀವು md ಅನ್ನು ಮಾತ್ರ ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾಗುತ್ತದೆ.
ಮಿಶ್ರಿತ: ಮೊಬೈಲ್, ಟ್ಯಾಬ್ಲೆಟ್ ಮತ್ತು ಡೆಸ್ಕ್‌ಟಾಪ್
ಗಟಾರಗಳು
ತರಗತಿಗಳೊಂದಿಗೆ, ಸಮತಲವಾದ ಗಟಾರಗಳನ್ನು .gx-*ಸರಿಹೊಂದಿಸಬಹುದು.
.col.gx-4ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.gx-4ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.gx-4ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.gx-4ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.gx-4ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.gx-4ಗಟಾರಗಳೊಂದಿಗೆ
_
.gy-*ಲಂಬವಾದ ಗಟಾರಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು ತರಗತಿಗಳನ್ನು ಬಳಸಿ .
.col.gy-4ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.gy-4ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.gy-4ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.gy-4ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.gy-4ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.gy-4ಗಟಾರಗಳೊಂದಿಗೆ
_
.g-*ತರಗತಿಗಳೊಂದಿಗೆ, ಎರಡೂ ದಿಕ್ಕುಗಳಲ್ಲಿನ ಗಟಾರಗಳನ್ನು ಸರಿಹೊಂದಿಸಬಹುದು .
.col.g-3ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.g-3ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.g-3ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.g-3ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.g-3ಗಟಾರಗಳೊಂದಿಗೆ
_
.col.g-3ಗಟಾರಗಳೊಂದಿಗೆ
_
ಕಂಟೈನರ್ಗಳು
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ v4.4 ನಲ್ಲಿ ಸೇರಿಸಲಾದ ಹೆಚ್ಚುವರಿ ತರಗತಿಗಳು ನಿರ್ದಿಷ್ಟ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನವರೆಗೆ 100% ಅಗಲವಿರುವ ಕಂಟೇನರ್‌ಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ. v5 ಹೊಸ xxlಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ.