ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ಉದಾಹರಣೆಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಂನಲ್ಲಿ ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಪರಿಚಿತವಾಗಲು ಮೂಲ ಗ್ರಿಡ್ ವಿನ್ಯಾಸಗಳು.

ಐದು ಗ್ರಿಡ್ ಶ್ರೇಣಿಗಳು

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

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

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

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

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

ಮೂರು ಅಸಮಾನ ಕಾಲಮ್‌ಗಳು

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

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

ಎರಡು ಕಾಲಮ್‌ಗಳು

ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಎರಡು ಕಾಲಮ್‌ಗಳನ್ನು ಪಡೆಯಿರಿ ಮತ್ತು ದೊಡ್ಡ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳಿಗೆ ಸ್ಕೇಲಿಂಗ್ ಮಾಡಿ .

.col-md-8
.col-md-4

ಪೂರ್ಣ ಅಗಲ, ಏಕ ಕಾಲಮ್

ಪೂರ್ಣ-ಅಗಲ ಅಂಶಗಳಿಗೆ ಯಾವುದೇ ಗ್ರಿಡ್ ತರಗತಿಗಳು ಅಗತ್ಯವಿಲ್ಲ.


ಎರಡು ನೆಸ್ಟೆಡ್ ಕಾಲಮ್‌ಗಳೊಂದಿಗೆ ಎರಡು ಕಾಲಮ್‌ಗಳು

ದಸ್ತಾವೇಜನ್ನು ಪ್ರತಿಯಾಗಿ, ಗೂಡುಕಟ್ಟುವುದು ಸುಲಭ - ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕಾಲಮ್‌ನಲ್ಲಿ ಕಾಲಮ್‌ಗಳ ಸಾಲನ್ನು ಇರಿಸಿ. ಇದು ನಿಮಗೆ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಎರಡು ಕಾಲಮ್‌ಗಳನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ದೊಡ್ಡ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗಳಿಗೆ ಸ್ಕೇಲಿಂಗ್ ಮಾಡುತ್ತದೆ , ದೊಡ್ಡ ಕಾಲಮ್‌ನೊಳಗೆ ಇನ್ನೆರಡು (ಸಮಾನ ಅಗಲಗಳು) ಇರುತ್ತದೆ.

ಮೊಬೈಲ್ ಸಾಧನದ ಗಾತ್ರಗಳು, ಟ್ಯಾಬ್ಲೆಟ್‌ಗಳು ಮತ್ತು ಕೆಳಗೆ, ಈ ಕಾಲಮ್‌ಗಳು ಮತ್ತು ಅವುಗಳ ನೆಸ್ಟೆಡ್ ಕಾಲಮ್‌ಗಳು ಸ್ಟ್ಯಾಕ್ ಆಗುತ್ತವೆ.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

ಮಿಶ್ರಿತ: ಮೊಬೈಲ್ ಮತ್ತು ಡೆಸ್ಕ್‌ಟಾಪ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ v4 ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯು ಐದು ಹಂತದ ವರ್ಗಗಳನ್ನು ಹೊಂದಿದೆ: xs (ಹೆಚ್ಚುವರಿ ಸಣ್ಣ), sm (ಸಣ್ಣ), md (ಮಧ್ಯಮ), lg (ದೊಡ್ಡದು), ಮತ್ತು xl (ಹೆಚ್ಚುವರಿ ದೊಡ್ಡದು). ಹೆಚ್ಚು ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನೀವು ಈ ವರ್ಗಗಳ ಯಾವುದೇ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸಬಹುದು.

ತರಗತಿಗಳ ಪ್ರತಿಯೊಂದು ಹಂತವು ಹೆಚ್ಚಾಗುತ್ತದೆ, ಅಂದರೆ ನೀವು xs ಮತ್ತು sm ಗಾಗಿ ಒಂದೇ ಅಗಲವನ್ನು ಹೊಂದಿಸಲು ಯೋಜಿಸಿದರೆ, ನೀವು xs ಅನ್ನು ಮಾತ್ರ ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾಗುತ್ತದೆ.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

ಮಿಶ್ರಿತ: ಮೊಬೈಲ್, ಟ್ಯಾಬ್ಲೆಟ್ ಮತ್ತು ಡೆಸ್ಕ್‌ಟಾಪ್

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4