ಮೂಲ CSS

ಸ್ಕ್ಯಾಫೋಲ್ಡಿಂಗ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ, ಮೂಲ HTML ಅಂಶಗಳು ತಾಜಾ, ಸ್ಥಿರವಾದ ನೋಟ ಮತ್ತು ಅನುಭವವನ್ನು ಒದಗಿಸಲು ವಿಸ್ತರಣಾ ತರಗತಿಗಳೊಂದಿಗೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ ಮತ್ತು ವರ್ಧಿಸಲಾಗಿದೆ.

ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ದೇಹದ ನಕಲು

ಟೈಪೋಗ್ರಾಫಿಕ್ ಸ್ಕೇಲ್

ಸಂಪೂರ್ಣ ಟೈಪೋಗ್ರಾಫಿಕ್ ಗ್ರಿಡ್ ನಮ್ಮ variables.less ಫೈಲ್‌ನಲ್ಲಿ ಎರಡು ಕಡಿಮೆ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಆಧರಿಸಿದೆ: @baseFontSizeಮತ್ತು @baseLineHeight. ಮೊದಲನೆಯದು ಬೇಸ್ ಫಾಂಟ್-ಗಾತ್ರವನ್ನು ಉದ್ದಕ್ಕೂ ಬಳಸಲಾಗುತ್ತದೆ ಮತ್ತು ಎರಡನೆಯದು ಬೇಸ್ ಲೈನ್-ಎತ್ತರವಾಗಿದೆ.

ನಮ್ಮ ಎಲ್ಲಾ ಪ್ರಕಾರಗಳ ಅಂಚುಗಳು, ಪ್ಯಾಡಿಂಗ್‌ಗಳು ಮತ್ತು ಲೈನ್-ಎತ್ತರಗಳನ್ನು ರಚಿಸಲು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ರಚಿಸಲು ನಾವು ಆ ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ಕೆಲವು ಗಣಿತವನ್ನು ಬಳಸುತ್ತೇವೆ.

ದೇಹದ ಪಠ್ಯದ ಉದಾಹರಣೆ

ನುಲ್ಲಮ್ ಕ್ವಿಸ್ ರಿಸಸ್ ಈಗೆಟ್ ಉರ್ನಾ ಮೊಲ್ಲಿಸ್ ಒರ್ನಾರೆ ವೆಲ್ ಇಯು ಲಿಯೋ. ಕಮ್ ಸೋಸಿಯಸ್ ನ್ಯಾಟೋಕ್ ಪೆನಾಟಿಬಸ್ ಮತ್ತು ಮ್ಯಾಗ್ನಿಸ್ ಡಿಸ್ ಪಾರ್ಚುರಿಯೆಂಟ್ ಮಾಂಟೆಸ್, ನಾಸ್ಸೆಟರ್ ರಿಡಿಕ್ಯುಲಸ್ ಮಸ್. Nullam id dolor id nibh ultricies ವೆಹಿಕುಲಾ ut id elit.

ವಿವಾಮಸ್ ಸಗಿಟಿಸ್ ಲ್ಯಾಕಸ್ ವೆಲ್ ಆಗ್ ಲಾರೆಟ್ ರುಟ್ರಮ್ ಫೌಸಿಬಸ್ ಡೋಲರ್ ಆಕ್ಟರ್. ಡುಯಿಸ್ ಮೊಲ್ಲಿಸ್, ಈಸ್ಟ್ ನಾನ್ ಕಮೊಡೊ ಲಕ್ಟಸ್, ನಿಸಿ ಎರಟ್ ಪೋರ್ಟಿಟರ್ ಲಿಗುಲಾ, ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್. ಡೊನೆಕ್ ಸೆಡ್ ಓಡಿಯೊ ದುಯಿ.

h1. ಶಿರೋನಾಮೆ 1

h2. ಶಿರೋನಾಮೆ 2

h3. ಶಿರೋನಾಮೆ 3

h4. ಶಿರೋನಾಮೆ 4

h5. ಶಿರೋನಾಮೆ 5

h6. ಶಿರೋನಾಮೆ 6

ಒತ್ತು, ವಿಳಾಸ ಮತ್ತು ಸಂಕ್ಷೇಪಣ

ಅಂಶ	ಬಳಕೆ	ಐಚ್ಛಿಕ
`<strong>`	ಮುಖ್ಯವಾದ ಪಠ್ಯದ ತುಣುಕನ್ನು ಒತ್ತಿಹೇಳಲು	ಯಾವುದೂ
`<em>`	ಒತ್ತಡದೊಂದಿಗೆ ಪಠ್ಯದ ತುಣುಕನ್ನು ಒತ್ತಿಹೇಳಲು	ಯಾವುದೂ
`<abbr>`	ವಿಸ್ತರಿತ ಆವೃತ್ತಿಯನ್ನು ಹೋವರ್‌ನಲ್ಲಿ ತೋರಿಸಲು ಸಂಕ್ಷೇಪಣಗಳು ಮತ್ತು ಪ್ರಥಮಾಕ್ಷರಗಳನ್ನು ಸುತ್ತುತ್ತದೆ	`title`ವಿಸ್ತರಿತ ಪಠ್ಯಕ್ಕಾಗಿ ಐಚ್ಛಿಕವನ್ನು ಸೇರಿಸಿ
`<address>`	ಅದರ ಹತ್ತಿರದ ಪೂರ್ವಜರ ಅಥವಾ ಸಂಪೂರ್ಣ ಕೆಲಸದ ಸಂಪರ್ಕ ಮಾಹಿತಿಗಾಗಿ	ಎಲ್ಲಾ ಸಾಲುಗಳನ್ನು ಕೊನೆಗೊಳಿಸುವ ಮೂಲಕ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ಸಂರಕ್ಷಿಸಿ`<br>`

ಒತ್ತು ಬಳಸುವುದು

ಫ್ಯೂಸ್ ಡ್ಯಾಪಿಬಸ್ , ಟೆಲ್ಲಸ್ ಎಸಿ ಕರ್ಸಸ್ ಕಮೊಡೊ , ಟಾರ್ಟರ್ ಮೌರಿಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಿಬ್ , ಯುಟ್ ಫರ್ಮೆಂಟಮ್ ಮಸ್ಸಾ ಜಸ್ಟೊ ಸಿಟ್ ಅಮೆಟ್ ರಿಸಸ್. ಮೆಸೆನಾಸ್ ಫೌಸಿಬಸ್ ಮೊಲ್ಲಿಸ್ ಇಂಟರ್ಡಮ್. ನುಲ್ಲಾ ವಿಟೇ ಎಲಿಟ್ ಲಿಬೆರೊ, ಎ ಫಾರೆಟ್ರಾ ಆಗ್.

ಗಮನಿಸಿ: ಬಳಸಲು ಹಿಂಜರಿಯಬೇಡಿ <b>ಮತ್ತು <i>HTML5 ನಲ್ಲಿ, ಆದರೆ ಅವುಗಳ ಬಳಕೆಯು ಸ್ವಲ್ಪ ಬದಲಾಗಿದೆ. ಧ್ವನಿ, ತಾಂತ್ರಿಕ ಪದಗಳು ಇತ್ಯಾದಿಗಳಿಗೆ <b>ಹೆಚ್ಚಿನ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ನೀಡದೆಯೇ ಪದಗಳು ಅಥವಾ ಪದಗುಚ್ಛಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಉದ್ದೇಶಿಸಲಾಗಿದೆ .<i>

ಉದಾಹರಣೆ ವಿಳಾಸಗಳು

<address>ಟ್ಯಾಗ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದಕ್ಕೆ ಎರಡು ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ :

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

ಪೂರ್ಣ ಹೆಸರು
[email protected]

ಉದಾಹರಣೆ ಸಂಕ್ಷೇಪಣಗಳು

ಸಂಕ್ಷೇಪಣಗಳನ್ನು ದೊಡ್ಡಕ್ಷರ ಪಠ್ಯ ಮತ್ತು ಬೆಳಕಿನ ಚುಕ್ಕೆಗಳ ಕೆಳಭಾಗದ ಗಡಿಯೊಂದಿಗೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಅವರು ಹೋವರ್‌ನಲ್ಲಿ ಸಹಾಯ ಕರ್ಸರ್ ಅನ್ನು ಸಹ ಹೊಂದಿದ್ದಾರೆ ಆದ್ದರಿಂದ ಬಳಕೆದಾರರು ಹೋವರ್‌ನಲ್ಲಿ ಏನನ್ನಾದರೂ ತೋರಿಸುತ್ತಾರೆ ಎಂಬ ಹೆಚ್ಚುವರಿ ಸೂಚನೆಯನ್ನು ಹೊಂದಿರುತ್ತಾರೆ.

ಸ್ಲೈಸ್ಡ್ ಬ್ರೆಡ್‌ನಿಂದ HTML ಅತ್ಯುತ್ತಮ ವಿಷಯವಾಗಿದೆ.

ಗುಣಲಕ್ಷಣ ಪದದ ಸಂಕ್ಷೇಪಣವು attr ಆಗಿದೆ .

ಬ್ಲಾಕ್‌ಕೋಟ್‌ಗಳು

