ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್

ಮೂಲ 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ವಿಸ್ತರಿತ ಪಠ್ಯಕ್ಕಾಗಿ ಐಚ್ಛಿಕ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ

.initialismದೊಡ್ಡಕ್ಷರ ಸಂಕ್ಷೇಪಣಗಳಿಗೆ ವರ್ಗವನ್ನು ಬಳಸಿ .
<address> ಅದರ ಹತ್ತಿರದ ಪೂರ್ವಜರ ಅಥವಾ ಸಂಪೂರ್ಣ ಕೆಲಸದ ಸಂಪರ್ಕ ಮಾಹಿತಿಗಾಗಿ ಎಲ್ಲಾ ಸಾಲುಗಳನ್ನು ಕೊನೆಗೊಳಿಸುವ ಮೂಲಕ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ಸಂರಕ್ಷಿಸಿ<br>

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

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

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

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

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

Twitter, Inc.
795 ಫೋಲ್ಸಮ್ ಏವ್, ಸೂಟ್ 600
ಸ್ಯಾನ್ ಫ್ರಾನ್ಸಿಸ್ಕೋ, CA 94107
P: (123) 456-7890
ಪೂರ್ಣ ಹೆಸರು
[email protected]

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

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

initialismಸ್ವಲ್ಪ ಚಿಕ್ಕ ಪಠ್ಯ ಗಾತ್ರವನ್ನು ನೀಡುವ ಮೂಲಕ ಮುದ್ರಣದ ಸಾಮರಸ್ಯವನ್ನು ಹೆಚ್ಚಿಸಲು ವರ್ಗವನ್ನು ಸಂಕ್ಷೇಪಣಕ್ಕೆ ಸೇರಿಸಿ .

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

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

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

ಅಂಶ ಬಳಕೆ ಐಚ್ಛಿಕ
<blockquote> ಇನ್ನೊಂದು ಮೂಲದಿಂದ ವಿಷಯವನ್ನು ಉಲ್ಲೇಖಿಸಲು ಬ್ಲಾಕ್ ಮಟ್ಟದ ಅಂಶ

citeಮೂಲ URL ಗಾಗಿ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ

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

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

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

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

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

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

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

ಕೆಲಸದಲ್ಲಿ ಪ್ರಸಿದ್ಧರಾದವರು

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

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

ಕೆಲಸದಲ್ಲಿ ಪ್ರಸಿದ್ಧರಾದವರು

ಪಟ್ಟಿಗಳು

ಆದೇಶವಿಲ್ಲ

<ul>

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

ಶೈಲಿಯಿಲ್ಲದ

<ul class="unstyled">

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

ಆದೇಶಿಸಿದರು

<ol>

  1. ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್
  2. ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್
  3. ಪೂರ್ಣಾಂಕ ಮೊಲೆಸ್ಟಿ ಲೋರೆಮ್ ಮತ್ತು ಮಸ್ಸಾ
  4. ಪ್ರೀಟಿಯಮ್ ನಿಸ್ಲ್ ಅಲಿಕ್ವೆಟ್‌ನಲ್ಲಿ ಸೌಲಭ್ಯ
  5. ನುಲ್ಲ ವೊಲುಟ್ಪಟ್ ಅಲಿಕಮ್ ವೆಲಿತ್
  6. ಫೌಸಿಬಸ್ ಪೋರ್ಟಾ ಲ್ಯಾಕಸ್ ಫ್ರಿಂಗಿಲ್ಲಾ ವೆಲ್
  7. ಈಗಿನ ಸಿಟ್ ಅಮೆಟ್ ಈಗ
  8. ಈಗೆಟ್ ಪೋರ್ಟಿಟರ್ ಲೋರೆಮ್

ವಿವರಣೆ

<dl>

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

ಸಮತಲ ವಿವರಣೆ

<dl class="dl-horizontal">

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

