ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಕಾರ್ಡ್ಗಳು ಬಹು ರೂಪಾಂತರಗಳು ಮತ್ತು ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದಾದ ವಿಷಯ ಧಾರಕವನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಬಗ್ಗೆ
ಕಾರ್ಡ್ ಒಂದು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದಾದ ವಿಷಯ ಧಾರಕವಾಗಿದೆ. ಇದು ಹೆಡರ್ಗಳು ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಗಳ ಆಯ್ಕೆಗಳು, ವೈವಿಧ್ಯಮಯ ವಿಷಯಗಳು, ಸಂದರ್ಭೋಚಿತ ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳು ಮತ್ತು ಶಕ್ತಿಯುತ ಪ್ರದರ್ಶನ ಆಯ್ಕೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ನಿಮಗೆ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ 3 ಪರಿಚಯವಿದ್ದರೆ, ಕಾರ್ಡ್ಗಳು ನಮ್ಮ ಹಳೆಯ ಪ್ಯಾನೆಲ್ಗಳು, ಬಾವಿಗಳು ಮತ್ತು ಥಂಬ್ನೇಲ್ಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತವೆ. ಆ ಘಟಕಗಳಿಗೆ ಹೋಲುವ ಕಾರ್ಯವು ಕಾರ್ಡ್ಗಳಿಗೆ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳಾಗಿ ಲಭ್ಯವಿದೆ.
ಉದಾಹರಣೆ
ಕಾರ್ಡ್ಗಳನ್ನು ಸಾಧ್ಯವಾದಷ್ಟು ಕಡಿಮೆ ಮಾರ್ಕ್ಅಪ್ ಮತ್ತು ಶೈಲಿಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಆದರೆ ಇನ್ನೂ ಒಂದು ಟನ್ ನಿಯಂತ್ರಣ ಮತ್ತು ಗ್ರಾಹಕೀಕರಣವನ್ನು ನೀಡಲು ನಿರ್ವಹಿಸುತ್ತದೆ. ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಅವು ಸುಲಭವಾದ ಜೋಡಣೆಯನ್ನು ನೀಡುತ್ತವೆ ಮತ್ತು ಇತರ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಘಟಕಗಳೊಂದಿಗೆ ಚೆನ್ನಾಗಿ ಮಿಶ್ರಣ ಮಾಡುತ್ತವೆ. ಅವರು marginಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಯಾವುದೇ ಹೊಂದಿಲ್ಲ, ಆದ್ದರಿಂದ ಅಗತ್ಯವಿರುವಷ್ಟು ಅಂತರ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ .
ಮಿಶ್ರ ವಿಷಯ ಮತ್ತು ಸ್ಥಿರ ಅಗಲದೊಂದಿಗೆ ಮೂಲ ಕಾರ್ಡ್ನ ಉದಾಹರಣೆ ಕೆಳಗೆ ಇದೆ. ಕಾರ್ಡ್ಗಳು ಪ್ರಾರಂಭಿಸಲು ಯಾವುದೇ ಸ್ಥಿರ ಅಗಲವನ್ನು ಹೊಂದಿಲ್ಲ, ಆದ್ದರಿಂದ ಅವು ನೈಸರ್ಗಿಕವಾಗಿ ಅದರ ಮೂಲ ಅಂಶದ ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ತುಂಬುತ್ತವೆ. ನಮ್ಮ ವಿವಿಧ ಗಾತ್ರದ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಇದನ್ನು ಸುಲಭವಾಗಿ ಕಸ್ಟಮೈಸ್ ಮಾಡಲಾಗಿದೆ .
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಕಾರ್ಡ್ಗಳು ಚಿತ್ರಗಳು, ಪಠ್ಯ, ಪಟ್ಟಿ ಗುಂಪುಗಳು, ಲಿಂಕ್ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ವಿವಿಧ ರೀತಿಯ ವಿಷಯವನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ. ಬೆಂಬಲಿತವಾದವುಗಳ ಉದಾಹರಣೆಗಳನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ.
ದೇಹ
ಕಾರ್ಡ್ನ ಬಿಲ್ಡಿಂಗ್ ಬ್ಲಾಕ್ ಆಗಿದೆ .card-body. ಕಾರ್ಡ್ನಲ್ಲಿ ನಿಮಗೆ ಪ್ಯಾಡ್ಡ್ ವಿಭಾಗ ಅಗತ್ಯವಿರುವಾಗ ಅದನ್ನು ಬಳಸಿ.
ಇದು ಕಾರ್ಡ್ ದೇಹದೊಳಗಿನ ಕೆಲವು ಪಠ್ಯವಾಗಿದೆ.
ಶೀರ್ಷಿಕೆಗಳು, ಪಠ್ಯ ಮತ್ತು ಲಿಂಕ್ಗಳು
ಟ್ಯಾಗ್ಗೆ ಸೇರಿಸುವ .card-titleಮೂಲಕ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ . ಅದೇ ರೀತಿಯಲ್ಲಿ, ಲಿಂಕ್ಗಳನ್ನು ಸೇರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಟ್ಯಾಗ್ಗೆ ಸೇರಿಸುವ ಮೂಲಕ <h*>ಪರಸ್ಪರ ಪಕ್ಕದಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ ..card-link<a>
ಟ್ಯಾಗ್ಗೆ a .card-subtitleಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಉಪಶೀರ್ಷಿಕೆಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ . <h*>ಮತ್ತು ಐಟಂಗಳನ್ನು ಐಟಂನಲ್ಲಿ ಇರಿಸಿದರೆ .card-title, ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ ಮತ್ತು ಉಪಶೀರ್ಷಿಕೆಯನ್ನು ಚೆನ್ನಾಗಿ ಜೋಡಿಸಲಾಗುತ್ತದೆ..card-subtitle.card-body
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಉಪಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
.card-img-topಕಾರ್ಡ್ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಚಿತ್ರವನ್ನು ಇರಿಸುತ್ತದೆ. ಜೊತೆಗೆ .card-text, ಪಠ್ಯವನ್ನು ಕಾರ್ಡ್ಗೆ ಸೇರಿಸಬಹುದು. ಒಳಗಿನ ಪಠ್ಯವನ್ನು .card-textಪ್ರಮಾಣಿತ HTML ಟ್ಯಾಗ್ಗಳೊಂದಿಗೆ ಶೈಲಿ ಮಾಡಬಹುದು.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಗುಂಪುಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡಿ
ಫ್ಲಶ್ ಪಟ್ಟಿ ಗುಂಪಿನೊಂದಿಗೆ ಕಾರ್ಡ್ನಲ್ಲಿ ವಿಷಯದ ಪಟ್ಟಿಗಳನ್ನು ರಚಿಸಿ.
ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್
ವೈಶಿಷ್ಟ್ಯಗೊಳಿಸಲಾಗಿದೆ
ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್
ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ
ಡಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್
ವೆಸ್ಟಿಬುಲಮ್ ಮತ್ತು ಎರೋಸ್
ಅಡುಗೆಮನೆಯ ತೊಟ್ಟಿ
ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಕಾರ್ಡ್ ರಚಿಸಲು ಹಲವಾರು ವಿಷಯ ಪ್ರಕಾರಗಳನ್ನು ಮಿಶ್ರಣ ಮಾಡಿ ಮತ್ತು ಹೊಂದಿಸಿ ಅಥವಾ ಎಲ್ಲವನ್ನೂ ಅಲ್ಲಿ ಎಸೆಯಿರಿ. ಕೆಳಗೆ ತೋರಿಸಿರುವ ಚಿತ್ರ ಶೈಲಿಗಳು, ಬ್ಲಾಕ್ಗಳು, ಪಠ್ಯ ಶೈಲಿಗಳು ಮತ್ತು ಪಟ್ಟಿ ಗುಂಪು-ಎಲ್ಲವೂ ಸ್ಥಿರ-ಅಗಲ ಕಾರ್ಡ್ನಲ್ಲಿ ಸುತ್ತಿವೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಕಾರ್ಡ್ಗಳು widthಪ್ರಾರಂಭಿಸಲು ಯಾವುದೇ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಹೊಂದಿಲ್ಲ, ಆದ್ದರಿಂದ ಹೇಳದ ಹೊರತು ಅವು 100% ಅಗಲವಾಗಿರುತ್ತದೆ. ಕಸ್ಟಮ್ CSS, ಗ್ರಿಡ್ ತರಗತಿಗಳು, ಗ್ರಿಡ್ ಸಾಸ್ ಮಿಕ್ಸಿನ್ಗಳು ಅಥವಾ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ನೀವು ಇದನ್ನು ಅಗತ್ಯವಿರುವಂತೆ ಬದಲಾಯಿಸಬಹುದು.
ಗ್ರಿಡ್ ಮಾರ್ಕ್ಅಪ್ ಬಳಸುವುದು
ಗ್ರಿಡ್ ಅನ್ನು ಬಳಸಿ, ಅಗತ್ಯವಿರುವಂತೆ ಕಾಲಮ್ಗಳು ಮತ್ತು ಸಾಲುಗಳಲ್ಲಿ ಕಾರ್ಡ್ಗಳನ್ನು ಸುತ್ತಿ.
ವಿಶೇಷ ಶೀರ್ಷಿಕೆ ಚಿಕಿತ್ಸೆ
ಹೆಚ್ಚುವರಿ ಕಂಟೆಂಟ್ಗೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯದೊಂದಿಗೆ.
ಚಿತ್ರಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಕಾರ್ಡ್ಗಳು ಕೆಲವು ಆಯ್ಕೆಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ. ಕಾರ್ಡ್ನ ಎರಡೂ ತುದಿಯಲ್ಲಿ "ಇಮೇಜ್ ಕ್ಯಾಪ್ಸ್" ಅನ್ನು ಸೇರಿಸುವುದರಿಂದ, ಕಾರ್ಡ್ ವಿಷಯದೊಂದಿಗೆ ಚಿತ್ರಗಳನ್ನು ಓವರ್ಲೇ ಮಾಡುವುದು ಅಥವಾ ಕಾರ್ಡ್ನಲ್ಲಿ ಚಿತ್ರವನ್ನು ಎಂಬೆಡ್ ಮಾಡುವುದರಿಂದ ಆರಿಸಿಕೊಳ್ಳಿ.
ಚಿತ್ರ ಕ್ಯಾಪ್ಸ್
ಹೆಡರ್ಗಳು ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಗಳಂತೆಯೇ, ಕಾರ್ಡ್ಗಳು ಮೇಲಿನ ಮತ್ತು ಕೆಳಗಿನ “ಇಮೇಜ್ ಕ್ಯಾಪ್ಗಳನ್ನು” ಒಳಗೊಂಡಿರಬಹುದು - ಕಾರ್ಡ್ನ ಮೇಲ್ಭಾಗ ಅಥವಾ ಕೆಳಭಾಗದಲ್ಲಿರುವ ಚಿತ್ರಗಳು.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಇದು ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ವಿಶಾಲ ಕಾರ್ಡ್ ಆಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಇದು ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ವಿಶಾಲ ಕಾರ್ಡ್ ಆಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ
ಚಿತ್ರದ ಮೇಲ್ಪದರಗಳು
ಚಿತ್ರವನ್ನು ಕಾರ್ಡ್ ಹಿನ್ನೆಲೆಗೆ ತಿರುಗಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಕಾರ್ಡ್ನ ಪಠ್ಯವನ್ನು ಓವರ್ಲೇ ಮಾಡಿ. ಚಿತ್ರವನ್ನು ಅವಲಂಬಿಸಿ, ನಿಮಗೆ ಹೆಚ್ಚುವರಿ ಶೈಲಿಗಳು ಅಥವಾ ಉಪಯುಕ್ತತೆಗಳು ಬೇಕಾಗಬಹುದು ಅಥವಾ ಅಗತ್ಯವಿಲ್ಲದಿರಬಹುದು.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಇದು ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ವಿಶಾಲ ಕಾರ್ಡ್ ಆಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ
ವಿಷಯವು ಚಿತ್ರದ ಎತ್ತರಕ್ಕಿಂತ ದೊಡ್ಡದಾಗಿರಬಾರದು ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ವಿಷಯವು ಚಿತ್ರಕ್ಕಿಂತ ದೊಡ್ಡದಾಗಿದ್ದರೆ ವಿಷಯವನ್ನು ಚಿತ್ರದ ಹೊರಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.
ಸಮತಲ
ಗ್ರಿಡ್ ಮತ್ತು ಯುಟಿಲಿಟಿ ತರಗತಿಗಳ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸಿಕೊಂಡು, ಕಾರ್ಡ್ಗಳನ್ನು ಮೊಬೈಲ್ ಸ್ನೇಹಿ ಮತ್ತು ಸ್ಪಂದಿಸುವ ರೀತಿಯಲ್ಲಿ ಅಡ್ಡಲಾಗಿ ಮಾಡಬಹುದು. ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಗ್ರಿಡ್ ಗಟರ್ಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತೇವೆ ಮತ್ತು ಬ್ರೇಕ್ಪಾಯಿಂಟ್ನಲ್ಲಿ ಕಾರ್ಡ್ ಅನ್ನು ಅಡ್ಡಲಾಗಿ ಮಾಡಲು ತರಗತಿಗಳನ್ನು .no-guttersಬಳಸುತ್ತೇವೆ . ನಿಮ್ಮ ಕಾರ್ಡ್ ವಿಷಯವನ್ನು ಅವಲಂಬಿಸಿ ಹೆಚ್ಚಿನ ಹೊಂದಾಣಿಕೆಗಳು ಬೇಕಾಗಬಹುದು..col-md-*md
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಇದು ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ವಿಶಾಲ ಕಾರ್ಡ್ ಆಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ
ಕಾರ್ಡ್ ಶೈಲಿಗಳು
ಕಾರ್ಡ್ಗಳು ತಮ್ಮ ಹಿನ್ನೆಲೆಗಳು, ಗಡಿಗಳು ಮತ್ತು ಬಣ್ಣವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ವಿವಿಧ ಆಯ್ಕೆಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಶಿರೋಲೇಖ
ದ್ವಿತೀಯ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಶಿರೋಲೇಖ
ಯಶಸ್ಸಿನ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಶಿರೋಲೇಖ
ಡೇಂಜರ್ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಶಿರೋಲೇಖ
ಎಚ್ಚರಿಕೆ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಶಿರೋಲೇಖ
ಮಾಹಿತಿ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಶಿರೋಲೇಖ
ಲೈಟ್ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಶಿರೋಲೇಖ
ಡಾರ್ಕ್ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅರ್ಥವನ್ನು ತಿಳಿಸುವುದು
ಅರ್ಥವನ್ನು ಸೇರಿಸಲು ಬಣ್ಣವನ್ನು ಬಳಸುವುದು ದೃಶ್ಯ ಸೂಚನೆಯನ್ನು ಮಾತ್ರ ಒದಗಿಸುತ್ತದೆ, ಇದು ಸ್ಕ್ರೀನ್ ರೀಡರ್ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ರವಾನೆಯಾಗುವುದಿಲ್ಲ. ಬಣ್ಣದಿಂದ ಸೂಚಿಸಲಾದ ಮಾಹಿತಿಯು ವಿಷಯದಿಂದಲೇ ಸ್ಪಷ್ಟವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ (ಉದಾ ಗೋಚರ ಪಠ್ಯ), ಅಥವಾ .sr-onlyವರ್ಗದೊಂದಿಗೆ ಮರೆಮಾಡಲಾಗಿರುವ ಹೆಚ್ಚುವರಿ ಪಠ್ಯದಂತಹ ಪರ್ಯಾಯ ವಿಧಾನಗಳ ಮೂಲಕ ಸೇರಿಸಲಾಗಿದೆ.
ಗಡಿ
ಕಾರ್ಡ್ ಅನ್ನು ಬದಲಾಯಿಸಲು ಗಡಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ . ಕೆಳಗೆ ತೋರಿಸಿರುವಂತೆ ನೀವು ಪೋಷಕರ ಮೇಲೆ ಅಥವಾ ಕಾರ್ಡ್ನ ವಿಷಯಗಳ ಉಪವಿಭಾಗದ ಮೇಲೆ ತರಗತಿಗಳನ್ನು border-colorಹಾಕಬಹುದು ಎಂಬುದನ್ನು ಗಮನಿಸಿ ..text-{color}.card
ಶಿರೋಲೇಖ
ಪ್ರಾಥಮಿಕ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಶಿರೋಲೇಖ
ದ್ವಿತೀಯ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಶಿರೋಲೇಖ
ಯಶಸ್ಸಿನ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಶಿರೋಲೇಖ
ಡೇಂಜರ್ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಶಿರೋಲೇಖ
ಎಚ್ಚರಿಕೆ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಶಿರೋಲೇಖ
ಮಾಹಿತಿ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಶಿರೋಲೇಖ
ಲೈಟ್ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಶಿರೋಲೇಖ
ಡಾರ್ಕ್ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಮಿಕ್ಸಿನ್ಸ್ ಉಪಯುಕ್ತತೆಗಳು
ನೀವು ಕಾರ್ಡ್ ಹೆಡರ್ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಗಳ ಗಡಿಗಳನ್ನು ಅಗತ್ಯವಿರುವಂತೆ ಬದಲಾಯಿಸಬಹುದು ಮತ್ತು background-colorಜೊತೆಗೆ ಅವುಗಳನ್ನು ತೆಗೆದುಹಾಕಬಹುದು .bg-transparent.
ಶಿರೋಲೇಖ
ಯಶಸ್ಸಿನ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಕಾರ್ಡ್ ಲೇಔಟ್
ಕಾರ್ಡ್ಗಳಲ್ಲಿ ವಿಷಯವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದರ ಜೊತೆಗೆ, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಸರಣಿ ಕಾರ್ಡ್ಗಳನ್ನು ಹಾಕಲು ಕೆಲವು ಆಯ್ಕೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ಸದ್ಯಕ್ಕೆ, ಈ ಲೇಔಟ್ ಆಯ್ಕೆಗಳು ಇನ್ನೂ ಸ್ಪಂದಿಸುತ್ತಿಲ್ಲ .
ಕಾರ್ಡ್ ಗುಂಪುಗಳು
ಸಮಾನ ಅಗಲ ಮತ್ತು ಎತ್ತರದ ಕಾಲಮ್ಗಳೊಂದಿಗೆ ಒಂದೇ, ಲಗತ್ತಿಸಲಾದ ಅಂಶವಾಗಿ ಕಾರ್ಡ್ಗಳನ್ನು ನಿರೂಪಿಸಲು ಕಾರ್ಡ್ ಗುಂಪುಗಳನ್ನು ಬಳಸಿ. ಕಾರ್ಡ್ ಗುಂಪುಗಳು ಸ್ಟ್ಯಾಕ್ ಮಾಡುವುದನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತವೆ ಮತ್ತು ಬ್ರೇಕ್ಪಾಯಿಂಟ್ನಿಂದ display: flex;ಪ್ರಾರಂಭವಾಗುವ ಏಕರೂಪದ ಆಯಾಮಗಳೊಂದಿಗೆ ಲಗತ್ತಿಸಲು ಬಳಸುತ್ತವೆ.sm
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಇದು ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ವಿಶಾಲ ಕಾರ್ಡ್ ಆಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಈ ಕಾರ್ಡ್ ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿದೆ.
3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಇದು ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ವಿಶಾಲ ಕಾರ್ಡ್ ಆಗಿದೆ. ಸಮಾನ ಎತ್ತರದ ಕ್ರಿಯೆಯನ್ನು ತೋರಿಸಲು ಈ ಕಾರ್ಡ್ ಮೊದಲನೆಯದಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ವಿಷಯವನ್ನು ಹೊಂದಿದೆ.
3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ
ಅಡಿಟಿಪ್ಪಣಿಗಳೊಂದಿಗೆ ಕಾರ್ಡ್ ಗುಂಪುಗಳನ್ನು ಬಳಸುವಾಗ, ಅವರ ವಿಷಯವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಾಲಿನಲ್ಲಿರುತ್ತದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಇದು ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ವಿಶಾಲ ಕಾರ್ಡ್ ಆಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಈ ಕಾರ್ಡ್ ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಇದು ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ವಿಶಾಲ ಕಾರ್ಡ್ ಆಗಿದೆ. ಸಮಾನ ಎತ್ತರದ ಕ್ರಿಯೆಯನ್ನು ತೋರಿಸಲು ಈ ಕಾರ್ಡ್ ಮೊದಲನೆಯದಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ವಿಷಯವನ್ನು ಹೊಂದಿದೆ.
ಕಾರ್ಡ್ ಡೆಕ್ಗಳು
ಒಂದಕ್ಕೊಂದು ಜೋಡಿಸದ ಸಮಾನ ಅಗಲ ಮತ್ತು ಎತ್ತರದ ಕಾರ್ಡ್ಗಳ ಸೆಟ್ ಬೇಕೇ? ಕಾರ್ಡ್ ಡೆಕ್ಗಳನ್ನು ಬಳಸಿ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪಠ್ಯವನ್ನು ಬೆಂಬಲಿಸುವ ದೀರ್ಘ ಕಾರ್ಡ್ ಇದಾಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಈ ಕಾರ್ಡ್ ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿದೆ.
3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಇದು ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ವಿಶಾಲ ಕಾರ್ಡ್ ಆಗಿದೆ. ಸಮಾನ ಎತ್ತರದ ಕ್ರಿಯೆಯನ್ನು ತೋರಿಸಲು ಈ ಕಾರ್ಡ್ ಮೊದಲನೆಯದಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ವಿಷಯವನ್ನು ಹೊಂದಿದೆ.
3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ
ಕಾರ್ಡ್ ಗುಂಪುಗಳಂತೆಯೇ, ಡೆಕ್ಗಳಲ್ಲಿನ ಕಾರ್ಡ್ ಅಡಿಟಿಪ್ಪಣಿಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಾಲಿನಲ್ಲಿರುತ್ತವೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಇದು ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ವಿಶಾಲ ಕಾರ್ಡ್ ಆಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಈ ಕಾರ್ಡ್ ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಇದು ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ವಿಶಾಲ ಕಾರ್ಡ್ ಆಗಿದೆ. ಸಮಾನ ಎತ್ತರದ ಕ್ರಿಯೆಯನ್ನು ತೋರಿಸಲು ಈ ಕಾರ್ಡ್ ಮೊದಲನೆಯದಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ವಿಷಯವನ್ನು ಹೊಂದಿದೆ.
ಗ್ರಿಡ್ ಕಾರ್ಡ್ಗಳು
ಪ್ರತಿ ಸಾಲಿಗೆ ನೀವು ಎಷ್ಟು ಗ್ರಿಡ್ ಕಾಲಮ್ಗಳನ್ನು (ನಿಮ್ಮ ಕಾರ್ಡ್ಗಳ ಸುತ್ತಲೂ ಸುತ್ತಿ) ತೋರಿಸುತ್ತೀರಿ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸಲು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಮತ್ತು ಅದರ .row-colsತರಗತಿಗಳನ್ನು ಬಳಸಿ. ಉದಾಹರಣೆಗೆ, .row-cols-1ಒಂದು ಕಾಲಮ್ನಲ್ಲಿ ಕಾರ್ಡ್ಗಳನ್ನು ಹಾಕುವುದು ಮತ್ತು .row-cols-md-2ಮಧ್ಯಮ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ನಿಂದ ಹೆಚ್ಚಿನ ಸಾಲುಗಳಲ್ಲಿ ಸಮಾನ ಅಗಲಕ್ಕೆ ನಾಲ್ಕು ಕಾರ್ಡ್ಗಳನ್ನು ವಿಭಜಿಸುವುದು ಇಲ್ಲಿದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪಠ್ಯವನ್ನು ಬೆಂಬಲಿಸುವ ದೀರ್ಘ ಕಾರ್ಡ್ ಇದಾಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪಠ್ಯವನ್ನು ಬೆಂಬಲಿಸುವ ದೀರ್ಘ ಕಾರ್ಡ್ ಇದಾಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪಠ್ಯವನ್ನು ಬೆಂಬಲಿಸುವ ದೀರ್ಘ ಕಾರ್ಡ್ ಇದಾಗಿದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪಠ್ಯವನ್ನು ಬೆಂಬಲಿಸುವ ದೀರ್ಘ ಕಾರ್ಡ್ ಇದಾಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
ಇದನ್ನು ಬದಲಾಯಿಸಿ .row-cols-3ಮತ್ತು ನೀವು ನಾಲ್ಕನೇ ಕಾರ್ಡ್ ಸುತ್ತುವಿಕೆಯನ್ನು ನೋಡುತ್ತೀರಿ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪಠ್ಯವನ್ನು ಬೆಂಬಲಿಸುವ ದೀರ್ಘ ಕಾರ್ಡ್ ಇದಾಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪಠ್ಯವನ್ನು ಬೆಂಬಲಿಸುವ ದೀರ್ಘ ಕಾರ್ಡ್ ಇದಾಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪಠ್ಯವನ್ನು ಬೆಂಬಲಿಸುವ ದೀರ್ಘ ಕಾರ್ಡ್ ಇದಾಗಿದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪಠ್ಯವನ್ನು ಬೆಂಬಲಿಸುವ ದೀರ್ಘ ಕಾರ್ಡ್ ಇದಾಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
ನಿಮಗೆ ಸಮಾನ ಎತ್ತರ ಬೇಕಾದಾಗ .h-100, ಕಾರ್ಡ್ಗಳಿಗೆ ಸೇರಿಸಿ. ನೀವು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಸಮಾನ ಎತ್ತರಗಳನ್ನು ಬಯಸಿದರೆ, ನೀವು Sass ನಲ್ಲಿ ಹೊಂದಿಸಬಹುದು $card-height: 100%.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪಠ್ಯವನ್ನು ಬೆಂಬಲಿಸುವ ದೀರ್ಘ ಕಾರ್ಡ್ ಇದಾಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಇದು ಚಿಕ್ಕ ಕಾರ್ಡ್ ಆಗಿದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪಠ್ಯವನ್ನು ಬೆಂಬಲಿಸುವ ದೀರ್ಘ ಕಾರ್ಡ್ ಇದಾಗಿದೆ.
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪಠ್ಯವನ್ನು ಬೆಂಬಲಿಸುವ ದೀರ್ಘ ಕಾರ್ಡ್ ಇದಾಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
ಕಾರ್ಡ್ ಕಾಲಮ್ಗಳು
ಕಾರ್ಡ್ಗಳನ್ನು ಮ್ಯಾಸನ್ರಿ ತರಹದ ಕಾಲಮ್ಗಳಲ್ಲಿ ಸುತ್ತುವ ಮೂಲಕ ಕೇವಲ CSS ನೊಂದಿಗೆ ಆಯೋಜಿಸಬಹುದು .card-columns. columnಸುಲಭವಾದ ಜೋಡಣೆಗಾಗಿ ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ನ ಬದಲಿಗೆ CSS ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಕಾರ್ಡ್ಗಳನ್ನು ನಿರ್ಮಿಸಲಾಗಿದೆ . ಕಾರ್ಡ್ಗಳನ್ನು ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ ಮತ್ತು ಎಡದಿಂದ ಬಲಕ್ಕೆ ಆದೇಶಿಸಲಾಗುತ್ತದೆ.
ತಲೆ ಎತ್ತಿ! ಕಾರ್ಡ್ ಕಾಲಮ್ಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಮೈಲೇಜ್ ಬದಲಾಗಬಹುದು. ಕಾರ್ಡ್ಗಳು ಕಾಲಮ್ಗಳಾದ್ಯಂತ ಒಡೆಯುವುದನ್ನು ತಡೆಯಲು, ನಾವು ಅವುಗಳನ್ನು ಇನ್ನೂ ಬುಲೆಟ್ಪ್ರೂಫ್ ಪರಿಹಾರವಲ್ಲ display: inline-blockಎಂದು ಹೊಂದಿಸಬೇಕು.column-break-inside: avoid
ಹೊಸ ಸಾಲಿಗೆ ಸುತ್ತುವ ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆ
ಹೆಚ್ಚುವರಿ ವಿಷಯಕ್ಕೆ ನೈಸರ್ಗಿಕ ಲೀಡ್-ಇನ್ ಆಗಿ ಕೆಳಗಿನ ಪಠ್ಯವನ್ನು ಬೆಂಬಲಿಸುವ ದೀರ್ಘ ಕಾರ್ಡ್ ಇದಾಗಿದೆ. ಈ ವಿಷಯವು ಸ್ವಲ್ಪ ಉದ್ದವಾಗಿದೆ.
ಇದು ಶೀರ್ಷಿಕೆ ಮತ್ತು ಕೆಳಗಿನ ಪೋಷಕ ಪಠ್ಯದೊಂದಿಗೆ ಮತ್ತೊಂದು ಕಾರ್ಡ್ ಆಗಿದೆ. ಒಟ್ಟಾರೆಯಾಗಿ ಸ್ವಲ್ಪ ಎತ್ತರವಾಗಲು ಈ ಕಾರ್ಡ್ ಕೆಲವು ಹೆಚ್ಚುವರಿ ವಿಷಯವನ್ನು ಹೊಂದಿದೆ.
3 ನಿಮಿಷಗಳ ಹಿಂದೆ ಕೊನೆಯದಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ
ಕಾರ್ಡ್ ಕಾಲಮ್ಗಳನ್ನು ಕೆಲವು ಹೆಚ್ಚುವರಿ ಕೋಡ್ನೊಂದಿಗೆ ವಿಸ್ತರಿಸಬಹುದು ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು. .card-columnsಕಾಲಮ್ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಬದಲಾಯಿಸಲು ಸ್ಪಂದಿಸುವ ಶ್ರೇಣಿಗಳ ಗುಂಪನ್ನು ರಚಿಸಲು ನಾವು ಬಳಸುವ ಅದೇ CSS-CSS ಕಾಲಮ್ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ವರ್ಗದ ವಿಸ್ತರಣೆಯನ್ನು ಕೆಳಗೆ ತೋರಿಸಲಾಗಿದೆ .