ಅಂಶ	ಬಳಕೆ	ಐಚ್ಛಿಕ
`<blockquote>`	ಇನ್ನೊಂದು ಮೂಲದಿಂದ ವಿಷಯವನ್ನು ಉಲ್ಲೇಖಿಸಲು ಬ್ಲಾಕ್ ಮಟ್ಟದ ಅಂಶ	`cite`ಮೂಲ URL ಗಾಗಿ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ ತೇಲುವ ಆಯ್ಕೆಗಳಿಗಾಗಿ ಬಳಕೆ `.pull-left`ಮತ್ತು ತರಗತಿಗಳು`.pull-right`
`<small>`	ಬಳಕೆದಾರ-ಮುಖಿ ಉಲ್ಲೇಖವನ್ನು ಸೇರಿಸಲು ಐಚ್ಛಿಕ ಅಂಶ, ಸಾಮಾನ್ಯವಾಗಿ ಕೃತಿಯ ಶೀರ್ಷಿಕೆಯೊಂದಿಗೆ ಲೇಖಕ	`<cite>`ಶೀರ್ಷಿಕೆ ಅಥವಾ ಮೂಲದ ಹೆಸರಿನ ಸುತ್ತಲೂ ಇರಿಸಿ

ಬ್ಲಾಕ್‌ಕೋಟ್ ಅನ್ನು ಸೇರಿಸಲು, <blockquote>ಯಾವುದೇ HTML ಅನ್ನು ಉಲ್ಲೇಖದಂತೆ ಸುತ್ತಿಕೊಳ್ಳಿ. ನೇರ ಉಲ್ಲೇಖಗಳಿಗಾಗಿ ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ a <p>.

<small>ನಿಮ್ಮ ಮೂಲವನ್ನು ಉಲ್ಲೇಖಿಸಲು ಐಚ್ಛಿಕ ಅಂಶವನ್ನು ಸೇರಿಸಿ ಮತ್ತು —ಸ್ಟೈಲಿಂಗ್ ಉದ್ದೇಶಗಳಿಗಾಗಿ ನೀವು ಮೊದಲು ಎಮ್ ಡ್ಯಾಶ್ ಅನ್ನು ಪಡೆಯುತ್ತೀರಿ.

<blockquote>
  <p> ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್. ಪೂರ್ಣಾಂಕ ಪೂರ್ವ ವೆನೆನಾಟಿಸ್ ಎರಟ್. </p>
  <small> ಯಾರೋ ಪ್ರಸಿದ್ಧರು </small>
</blockquote>

ಉದಾಹರಣೆ ಬ್ಲಾಕ್‌ಕೋಟ್‌ಗಳು

ಡೀಫಾಲ್ಟ್ ಬ್ಲಾಕ್‌ಕೋಟ್‌ಗಳನ್ನು ಈ ರೀತಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ:

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸಿಂಗ್ ಎಲಿಟ್. ಪೂರ್ಣಾಂಕ ಪೂರ್ವ ವೆನೆನಾಟಿಸ್ ಎರಟ್.
ಕೆಲಸದಲ್ಲಿ ಪ್ರಸಿದ್ಧರಾದವರು

ನಿಮ್ಮ ಬ್ಲಾಕ್ ಕೋಟ್ ಅನ್ನು ಬಲಕ್ಕೆ ತೇಲಿಸಲು, ಸೇರಿಸಿ class="pull-right":

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸಿಂಗ್ ಎಲಿಟ್. ಪೂರ್ಣಾಂಕ ಪೂರ್ವ ವೆನೆನಾಟಿಸ್ ಎರಟ್.
ಕೆಲಸದಲ್ಲಿ ಪ್ರಸಿದ್ಧರಾದವರು

ಪಟ್ಟಿಗಳು

ಆದೇಶವಿಲ್ಲ

<ul>

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್
ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್
ಪೂರ್ಣಾಂಕ ಮೊಲೆಸ್ಟಿ ಲೋರೆಮ್ ಮತ್ತು ಮಸ್ಸಾ
ಪ್ರೀಟಿಯಮ್ ನಿಸ್ಲ್ ಅಲಿಕ್ವೆಟ್‌ನಲ್ಲಿ ಸೌಲಭ್ಯ
ನುಲ್ಲ ವೊಲುಟ್ಪಟ್ ಅಲಿಕಮ್ ವೆಲಿತ್
- ಫಾಸೆಲ್ಲಸ್ ಐಕ್ಯುಲಿಸ್ ನೆಕ್ವೆ
- ಪುರುಸ್ ಸೋಡೇಲ್ಸ್ ಅಲ್ಟ್ರಿಸಿಸ್
- ವೆಸ್ಟಿಬುಲಮ್ ಲಾರೆಟ್ ಪೋರ್ಟಿಟರ್ ಸೆಮ್
- ಎಸಿ ಟ್ರಿಸ್ಟಿಕ್ ಲಿಬೆರೊ ವಾಲ್ಟ್ಪಾಟ್ ನಲ್ಲಿ
ಫೌಸಿಬಸ್ ಪೋರ್ಟಾ ಲ್ಯಾಕಸ್ ಫ್ರಿಂಗಿಲ್ಲಾ ವೆಲ್
ಈಗಿನ ಸಿಟ್ ಅಮೆಟ್ ಈಗ
ಈಗೆಟ್ ಪೋರ್ಟಿಟರ್ ಲೋರೆಮ್

ಶೈಲಿಯಿಲ್ಲದ

<ul class="unstyled">

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್
ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್
ಪೂರ್ಣಾಂಕ ಮೊಲೆಸ್ಟಿ ಲೋರೆಮ್ ಮತ್ತು ಮಸ್ಸಾ
ಪ್ರೀಟಿಯಮ್ ನಿಸ್ಲ್ ಅಲಿಕ್ವೆಟ್‌ನಲ್ಲಿ ಸೌಲಭ್ಯ
ನುಲ್ಲ ವೊಲುಟ್ಪಟ್ ಅಲಿಕಮ್ ವೆಲಿತ್
- ಫಾಸೆಲ್ಲಸ್ ಐಕ್ಯುಲಿಸ್ ನೆಕ್ವೆ
- ಪುರುಸ್ ಸೋಡೇಲ್ಸ್ ಅಲ್ಟ್ರಿಸಿಸ್
- ವೆಸ್ಟಿಬುಲಮ್ ಲಾರೆಟ್ ಪೋರ್ಟಿಟರ್ ಸೆಮ್
- ಎಸಿ ಟ್ರಿಸ್ಟಿಕ್ ಲಿಬೆರೊ ವಾಲ್ಟ್ಪಾಟ್ ನಲ್ಲಿ
ಫೌಸಿಬಸ್ ಪೋರ್ಟಾ ಲ್ಯಾಕಸ್ ಫ್ರಿಂಗಿಲ್ಲಾ ವೆಲ್
ಈಗಿನ ಸಿಟ್ ಅಮೆಟ್ ಈಗ
ಈಗೆಟ್ ಪೋರ್ಟಿಟರ್ ಲೋರೆಮ್

ಆದೇಶಿಸಿದರು

<ol>

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್
ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್
ಪೂರ್ಣಾಂಕ ಮೊಲೆಸ್ಟಿ ಲೋರೆಮ್ ಮತ್ತು ಮಸ್ಸಾ
ಪ್ರೀಟಿಯಮ್ ನಿಸ್ಲ್ ಅಲಿಕ್ವೆಟ್‌ನಲ್ಲಿ ಸೌಲಭ್ಯ
ನುಲ್ಲ ವೊಲುಟ್ಪಟ್ ಅಲಿಕಮ್ ವೆಲಿತ್
ಫೌಸಿಬಸ್ ಪೋರ್ಟಾ ಲ್ಯಾಕಸ್ ಫ್ರಿಂಗಿಲ್ಲಾ ವೆಲ್
ಈಗಿನ ಸಿಟ್ ಅಮೆಟ್ ಈಗ
ಈಗೆಟ್ ಪೋರ್ಟಿಟರ್ ಲೋರೆಮ್

ವಿವರಣೆ

<dl>

ವಿವರಣೆ ಪಟ್ಟಿಗಳು: ಪದಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ವಿವರಣೆ ಪಟ್ಟಿಯು ಪರಿಪೂರ್ಣವಾಗಿದೆ.
ಯುಯಿಸ್ಮೋಡ್: ವೆಸ್ಟಿಬುಲಮ್ ಐಡಿ ಲಿಗುಲಾ ಪೋರ್ಟಾ ಫೆಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್ ಸೆಂಪರ್ ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್.; ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್.
ಮಲೆಸುವಾದ ಪೋರ್ಟಾ: ಎಟಿಯಮ್ ಪೋರ್ಟಾ ಸೆಮ್ ಮಲೆಸುಡಾ ಮ್ಯಾಗ್ನಾ ಮೊಲ್ಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್.

ಸಾಲಿನಲ್ಲಿ

ನೊಂದಿಗೆ ಕೋಡ್‌ನ ಇನ್‌ಲೈನ್ ತುಣುಕುಗಳನ್ನು ಸುತ್ತಿ <code>.

ಉದಾಹರಣೆಗೆ , <code> ವಿಭಾಗ < / code > ಅನ್ನು ಇನ್‌ಲೈನ್‌ನಂತೆ ಸುತ್ತಿಡಬೇಕು .

ಮೂಲ ಬ್ಲಾಕ್

<pre>ಕೋಡ್‌ನ ಬಹು ಸಾಲುಗಳಿಗಾಗಿ ಬಳಸಿ . ಸರಿಯಾದ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ ಕೋಡ್‌ನಲ್ಲಿರುವ ಯಾವುದೇ ಕೋನ ಬ್ರಾಕೆಟ್‌ಗಳಿಂದ ತಪ್ಪಿಸಿಕೊಳ್ಳಲು ಮರೆಯದಿರಿ.

<p>ಮಾದರಿ ಪಠ್ಯ ಇಲ್ಲಿದೆ...</p>

<ಪೂರ್ವ>
  <p>ಮಾದರಿ ಪಠ್ಯ ಇಲ್ಲಿದೆ...</p>
</pre>

