ವಿಸ್ತರಿಸಿದ ಲಿಂಕ್
CSS ಮೂಲಕ ನೆಸ್ಟೆಡ್ ಲಿಂಕ್ ಅನ್ನು "ವಿಸ್ತರಿಸುವ" ಮೂಲಕ ಯಾವುದೇ HTML ಅಂಶ ಅಥವಾ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಘಟಕವನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವಂತೆ ಮಾಡಿ.
ಹುಸಿ ಅಂಶದ ಮೂಲಕ ಅದರ ಒಳಗೊಂಡಿರುವ ಬ್ಲಾಕ್.stretched-link
ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವಂತೆ ಮಾಡಲು ಲಿಂಕ್ಗೆ ಸೇರಿಸಿ . ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ, ವರ್ಗದೊಂದಿಗೆ ಲಿಂಕ್ ಅನ್ನು ಹೊಂದಿರುವ ಅಂಶವು ಕ್ಲಿಕ್ ಮಾಡಬಹುದಾಗಿದೆ ಎಂದರ್ಥ.::after
position: relative;
.stretched-link
ಕಾರ್ಡ್ಗಳು ಡೀಫಾಲ್ಟ್ ಆಗಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿವೆ, ಆದ್ದರಿಂದ ಈ ಸಂದರ್ಭದಲ್ಲಿ ನೀವು ಯಾವುದೇ ಇತರ HTML ಬದಲಾವಣೆಗಳಿಲ್ಲದೆ ಕಾರ್ಡ್ನಲ್ಲಿರುವ ಲಿಂಕ್ಗೆ ವರ್ಗವನ್ನು position: relative
ಸುರಕ್ಷಿತವಾಗಿ ಸೇರಿಸಬಹುದು ..stretched-link
ವಿಸ್ತರಿಸಿದ ಲಿಂಕ್ಗಳೊಂದಿಗೆ ಬಹು ಲಿಂಕ್ಗಳು ಮತ್ತು ಟ್ಯಾಪ್ ಗುರಿಗಳನ್ನು ಶಿಫಾರಸು ಮಾಡುವುದಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಇದು ಅಗತ್ಯವಿದ್ದರೆ ಕೆಲವು position
ಮತ್ತು z-index
ಶೈಲಿಗಳು ಸಹಾಯ ಮಾಡಬಹುದು.
ವಿಸ್ತರಿಸಿದ ಲಿಂಕ್ ಹೊಂದಿರುವ ಕಾರ್ಡ್
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಎಲ್ಲಿಯಾದರೂ ಹೋಗುಮೀಡಿಯಾ ಆಬ್ಜೆಕ್ಟ್ಗಳು position: relative
ಡೀಫಾಲ್ಟ್ ಆಗಿ ಹೊಂದಿಲ್ಲ, ಆದ್ದರಿಂದ .position-relative
ಮಾಧ್ಯಮ ವಸ್ತುವಿನ ಹೊರಗೆ ಲಿಂಕ್ ವಿಸ್ತರಿಸುವುದನ್ನು ತಡೆಯಲು ನಾವು ಇಲ್ಲಿ ಸೇರಿಸಬೇಕಾಗಿದೆ.
ವಿಸ್ತರಿಸಿದ ಲಿಂಕ್ ಹೊಂದಿರುವ ಮಾಧ್ಯಮ
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸೆಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.
ಎಲ್ಲಿಯಾದರೂ ಹೋಗುಕಾಲಮ್ಗಳು ಡಿಫಾಲ್ಟ್ ಆಗಿರುತ್ತವೆ , ಆದ್ದರಿಂದ ಕ್ಲಿಕ್ ಮಾಡಬಹುದಾದ ಕಾಲಮ್ಗಳಿಗೆ ಲಿಂಕ್ನಲ್ಲಿ ವರ್ಗ position: relative
ಮಾತ್ರ ಅಗತ್ಯವಿರುತ್ತದೆ . .stretched-link
ಆದಾಗ್ಯೂ, ಸಂಪೂರ್ಣ ಉದ್ದಕ್ಕೂ ಲಿಂಕ್ ಅನ್ನು ವಿಸ್ತರಿಸುವುದು ಕಾಲಮ್ನಲ್ಲಿ ಮತ್ತು ಸಾಲಿನಲ್ಲಿ .row
ಅಗತ್ಯವಿದೆ ..position-static
.position-relative
ವಿಸ್ತರಿಸಿದ ಲಿಂಕ್ ಹೊಂದಿರುವ ಕಾಲಮ್ಗಳು
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸೆಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.
ಎಲ್ಲಿಯಾದರೂ ಹೋಗುಒಳಗೊಂಡಿರುವ ಬ್ಲಾಕ್ ಅನ್ನು ಗುರುತಿಸುವುದು
ವಿಸ್ತರಿಸಿದ ಲಿಂಕ್ ಕಾರ್ಯನಿರ್ವಹಿಸದಿದ್ದರೆ, ಹೊಂದಿರುವ ಬ್ಲಾಕ್ ಬಹುಶಃ ಕಾರಣವಾಗಿರಬಹುದು. ಕೆಳಗಿನ CSS ಗುಣಲಕ್ಷಣಗಳು ಒಂದು ಅಂಶವನ್ನು ಹೊಂದಿರುವ ಬ್ಲಾಕ್ ಅನ್ನು ಮಾಡುತ್ತದೆ:
position
ಹೊರತುಪಡಿಸಿ ಒಂದು ಮೌಲ್ಯstatic
- ಎ
transform
ಅಥವಾperspective
ಬೇರೆ ಮೌಲ್ಯnone
- ಒಂದು
will-change
ಮೌಲ್ಯtransform
ಅಥವಾperspective
filter
ಮೌಲ್ಯವನ್ನು ಹೊರತುಪಡಿಸಿnone
ಅಥವಾwill-change
ಮೌಲ್ಯ (filter
ಫೈರ್ಫಾಕ್ಸ್ನಲ್ಲಿ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ)
ವಿಸ್ತರಿಸಿದ ಲಿಂಕ್ಗಳೊಂದಿಗೆ ಕಾರ್ಡ್
ಕಾರ್ಡ್ ಶೀರ್ಷಿಕೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲು ಮತ್ತು ಕಾರ್ಡ್ನ ವಿಷಯದ ಬಹುಭಾಗವನ್ನು ಮಾಡಲು ಕೆಲವು ತ್ವರಿತ ಉದಾಹರಣೆ ಪಠ್ಯ.
ಸ್ಟ್ರೆಚ್ಡ್ ಲಿಂಕ್ ಇಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ, ಏಕೆಂದರೆ position: relative
ಲಿಂಕ್ಗೆ ಸೇರಿಸಲಾಗಿದೆ
ಈ ವಿಸ್ತರಿಸಿದ ಲಿಂಕ್ -ಟ್ಯಾಗ್ನಲ್ಲಿ ಮಾತ್ರ ಹರಡುತ್ತದೆ p
, ಏಕೆಂದರೆ ಇದಕ್ಕೆ ರೂಪಾಂತರವನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.