ತಲೆ ಎತ್ತಿ! ಎಡ ಕಾಲಮ್ ಫಿಕ್ಸ್‌ನಲ್ಲಿ ಹೊಂದಿಸಲು ತುಂಬಾ ಉದ್ದವಾಗಿರುವ ಪದಗಳನ್ನು ಅಡ್ಡ ವಿವರಣೆ ಪಟ್ಟಿಗಳು ಮೊಟಕುಗೊಳಿಸುತ್ತವೆ text-overflow. ಕಿರಿದಾದ ವ್ಯೂಪೋರ್ಟ್‌ಗಳಲ್ಲಿ, ಅವು ಡಿಫಾಲ್ಟ್ ಸ್ಟ್ಯಾಕ್ ಮಾಡಿದ ಲೇಔಟ್‌ಗೆ ಬದಲಾಗುತ್ತವೆ.

ಕೋಡ್ ಇನ್‌ಲೈನ್ ಮತ್ತು ಬ್ಲಾಕ್ ಕೋಡ್ ತುಣುಕುಗಳು

ಸಾಲಿನಲ್ಲಿ

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

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

ಮೂಲ ಬ್ಲಾಕ್

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

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

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

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

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

Google Prettify

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

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

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

ಟೇಬಲ್ಸ್ ಫಾರ್, ನೀವು ಊಹಿಸಿದಂತೆ, ಕೋಷ್ಟಕ ಡೇಟಾ

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

ಟ್ಯಾಗ್ ಮಾಡಿ ವಿವರಣೆ
<table> ಕೋಷ್ಟಕ ಸ್ವರೂಪದಲ್ಲಿ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಸುತ್ತುವ ಅಂಶ
<thead> <tr>ಟೇಬಲ್ ಕಾಲಮ್‌ಗಳನ್ನು ಲೇಬಲ್ ಮಾಡಲು ಟೇಬಲ್ ಹೆಡರ್ ಸಾಲುಗಳಿಗಾಗಿ ( ) ಕಂಟೈನರ್ ಅಂಶ
<tbody> <tr>ಟೇಬಲ್‌ನ ದೇಹದಲ್ಲಿ ಟೇಬಲ್ ಸಾಲುಗಳಿಗಾಗಿ ( ) ಕಂಟೈನರ್ ಅಂಶ
<tr> ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಕಂಡುಬರುವ ಟೇಬಲ್ ಕೋಶಗಳ ( <td>ಅಥವಾ ) ಗಾಗಿ ಕಂಟೈನರ್ ಅಂಶ<th>
<td> ಡೀಫಾಲ್ಟ್ ಟೇಬಲ್ ಸೆಲ್
<th> ಕಾಲಮ್‌ಗಾಗಿ ವಿಶೇಷ ಟೇಬಲ್ ಸೆಲ್ (ಅಥವಾ ಸಾಲು, ವ್ಯಾಪ್ತಿ ಮತ್ತು ನಿಯೋಜನೆಯನ್ನು ಅವಲಂಬಿಸಿ) ಲೇಬಲ್‌ಗಳನ್ನು
a ಒಳಗೆ ಬಳಸಬೇಕು<thead>
<caption> ಟೇಬಲ್ ಹೊಂದಿರುವ ವಿವರಣೆ ಅಥವಾ ಸಾರಾಂಶ, ವಿಶೇಷವಾಗಿ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಗೆ ಉಪಯುಕ್ತವಾಗಿದೆ 
  1. <ಟೇಬಲ್>
  2.   <thead>
  3.     <tr>
  4.       <th> … </th>
  5.       <th> … </th>
  6.     </tr>
  7.   </thead>
  8.   <tbody>
  9.     <tr>
  10.       <td> … </td>
  11.       <td> … </td>
  12.     </tr>
  13.   </tbody>
  14. </table>

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

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

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

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

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

  1. <ಟೇಬಲ್ ವರ್ಗ = "ಟೇಬಲ್" > 
  2.   …
  3. </table>