ಗಮನಿಸಿ:<pre> ಟ್ಯಾಗ್‌ಗಳಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ಎಡಕ್ಕೆ ಸಾಧ್ಯವಾದಷ್ಟು ಹತ್ತಿರ ಇರಿಸಿಕೊಳ್ಳಲು ಮರೆಯದಿರಿ ; ಇದು ಎಲ್ಲಾ ಟ್ಯಾಬ್‌ಗಳನ್ನು ನಿರೂಪಿಸುತ್ತದೆ.

.pre-scrollable350px ಗರಿಷ್ಠ ಎತ್ತರವನ್ನು ಹೊಂದಿಸುವ ಮತ್ತು y-ಆಕ್ಸಿಸ್ ಸ್ಕ್ರಾಲ್‌ಬಾರ್ ಅನ್ನು ಒದಗಿಸುವ ವರ್ಗವನ್ನು ನೀವು ಐಚ್ಛಿಕವಾಗಿ ಸೇರಿಸಬಹುದು .

Google Prettify

ಅದೇ <pre>ಅಂಶವನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ ಮತ್ತು ವರ್ಧಿತ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ ಎರಡು ಐಚ್ಛಿಕ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಿ.

<p> ಇಲ್ಲಿ ಮಾದರಿ ಪಠ್ಯ... </p>

<ಪೂರ್ವ ವರ್ಗ = "ಪ್ರಿಟಿಪ್ರಿಂಟ್ 
     ಲೈನ್ನಮ್ಗಳು" >
  <p>ಮಾದರಿ ಪಠ್ಯ ಇಲ್ಲಿದೆ...</p>
</pre>

google-code-prettify ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಹೇಗೆ ಬಳಸಬೇಕೆಂದು ರೀಡ್‌ಮೀ ಅನ್ನು ವೀಕ್ಷಿಸಿ.

ಟೇಬಲ್ ಮಾರ್ಕ್ಅಪ್

ಟ್ಯಾಗ್ ಮಾಡಿ	ವಿವರಣೆ
`<table>`	ಕೋಷ್ಟಕ ಸ್ವರೂಪದಲ್ಲಿ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಸುತ್ತುವ ಅಂಶ
`<thead>`	`<tr>`ಟೇಬಲ್ ಕಾಲಮ್‌ಗಳನ್ನು ಲೇಬಲ್ ಮಾಡಲು ಟೇಬಲ್ ಹೆಡರ್ ಸಾಲುಗಳಿಗೆ ( ) ಕಂಟೈನರ್ ಅಂಶ
`<tbody>`	`<tr>`ಟೇಬಲ್ನ ದೇಹದಲ್ಲಿ ಟೇಬಲ್ ಸಾಲುಗಳಿಗಾಗಿ ( ) ಕಂಟೈನರ್ ಅಂಶ
`<tr>`	ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಕಂಡುಬರುವ ಟೇಬಲ್ ಕೋಶಗಳ ( `<td>`ಅಥವಾ ) ಸೆಟ್‌ಗಾಗಿ ಕಂಟೈನರ್ ಅಂಶ`<th>`
`<td>`	ಡೀಫಾಲ್ಟ್ ಟೇಬಲ್ ಸೆಲ್
`<th>`	ಕಾಲಮ್‌ಗಾಗಿ ವಿಶೇಷ ಟೇಬಲ್ ಸೆಲ್ (ಅಥವಾ ಸಾಲು, ವ್ಯಾಪ್ತಿ ಮತ್ತು ನಿಯೋಜನೆಯನ್ನು ಅವಲಂಬಿಸಿ) ಲೇಬಲ್‌ಗಳನ್ನು a ಒಳಗೆ ಬಳಸಬೇಕು`<thead>`
`<caption>`	ಟೇಬಲ್ ಹೊಂದಿರುವ ವಿವರಣೆ ಅಥವಾ ಸಾರಾಂಶ, ವಿಶೇಷವಾಗಿ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಗೆ ಉಪಯುಕ್ತವಾಗಿದೆ

<ಟೇಬಲ್>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

ಟೇಬಲ್ ಆಯ್ಕೆಗಳು

ಹೆಸರು	ವರ್ಗ	ವಿವರಣೆ
ಡೀಫಾಲ್ಟ್	ಯಾವುದೂ	ಯಾವುದೇ ಶೈಲಿಗಳಿಲ್ಲ, ಕೇವಲ ಕಾಲಮ್‌ಗಳು ಮತ್ತು ಸಾಲುಗಳು
ಮೂಲಭೂತ	`.table`	ಸಾಲುಗಳ ನಡುವೆ ಅಡ್ಡ ರೇಖೆಗಳು ಮಾತ್ರ
ಗಡಿಗೆ ಹಾಕಲಾಗಿದೆ	`.table-bordered`	ಮೂಲೆಗಳನ್ನು ಸುತ್ತುತ್ತದೆ ಮತ್ತು ಹೊರಗಿನ ಗಡಿಯನ್ನು ಸೇರಿಸುತ್ತದೆ
ಜೀಬ್ರಾ-ಪಟ್ಟೆ	`.table-striped`	ಬೆಸ ಸಾಲುಗಳಿಗೆ (1, 3, 5, ಇತ್ಯಾದಿ) ತಿಳಿ ಬೂದು ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಸೇರಿಸುತ್ತದೆ
ಸಾಂದ್ರೀಕೃತ	`.table-condensed`	`td`ಎಲ್ಲಾ ಮತ್ತು `th`ಅಂಶಗಳ ಒಳಗೆ 8px ನಿಂದ 4px ವರೆಗೆ ಅರ್ಧದಷ್ಟು ಲಂಬವಾದ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಕತ್ತರಿಸುತ್ತದೆ

ಉದಾಹರಣೆ ಕೋಷ್ಟಕಗಳು

1. ಡೀಫಾಲ್ಟ್ ಟೇಬಲ್ ಶೈಲಿಗಳು

ಓದುವಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಮತ್ತು ರಚನೆಯನ್ನು ನಿರ್ವಹಿಸಲು ಕೆಲವು ಅಂಚುಗಳೊಂದಿಗೆ ಕೋಷ್ಟಕಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. 2.0 ಜೊತೆಗೆ, .tableವರ್ಗದ ಅಗತ್ಯವಿದೆ.

<ಟೇಬಲ್ ವರ್ಗ = "ಟೇಬಲ್" > 
  …
</table>

#	ಮೊದಲ ಹೆಸರು	ಕೊನೆಯ ಹೆಸರು	ಭಾಷೆ
1	ಮಾರ್ಕ್	ಒಟ್ಟೊ	CSS
2	ಜಾಕೋಬ್	ಥಾರ್ನ್ಟನ್	ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್
3	ಸ್ತು	ಡೆಂಟ್	HTML

2. ಪಟ್ಟೆ ಟೇಬಲ್

ಜೀಬ್ರಾ-ಸ್ಟ್ರೈಪಿಂಗ್ ಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಟೇಬಲ್‌ಗಳೊಂದಿಗೆ ಸ್ವಲ್ಪ ಅಲಂಕಾರಿಕ ಪಡೆಯಿರಿ-ಕೇವಲ .table-stripedವರ್ಗವನ್ನು ಸೇರಿಸಿ.

ಗಮನಿಸಿ: ಪಟ್ಟಿಯಿರುವ ಕೋಷ್ಟಕಗಳು :nth-childCSS ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸುತ್ತವೆ ಮತ್ತು IE7-IE8 ನಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲ.

<ಟೇಬಲ್ ಕ್ಲಾಸ್ = "ಟೇಬಲ್-ಸ್ಟ್ರೈಪ್ಡ್" > 
  …
</table>

#	ಮೊದಲ ಹೆಸರು	ಕೊನೆಯ ಹೆಸರು	ಭಾಷೆ
1	ಮಾರ್ಕ್	ಒಟ್ಟೊ	CSS
2	ಜಾಕೋಬ್	ಥಾರ್ನ್ಟನ್	ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್
3	ಸ್ತು	ಡೆಂಟ್	HTML

3. ಬಾರ್ಡರ್ಡ್ ಟೇಬಲ್

ಸೌಂದರ್ಯದ ಉದ್ದೇಶಗಳಿಗಾಗಿ ಸಂಪೂರ್ಣ ಟೇಬಲ್ ಮತ್ತು ದುಂಡಾದ ಮೂಲೆಗಳ ಸುತ್ತಲೂ ಗಡಿಗಳನ್ನು ಸೇರಿಸಿ.

<ಟೇಬಲ್ ವರ್ಗ = "ಟೇಬಲ್-ಬೋರ್ಡರ್ಡ್" > 
  …
</table>

#	ಮೊದಲ ಹೆಸರು	ಕೊನೆಯ ಹೆಸರು	ಭಾಷೆ
1	ಮಾರ್ಕ್ ಒಟ್ಟೊ		CSS
2	ಜಾಕೋಬ್	ಥಾರ್ನ್ಟನ್	ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್
3	ಸ್ತು	ಡೆಂಟ್	ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್
3	ಬ್ರೋಸೆಫ್	ಸ್ಟಾಲಿನ್	HTML

4. ಮಂದಗೊಳಿಸಿದ ಟೇಬಲ್

.table-condensedಟೇಬಲ್ ಸೆಲ್ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಅರ್ಧಕ್ಕೆ (8px ನಿಂದ 4px ವರೆಗೆ) ಕತ್ತರಿಸಲು ವರ್ಗವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಕೋಷ್ಟಕಗಳನ್ನು ಹೆಚ್ಚು ಕಾಂಪ್ಯಾಕ್ಟ್ ಮಾಡಿ .

<ಟೇಬಲ್ ವರ್ಗ = "ಟೇಬಲ್-ಕಂಡೆನ್ಸ್ಡ್" > 
  …
</table>

