Source

ಲೇಔಟ್ಗಾಗಿ ಉಪಯುಕ್ತತೆಗಳು

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

ಬದಲಾಗುತ್ತಿದೆdisplay

ಆಸ್ತಿಯ ಸಾಮಾನ್ಯ ಮೌಲ್ಯಗಳನ್ನು ಸ್ಪಂದಿಸಲು ಟಾಗಲ್ ಮಾಡಲು ನಮ್ಮ ಪ್ರದರ್ಶನ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ. displayನಿರ್ದಿಷ್ಟ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ಗಳಲ್ಲಿ ಅವುಗಳನ್ನು ತೋರಿಸಲು ಅಥವಾ ಮರೆಮಾಡಲು ನಮ್ಮ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್, ವಿಷಯ ಅಥವಾ ಘಟಕಗಳೊಂದಿಗೆ ಅದನ್ನು ಮಿಶ್ರಣ ಮಾಡಿ.

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಆಯ್ಕೆಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ಅನ್ನು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಆದರೆ ಪ್ರತಿಯೊಂದು ಅಂಶವನ್ನು displayಬದಲಾಯಿಸಲಾಗಿಲ್ಲ display: flexಏಕೆಂದರೆ ಇದು ಅನೇಕ ಅನಗತ್ಯ ಅತಿಕ್ರಮಣಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರಮುಖ ಬ್ರೌಸರ್ ನಡವಳಿಕೆಗಳನ್ನು ಅನಿರೀಕ್ಷಿತವಾಗಿ ಬದಲಾಯಿಸುತ್ತದೆ. ನಮ್ಮ ಹೆಚ್ಚಿನ ಘಟಕಗಳನ್ನು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಸಕ್ರಿಯಗೊಳಿಸಿ ನಿರ್ಮಿಸಲಾಗಿದೆ.

ನೀವು display: flexಒಂದು ಅಂಶಕ್ಕೆ ಸೇರಿಸಬೇಕಾದರೆ, .d-flexಅಥವಾ ಸ್ಪಂದಿಸುವ ರೂಪಾಂತರಗಳಲ್ಲಿ ಒಂದನ್ನು ಸೇರಿಸಿ (ಉದಾ, .d-sm-flex). ಗಾತ್ರ, ಜೋಡಣೆ, ಅಂತರ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗಾಗಿ ನಮ್ಮ ಹೆಚ್ಚುವರಿ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳdisplay ಬಳಕೆಯನ್ನು ಅನುಮತಿಸಲು ನಿಮಗೆ ಈ ವರ್ಗ ಅಥವಾ ಮೌಲ್ಯದ ಅಗತ್ಯವಿದೆ .

ಅಂಚು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್

ಅಂಶಗಳು ಮತ್ತು ಘಟಕಗಳು ಹೇಗೆ ಅಂತರ ಮತ್ತು ಗಾತ್ರವನ್ನು ಹೊಂದಿವೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸಲು marginಮತ್ತು padding ಅಂತರದ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ . 1remಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ಮೌಲ್ಯದ ಡೀಫಾಲ್ಟ್ $spacerವೇರಿಯೇಬಲ್ ಅನ್ನು ಆಧರಿಸಿ, ಅಂತರ ಉಪಯುಕ್ತತೆಗಳಿಗಾಗಿ ಐದು-ಹಂತದ ಮಾಪಕವನ್ನು ಒಳಗೊಂಡಿದೆ . ಎಲ್ಲಾ ವ್ಯೂಪೋರ್ಟ್‌ಗಳಿಗೆ ಮೌಲ್ಯಗಳನ್ನು ಆರಿಸಿ (ಉದಾ, .mr-3ಫಾರ್ margin-right: 1rem), ಅಥವಾ ನಿರ್ದಿಷ್ಟ ವ್ಯೂಪೋರ್ಟ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ಸ್ಪಂದಿಸುವ ರೂಪಾಂತರಗಳನ್ನು ಆರಿಸಿ (ಉದಾ, .mr-md-3ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನಿಂದ ಪ್ರಾರಂಭಿಸಲು) margin-right: 1rem.md

ಟಾಗಲ್ ಮಾಡಿvisibility

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