# ಮೊದಲ ಹೆಸರು ಕೊನೆಯ ಹೆಸರು ಬಳಕೆದಾರ ಹೆಸರು
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಪಕ್ಷಿ @twitter

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

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

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

  1. <ಟೇಬಲ್ ಕ್ಲಾಸ್ = "ಟೇಬಲ್-ಸ್ಟ್ರೈಪ್ಡ್" > 
  2.   …
  3. </table>
# ಮೊದಲ ಹೆಸರು ಕೊನೆಯ ಹೆಸರು ಬಳಕೆದಾರ ಹೆಸರು
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಪಕ್ಷಿ @twitter

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

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

  1. <ಟೇಬಲ್ ವರ್ಗ = "ಟೇಬಲ್-ಬೋರ್ಡರ್ಡ್" > 
  2.   …
  3. </table>
# ಮೊದಲ ಹೆಸರು ಕೊನೆಯ ಹೆಸರು ಬಳಕೆದಾರ ಹೆಸರು
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
ಮಾರ್ಕ್ ಒಟ್ಟೊ @Getbootstrap
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಬರ್ಡ್ @twitter

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

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

  1. <ಟೇಬಲ್ ವರ್ಗ = "ಟೇಬಲ್-ಕಂಡೆನ್ಸ್ಡ್" > 
  2.   …
  3. </table>
# ಮೊದಲ ಹೆಸರು ಕೊನೆಯ ಹೆಸರು ಬಳಕೆದಾರ ಹೆಸರು
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಬರ್ಡ್ @twitter

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

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

  1. <ಟೇಬಲ್ ವರ್ಗ = "ಟೇಬಲ್-ಪಟ್ಟಿಯ ಟೇಬಲ್-ಬೋರ್ಡರ್ಡ್ ಟೇಬಲ್-ಕಂಡೆನ್ಸ್ಡ್" > 
  2.   ...
  3. </table>
ಪೂರ್ಣ ಹೆಸರು
# ಮೊದಲ ಹೆಸರು ಕೊನೆಯ ಹೆಸರು ಬಳಕೆದಾರ ಹೆಸರು
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಬರ್ಡ್ @twitter

ರೂಪಗಳು

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ಮೂಲ ರೂಪ

ಹೆಚ್ಚುವರಿ ಮಾರ್ಕ್ಅಪ್ ಇಲ್ಲದೆ ಸ್ಮಾರ್ಟ್ ಮತ್ತು ಹಗುರವಾದ ಡೀಫಾಲ್ಟ್‌ಗಳು.

ಉದಾಹರಣೆ ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಸಹಾಯ ಪಠ್ಯ ಇಲ್ಲಿದೆ.

  1. <ಫಾರ್ಮ್ ವರ್ಗ = "ಚೆನ್ನಾಗಿ" > 
  2.   <label> ಲೇಬಲ್ ಹೆಸರು </label>
  3.   <ಇನ್‌ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ವರ್ಗ = "span3" ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ = "ಏನನ್ನಾದರೂ ಟೈಪ್ ಮಾಡಿ..." >   
  4.   <span class = "help-block" > ಉದಾಹರಣೆ ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಸಹಾಯ ಪಠ್ಯ ಇಲ್ಲಿದೆ. </span> 
  5.   <ಲೇಬಲ್ ವರ್ಗ = "ಚೆಕ್‌ಬಾಕ್ಸ್" > 
  6.     <input type = "checkbox" > ನನ್ನನ್ನು ಪರಿಶೀಲಿಸಿ 
  7.   </label>
  8.   <button type = "submit" class = "btn" > ಸಲ್ಲಿಸು </button>  
  9. </form>

ಹುಡುಕಾಟ ರೂಪ

.form-searchಫಾರ್ಮ್ ಮತ್ತು .search-queryಗೆ ಸೇರಿಸಿ input.

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

ಇನ್ಲೈನ್ ​​ರೂಪ