#	ಮೊದಲ ಹೆಸರು	ಕೊನೆಯ ಹೆಸರು	ಭಾಷೆ
1	ಮಾರ್ಕ್	ಒಟ್ಟೊ	CSS
2	ಜಾಕೋಬ್	ಥಾರ್ನ್ಟನ್	ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್
3	ಸ್ತು	ಡೆಂಟ್	HTML

5. ಎಲ್ಲವನ್ನೂ ಸೇರಿಸಿ!

ಲಭ್ಯವಿರುವ ಯಾವುದೇ ತರಗತಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ವಿಭಿನ್ನ ನೋಟವನ್ನು ಸಾಧಿಸಲು ಯಾವುದೇ ಟೇಬಲ್ ತರಗತಿಗಳನ್ನು ಸಂಯೋಜಿಸಲು ಹಿಂಜರಿಯಬೇಡಿ.

<ಟೇಬಲ್ ವರ್ಗ = "ಟೇಬಲ್-ಪಟ್ಟಿಯ ಟೇಬಲ್-ಬೋರ್ಡರ್ಡ್ ಟೇಬಲ್-ಕಂಡೆನ್ಸ್ಡ್" > 
  ...
</table>

#	ಮೊದಲ ಹೆಸರು	ಕೊನೆಯ ಹೆಸರು	ಭಾಷೆ
1	ಮಾರ್ಕ್	ಒಟ್ಟೊ	CSS
2	ಜಾಕೋಬ್	ಥಾರ್ನ್ಟನ್	ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್
3	ಸ್ತು	ಡೆಂಟ್	HTML
4	ಬ್ರೋಸೆಫ್	ಸ್ಟಾಲಿನ್	HTML

ಹೊಂದಿಕೊಳ್ಳುವ HTML ಮತ್ತು CSS

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿನ ಫಾರ್ಮ್‌ಗಳ ಉತ್ತಮ ಭಾಗವೆಂದರೆ ನಿಮ್ಮ ಎಲ್ಲಾ ಇನ್‌ಪುಟ್‌ಗಳು ಮತ್ತು ನಿಯಂತ್ರಣಗಳು ನಿಮ್ಮ ಮಾರ್ಕ್‌ಅಪ್‌ನಲ್ಲಿ ಅವುಗಳನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸಿದರೂ ಉತ್ತಮವಾಗಿ ಕಾಣುತ್ತವೆ. ಯಾವುದೇ ಹೆಚ್ಚುವರಿ HTML ಅಗತ್ಯವಿಲ್ಲ, ಆದರೆ ಅಗತ್ಯವಿರುವವರಿಗೆ ನಾವು ಮಾದರಿಗಳನ್ನು ಒದಗಿಸುತ್ತೇವೆ.

ಸುಲಭವಾದ ವಿನ್ಯಾಸ ಮತ್ತು ಈವೆಂಟ್ ಬೈಂಡಿಂಗ್‌ಗಾಗಿ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಲೇಔಟ್‌ಗಳು ಸಂಕ್ಷಿಪ್ತ ಮತ್ತು ಸ್ಕೇಲೆಬಲ್ ತರಗತಿಗಳೊಂದಿಗೆ ಬರುತ್ತವೆ, ಆದ್ದರಿಂದ ನೀವು ಪ್ರತಿ ಹಂತದಲ್ಲೂ ರಕ್ಷಣೆ ಪಡೆಯುತ್ತೀರಿ.

ನಾಲ್ಕು ಲೇಔಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ನಾಲ್ಕು ವಿಧದ ಫಾರ್ಮ್ ಲೇಔಟ್‌ಗಳಿಗೆ ಬೆಂಬಲದೊಂದಿಗೆ ಬರುತ್ತದೆ:

ಲಂಬ (ಡೀಫಾಲ್ಟ್)
ಹುಡುಕಿ Kannada
ಸಾಲಿನಲ್ಲಿ
ಸಮತಲ

ವಿವಿಧ ರೀತಿಯ ಫಾರ್ಮ್ ಲೇಔಟ್‌ಗಳಿಗೆ ಮಾರ್ಕ್‌ಅಪ್‌ಗೆ ಕೆಲವು ಬದಲಾವಣೆಗಳ ಅಗತ್ಯವಿರುತ್ತದೆ, ಆದರೆ ನಿಯಂತ್ರಣಗಳು ಸ್ವತಃ ಉಳಿಯುತ್ತವೆ ಮತ್ತು ಒಂದೇ ರೀತಿ ವರ್ತಿಸುತ್ತವೆ.

ನಿಯಂತ್ರಣ ಸ್ಥಿತಿಗಳು ಮತ್ತು ಇನ್ನಷ್ಟು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಫಾರ್ಮ್‌ಗಳು ಇನ್‌ಪುಟ್, ಟೆಕ್ಸ್‌ಟೇರಿಯಾ ಮತ್ತು ನೀವು ನಿರೀಕ್ಷಿಸುವ ಆಯ್ಕೆಯಂತಹ ಎಲ್ಲಾ ಮೂಲ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳಿಗೆ ಶೈಲಿಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ. ಆದರೆ ಇದು ಲಗತ್ತಿಸಲಾದ ಮತ್ತು ಪೂರ್ವಭಾವಿ ಇನ್‌ಪುಟ್‌ಗಳು ಮತ್ತು ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳ ಪಟ್ಟಿಗಳಿಗೆ ಬೆಂಬಲದಂತಹ ಹಲವಾರು ಕಸ್ಟಮ್ ಘಟಕಗಳೊಂದಿಗೆ ಬರುತ್ತದೆ.

ಪ್ರತಿಯೊಂದು ರೀತಿಯ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಕ್ಕೆ ದೋಷ, ಎಚ್ಚರಿಕೆ ಮತ್ತು ಯಶಸ್ಸಿನಂತಹ ಸ್ಥಿತಿಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ. ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾದ ನಿಯಂತ್ರಣಗಳಿಗಾಗಿ ಶೈಲಿಗಳನ್ನು ಸಹ ಸೇರಿಸಲಾಗಿದೆ.

ನಾಲ್ಕು ವಿಧದ ರೂಪಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಸಾಮಾನ್ಯ ವೆಬ್ ಫಾರ್ಮ್‌ಗಳ ನಾಲ್ಕು ಶೈಲಿಗಳಿಗೆ ಸರಳ ಮಾರ್ಕ್ಅಪ್ ಮತ್ತು ಶೈಲಿಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಹೆಸರು	ವರ್ಗ	ವಿವರಣೆ
ಲಂಬ (ಡೀಫಾಲ್ಟ್)	`.form-vertical` (ಅಗತ್ಯವಿಲ್ಲ)	ನಿಯಂತ್ರಣಗಳ ಮೇಲೆ ಜೋಡಿಸಲಾದ, ಎಡಕ್ಕೆ ಜೋಡಿಸಲಾದ ಲೇಬಲ್‌ಗಳು
ಸಾಲಿನಲ್ಲಿ	`.form-inline`	ಕಾಂಪ್ಯಾಕ್ಟ್ ಶೈಲಿಗಾಗಿ ಎಡಕ್ಕೆ ಜೋಡಿಸಲಾದ ಲೇಬಲ್ ಮತ್ತು ಇನ್‌ಲೈನ್-ಬ್ಲಾಕ್ ನಿಯಂತ್ರಣಗಳು
ಹುಡುಕಿ Kannada	`.form-search`	ವಿಶಿಷ್ಟವಾದ ಹುಡುಕಾಟ ಸೌಂದರ್ಯಕ್ಕಾಗಿ ಹೆಚ್ಚುವರಿ ದುಂಡಾದ ಪಠ್ಯ ಇನ್‌ಪುಟ್
ಸಮತಲ	`.form-horizontal`	ನಿಯಂತ್ರಣಗಳಂತೆಯೇ ಅದೇ ಸಾಲಿನಲ್ಲಿ ಎಡಕ್ಕೆ, ಬಲಕ್ಕೆ ಜೋಡಿಸಲಾದ ಲೇಬಲ್‌ಗಳನ್ನು ಫ್ಲೋಟ್ ಮಾಡಿ

ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ಬಳಸುವ ಉದಾಹರಣೆ ಫಾರ್ಮ್‌ಗಳು , ಹೆಚ್ಚುವರಿ ಮಾರ್ಕ್ಅಪ್ ಇಲ್ಲ

ಮೂಲ ರೂಪ

v2.0 ಜೊತೆಗೆ, ಫಾರ್ಮ್ ಶೈಲಿಗಳಿಗಾಗಿ ನಾವು ಹಗುರವಾದ ಮತ್ತು ಚುರುಕಾದ ಡಿಫಾಲ್ಟ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದೇವೆ. ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಮಾರ್ಕ್ಅಪ್ ಇಲ್ಲ, ಕೇವಲ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು.

<ಫಾರ್ಮ್ ವರ್ಗ = "ಚೆನ್ನಾಗಿ" > 
  <label> ಲೇಬಲ್ ಹೆಸರು </label>
  <ಇನ್‌ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ವರ್ಗ = "span3" ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ = "ಏನನ್ನಾದರೂ ಟೈಪ್ ಮಾಡಿ..." >   
  <span class = "help-inline" > ಸಂಬಂಧಿತ ಸಹಾಯ ಪಠ್ಯ! </span> 
  <ಲೇಬಲ್ ವರ್ಗ = "ಚೆಕ್‌ಬಾಕ್ಸ್" > 
    <input type = "checkbox" > ನನ್ನನ್ನು ಪರಿಶೀಲಿಸಿ 
  </label>
  <button type = "submit" class = "btn" > ಸಲ್ಲಿಸು </button>  
</form>

ಹುಡುಕಾಟ ರೂಪ

