ಮಾಧ್ಯಮ ವಸ್ತು
ಬ್ಲಾಗ್ ಕಾಮೆಂಟ್ಗಳು, ಟ್ವೀಟ್ಗಳು ಮತ್ತು ಮುಂತಾದವುಗಳಂತಹ ಹೆಚ್ಚು ಪುನರಾವರ್ತಿತ ಘಟಕಗಳನ್ನು ನಿರ್ಮಿಸಲು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಮಾಧ್ಯಮ ವಸ್ತುವಿನ ದಾಖಲೆ ಮತ್ತು ಉದಾಹರಣೆಗಳು.
ಉದಾಹರಣೆ
ಮಾಧ್ಯಮ ವಸ್ತುವು ಸಂಕೀರ್ಣವಾದ ಮತ್ತು ಪುನರಾವರ್ತಿತ ಘಟಕಗಳನ್ನು ನಿರ್ಮಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ , ಅಲ್ಲಿ ಕೆಲವು ಮಾಧ್ಯಮಗಳು ಹೇಳಲಾದ ಮಾಧ್ಯಮದ ಸುತ್ತಲೂ ಸುತ್ತಿಕೊಳ್ಳದ ವಿಷಯದ ಜೊತೆಗೆ ಸ್ಥಾನ ಪಡೆದಿವೆ. ಜೊತೆಗೆ, ಇದು ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ಗೆ ಧನ್ಯವಾದಗಳು ಅಗತ್ಯವಿರುವ ಎರಡು ತರಗತಿಗಳೊಂದಿಗೆ ಇದನ್ನು ಮಾಡುತ್ತದೆ.
ಒಂದೇ ಮಾಧ್ಯಮ ವಸ್ತುವಿನ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ. ಕೇವಲ ಎರಡು ವರ್ಗಗಳ ಅಗತ್ಯವಿದೆ-ಸುತ್ತುವಿಕೆ .media
ಮತ್ತು .media-body
ನಿಮ್ಮ ವಿಷಯದ ಸುತ್ತ. ಐಚ್ಛಿಕ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಅಂಚುಗಳನ್ನು ಅಂತರದ ಉಪಯುಕ್ತತೆಗಳ ಮೂಲಕ ನಿಯಂತ್ರಿಸಬಹುದು .
ಮಾಧ್ಯಮ ಶೀರ್ಷಿಕೆ
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸೆಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.ಫ್ಲೆಕ್ಸ್ಬಗ್ #12: ಇನ್ಲೈನ್ ಅಂಶಗಳನ್ನು ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳಾಗಿ ಪರಿಗಣಿಸಲಾಗುವುದಿಲ್ಲ
ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ 10-11 ಲಿಂಕ್ಗಳು ಅಥವಾ ಚಿತ್ರಗಳಂತಹ (ಅಥವಾ ::before
ಮತ್ತು ::after
ಹುಸಿ-ಅಂಶಗಳು) ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳಂತಹ ಇನ್ಲೈನ್ ಅಂಶಗಳನ್ನು ನಿರೂಪಿಸುವುದಿಲ್ಲ. ಇನ್ಲೈನ್ ಅಲ್ಲದ display
ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುವುದು ಮಾತ್ರ ಪರಿಹಾರವಾಗಿದೆ (ಉದಾ, block
, inline-block
, ಅಥವಾ flex
). ನಮ್ಮ ಪ್ರದರ್ಶನ ಉಪಯುಕ್ತತೆಗಳಲ್ಲಿ.d-flex
ಒಂದನ್ನು ಬಳಸಲು ನಾವು ಸಲಹೆ ನೀಡುತ್ತೇವೆ , ಇದನ್ನು ಸುಲಭವಾದ ಪರಿಹಾರವಾಗಿ.
ಗೂಡುಕಟ್ಟುವ
ಮಾಧ್ಯಮದ ವಸ್ತುಗಳನ್ನು ಅನಂತವಾಗಿ ಗೂಡುಕಟ್ಟಬಹುದು, ಆದರೂ ನಾವು ನಿಮಗೆ ಕೆಲವು ಹಂತದಲ್ಲಿ ನಿಲ್ಲಿಸುವಂತೆ ಸೂಚಿಸುತ್ತೇವೆ. ಪೋಷಕ ಮಾಧ್ಯಮ ವಸ್ತುವಿನೊಳಗೆ .media
ನೆಸ್ಟೆಡ್ ಇರಿಸಿ ..media-body
ಮಾಧ್ಯಮ ಶೀರ್ಷಿಕೆ
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸೆಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.ಜೋಡಣೆ
.media-body
ಮೀಡಿಯಾ ಆಬ್ಜೆಕ್ಟ್ನಲ್ಲಿರುವ ಮಾಧ್ಯಮವನ್ನು ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ನಿಮ್ಮ ವಿಷಯದ ಮೇಲ್ಭಾಗಕ್ಕೆ (ಡೀಫಾಲ್ಟ್), ಮಧ್ಯದಲ್ಲಿ ಅಥವಾ ಅಂತ್ಯಕ್ಕೆ ಜೋಡಿಸಬಹುದು .
ಉನ್ನತ-ಹೊಂದಾಣಿಕೆಯ ಮಾಧ್ಯಮ
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸೆಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.
ಡೊನೆಕ್ ಸೆಡ್ ಓಡಿಯೊ ದುಯಿ. ನುಲ್ಲಮ್ ಕ್ವಿಸ್ ರಿಸಸ್ ಈಗೆಟ್ ಉರ್ನಾ ಮೊಲ್ಲಿಸ್ ಒರ್ನಾರೆ ವೆಲ್ ಇಯು ಲಿಯೋ. ಕಮ್ ಸೊಸೈಸ್ ನ್ಯಾಟೋಕ್ ಪೆನಾಟಿಬಸ್ ಮತ್ತು ಮ್ಯಾಗ್ನಿಸ್ ಡಿಸ್ ಪಾರ್ಚುರಿಯೆಂಟ್ ಮಾಂಟೆಸ್, ನಾಸ್ಸೆಟರ್ ರಿಡಿಕ್ಯುಲಸ್ ಮಸ್.
ಮಧ್ಯದಲ್ಲಿ ಜೋಡಿಸಲಾದ ಮಾಧ್ಯಮ
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸೆಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.
ಡೊನೆಕ್ ಸೆಡ್ ಓಡಿಯೊ ದುಯಿ. ನುಲ್ಲಮ್ ಕ್ವಿಸ್ ರಿಸಸ್ ಈಗೆಟ್ ಉರ್ನಾ ಮೊಲ್ಲಿಸ್ ಒರ್ನಾರೆ ವೆಲ್ ಇಯು ಲಿಯೋ. ಕಮ್ ಸೊಸೈಸ್ ನ್ಯಾಟೋಕ್ ಪೆನಾಟಿಬಸ್ ಮತ್ತು ಮ್ಯಾಗ್ನಿಸ್ ಡಿಸ್ ಪಾರ್ಚುರಿಯೆಂಟ್ ಮಾಂಟೆಸ್, ನಾಸ್ಸೆಟರ್ ರಿಡಿಕ್ಯುಲಸ್ ಮಸ್.
ಕೆಳಕ್ಕೆ ಜೋಡಿಸಲಾದ ಮಾಧ್ಯಮ
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸೆಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.
ಡೊನೆಕ್ ಸೆಡ್ ಓಡಿಯೊ ದುಯಿ. ನುಲ್ಲಮ್ ಕ್ವಿಸ್ ರಿಸಸ್ ಈಗೆಟ್ ಉರ್ನಾ ಮೊಲ್ಲಿಸ್ ಒರ್ನಾರೆ ವೆಲ್ ಇಯು ಲಿಯೋ. ಕಮ್ ಸೊಸೈಸ್ ನ್ಯಾಟೋಕ್ ಪೆನಾಟಿಬಸ್ ಮತ್ತು ಮ್ಯಾಗ್ನಿಸ್ ಡಿಸ್ ಪಾರ್ಚುರಿಯೆಂಟ್ ಮಾಂಟೆಸ್, ನಾಸ್ಸೆಟರ್ ರಿಡಿಕ್ಯುಲಸ್ ಮಸ್.
ಆದೇಶ
HTML ಅನ್ನು ಮಾರ್ಪಡಿಸುವ ಮೂಲಕ ಅಥವಾ ಆಸ್ತಿಯನ್ನು ಹೊಂದಿಸಲು ಕೆಲವು ಕಸ್ಟಮ್ ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ CSS ಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಮಾಧ್ಯಮ ವಸ್ತುಗಳಲ್ಲಿನ ವಿಷಯದ ಕ್ರಮವನ್ನು ಬದಲಾಯಿಸಿ order
(ನಿಮ್ಮ ಆಯ್ಕೆಯ ಪೂರ್ಣಾಂಕಕ್ಕೆ).
ಮಾಧ್ಯಮ ವಸ್ತು
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸೆಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.ಮಾಧ್ಯಮ ಪಟ್ಟಿ
ಮಾಧ್ಯಮ ವಸ್ತುವು ಕಡಿಮೆ ರಚನಾತ್ಮಕ ಅವಶ್ಯಕತೆಗಳನ್ನು ಹೊಂದಿರುವ ಕಾರಣ, ನೀವು ಪಟ್ಟಿ HTML ಅಂಶಗಳಲ್ಲಿ ಈ ವರ್ಗಗಳನ್ನು ಸಹ ಬಳಸಬಹುದು. ನಿಮ್ಮ <ul>
ಅಥವಾ <ol>
, ಯಾವುದೇ ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಪಟ್ಟಿ ಶೈಲಿಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಸೇರಿಸಿ, ತದನಂತರ ನಿಮ್ಮ s ಗೆ .list-unstyled
ಅನ್ವಯಿಸಿ . ಯಾವಾಗಲೂ ಹಾಗೆ, ಫೈನ್ ಟ್ಯೂನ್ ಮಾಡಲು ಅಗತ್ಯವಿರುವಲ್ಲೆಲ್ಲಾ ಅಂತರ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ..media
<li>
-
ಪಟ್ಟಿ ಆಧಾರಿತ ಮಾಧ್ಯಮ ವಸ್ತು
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸೆಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್. -
ಪಟ್ಟಿ ಆಧಾರಿತ ಮಾಧ್ಯಮ ವಸ್ತು
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸೆಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್. -
ಪಟ್ಟಿ ಆಧಾರಿತ ಮಾಧ್ಯಮ ವಸ್ತು
ಕ್ರಾಸ್ ಸಿಟ್ ಅಮೆಟ್ ನಿಬ್ ಲಿಬೆರೊ, ಇನ್ ಗ್ರಾವಿಡಾ ನುಲ್ಲಾ. ನುಲ್ಲಾ ವೆಲ್ ಮೆಟಸ್ ಸೆಲೆರಿಸ್ಕ್ ಆಂಟೆ ಸೊಲ್ಲಿಸಿಟುಡಿನ್. ಕ್ರಾಸ್ ಪುರಸ್ ಓಡಿಯೋ, ವೆಸ್ಟಿಬುಲಮ್ ಇನ್ ವಲ್ಪುಟೇಟ್ ಅಟ್, ಟೆಂಪಸ್ ವಿವರ್ರಾ ಟರ್ಪಿಸ್. ಫ್ಯೂಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಂಕ್ ಎಸಿ ನಿಸಿ ವಲ್ಪುಟೇಟ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಫೌಸಿಬಸ್ನಲ್ಲಿ ಡೊನೆಕ್ ಲ್ಯಾಸಿನಿಯಾ ಕಾಂಗೂ ಫೆಲಿಸ್.