.form-inlineಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳ ಲಂಬ ಜೋಡಣೆ ಮತ್ತು ಅಂತರವನ್ನು ಸೂಕ್ಷ್ಮತೆಗೆ ಸೇರಿಸಿ .

  1. <ಫಾರ್ಮ್ ವರ್ಗ = "ಚೆನ್ನಾಗಿ ಫಾರ್ಮ್-ಇನ್ಲೈನ್" > 
  2.   <input type = "text" class = "input-small" placeholder = "Email" >   
  3.   <input type = "password" class = "input-small" placeholder = "Password" >   
  4.   <ಲೇಬಲ್ ವರ್ಗ = "ಚೆಕ್‌ಬಾಕ್ಸ್" > 
  5.     <ಇನ್‌ಪುಟ್ ಪ್ರಕಾರ = "ಚೆಕ್‌ಬಾಕ್ಸ್" > ನನ್ನನ್ನು ನೆನಪಿಡಿ 
  6.   </label>
  7.   <button type = "submit" class = "btn" > ಸೈನ್ ಇನ್ </button>  
  8. </form>

ಅಡ್ಡ ರೂಪಗಳು

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

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

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

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

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

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

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

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

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

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

  1. <ಫೀಲ್ಡ್ಸೆಟ್
  2.   ವರ್ಗ = "ನಿಯಂತ್ರಣ-ಗುಂಪು ದೋಷ" >
  3.   …
  4. </fieldset>
ಇಲ್ಲಿ ಕೆಲವು ಮೌಲ್ಯ
ಏನೋ ತಪ್ಪಾಗಿರಬಹುದು
ದಯವಿಟ್ಟು ದೋಷವನ್ನು ಸರಿಪಡಿಸಿ
ವೂಹೂ!
ವೂಹೂ!

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

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

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

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

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

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

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

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

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

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

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

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

@

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

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

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

ಗುಂಡಿಗಳು

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

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

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

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

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

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

ಬಹು ಗಾತ್ರಗಳು

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


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

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

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

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

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

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

ಲಿಂಕ್ 
  1. <a class = "btn" href = "" > ಲಿಂಕ್ </a>  
  2. <button class = "btn" type = "submit" >  
  3.   ಬಟನ್
  4. </button>
  5. <ಇನ್ಪುಟ್ ವರ್ಗ = "btn" ಪ್ರಕಾರ = "ಬಟನ್"  
  6.          ಮೌಲ್ಯ = "ಇನ್ಪುಟ್" >
  7. <ಇನ್ಪುಟ್ ವರ್ಗ = "btn" ಪ್ರಕಾರ = "ಸಲ್ಲಿಸು"  
  8.          ಮೌಲ್ಯ = "ಸಲ್ಲಿಸು" >

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

ಗ್ಲಿಫಿಕಾನ್‌ಗಳು ಕೃಪೆಯಿಂದ ಒದಗಿಸಿದ ಐಕಾನ್‌ಗಳು

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

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

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

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

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

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

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

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

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

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

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

ತಲೆ ಎತ್ತಿ! ಬಟನ್‌ಗಳು ಅಥವಾ NAV ಲಿಂಕ್‌ಗಳಂತೆ ಪಠ್ಯದ ತಂತಿಗಳ ಪಕ್ಕದಲ್ಲಿ ಬಳಸುವಾಗ, <i>ಸರಿಯಾದ ಅಂತರಕ್ಕಾಗಿ ಟ್ಯಾಗ್‌ನ ನಂತರ ಜಾಗವನ್ನು ಬಿಡಲು ಮರೆಯದಿರಿ.

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

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

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

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

ಉದಾಹರಣೆಗಳು

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

ಬಳಕೆದಾರ

ರಿಫ್ರೆಶ್ ಮಾಡಿ ಚೆಕ್ಔಟ್ ಅಳಿಸಿ

ಕಾಮೆಂಟ್ ಮಾಡಿ ಸಂಯೋಜನೆಗಳು ಹೆಚ್ಚಿನ ಮಾಹಿತಿ