ಡೀಫಾಲ್ಟ್ ವೆಬ್‌ಕಿಟ್ ಶೈಲಿಗಳನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ .form-search, ಹೆಚ್ಚುವರಿ ದುಂಡಾದ ಹುಡುಕಾಟ ಕ್ಷೇತ್ರಗಳಿಗೆ ಸೇರಿಸಿ.

<ಫಾರ್ಮ್ ವರ್ಗ = "ಚೆನ್ನಾಗಿ ರೂಪ-ಹುಡುಕಾಟ" > 
  <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ವರ್ಗ = "ಇನ್ಪುಟ್-ಮಧ್ಯಮ ಹುಡುಕಾಟ-ಪ್ರಶ್ನೆ" >  
  <button type = "submit" class = "btn" > Search </button>  
</form>

ಇನ್ಲೈನ್ ರೂಪ

ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಪ್ರಾರಂಭಿಸಲು ಬ್ಲಾಕ್ ಮಟ್ಟವಾಗಿದೆ. .form-inlineಮತ್ತು .form-horizontal, ನಾವು ಇನ್ಲೈನ್-ಬ್ಲಾಕ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ .

<ಫಾರ್ಮ್ ವರ್ಗ = "ಚೆನ್ನಾಗಿ ಫಾರ್ಮ್-ಇನ್ಲೈನ್" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <button type = "submit" class = "btn" > Go </button>  
</form>

ಅಡ್ಡ ರೂಪಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬೆಂಬಲಗಳನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ

ಪಠ್ಯ ಇನ್ಪುಟ್

ಫ್ರೀಫಾರ್ಮ್ ಪಠ್ಯದ ಜೊತೆಗೆ, ಯಾವುದೇ HTML5 ಪಠ್ಯ-ಆಧಾರಿತ ಇನ್‌ಪುಟ್ ಹಾಗೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.

ಚೆಕ್ಬಾಕ್ಸ್

ಆಯ್ಕೆ ಒಂದು ಇದು ಮತ್ತು ಅದು-ಅದು ಏಕೆ ಅದ್ಭುತವಾಗಿದೆ ಎಂಬುದನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ

ಪಟ್ಟಿಯನ್ನು ಆಯ್ಕೆಮಾಡಿ

ಮಲ್ಟಿಕಾನ್-ಆಯ್ಕೆ

ಫೈಲ್ ಇನ್ಪುಟ್

ಟೆಕ್ಸ್ಟೇರಿಯಾ

ಉದಾಹರಣೆ ಮಾರ್ಕ್ಅಪ್

ಮೇಲಿನ ಉದಾಹರಣೆ ಫಾರ್ಮ್ ಲೇಔಟ್ ಅನ್ನು ನೀಡಿದರೆ, ಮೊದಲ ಇನ್‌ಪುಟ್ ಮತ್ತು ನಿಯಂತ್ರಣ ಗುಂಪಿನೊಂದಿಗೆ ಸಂಯೋಜಿತವಾಗಿರುವ ಮಾರ್ಕ್‌ಅಪ್ ಇಲ್ಲಿದೆ. ದಿ .control-group, .control-label, ಮತ್ತು .controlsತರಗತಿಗಳು ಸ್ಟೈಲಿಂಗ್‌ಗೆ ಅಗತ್ಯವಿದೆ.

<ಫಾರ್ಮ್ ವರ್ಗ = "ಫಾರ್ಮ್-ಅಡ್ಡ" > 
  <ಫೀಲ್ಡ್ಸೆಟ್>
    <legend> ಲೆಜೆಂಡ್ ಪಠ್ಯ </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > Text input </label>  
      <div class = "ನಿಯಂತ್ರಣಗಳು" > 
        <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ವರ್ಗ = "ಇನ್ಪುಟ್- ಎಕ್ಸ್ಲಾರ್ಜ್ " ಐಡಿ = "ಇನ್ಪುಟ್01" >   
        <p class = "help-block" > ಸಹಾಯ ಪಠ್ಯವನ್ನು ಬೆಂಬಲಿಸುವುದು </p> 
      </div>
    </div>
  </fieldset>
</form>

ಏನು ಒಳಗೊಂಡಿದೆ

ನಾವು ಬೆಂಬಲಿಸುವ ಎಲ್ಲಾ ಡೀಫಾಲ್ಟ್ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ಎಡಭಾಗದಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ. ಬುಲೆಟ್ ಪಟ್ಟಿ ಇಲ್ಲಿದೆ:

ಪಠ್ಯ ಇನ್‌ಪುಟ್‌ಗಳು (ಪಠ್ಯ, ಪಾಸ್‌ವರ್ಡ್, ಇಮೇಲ್, ಇತ್ಯಾದಿ)
ಚೆಕ್ಬಾಕ್ಸ್
ರೇಡಿಯೋ
ಆಯ್ಕೆ ಮಾಡಿ
ಬಹು ಆಯ್ಕೆ
ಫೈಲ್ ಇನ್ಪುಟ್
ಪಠ್ಯ ಪ್ರದೇಶ

v2.0 ನೊಂದಿಗೆ ಹೊಸ ಡೀಫಾಲ್ಟ್‌ಗಳು

v1.4 ವರೆಗೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಡೀಫಾಲ್ಟ್ ಫಾರ್ಮ್ ಶೈಲಿಗಳು ಸಮತಲ ವಿನ್ಯಾಸವನ್ನು ಬಳಸುತ್ತವೆ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 2 ನೊಂದಿಗೆ, ಯಾವುದೇ ಫಾರ್ಮ್‌ಗೆ ಚುರುಕಾದ, ಹೆಚ್ಚು ಸ್ಕೇಲೆಬಲ್ ಡಿಫಾಲ್ಟ್‌ಗಳನ್ನು ಹೊಂದಲು ನಾವು ಆ ನಿರ್ಬಂಧವನ್ನು ತೆಗೆದುಹಾಕಿದ್ದೇವೆ.

ಫಾರ್ಮ್ ನಿಯಂತ್ರಣ ರಾಜ್ಯಗಳು

ಕೇಂದ್ರೀಕೃತ ಇನ್ಪುಟ್

ಸಂಪಾದಿಸಲಾಗದ ಇನ್ಪುಟ್

ಇಲ್ಲಿ ಕೆಲವು ಮೌಲ್ಯ

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಇನ್ಪುಟ್

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾದ ಚೆಕ್‌ಬಾಕ್ಸ್

ಇದು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾದ ಚೆಕ್‌ಬಾಕ್ಸ್ ಆಗಿದೆ

ಎಚ್ಚರಿಕೆಯೊಂದಿಗೆ ಇನ್ಪುಟ್ ಮಾಡಿ

ಏನೋ ತಪ್ಪಾಗಿರಬಹುದು

ದೋಷದೊಂದಿಗೆ ಇನ್ಪುಟ್

ದಯವಿಟ್ಟು ದೋಷವನ್ನು ಸರಿಪಡಿಸಿ

ಯಶಸ್ಸಿನೊಂದಿಗೆ ಇನ್ಪುಟ್

ವೂಹೂ!

ಯಶಸ್ಸಿನೊಂದಿಗೆ ಆಯ್ಕೆಮಾಡಿ

ವೂಹೂ!

ಮರುವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಬ್ರೌಸರ್ ರಾಜ್ಯಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬ್ರೌಸರ್-ಬೆಂಬಲಿತ ಕೇಂದ್ರೀಕೃತ ಮತ್ತು disabledರಾಜ್ಯಗಳಿಗಾಗಿ ಶೈಲಿಗಳನ್ನು ಹೊಂದಿದೆ. ನಾವು ಡೀಫಾಲ್ಟ್ ವೆಬ್‌ಕಿಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕುತ್ತೇವೆ ಮತ್ತು ಗಾಗಿ ಅದರ ಸ್ಥಳದಲ್ಲಿ outlinea ಅನ್ನು ಅನ್ವಯಿಸುತ್ತೇವೆ .box-shadow:focus

ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣ

ಇದು ದೋಷಗಳು, ಎಚ್ಚರಿಕೆಗಳು ಮತ್ತು ಯಶಸ್ಸಿಗೆ ಮೌಲ್ಯೀಕರಣ ಶೈಲಿಗಳನ್ನು ಸಹ ಒಳಗೊಂಡಿದೆ. ಬಳಸಲು, ಸುತ್ತಮುತ್ತಲಿನ ದೋಷ ವರ್ಗವನ್ನು ಸೇರಿಸಿ .control-group.

<ಫೀಲ್ಡ್ಸೆಟ್
  ವರ್ಗ = "ನಿಯಂತ್ರಣ-ಗುಂಪು ದೋಷ" >
  …
</fieldset>

ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ವಿಸ್ತರಿಸುವುದು

ಫಾರ್ಮ್ ಗ್ರಿಡ್ ಗಾತ್ರಗಳು

.span*ಇನ್‌ಪುಟ್ ಗಾತ್ರಗಳಿಗಾಗಿ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ನಿಂದ ಅದೇ ತರಗತಿಗಳನ್ನು ಬಳಸಿ .

ಪರ್ಯಾಯ ಗಾತ್ರಗಳು

inputನೀವು ಗ್ರಿಡ್‌ಗೆ ಮ್ಯಾಪ್ ಮಾಡದ, ಸ್ಪಂದಿಸುವ CSS ಶೈಲಿಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಅಥವಾ ವಿವಿಧ ರೀತಿಯ ನಿಯಂತ್ರಣಗಳಿಗೆ (ಉದಾ, vs. select) ಖಾತೆಯನ್ನು ಹೊಂದಿರುವ ಸ್ಥಿರ ತರಗತಿಗಳನ್ನು ಸಹ ಬಳಸಬಹುದು .

ಪೂರ್ವಭಾವಿ ಪಠ್ಯ

ಕೆಲವು ಸಹಾಯ ಪಠ್ಯ ಇಲ್ಲಿದೆ

ಲಗತ್ತಿಸಲಾದ ಪಠ್ಯ

.00

ಹೆಚ್ಚಿನ ಸಹಾಯ ಪಠ್ಯ ಇಲ್ಲಿದೆ

ಇನ್‌ಲೈನ್ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು

1 2 3

ಚೆಕ್ಬಾಕ್ಸ್ಗಳು

ಆಯ್ಕೆ ಒಂದು ಇದು ಮತ್ತು ಅದು-ಅದು ಏಕೆ ಅದ್ಭುತವಾಗಿದೆ ಎಂಬುದನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ ಆಯ್ಕೆ ಎರಡನ್ನು ಸಹ ಪರಿಶೀಲಿಸಬಹುದು ಮತ್ತು ಫಾರ್ಮ್ ಫಲಿತಾಂಶಗಳಲ್ಲಿ ಸೇರಿಸಬಹುದು ಆಯ್ಕೆ ಮೂರು ಮಾಡಬಹುದು-ಹೌದು, ನೀವು ಊಹಿಸಿದಂತೆ-ಪರಿಶೀಲಿಸಬಹುದು ಮತ್ತು ಫಾರ್ಮ್ ಫಲಿತಾಂಶಗಳಲ್ಲಿ ಸೇರಿಸಬಹುದು

ಗಮನಿಸಿ: ಲೇಬಲ್‌ಗಳು ಹೆಚ್ಚು ದೊಡ್ಡ ಕ್ಲಿಕ್ ಪ್ರದೇಶಗಳಿಗೆ ಮತ್ತು ಹೆಚ್ಚು ಬಳಸಬಹುದಾದ ಫಾರ್ಮ್‌ಗಾಗಿ ಎಲ್ಲಾ ಆಯ್ಕೆಗಳನ್ನು ಸುತ್ತುವರೆದಿವೆ.

ರೇಡಿಯೋ ಗುಂಡಿಗಳು

ಆಯ್ಕೆ ಒಂದು ಇದು ಮತ್ತು ಅದು-ಅದು ಏಕೆ ಅದ್ಭುತವಾಗಿದೆ ಎಂಬುದನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ ಆಯ್ಕೆ ಎರಡು ಕ್ಯಾನ್ ಬೇರೆ ಯಾವುದೋ ಮತ್ತು ಅದನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದರಿಂದ ಆಯ್ಕೆಯ ಆಯ್ಕೆಯನ್ನು ರದ್ದುಗೊಳಿಸುತ್ತದೆ

ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಪೂರ್ವಸಿದ್ಧತೆ ಮತ್ತು ಸೇರಿಸು

ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳು-ಅನುಬಂಧಿತ ಅಥವಾ ಪೂರ್ವಭಾವಿ ಪಠ್ಯದೊಂದಿಗೆ-ನಿಮ್ಮ ಇನ್‌ಪುಟ್‌ಗಳಿಗೆ ಹೆಚ್ಚಿನ ಸಂದರ್ಭವನ್ನು ನೀಡಲು ಸುಲಭವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಉತ್ತಮ ಉದಾಹರಣೆಗಳಲ್ಲಿ Twitter ಬಳಕೆದಾರಹೆಸರುಗಳಿಗಾಗಿ @ ಚಿಹ್ನೆ ಅಥವಾ ಹಣಕಾಸುಗಾಗಿ $ ಸೇರಿವೆ.

ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಮತ್ತು ರೇಡಿಯೋಗಳು

v1.4 ವರೆಗೆ, ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಮತ್ತು ರೇಡಿಯೊಗಳನ್ನು ಜೋಡಿಸಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ಗೆ ಹೆಚ್ಚುವರಿ ಮಾರ್ಕ್‌ಅಪ್ ಅಗತ್ಯವಿದೆ. <label class="checkbox">ಈಗ, ಸುತ್ತುವದನ್ನು ಪುನರಾವರ್ತಿಸುವ ಸರಳ ವಿಷಯವಾಗಿದೆ <input type="checkbox">.

ಇನ್‌ಲೈನ್ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಮತ್ತು ರೇಡಿಯೊಗಳನ್ನು ಸಹ ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ. .inlineಯಾವುದಕ್ಕೂ ಸೇರಿಸಿ .checkboxಅಥವಾ .radioನೀವು ಮುಗಿಸಿದ್ದೀರಿ.

ಇನ್‌ಲೈನ್ ಫಾರ್ಮ್‌ಗಳು ಮತ್ತು ಲಗತ್ತಿಸಿ/ಪೂರ್ವಭಾವಿಯಾಗಿ

ಇನ್‌ಲೈನ್ ರೂಪದಲ್ಲಿ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಪೂರ್ವಭಾವಿಯಾಗಿ ಬಳಸಲು ಅಥವಾ ಸೇರಿಸಲು, ಖಾಲಿ ಇಲ್ಲದೆ ಮತ್ತು ಅದೇ ಸಾಲಿನಲ್ಲಿ ಇರಿಸಲು .add-onಮರೆಯದಿರಿ input.

ಫಾರ್ಮ್ ಸಹಾಯ ಪಠ್ಯ

ನಿಮ್ಮ ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್‌ಗಳಿಗೆ ಸಹಾಯ ಪಠ್ಯವನ್ನು ಸೇರಿಸಲು, ಇನ್‌ಲೈನ್ ಸಹಾಯ ಪಠ್ಯವನ್ನು ಸೇರಿಸಿ ಅಥವಾ ಇನ್‌ಪುಟ್ ಅಂಶದ ನಂತರ <span class="help-inline">ಸಹಾಯ ಪಠ್ಯ ಬ್ಲಾಕ್ ಅನ್ನು ಸೇರಿಸಿ.<p class="help-block">

ಬಟನ್	ವರ್ಗ	ವಿವರಣೆ
	`.btn`	ಗ್ರೇಡಿಯಂಟ್ ಹೊಂದಿರುವ ಪ್ರಮಾಣಿತ ಬೂದು ಬಟನ್
	`.btn-primary`	ಹೆಚ್ಚುವರಿ ದೃಶ್ಯ ತೂಕವನ್ನು ಒದಗಿಸುತ್ತದೆ ಮತ್ತು ಗುಂಡಿಗಳ ಗುಂಪಿನಲ್ಲಿ ಪ್ರಾಥಮಿಕ ಕ್ರಿಯೆಯನ್ನು ಗುರುತಿಸುತ್ತದೆ
	`.btn-info`	ಡೀಫಾಲ್ಟ್ ಶೈಲಿಗಳಿಗೆ ಪರ್ಯಾಯವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ
	`.btn-success`	ಯಶಸ್ವಿ ಅಥವಾ ಧನಾತ್ಮಕ ಕ್ರಿಯೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ
	`.btn-warning`	ಈ ಕ್ರಮವನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ತೆಗೆದುಕೊಳ್ಳಬೇಕು ಎಂದು ಸೂಚಿಸುತ್ತದೆ
	`.btn-danger`	ಅಪಾಯಕಾರಿ ಅಥವಾ ಸಂಭಾವ್ಯ ನಕಾರಾತ್ಮಕ ಕ್ರಿಯೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ
	`.btn-inverse`	ಪರ್ಯಾಯ ಗಾಢ ಬೂದು ಬಟನ್, ಶಬ್ದಾರ್ಥದ ಕ್ರಿಯೆ ಅಥವಾ ಬಳಕೆಗೆ ಸಂಬಂಧಿಸಿಲ್ಲ

ಕ್ರಿಯೆಗಳಿಗೆ ಗುಂಡಿಗಳು

ಸಂಪ್ರದಾಯದಂತೆ, ವಸ್ತುಗಳಿಗೆ ಹೈಪರ್‌ಲಿಂಕ್‌ಗಳನ್ನು ಬಳಸಬೇಕಾದಾಗ ಬಟನ್‌ಗಳನ್ನು ಕ್ರಿಯೆಗಳಿಗೆ ಮಾತ್ರ ಬಳಸಬೇಕು. ಉದಾಹರಣೆಗೆ, "ಡೌನ್‌ಲೋಡ್" ಬಟನ್ ಆಗಿರಬೇಕು ಆದರೆ "ಇತ್ತೀಚಿನ ಚಟುವಟಿಕೆ" ಲಿಂಕ್ ಆಗಿರಬೇಕು.

.btnಅನ್ವಯಿಸಲಾದ ವರ್ಗದೊಂದಿಗೆ ಯಾವುದಕ್ಕೂ ಬಟನ್ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು. ಆದಾಗ್ಯೂ, ಸಾಮಾನ್ಯವಾಗಿ ನೀವು ಇವುಗಳನ್ನು ಮಾತ್ರ <a>ಮತ್ತು <button>ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸಲು ಬಯಸುತ್ತೀರಿ.

ಕ್ರಾಸ್ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

IE9 ದುಂಡಾದ ಮೂಲೆಗಳಲ್ಲಿ ಹಿನ್ನೆಲೆ ಗ್ರೇಡಿಯಂಟ್‌ಗಳನ್ನು ಕ್ರಾಪ್ ಮಾಡುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ನಾವು ಅದನ್ನು ತೆಗೆದುಹಾಕುತ್ತೇವೆ. ಸಂಬಂಧಿತ, IE9 ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಅಂಶಗಳನ್ನು jankifies button, ನಾವು ಸರಿಪಡಿಸಲು ಸಾಧ್ಯವಾಗದ ಅಸಹ್ಯ ಪಠ್ಯ ನೆರಳು ಪಠ್ಯ ಬೂದು ರೆಂಡರಿಂಗ್.

ಬಹು ಗಾತ್ರಗಳು

ದೊಡ್ಡ ಅಥವಾ ಚಿಕ್ಕ ಬಟನ್‌ಗಳನ್ನು ಇಷ್ಟಪಡುತ್ತೀರಾ? .btn-large, .btn-small, ಅಥವಾ .btn-miniಎರಡು ಹೆಚ್ಚುವರಿ ಗಾತ್ರಗಳಿಗೆ ಸೇರಿಸಿ .

ಅಂಗವಿಕಲ ಸ್ಥಿತಿ

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಬಟನ್‌ಗಳಿಗಾಗಿ, .disabledಲಿಂಕ್‌ಗಳಿಗೆ ವರ್ಗ ಮತ್ತು ಅಂಶಗಳಿಗೆ disabledಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ.<button>

ಪ್ರಾಥಮಿಕ ಲಿಂಕ್ ಲಿಂಕ್

ತಲೆ ಎತ್ತಿ! .disabledಸಾಮಾನ್ಯ ವರ್ಗದಂತೆಯೇ ನಾವು ಇಲ್ಲಿ ಉಪಯುಕ್ತತೆಯ ವರ್ಗವಾಗಿ ಬಳಸುತ್ತೇವೆ .active, ಆದ್ದರಿಂದ ಯಾವುದೇ ಪೂರ್ವಪ್ರತ್ಯಯ ಅಗತ್ಯವಿಲ್ಲ.

ಒಂದು ವರ್ಗ, ಬಹು ಟ್ಯಾಗ್‌ಗಳು

, , ಅಥವಾ ಅಂಶದ .btnಮೇಲೆ ವರ್ಗವನ್ನು ಬಳಸಿ .<a><button><input>

<a class = "btn" href = "" > ಲಿಂಕ್ </a>  
<button class = "btn" type = "submit" >  
  ಬಟನ್
</button>
<ಇನ್ಪುಟ್ ವರ್ಗ = "btn" ಪ್ರಕಾರ = "ಬಟನ್"  
         ಮೌಲ್ಯ = "ಇನ್ಪುಟ್" >
<input class = "btn" type = "submit"  
         ಮೌಲ್ಯ = "ಸಲ್ಲಿಸು" >

ಉತ್ತಮ ಅಭ್ಯಾಸವಾಗಿ, ಹೊಂದಾಣಿಕೆಯ ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಸಂದರ್ಭಕ್ಕಾಗಿ ಅಂಶವನ್ನು ಹೊಂದಿಸಲು ಪ್ರಯತ್ನಿಸಿ. ನೀವು ಹೊಂದಿದ್ದರೆ , ನಿಮ್ಮ ಬಟನ್‌ಗಾಗಿ inputಒಂದು ಬಳಸಿ <input type="submit">.

ಐಕಾನ್-ಗ್ಲಾಸ್
ಐಕಾನ್-ಸಂಗೀತ
ಐಕಾನ್ ಹುಡುಕಾಟ
ಐಕಾನ್-ಹೊದಿಕೆ
ಐಕಾನ್-ಹೃದಯ
ಐಕಾನ್-ಸ್ಟಾರ್
ಐಕಾನ್-ಸ್ಟಾರ್-ಖಾಲಿ
ಐಕಾನ್-ಬಳಕೆದಾರ
ಐಕಾನ್-ಚಲನಚಿತ್ರ
ಐಕಾನ್-ನೇ-ದೊಡ್ಡದು
ಐಕಾನ್-ನೇ
ಐಕಾನ್-ನೇ-ಪಟ್ಟಿ
ಐಕಾನ್-ಸರಿ
ಐಕಾನ್-ತೆಗೆದುಹಾಕು
ಐಕಾನ್-ಝೂಮ್-ಇನ್
ಐಕಾನ್-ಝೂಮ್-ಔಟ್
ಐಕಾನ್-ಆಫ್
ಐಕಾನ್-ಸಿಗ್ನಲ್
ಐಕಾನ್-ಕಾಗ್
ಐಕಾನ್-ಕಸ
ಐಕಾನ್-ಹೋಮ್
ಐಕಾನ್-ಫೈಲ್
ಐಕಾನ್ ಸಮಯ
ಐಕಾನ್-ರಸ್ತೆ
ಐಕಾನ್-ಡೌನ್‌ಲೋಡ್-ಆಲ್ಟ್
ಐಕಾನ್-ಡೌನ್‌ಲೋಡ್
ಐಕಾನ್ ಅಪ್ಲೋಡ್
ಐಕಾನ್-ಇನ್ಬಾಕ್ಸ್
ಐಕಾನ್-ಪ್ಲೇ-ಸರ್ಕಲ್
ಐಕಾನ್-ಪುನರಾವರ್ತನೆ

ಐಕಾನ್-ರಿಫ್ರೆಶ್
ಐಕಾನ್-ಪಟ್ಟಿ-ಆಲ್ಟ್
ಐಕಾನ್-ಲಾಕ್
ಐಕಾನ್-ಧ್ವಜ
ಐಕಾನ್-ಹೆಡ್‌ಫೋನ್‌ಗಳು
ಐಕಾನ್-ವಾಲ್ಯೂಮ್-ಆಫ್
ಐಕಾನ್-ವಾಲ್ಯೂಮ್-ಡೌನ್
ಐಕಾನ್-ವಾಲ್ಯೂಮ್-ಅಪ್
ಐಕಾನ್-qrcode
ಐಕಾನ್ ಬಾರ್ಕೋಡ್
ಐಕಾನ್-ಟ್ಯಾಗ್
ಐಕಾನ್-ಟ್ಯಾಗ್ಗಳು
ಐಕಾನ್ ಪುಸ್ತಕ
ಐಕಾನ್-ಬುಕ್ಮಾರ್ಕ್
ಐಕಾನ್-ಪ್ರಿಂಟ್
ಐಕಾನ್-ಕ್ಯಾಮೆರಾ
ಐಕಾನ್-ಫಾಂಟ್
ಐಕಾನ್-ಬೋಲ್ಡ್
ಐಕಾನ್-ಇಟಾಲಿಕ್
ಐಕಾನ್-ಪಠ್ಯ-ಎತ್ತರ
ಐಕಾನ್-ಪಠ್ಯ-ಅಗಲ
ಐಕಾನ್-ಅಲೈನ್-ಎಡ
ಐಕಾನ್-ಅಲೈನ್-ಸೆಂಟರ್
ಐಕಾನ್-ಅಲೈನ್-ಬಲಕ್ಕೆ
ಐಕಾನ್-ಜೋಡಣೆ-ಸಮರ್ಥನೆ
ಐಕಾನ್-ಪಟ್ಟಿ
ಐಕಾನ್-ಇಂಡೆಂಟ್-ಎಡ
ಐಕಾನ್-ಇಂಡೆಂಟ್-ಬಲ
ಐಕಾನ್-ಫೇಸ್ಟೈಮ್-ವೀಡಿಯೊ
ಐಕಾನ್-ಚಿತ್ರ

ಐಕಾನ್-ಪೆನ್ಸಿಲ್
ಐಕಾನ್-ಮ್ಯಾಪ್-ಮಾರ್ಕರ್
ಐಕಾನ್-ಹೊಂದಾಣಿಕೆ
ಐಕಾನ್-ಟಿಂಟ್
ಐಕಾನ್-ಸಂಪಾದನೆ
ಐಕಾನ್ ಹಂಚಿಕೆ
ಐಕಾನ್-ಚೆಕ್
ಐಕಾನ್-ಚಲನೆ
ಐಕಾನ್-ಹೆಜ್ಜೆ-ಹಿಂದಕ್ಕೆ
ಐಕಾನ್-ವೇಗವಾಗಿ-ಹಿಂದುಳಿದ
ಐಕಾನ್-ಹಿಂದುಳಿದ
ಐಕಾನ್-ಪ್ಲೇ
ಐಕಾನ್-ವಿರಾಮ
ಐಕಾನ್-ಸ್ಟಾಪ್
ಐಕಾನ್-ಫಾರ್ವರ್ಡ್
ಐಕಾನ್-ಫಾಸ್ಟ್-ಫಾರ್ವರ್ಡ್
ಐಕಾನ್-ಹೆಜ್ಜೆ-ಮುಂದಕ್ಕೆ
ಐಕಾನ್-ಎಜೆಕ್ಟ್
ಐಕಾನ್-ಚೆವ್ರಾನ್-ಎಡ
ಐಕಾನ್-ಚೆವ್ರಾನ್-ಬಲ
ಐಕಾನ್-ಪ್ಲಸ್-ಚಿನ್
ಐಕಾನ್-ಮೈನಸ್-ಚಿಹ್ನೆ
ಐಕಾನ್-ತೆಗೆದುಹಾಕು-ಚಿಹ್ನೆ
ಐಕಾನ್-ಸರಿ-ಚಿಹ್ನೆ
ಐಕಾನ್-ಪ್ರಶ್ನೆ-ಚಿಹ್ನೆ
ಐಕಾನ್-ಮಾಹಿತಿ-ಚಿಹ್ನೆ
ಐಕಾನ್-ಸ್ಕ್ರೀನ್ಶಾಟ್
ಐಕಾನ್-ತೆಗೆದುಹಾಕು-ವಲಯ
ಐಕಾನ್-ಸರಿ-ವಲಯ
ಐಕಾನ್-ನಿಷೇಧ-ವಲಯ

ಐಕಾನ್-ಬಾಣ-ಎಡ
ಐಕಾನ್-ಬಾಣ-ಬಲ
ಐಕಾನ್-ಬಾಣ-ಅಪ್
ಐಕಾನ್-ಬಾಣ-ಕೆಳಗೆ
ಐಕಾನ್-ಹಂಚಿಕೆ-ಆಲ್ಟ್
ಐಕಾನ್-ಮರುಗಾತ್ರ-ಪೂರ್ಣ
ಐಕಾನ್-ಮರುಗಾತ್ರ-ಚಿಕ್ಕ
ಐಕಾನ್-ಪ್ಲಸ್
ಐಕಾನ್-ಮೈನಸ್
ಐಕಾನ್-ನಕ್ಷತ್ರ
ಐಕಾನ್-ಆಶ್ಚರ್ಯ-ಚಿಹ್ನೆ
ಐಕಾನ್-ಉಡುಗೊರೆ
ಐಕಾನ್-ಎಲೆ
ಐಕಾನ್-ಬೆಂಕಿ
ಐಕಾನ್-ಕಣ್ಣು-ತೆರೆದ
ಐಕಾನ್-ಕಣ್ಣು-ಮುಚ್ಚಿ
ಐಕಾನ್-ಎಚ್ಚರಿಕೆ-ಚಿಹ್ನೆ
ಐಕಾನ್-ಪ್ಲೇನ್
ಐಕಾನ್-ಕ್ಯಾಲೆಂಡರ್
ಐಕಾನ್-ಯಾದೃಚ್ಛಿಕ
ಐಕಾನ್-ಕಾಮೆಂಟ್
ಐಕಾನ್-ಮ್ಯಾಗ್ನೆಟ್
ಐಕಾನ್-ಚೆವ್ರಾನ್-ಅಪ್
ಐಕಾನ್-ಚೆವ್ರಾನ್-ಡೌನ್
ಐಕಾನ್-ರೀಟ್ವೀಟ್
ಐಕಾನ್-ಶಾಪಿಂಗ್-ಕಾರ್ಟ್
ಐಕಾನ್-ಫೋಲ್ಡರ್-ಮುಚ್ಚಿ
ಐಕಾನ್-ಫೋಲ್ಡರ್-ತೆರೆದ
ಐಕಾನ್-ಮರುಗಾತ್ರ-ಲಂಬ
ಐಕಾನ್-ಮರುಗಾತ್ರ-ಅಡ್ಡ

ತಲೆ ಎತ್ತಿ! ಐಕಾನ್ ತರಗತಿಗಳು CSS ಮೂಲಕ ಪ್ರತಿಧ್ವನಿಸಲ್ಪಡುತ್ತವೆ :after. ಡಾಕ್ಸ್‌ನಲ್ಲಿ, ಐಕಾನ್‌ನ ಗಾತ್ರವನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಹೋವರ್‌ನಲ್ಲಿ ನಾವು ತಿಳಿ ಕೆಂಪು ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ತೋರಿಸುತ್ತೇವೆ.

ಸ್ಪ್ರೈಟ್ ಆಗಿ ನಿರ್ಮಿಸಲಾಗಿದೆ

ಪ್ರತಿ ಐಕಾನ್ ಅನ್ನು ಹೆಚ್ಚುವರಿ ವಿನಂತಿಯನ್ನಾಗಿ ಮಾಡುವ ಬದಲು, ನಾವು ಅವುಗಳನ್ನು ಸ್ಪ್ರೈಟ್ ಆಗಿ ಕಂಪೈಲ್ ಮಾಡಿದ್ದೇವೆ - ಚಿತ್ರಗಳನ್ನು ಇರಿಸಲು CSS ಅನ್ನು ಬಳಸುವ ಒಂದು ಫೈಲ್‌ನಲ್ಲಿ ಚಿತ್ರಗಳ ಗುಂಪೇ background-position. ನಾವು Twitter.com ನಲ್ಲಿ ಬಳಸುವ ಅದೇ ವಿಧಾನವಾಗಿದೆ ಮತ್ತು ಇದು ನಮಗೆ ಚೆನ್ನಾಗಿ ಕೆಲಸ ಮಾಡಿದೆ.

.icon-ನಮ್ಮ ಇತರ ಘಟಕಗಳಂತೆ ಸರಿಯಾದ ನೇಮ್‌ಸ್ಪೇಸಿಂಗ್ ಮತ್ತು ಸ್ಕೋಪಿಂಗ್‌ಗಾಗಿ ಎಲ್ಲಾ ಐಕಾನ್‌ಗಳ ವರ್ಗಗಳನ್ನು ಪೂರ್ವಪ್ರತ್ಯಯ ಮಾಡಲಾಗಿದೆ . ಇದು ಇತರ ಸಾಧನಗಳೊಂದಿಗೆ ಘರ್ಷಣೆಯನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಡಾಕ್ಸ್‌ನಲ್ಲಿ ನಾವು ಲಿಂಕ್ ಮತ್ತು ಕ್ರೆಡಿಟ್ ಅನ್ನು ಒದಗಿಸುವವರೆಗೆ ನಮ್ಮ ಓಪನ್ ಸೋರ್ಸ್ ಟೂಲ್‌ಕಿಟ್‌ನಲ್ಲಿ ಹೊಂದಿಸಲಾದ ಹಾಫ್ಲಿಂಗ್‌ಗಳ ಬಳಕೆಯನ್ನು Glyphicons ನಮಗೆ ನೀಡಿದೆ. ನಿಮ್ಮ ಯೋಜನೆಗಳಲ್ಲಿ ಅದೇ ರೀತಿ ಮಾಡುವುದನ್ನು ದಯವಿಟ್ಟು ಪರಿಗಣಿಸಿ.

ಬಳಸುವುದು ಹೇಗೆ

v2.0.1 ನೊಂದಿಗೆ, ನಮ್ಮ ಎಲ್ಲಾ ಐಕಾನ್‌ಗಳಿಗೆ ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಲು ನಾವು ಆಯ್ಕೆ ಮಾಡಿದ್ದೇವೆ <i>, ಆದರೆ ಅವುಗಳು ಯಾವುದೇ ಕೇಸ್ ವರ್ಗವನ್ನು ಹೊಂದಿಲ್ಲ-ಹಂಚಿಕೊಂಡ ಪೂರ್ವಪ್ರತ್ಯಯ ಮಾತ್ರ. ಬಳಸಲು, ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಎಲ್ಲಿಯಾದರೂ ಇರಿಸಿ:

<i class = "icon-search" ></i>

ತಲೆಕೆಳಗಾದ (ಬಿಳಿ) ಐಕಾನ್‌ಗಳಿಗೆ ಶೈಲಿಗಳು ಲಭ್ಯವಿವೆ, ಒಂದು ಹೆಚ್ಚುವರಿ ವರ್ಗದೊಂದಿಗೆ ಸಿದ್ಧಗೊಳಿಸಲಾಗಿದೆ:

<i class = "icon-search icon-white" ></i>

ನಿಮ್ಮ ಐಕಾನ್‌ಗಳಿಗಾಗಿ ಆಯ್ಕೆ ಮಾಡಲು 120 ತರಗತಿಗಳಿವೆ. ಸರಿಯಾದ ತರಗತಿಗಳೊಂದಿಗೆ ಟ್ಯಾಗ್ ಅನ್ನು ಸೇರಿಸಿ <i>ಮತ್ತು ನೀವು ಹೊಂದಿಸಿರುವಿರಿ. ನೀವು ಪೂರ್ಣ ಪಟ್ಟಿಯನ್ನು sprites.less ನಲ್ಲಿ ಅಥವಾ ಇಲ್ಲಿಯೇ ಈ ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಕಾಣಬಹುದು.

ಪ್ರಕರಣಗಳನ್ನು ಬಳಸಿ

ಐಕಾನ್‌ಗಳು ಉತ್ತಮವಾಗಿವೆ, ಆದರೆ ಒಬ್ಬರು ಅವುಗಳನ್ನು ಎಲ್ಲಿ ಬಳಸುತ್ತಾರೆ? ಇಲ್ಲಿ ಕೆಲವು ವಿಚಾರಗಳಿವೆ:

ನಿಮ್ಮ ಸೈಡ್‌ಬಾರ್ ನ್ಯಾವಿಗೇಷನ್‌ಗಾಗಿ ದೃಶ್ಯಗಳಂತೆ
ಸಂಪೂರ್ಣವಾಗಿ ಐಕಾನ್-ಚಾಲಿತ ನ್ಯಾವಿಗೇಶನ್‌ಗಾಗಿ
ಕ್ರಿಯೆಯ ಅರ್ಥವನ್ನು ತಿಳಿಸಲು ಸಹಾಯ ಮಾಡಲು ಬಟನ್‌ಗಳಿಗಾಗಿ
ಬಳಕೆದಾರರ ಗಮ್ಯಸ್ಥಾನದಲ್ಲಿ ಸಂದರ್ಭವನ್ನು ಹಂಚಿಕೊಳ್ಳಲು ಲಿಂಕ್‌ಗಳೊಂದಿಗೆ

ಮೂಲಭೂತವಾಗಿ, ಎಲ್ಲಿಯಾದರೂ ನೀವು <i>ಟ್ಯಾಗ್ ಅನ್ನು ಹಾಕಬಹುದು, ನೀವು ಐಕಾನ್ ಅನ್ನು ಹಾಕಬಹುದು.

ಉದಾಹರಣೆಗಳು

ಟೂಲ್‌ಬಾರ್, ನ್ಯಾವಿಗೇಷನ್ ಅಥವಾ ಪೂರ್ವಭಾವಿ ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್‌ಗಳಿಗಾಗಿ ಬಟನ್‌ಗಳು, ಬಟನ್ ಗುಂಪುಗಳಲ್ಲಿ ಅವುಗಳನ್ನು ಬಳಸಿ.

ಮುದ್ರಣಕಲೆ ಶೀರ್ಷಿಕೆಗಳು, ಪ್ಯಾರಾಗಳು, ಪಟ್ಟಿಗಳು ಮತ್ತು ಇತರ ಇನ್ಲೈನ್ ​​ಪ್ರಕಾರದ ಅಂಶಗಳು