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

ಮೂಲ CSS

ಮೂಲಭೂತ HTML ಅಂಶಗಳು ಶೈಲಿಯ ಮತ್ತು ವಿಸ್ತರಿಸಬಹುದಾದ ತರಗತಿಗಳೊಂದಿಗೆ ವರ್ಧಿಸಲಾಗಿದೆ.

ಮುದ್ರಣಕಲೆ

ಶೀರ್ಷಿಕೆಗಳು

ಎಲ್ಲಾ HTML ಶೀರ್ಷಿಕೆಗಳು <h1>ಲಭ್ಯವಿವೆ <h6>.

h1. ಶಿರೋನಾಮೆ 1

h2. ಶಿರೋನಾಮೆ 2

h3. ಶಿರೋನಾಮೆ 3

h4. ಶಿರೋನಾಮೆ 4

h5. ಶಿರೋನಾಮೆ 5
h6. ಶಿರೋನಾಮೆ 6

ದೇಹದ ನಕಲು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಜಾಗತಿಕ ಡೀಫಾಲ್ಟ್ 20px ಜೊತೆಗೆ 14pxfont-size ಆಗಿದೆ . ಮತ್ತು ಎಲ್ಲಾ ಪ್ಯಾರಾಗಳಿಗೆ ಇದನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ . ಹೆಚ್ಚುವರಿಯಾಗಿ, (ಪ್ಯಾರಾಗ್ರಾಫ್‌ಗಳು) ತಮ್ಮ ಸಾಲಿನ ಎತ್ತರದ ಅರ್ಧದಷ್ಟು ಕೆಳಭಾಗದ ಅಂಚನ್ನು ಪಡೆಯುತ್ತವೆ (ಡೀಫಾಲ್ಟ್ ಆಗಿ 10px).line-height<body><p>

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

ಕಮ್ ಸೊಸೈಸ್ ನ್ಯಾಟೋಕ್ ಪೆನಾಟಿಬಸ್ ಮತ್ತು ಮ್ಯಾಗ್ನಿಸ್ ಡಿಸ್ ಪಾರ್ಚುರಿಯೆಂಟ್ ಮಾಂಟೆಸ್, ನಾಸ್ಸೆಟರ್ ರಿಡಿಕ್ಯುಲಸ್ ಮಸ್. ಡೊನೆಕ್ ಉಲ್ಲಮ್ಕಾರ್ಪರ್ ನಲ್ ನಾನ್ ಮೆಟಸ್ ಆಕ್ಟರ್ ಫ್ರಿಂಗಿಲ್ಲಾ. ಡುಯಿಸ್ ಮೊಲ್ಲಿಸ್, ಈಸ್ಟ್ ನಾನ್ ಕಮೊಡೊ ಲಕ್ಟಸ್, ನಿಸಿ ಎರಟ್ ಪೋರ್ಟಿಟರ್ ಲಿಗುಲಾ, ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್. ಡೊನೆಕ್ ಉಲ್ಲಮ್ಕಾರ್ಪರ್ ನಲ್ ನಾನ್ ಮೆಟಸ್ ಆಕ್ಟರ್ ಫ್ರಿಂಗಿಲ್ಲಾ.

ಮೆಸೆನಾಸ್ ಸೆಡ್ ಡೈಮ್ ಎಗೆಟ್ ರಿಸಸ್ ವೇರಿಯಸ್ ಬ್ಲಾಂಡಿಟ್ ಸಿಟ್ ಅಮೆಟ್ ನಾನ್ ಮ್ಯಾಗ್ನಾ. ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್. ಡುಯಿಸ್ ಮೊಲ್ಲಿಸ್, ಈಸ್ಟ್ ನಾನ್ ಕಮೊಡೊ ಲಕ್ಟಸ್, ನಿಸಿ ಎರಟ್ ಪೋರ್ಟಿಟರ್ ಲಿಗುಲಾ, ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್.

<p> ... </p>

ಲೀಡ್ ದೇಹದ ನಕಲು

ಸೇರಿಸುವ ಮೂಲಕ ಪ್ಯಾರಾಗ್ರಾಫ್ ಎದ್ದು ಕಾಣುವಂತೆ ಮಾಡಿ .lead.

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

<p class = "lead" > ... </p>

ಕಡಿಮೆಯಿಂದ ನಿರ್ಮಿಸಲಾಗಿದೆ

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

ಒತ್ತು

ಹಗುರವಾದ ಶೈಲಿಗಳೊಂದಿಗೆ HTML ನ ಡೀಫಾಲ್ಟ್ ಒತ್ತು ಟ್ಯಾಗ್‌ಗಳನ್ನು ಬಳಸಿ.

<small>

ಇನ್‌ಲೈನ್ ಅಥವಾ ಪಠ್ಯದ ಬ್ಲಾಕ್‌ಗಳನ್ನು ಒತ್ತಿಹೇಳಲು , ಸಣ್ಣ ಟ್ಯಾಗ್ ಬಳಸಿ.

ಪಠ್ಯದ ಈ ಸಾಲನ್ನು ಉತ್ತಮ ಮುದ್ರಣ ಎಂದು ಪರಿಗಣಿಸಲು ಉದ್ದೇಶಿಸಲಾಗಿದೆ.

<p> <small> ಪಠ್ಯದ ಈ ಸಾಲನ್ನು ಫೈನ್ ಪ್ರಿಂಟ್ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. </small> </p>

ದಪ್ಪ

ಭಾರೀ ಫಾಂಟ್-ತೂಕದೊಂದಿಗೆ ಪಠ್ಯದ ತುಣುಕನ್ನು ಒತ್ತಿಹೇಳಲು.

ಕೆಳಗಿನ ಪಠ್ಯದ ತುಣುಕನ್ನು ದಪ್ಪ ಪಠ್ಯವಾಗಿ ನಿರೂಪಿಸಲಾಗಿದೆ .

<strong> ದಪ್ಪ ಪಠ್ಯವಾಗಿ ನಿರೂಪಿಸಲಾಗಿದೆ </strong>

ಇಟಾಲಿಕ್ಸ್

ಇಟಾಲಿಕ್ಸ್‌ನೊಂದಿಗೆ ಪಠ್ಯದ ತುಣುಕನ್ನು ಒತ್ತಿಹೇಳಲು.

ಕೆಳಗಿನ ಪಠ್ಯದ ತುಣುಕನ್ನು ಇಟಾಲಿಕ್ ಪಠ್ಯವಾಗಿ ನಿರೂಪಿಸಲಾಗಿದೆ .

<em> ಇಟಾಲಿಕ್ ಪಠ್ಯವಾಗಿ ನಿರೂಪಿಸಲಾಗಿದೆ </em>

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

ಜೋಡಣೆ ತರಗತಿಗಳು

ಪಠ್ಯ ಜೋಡಣೆ ತರಗತಿಗಳೊಂದಿಗೆ ಘಟಕಗಳಿಗೆ ಪಠ್ಯವನ್ನು ಸುಲಭವಾಗಿ ಮರುಹೊಂದಿಸಿ.

ಎಡಕ್ಕೆ ಜೋಡಿಸಲಾದ ಪಠ್ಯ.

ಪಠ್ಯವನ್ನು ಮಧ್ಯಕ್ಕೆ ಜೋಡಿಸಲಾಗಿದೆ.

ಬಲಕ್ಕೆ ಜೋಡಿಸಲಾದ ಪಠ್ಯ.

  1. <p class = "text-left" > ಎಡಕ್ಕೆ ಜೋಡಿಸಲಾದ ಪಠ್ಯ. </p> 
  2. <p class = "text-center" > ಮಧ್ಯಕ್ಕೆ ಜೋಡಿಸಲಾದ ಪಠ್ಯ. </p> 
  3. <p class = "text-right" > ಬಲಕ್ಕೆ ಜೋಡಿಸಲಾದ ಪಠ್ಯ. </p>

ಒತ್ತು ತರಗತಿಗಳು

ಬೆರಳೆಣಿಕೆಯಷ್ಟು ಒತ್ತು ನೀಡುವ ಉಪಯುಕ್ತತೆಯ ತರಗತಿಗಳೊಂದಿಗೆ ಬಣ್ಣದ ಮೂಲಕ ಅರ್ಥವನ್ನು ತಿಳಿಸಿ.

ಫ್ಯೂಸ್ ಡ್ಯಾಪಿಬಸ್, ಟೆಲ್ಲಸ್ ಎಸಿ ಕರ್ಸಸ್ ಕಮೊಡೊ, ಟಾರ್ಟರ್ ಮಾರಿಸ್ ನಿಭ್.

ಎಟಿಯಮ್ ಪೋರ್ಟಾ ಸೆಮ್ ಮಲೆಸುಡಾ ಮ್ಯಾಗ್ನಾ ಮೊಲ್ಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್.

ಡೊನೆಕ್ ಉಲ್ಲಮ್ಕಾರ್ಪರ್ ನಲ್ ನಾನ್ ಮೆಟಸ್ ಆಕ್ಟರ್ ಫ್ರಿಂಗಿಲ್ಲಾ.

ಏನಿಯನ್ ಇಯು ಲಿಯೋ ಕ್ವಾಮ್. ಪೆಲ್ಲೆಂಟೆಸ್ಕ್ ಆರ್ನಾರೆ ಸೆಮ್ ಲ್ಯಾಸಿನಿಯಾ ಕ್ವಾಮ್ ವೆನೆನಾಟಿಸ್.

ಡುಯಿಸ್ ಮೊಲ್ಲಿಸ್, ನಾನ್ ಕಮೊಡೊ ಲಕ್ಟಸ್, ನಿಸಿ ಎರಟ್ ಪೋರ್ಟಿಟರ್ ಲಿಗುಲಾ.

  1. <p class = "ಮ್ಯೂಟ್" > ಫ್ಯೂಸ್ ಡಪಿಬಸ್, ಟೆಲ್ಲಸ್ ಎಸಿ ಕರ್ಸಸ್ ಕಮೊಡೊ, ಟಾರ್ಟರ್ ಮಾರಿಸ್ ನಿಬ್. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada Magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metu auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. ಪೆಲ್ಲೆಂಟೆಸ್ಕ್ ಆರ್ನಾರೆ ಸೆಮ್ ಲ್ಯಾಸಿನಿಯಾ ಕ್ವಾಮ್ ವೆನೆನಾಟಿಸ್. </p> 
  5. <p class = "ಪಠ್ಯ-ಯಶಸ್ಸು" > ಡುಯಿಸ್ ಮೊಲ್ಲಿಸ್, ನಾನ್ ಕಮೊಡೊ ಲಕ್ಟಸ್, ನಿಸಿ ಎರಟ್ ಪೋರ್ಟ್ಟಿಟರ್ ಲಿಗುಲಾ. </p>

ಸಂಕ್ಷೇಪಣಗಳು

<abbr>ವಿಸ್ತರಿತ ಆವೃತ್ತಿಯನ್ನು ಹೋವರ್‌ನಲ್ಲಿ ತೋರಿಸಲು ಸಂಕ್ಷೇಪಣಗಳು ಮತ್ತು ಪ್ರಥಮಾಕ್ಷರಗಳಿಗಾಗಿ HTML ನ ಅಂಶದ ಶೈಲೀಕೃತ ಅನುಷ್ಠಾನ . ಗುಣಲಕ್ಷಣದೊಂದಿಗಿನ ಸಂಕ್ಷೇಪಣಗಳು titleಹಗುರವಾದ ಚುಕ್ಕೆಗಳ ಕೆಳಭಾಗದ ಅಂಚು ಮತ್ತು ಹೋವರ್‌ನಲ್ಲಿ ಸಹಾಯ ಕರ್ಸರ್ ಅನ್ನು ಹೊಂದಿರುತ್ತವೆ, ಇದು ಹೋವರ್‌ನಲ್ಲಿ ಹೆಚ್ಚುವರಿ ಸಂದರ್ಭವನ್ನು ಒದಗಿಸುತ್ತದೆ.

<abbr>

ಸಂಕ್ಷೇಪಣದ ದೀರ್ಘ ಹೋವರ್‌ನಲ್ಲಿ ವಿಸ್ತರಿಸಿದ ಪಠ್ಯಕ್ಕಾಗಿ, titleಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ.

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

<abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

.initialismಸ್ವಲ್ಪ ಚಿಕ್ಕದಾದ ಫಾಂಟ್-ಗಾತ್ರಕ್ಕೆ ಸಂಕ್ಷೇಪಣವನ್ನು ಸೇರಿಸಿ .

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

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

ವಿಳಾಸಗಳು

ಹತ್ತಿರದ ಪೂರ್ವಜರಿಗೆ ಅಥವಾ ಸಂಪೂರ್ಣ ಕೆಲಸದ ದೇಹಕ್ಕೆ ಸಂಪರ್ಕ ಮಾಹಿತಿಯನ್ನು ಪ್ರಸ್ತುತಪಡಿಸಿ.

<address>

ಎಲ್ಲಾ ಸಾಲುಗಳನ್ನು ಕೊನೆಗೊಳಿಸುವ ಮೂಲಕ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ಸಂರಕ್ಷಿಸಿ <br>.

Twitter, Inc.
795 ಫೋಲ್ಸಮ್ ಏವ್, ಸೂಟ್ 600
ಸ್ಯಾನ್ ಫ್ರಾನ್ಸಿಸ್ಕೋ, CA 94107
P: (123) 456-7890
ಪೂರ್ಣ ಹೆಸರು
[email protected] 
  1. <ವಿಳಾಸ>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 ಫೋಲ್ಸಮ್ ಏವ್, ಸೂಟ್ 600 <br>
  4.   ಸ್ಯಾನ್ ಫ್ರಾನ್ಸಿಸ್ಕೋ, CA 94107 <br>
  5.   <abbr title = "ಫೋನ್" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <ವಿಳಾಸ>
  9.   <strong> ಪೂರ್ಣ ಹೆಸರು </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </address>

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

ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಮತ್ತೊಂದು ಮೂಲದಿಂದ ವಿಷಯದ ಬ್ಲಾಕ್‌ಗಳನ್ನು ಉಲ್ಲೇಖಿಸಲು.

ಡೀಫಾಲ್ಟ್ ಬ್ಲಾಕ್ ಕೋಟ್

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

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

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

ಬ್ಲಾಕ್ ಕೋಟ್ ಆಯ್ಕೆಗಳು

ಪ್ರಮಾಣಿತ ಬ್ಲಾಕ್‌ಕೋಟ್‌ನಲ್ಲಿ ಸರಳ ಬದಲಾವಣೆಗಳಿಗಾಗಿ ಶೈಲಿ ಮತ್ತು ವಿಷಯ ಬದಲಾವಣೆಗಳು.

ಮೂಲವನ್ನು ಹೆಸರಿಸುವುದು

<small>ಮೂಲವನ್ನು ಗುರುತಿಸಲು ಟ್ಯಾಗ್ ಸೇರಿಸಿ . ಮೂಲ ಕೆಲಸದ ಹೆಸರನ್ನು ಸುತ್ತಿ <cite>.

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

ಮೂಲ ಶೀರ್ಷಿಕೆಯಲ್ಲಿ ಯಾರೋ ಪ್ರಸಿದ್ಧರು 
  1. <blockquote>
  2.   <p> ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್. ಪೂರ್ಣಸಂಖ್ಯೆಯು ಹಿಂದಿನದು. </p>
  3.   <small> ಯಾರೋ ಪ್ರಸಿದ್ಧರು <cite title = "ಮೂಲ ಶೀರ್ಷಿಕೆ" > ಮೂಲ ಶೀರ್ಷಿಕೆ </cite></small> 
  4. </blockquote>

ಪರ್ಯಾಯ ಪ್ರದರ್ಶನಗಳು

.pull-rightತೇಲುವ, ಬಲಕ್ಕೆ ಜೋಡಿಸಲಾದ ಬ್ಲಾಕ್‌ಕೋಟ್‌ಗಾಗಿ ಬಳಸಿ .

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

ಮೂಲ ಶೀರ್ಷಿಕೆಯಲ್ಲಿ ಯಾರೋ ಪ್ರಸಿದ್ಧರು 
  1. <blockquote class = "pul-right" > 
  2.   ...
  3. </blockquote>

ಪಟ್ಟಿಗಳು

ಆದೇಶವಿಲ್ಲ

ಆದೇಶವು ಸ್ಪಷ್ಟವಾಗಿ ವಿಷಯವಲ್ಲದ ಐಟಂಗಳ ಪಟ್ಟಿ .

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

ಆದೇಶಿಸಿದರು

ಆದೇಶವು ಸ್ಪಷ್ಟವಾಗಿ ಮುಖ್ಯವಾದ ಐಟಂಗಳ ಪಟ್ಟಿ .

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

ಶೈಲಿಯಿಲ್ಲದ

ಪಟ್ಟಿ ಐಟಂಗಳಲ್ಲಿ ಡೀಫಾಲ್ಟ್ list-styleಮತ್ತು ಎಡ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ತೆಗೆದುಹಾಕಿ (ತಕ್ಷಣದ ಮಕ್ಕಳಿಗೆ ಮಾತ್ರ).

  • ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್
  • ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್
  • ಪೂರ್ಣಾಂಕ ಮೊಲೆಸ್ಟಿ ಲೋರೆಮ್ ಮತ್ತು ಮಸ್ಸಾ
  • ಪ್ರೀಟಿಯಮ್ ನಿಸ್ಲ್ ಅಲಿಕ್ವೆಟ್‌ನಲ್ಲಿ ಸೌಲಭ್ಯ
  • ನುಲ್ಲ ವೊಲುಟ್ಪಟ್ ಅಲಿಕಮ್ ವೆಲಿತ್
    • ಫಾಸೆಲ್ಲಸ್ ಐಕ್ಯುಲಿಸ್ ನೆಕ್ವೆ
    • ಪುರುಸ್ ಸೋಡೇಲ್ಸ್ ಅಲ್ಟ್ರಿಸಿಸ್
    • ವೆಸ್ಟಿಬುಲಮ್ ಲಾರೆಟ್ ಪೋರ್ಟಿಟರ್ ಸೆಮ್
    • ಎಸಿ ಟ್ರಿಸ್ಟಿಕ್ ಲಿಬೆರೊ ವಾಲ್ಟ್ಪಾಟ್ ನಲ್ಲಿ
  • ಫೌಸಿಬಸ್ ಪೋರ್ಟಾ ಲ್ಯಾಕಸ್ ಫ್ರಿಂಗಿಲ್ಲಾ ವೆಲ್
  • ಈಗಿನ ಸಿಟ್ ಅಮೆಟ್ ಈಗ
  • ಈಗೆಟ್ ಪೋರ್ಟಿಟರ್ ಲೋರೆಮ್
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

ಸಾಲಿನಲ್ಲಿ

ಎಲ್ಲಾ ಪಟ್ಟಿ ಐಟಂಗಳನ್ನು ಒಂದೇ ಸಾಲಿನಲ್ಲಿ inline-blockಮತ್ತು ಕೆಲವು ಲೈಟ್ ಪ್ಯಾಡಿಂಗ್‌ನಲ್ಲಿ ಇರಿಸಿ.

  • ಲೋರೆಮ್ ಇಪ್ಸಮ್
  • ಫಾಸೆಲ್ಲಸ್ ಐಕ್ಯುಲಿಸ್
  • ನುಲ್ಲಾ ವೋಲ್ಟ್ಪಟ್
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

ವಿವರಣೆ

ಅವುಗಳ ಸಂಬಂಧಿತ ವಿವರಣೆಗಳೊಂದಿಗೆ ಪದಗಳ ಪಟ್ಟಿ.

ವಿವರಣೆ ಪಟ್ಟಿಗಳು
ಪದಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ವಿವರಣೆ ಪಟ್ಟಿಯು ಪರಿಪೂರ್ಣವಾಗಿದೆ.
ಯುಯಿಸ್ಮೋಡ್
ವೆಸ್ಟಿಬುಲಮ್ ಐಡಿ ಲಿಗುಲಾ ಪೋರ್ಟಾ ಫೆಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್ ಸೆಂಪರ್ ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್.
ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್.
ಮಲೆಸುವಾದ ಪೋರ್ಟಾ
ಎಟಿಯಮ್ ಪೋರ್ಟಾ ಸೆಮ್ ಮಲೆಸುಡಾ ಮ್ಯಾಗ್ನಾ ಮೊಲ್ಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

ಸಮತಲ ವಿವರಣೆ

ನಿಯಮಗಳು ಮತ್ತು ವಿವರಣೆಗಳನ್ನು <dl>ಅಕ್ಕಪಕ್ಕದಲ್ಲಿ ಸಾಲಿನಲ್ಲಿ ಮಾಡಿ.

ವಿವರಣೆ ಪಟ್ಟಿಗಳು
ಪದಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ವಿವರಣೆ ಪಟ್ಟಿಯು ಪರಿಪೂರ್ಣವಾಗಿದೆ.
ಯುಯಿಸ್ಮೋಡ್
ವೆಸ್ಟಿಬುಲಮ್ ಐಡಿ ಲಿಗುಲಾ ಪೋರ್ಟಾ ಫೆಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್ ಸೆಂಪರ್ ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್.
ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್.
ಮಲೆಸುವಾದ ಪೋರ್ಟಾ
ಎಟಿಯಮ್ ಪೋರ್ಟಾ ಸೆಮ್ ಮಲೆಸುಡಾ ಮ್ಯಾಗ್ನಾ ಮೊಲ್ಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್.
ಫೆಲಿಸ್ ಯುಯಿಸ್ಮಾಡ್ ಸೆಂಪರ್ ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ
ಫ್ಯೂಸ್ ಡ್ಯಾಪಿಬಸ್, ಟೆಲ್ಲಸ್ ಎಸಿ ಕರ್ಸಸ್ ಕಮೊಡೊ, ಟಾರ್ಟರ್ ಮಾರಿಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಿಬ್, ಯುಟ್ ಫರ್ಮೆಂಟಮ್ ಮಸ್ಸಾ ಜಸ್ಟೊ ಸಿಟ್ ಅಮೆಟ್ ರಿಸಸ್. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

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

ಕೋಡ್

ಸಾಲಿನಲ್ಲಿ

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

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

ಮೂಲ ಬ್ಲಾಕ್

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

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

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

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

ಕೋಷ್ಟಕಗಳು

ಡೀಫಾಲ್ಟ್ ಶೈಲಿಗಳು

.tableಮೂಲಭೂತ ವಿನ್ಯಾಸಕ್ಕಾಗಿ-ಲೈಟ್ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಕೇವಲ ಸಮತಲ ವಿಭಾಜಕಗಳು- ಯಾವುದಾದರೂ ಮೂಲ ವರ್ಗವನ್ನು ಸೇರಿಸಿ <table>.

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

ಐಚ್ಛಿಕ ತರಗತಿಗಳು

ಕೆಳಗಿನ ಯಾವುದೇ ವರ್ಗಗಳನ್ನು .tableಮೂಲ ವರ್ಗಕ್ಕೆ ಸೇರಿಸಿ.

.table-striped

<tbody>CSS ಸೆಲೆಕ್ಟರ್ ಮೂಲಕ ಯಾವುದೇ ಟೇಬಲ್ ಸಾಲಿಗೆ ಜೀಬ್ರಾ-ಸ್ಟ್ರೈಪಿಂಗ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ :nth-child(IE7-8 ನಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲ).

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

.table-bordered

ಟೇಬಲ್‌ಗೆ ಗಡಿಗಳು ಮತ್ತು ದುಂಡಾದ ಮೂಲೆಗಳನ್ನು ಸೇರಿಸಿ.

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

.table-hover

ಒಂದು ಒಳಗೆ ಟೇಬಲ್ ಸಾಲುಗಳಲ್ಲಿ ಹೋವರ್ ಸ್ಥಿತಿಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ <tbody>.

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

.table-condensed

ಸೆಲ್ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಅರ್ಧದಷ್ಟು ಕತ್ತರಿಸುವ ಮೂಲಕ ಕೋಷ್ಟಕಗಳನ್ನು ಹೆಚ್ಚು ಸಾಂದ್ರಗೊಳಿಸುತ್ತದೆ.

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

ಐಚ್ಛಿಕ ಸಾಲು ತರಗತಿಗಳು

ಟೇಬಲ್ ಸಾಲುಗಳನ್ನು ಬಣ್ಣ ಮಾಡಲು ಸಂದರ್ಭೋಚಿತ ತರಗತಿಗಳನ್ನು ಬಳಸಿ.

ವರ್ಗ ವಿವರಣೆ
.success ಯಶಸ್ವಿ ಅಥವಾ ಧನಾತ್ಮಕ ಕ್ರಿಯೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ.
.error ಅಪಾಯಕಾರಿ ಅಥವಾ ಸಂಭಾವ್ಯ ನಕಾರಾತ್ಮಕ ಕ್ರಿಯೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ.
.warning ಗಮನ ಅಗತ್ಯವಿರುವ ಎಚ್ಚರಿಕೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ.
.info ಡೀಫಾಲ್ಟ್ ಶೈಲಿಗಳಿಗೆ ಪರ್ಯಾಯವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ.
# ಉತ್ಪನ್ನ ಪಾವತಿ ತೆಗೆದುಕೊಳ್ಳಲಾಗಿದೆ ಸ್ಥಿತಿ
1 ಟಿಬಿ - ಮಾಸಿಕ 01/04/2012 ಅನುಮೋದಿಸಲಾಗಿದೆ
2 ಟಿಬಿ - ಮಾಸಿಕ 02/04/2012 ನಿರಾಕರಿಸಲಾಗಿದೆ
3 ಟಿಬಿ - ಮಾಸಿಕ 03/04/2012 ಬಾಕಿಯಿದೆ
4 ಟಿಬಿ - ಮಾಸಿಕ 04/04/2012 ದೃಢೀಕರಿಸಲು ಕರೆ ಮಾಡಿ 
  1. ...
  2.   < tr class = "ಯಶಸ್ಸು" >
  3.     <td> 1 < /td>
  4.     <td>ಟಿಬಿ - ಮಾಸಿಕ</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>ಅನುಮೋದಿಸಲಾಗಿದೆ</ td >
  7.   </ tr >
  8. ...

ಬೆಂಬಲಿತ ಟೇಬಲ್ ಮಾರ್ಕ್ಅಪ್

ಬೆಂಬಲಿತ ಟೇಬಲ್ HTML ಅಂಶಗಳ ಪಟ್ಟಿ ಮತ್ತು ಅವುಗಳನ್ನು ಹೇಗೆ ಬಳಸಬೇಕು.

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

ರೂಪಗಳು

ಡೀಫಾಲ್ಟ್ ಶೈಲಿಗಳು

ವೈಯಕ್ತಿಕ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತವೆ, ಆದರೆ ಯಾವುದೇ ಅಗತ್ಯವಿರುವ ಬೇಸ್ ಕ್ಲಾಸ್ <form>ಅಥವಾ ಮಾರ್ಕ್ಅಪ್ನಲ್ಲಿ ದೊಡ್ಡ ಬದಲಾವಣೆಗಳಿಲ್ಲದೆ. ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಜೋಡಿಸಲಾದ, ಎಡಕ್ಕೆ ಜೋಡಿಸಲಾದ ಲೇಬಲ್‌ಗಳಲ್ಲಿ ಫಲಿತಾಂಶಗಳು.

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

ಸಮತಲ ರೂಪ

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

  • .form-horizontalಫಾರ್ಮ್ಗೆ ಸೇರಿಸಿ
  • ಲೇಬಲ್‌ಗಳು ಮತ್ತು ನಿಯಂತ್ರಣಗಳನ್ನು ಸುತ್ತಿ.control-group
  • .control-labelಲೇಬಲ್ಗೆ ಸೇರಿಸಿ
  • .controlsಸರಿಯಾದ ಜೋಡಣೆಗಾಗಿ ಯಾವುದೇ ಸಂಬಂಧಿತ ನಿಯಂತ್ರಣಗಳನ್ನು ಸುತ್ತಿಕೊಳ್ಳಿ
  1. <ಫಾರ್ಮ್ ವರ್ಗ = "ಫಾರ್ಮ್-ಅಡ್ಡ" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > ಇಮೇಲ್ </label>  
  4.     <div class = "ನಿಯಂತ್ರಣಗಳು" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" for = "inputPassword" > Password </label>  
  10.     <div class = "ನಿಯಂತ್ರಣಗಳು" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div class = "ನಿಯಂತ್ರಣಗಳು" > 
  16.       <ಲೇಬಲ್ ವರ್ಗ = "ಚೆಕ್‌ಬಾಕ್ಸ್" > 
  17.         <ಇನ್‌ಪುಟ್ ಪ್ರಕಾರ = "ಚೆಕ್‌ಬಾಕ್ಸ್" > ನನ್ನನ್ನು ನೆನಪಿಡಿ 
  18.       </label>
  19.       <button type = "submit" class = "btn" > ಸೈನ್ ಇನ್ </button>  
  20.     </div>
  21.   </div>
  22. </form>

ಬೆಂಬಲಿತ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು

ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳ ಉದಾಹರಣೆಗಳು ಉದಾಹರಣೆ ಫಾರ್ಮ್ ಲೇಔಟ್‌ನಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿದೆ.

ಒಳಹರಿವು

ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣ, ಪಠ್ಯ-ಆಧಾರಿತ ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರಗಳು. ಎಲ್ಲಾ HTML5 ಪ್ರಕಾರಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಒಳಗೊಂಡಿದೆ: ಪಠ್ಯ, ಪಾಸ್‌ವರ್ಡ್, ದಿನಾಂಕ ಸಮಯ, ದಿನಾಂಕ-ಸ್ಥಳೀಯ, ದಿನಾಂಕ, ತಿಂಗಳು, ಸಮಯ, ವಾರ, ಸಂಖ್ಯೆ, ಇಮೇಲ್, url, ಹುಡುಕಾಟ, ಟೆಲ್ ಮತ್ತು ಬಣ್ಣ.

typeಎಲ್ಲಾ ಸಮಯದಲ್ಲೂ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಬಳಕೆಯ ಅಗತ್ಯವಿದೆ .

  1. <ಇನ್‌ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ = "ಪಠ್ಯ ಇನ್‌ಪುಟ್" >

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

ಪಠ್ಯದ ಬಹು ಸಾಲುಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣ. rowsಅಗತ್ಯವಿರುವಂತೆ ಗುಣಲಕ್ಷಣವನ್ನು ಬದಲಾಯಿಸಿ .

  1. <textarea row = "3" ></textarea>

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

ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಪಟ್ಟಿಯಲ್ಲಿರುವ ಒಂದು ಅಥವಾ ಹಲವಾರು ಆಯ್ಕೆಗಳನ್ನು ಆಯ್ಕೆಮಾಡಲು, ರೇಡಿಯೋಗಳು ಅನೇಕದಿಂದ ಒಂದು ಆಯ್ಕೆಯನ್ನು ಆರಿಸಲು.

ಡೀಫಾಲ್ಟ್ (ಸ್ಟ್ಯಾಕ್ ಮಾಡಲಾಗಿದೆ)


  1. <ಲೇಬಲ್ ವರ್ಗ = "ಚೆಕ್‌ಬಾಕ್ಸ್" > 
  2.   <ಇನ್‌ಪುಟ್ ಪ್ರಕಾರ = "ಚೆಕ್‌ಬಾಕ್ಸ್" ಮೌಲ್ಯ = "" >  
  3.   ಆಯ್ಕೆ ಒಂದು ಇದು ಮತ್ತು ಅದು-ಅದು ಏಕೆ ಅದ್ಭುತವಾಗಿದೆ ಎಂಬುದನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ
  4. </label>
  5.  
  6. <ಲೇಬಲ್ ವರ್ಗ = "ರೇಡಿಯೋ" > 
  7.   <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ರೇಡಿಯೋ" ಹೆಸರು = "ಆಯ್ಕೆಗಳು ರೇಡಿಯೋಸ್" ಐಡಿ = "ಆಯ್ಕೆಗಳು ರೇಡಿಯೋಸ್1" ಮೌಲ್ಯ = "ಆಯ್ಕೆ 1" ಪರಿಶೀಲಿಸಲಾಗಿದೆ >     
  8.   ಆಯ್ಕೆ ಒಂದು ಇದು ಮತ್ತು ಅದು-ಅದು ಏಕೆ ಅದ್ಭುತವಾಗಿದೆ ಎಂಬುದನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ
  9. </label>
  10. <ಲೇಬಲ್ ವರ್ಗ = "ರೇಡಿಯೋ" > 
  11.   <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ರೇಡಿಯೋ" ಹೆಸರು = "ಆಯ್ಕೆಗಳು ರೇಡಿಯೋಸ್" ಐಡಿ = "ಆಯ್ಕೆಗಳು ರೇಡಿಯೋಸ್2" ಮೌಲ್ಯ = "ಆಯ್ಕೆ2" >    
  12.   ಆಯ್ಕೆ ಎರಡು ಯಾವುದೋ ಆಗಿರಬಹುದು ಮತ್ತು ಅದನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದರಿಂದ ಆಯ್ಕೆಯ ಆಯ್ಕೆಯನ್ನು ರದ್ದುಗೊಳಿಸುತ್ತದೆ
  13. </label>

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

.inlineನಿಯಂತ್ರಣಗಳು ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳಲು ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಅಥವಾ ರೇಡಿಯೊಗಳ ಸರಣಿಗೆ ವರ್ಗವನ್ನು ಸೇರಿಸಿ .

  1. <ಲೇಬಲ್ ವರ್ಗ = "ಚೆಕ್‌ಬಾಕ್ಸ್ ಇನ್‌ಲೈನ್" > 
  2.   <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಚೆಕ್ಬಾಕ್ಸ್" ಐಡಿ = "ಇನ್ಲೈನ್ಚೆಕ್ಬಾಕ್ಸ್1" ಮೌಲ್ಯ = "ಆಯ್ಕೆ 1" > 1   
  3. </label>
  4. <ಲೇಬಲ್ ವರ್ಗ = "ಚೆಕ್‌ಬಾಕ್ಸ್ ಇನ್‌ಲೈನ್" > 
  5.   <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಚೆಕ್ಬಾಕ್ಸ್" ಐಡಿ = "ಇನ್ಲೈನ್ಚೆಕ್ಬಾಕ್ಸ್2" ಮೌಲ್ಯ = "ಆಯ್ಕೆ2" > 2   
  6. </label>
  7. <ಲೇಬಲ್ ವರ್ಗ = "ಚೆಕ್‌ಬಾಕ್ಸ್ ಇನ್‌ಲೈನ್" > 
  8.   <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಚೆಕ್ಬಾಕ್ಸ್" ಐಡಿ = "ಇನ್ಲೈನ್ಚೆಕ್ಬಾಕ್ಸ್3" ಮೌಲ್ಯ = "ಆಯ್ಕೆ3" > 3   
  9. </label>

ಆಯ್ಕೆಮಾಡುತ್ತದೆ

ಡೀಫಾಲ್ಟ್ ಆಯ್ಕೆಯನ್ನು ಬಳಸಿ ಅಥವಾ multiple="multiple"ಏಕಕಾಲದಲ್ಲಿ ಬಹು ಆಯ್ಕೆಗಳನ್ನು ತೋರಿಸಲು a ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ.


  1. <ಆಯ್ಕೆ>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </select>
  8.  
  9. <ಆಯ್ಕೆ ಬಹು = "ಬಹು" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </select>

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

ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಬ್ರೌಸರ್ ನಿಯಂತ್ರಣಗಳ ಮೇಲೆ ಸೇರಿಸುವುದರಿಂದ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಇತರ ಉಪಯುಕ್ತ ಫಾರ್ಮ್ ಘಟಕಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

ಪೂರ್ವಭಾವಿ ಮತ್ತು ಲಗತ್ತಿಸಲಾದ ಒಳಹರಿವು

ಯಾವುದೇ ಪಠ್ಯ ಆಧಾರಿತ ಇನ್‌ಪುಟ್ ಮೊದಲು ಅಥವಾ ನಂತರ ಪಠ್ಯ ಅಥವಾ ಬಟನ್‌ಗಳನ್ನು ಸೇರಿಸಿ. selectಅಂಶಗಳನ್ನು ಇಲ್ಲಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ .

ಡೀಫಾಲ್ಟ್ ಆಯ್ಕೆಗಳು

ಇನ್‌ಪುಟ್‌ಗೆ ಪಠ್ಯವನ್ನು ಪೂರ್ವಭಾವಿಯಾಗಿ ಅಥವಾ ಸೇರಿಸಲು ಎರಡು ತರಗತಿಗಳಲ್ಲಿ ಒಂದನ್ನು ಸುತ್ತಿ .add-on.input

@

.00 
  1. <div ವರ್ಗ =  "input-prepend" >
  2.   <span class = "add-on" > @  </span>
  3.   <ಇನ್‌ಪುಟ್ ವರ್ಗ = "span2" id = "prependedInput" ಪ್ರಕಾರ = "ಪಠ್ಯ" ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ =     "Username" >
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "add-on" > .00  </span>
  8. </div>

ಸಂಯೋಜಿತ

.add-onಇನ್‌ಪುಟ್ ಅನ್ನು ಪೂರ್ವಭಾವಿಯಾಗಿ ಮತ್ತು ಸೇರಿಸಲು ಎರಡೂ ತರಗತಿಗಳು ಮತ್ತು ಎರಡು ನಿದರ್ಶನಗಳನ್ನು ಬಳಸಿ .

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span class = "add-on" > .00  </span>
  5. </div>

ಪಠ್ಯದ ಬದಲಿಗೆ ಬಟನ್‌ಗಳು

<span>ಪಠ್ಯದೊಂದಿಗೆ a ಬದಲಿಗೆ, .btnಇನ್‌ಪುಟ್‌ಗೆ ಬಟನ್ ಅನ್ನು (ಅಥವಾ ಎರಡು) ಲಗತ್ತಿಸಲು a ಅನ್ನು ಬಳಸಿ.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " ಪ್ರಕಾರ = "ಪಠ್ಯ" >   
  3.   <button class = "btn" type = "button" > ಹೋಗಿ! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Search </button>  
  4.   <button class = "btn" type = "button" > ಆಯ್ಕೆಗಳು </button>  
  5. </div>

ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       ಕ್ರಿಯೆ
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "dropdown-menu" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       ಕ್ರಿಯೆ
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       ಕ್ರಿಯೆ
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " ಪ್ರಕಾರ = "ಪಠ್ಯ" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       ಕ್ರಿಯೆ
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "dropdown-menu" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

ವಿಭಜಿತ ಡ್ರಾಪ್‌ಡೌನ್ ಗುಂಪುಗಳು

  1. <ಫಾರ್ಮ್>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

ಹುಡುಕಾಟ ರೂಪ

  1. <ಫಾರ್ಮ್ ವರ್ಗ = "ಫಾರ್ಮ್-ಹುಡುಕಾಟ" > 
  2.   <div class = "input-append" > 
  3.     <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ವರ್ಗ = "span2 ಹುಡುಕಾಟ-ಪ್ರಶ್ನೆ" >  
  4.     <button type = "submit" class = "btn" > Search </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Search </button>  
  8.     <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ವರ್ಗ = "span2 ಹುಡುಕಾಟ-ಪ್ರಶ್ನೆ" >  
  9.   </div>
  10. </form>

ಗಾತ್ರವನ್ನು ನಿಯಂತ್ರಿಸಿ

ಸಾಪೇಕ್ಷ ಗಾತ್ರದ ತರಗತಿಗಳನ್ನು ಬಳಸಿ .input-largeಅಥವಾ ತರಗತಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಗ್ರಿಡ್ ಕಾಲಮ್ ಗಾತ್ರಗಳಿಗೆ ನಿಮ್ಮ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು .span*ಹೊಂದಿಸಿ.

ಬ್ಲಾಕ್ ಮಟ್ಟದ ಒಳಹರಿವು

ಯಾವುದೇ <input>ಅಥವಾ <textarea>ಅಂಶವು ಬ್ಲಾಕ್ ಮಟ್ಟದ ಅಂಶದಂತೆ ವರ್ತಿಸುವಂತೆ ಮಾಡಿ.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

ಸಾಪೇಕ್ಷ ಗಾತ್ರ

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

ತಲೆ ಎತ್ತಿ!ಮುಂದಿನ ಆವೃತ್ತಿಗಳಲ್ಲಿ, ನಮ್ಮ ಬಟನ್ ಗಾತ್ರಗಳನ್ನು ಹೊಂದಿಸಲು ಈ ಸಂಬಂಧಿತ ಇನ್‌ಪುಟ್ ತರಗತಿಗಳ ಬಳಕೆಯನ್ನು ನಾವು ಬದಲಾಯಿಸುತ್ತೇವೆ. ಉದಾಹರಣೆಗೆ, .input-largeಇನ್‌ಪುಟ್‌ನ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

ಗ್ರಿಡ್ ಗಾತ್ರ

ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳ ಒಂದೇ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುವ ಇನ್‌ಪುಟ್‌ಗಳಿಗಾಗಿ ಬಳಸಿ .span1..span12

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <ಆಯ್ಕೆ ವರ್ಗ = "span1" > 
  5.   ...
  6. </select>
  7. <ಆಯ್ಕೆ ವರ್ಗ = "span2" > 
  8.   ...
  9. </select>
  10. <ಆಯ್ಕೆ ವರ್ಗ = "span3" > 
  11.   ...
  12. </select>

ಪ್ರತಿ ಸಾಲಿಗೆ ಬಹು ಗ್ರಿಡ್ ಇನ್‌ಪುಟ್‌ಗಳಿಗಾಗಿ , ಸರಿಯಾದ ಅಂತರಕ್ಕಾಗಿ ಮಾರ್ಪಡಿಸುವ ವರ್ಗವನ್ನು ಬಳಸಿ.controls-row . ಇದು ವೈಟ್-ಸ್ಪೇಸ್ ಅನ್ನು ಕುಸಿಯಲು ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ತೇಲುತ್ತದೆ, ಸರಿಯಾದ ಅಂಚುಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ ಮತ್ತು ಫ್ಲೋಟ್ ಅನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ.

  1. <div class = "ನಿಯಂತ್ರಣಗಳು" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "ನಿಯಂತ್ರಣಗಳು-ಸಾಲು" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

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

ನಿಜವಾದ ಫಾರ್ಮ್ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಬಳಸದೆಯೇ ಸಂಪಾದಿಸಲು ಸಾಧ್ಯವಾಗದ ರೂಪದಲ್ಲಿ ಡೇಟಾವನ್ನು ಪ್ರಸ್ತುತಪಡಿಸಿ.

ಇಲ್ಲಿ ಕೆಲವು ಮೌಲ್ಯ 
  1. <span class = "input-xlarge uneditable-input" > ಇಲ್ಲಿ ಕೆಲವು ಮೌಲ್ಯ </span>

ಫಾರ್ಮ್ ಕ್ರಿಯೆಗಳು

ಕ್ರಿಯೆಗಳ ಗುಂಪಿನೊಂದಿಗೆ ಫಾರ್ಮ್ ಅನ್ನು ಕೊನೆಗೊಳಿಸಿ (ಬಟನ್‌ಗಳು). ಒಂದು ಒಳಗೆ ಇರಿಸಿದಾಗ .form-actions, ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳೊಂದಿಗೆ ಸಾಲಿನಲ್ಲಿರಲು ಬಟನ್‌ಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಇಂಡೆಂಟ್ ಆಗುತ್ತವೆ.

  1. <div ವರ್ಗ = "ಫಾರ್ಮ್-ಕ್ರಿಯೆಗಳು" > 
  2.   <button type = "submit" class = "btn btn-primary" > ಬದಲಾವಣೆಗಳನ್ನು ಉಳಿಸಿ </button>  
  3.   <button type = "button" class = "btn" > ರದ್ದುಮಾಡು </button>  
  4. </div>

ಸಹಾಯ ಪಠ್ಯ

ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳ ಸುತ್ತ ಕಾಣಿಸಿಕೊಳ್ಳುವ ಸಹಾಯ ಪಠ್ಯಕ್ಕಾಗಿ ಇನ್‌ಲೈನ್ ಮತ್ತು ಬ್ಲಾಕ್ ಮಟ್ಟದ ಬೆಂಬಲ.

ಇನ್‌ಲೈನ್ ಸಹಾಯ

ಇನ್‌ಲೈನ್ ಸಹಾಯ ಪಠ್ಯ 
  1. <input type = "text" ><span class = "help-inline" > ಇನ್‌ಲೈನ್ ಸಹಾಯ ಪಠ್ಯ </span>

ಸಹಾಯವನ್ನು ನಿರ್ಬಂಧಿಸಿ

ಹೊಸ ಸಾಲಿನ ಮೇಲೆ ಒಡೆಯುವ ಮತ್ತು ಒಂದು ಸಾಲಿನ ಆಚೆಗೆ ವಿಸ್ತರಿಸಬಹುದಾದ ಸಹಾಯ ಪಠ್ಯದ ದೀರ್ಘ ಬ್ಲಾಕ್. 
  1. <ಇನ್‌ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ><span class = "help-block" > ಸಹಾಯ ಪಠ್ಯದ ಉದ್ದನೆಯ ಬ್ಲಾಕ್ ಹೊಸ ಸಾಲಿಗೆ ಒಡೆಯುತ್ತದೆ ಮತ್ತು ಒಂದು ಸಾಲನ್ನು ಮೀರಿ ವಿಸ್ತರಿಸಬಹುದು. </span>

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

ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಲೇಬಲ್‌ಗಳ ಕುರಿತು ಮೂಲ ಪ್ರತಿಕ್ರಿಯೆ ಸ್ಥ���ತಿಗಳೊಂದಿಗೆ ಬಳಕೆದಾರರು ಅಥವಾ ಸಂದರ್ಶಕರಿಗೆ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸಿ.

ಇನ್ಪುಟ್ ಫೋಕಸ್

outlineನಾವು ಕೆಲವು ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಶೈಲಿಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತೇವೆ ಮತ್ತು box-shadowಗಾಗಿ ಅದರ ಸ್ಥಳದಲ್ಲಿ a ಅನ್ನು ಅನ್ವಯಿಸುತ್ತೇವೆ :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "ಇದು ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ..." >

ಅಮಾನ್ಯ ಇನ್‌ಪುಟ್‌ಗಳು

ಜೊತೆಗೆ ಡೀಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ಕಾರ್ಯನಿರ್ವಹಣೆಯ ಮೂಲಕ ಶೈಲಿ ಇನ್‌ಪುಟ್‌ಗಳು :invalid. a ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ , ಕ್ಷೇತ್ರವು ಐಚ್ಛಿಕವಾಗಿಲ್ಲದಿದ್ದರೆ ಗುಣಲಕ್ಷಣವನ್ನು typeಸೇರಿಸಿ required, ಮತ್ತು (ಅನ್ವಯಿಸಿದರೆ) a ಅನ್ನು ಸೂಚಿಸಿ pattern.

CSS ಸ್ಯೂಡೋ ಸೆಲೆಕ್ಟರ್‌ಗಳಿಗೆ ಬೆಂಬಲದ ಕೊರತೆಯಿಂದಾಗಿ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 7-9 ಆವೃತ್ತಿಗಳಲ್ಲಿ ಇದು ಲಭ್ಯವಿಲ್ಲ.

  1. <input class = "span3" type = "email" ಅಗತ್ಯವಿದೆ >

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

disabledಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅನ್ನು ತಡೆಯಲು ಮತ್ತು ಸ್ವಲ್ಪ ವಿಭಿನ್ನ ನೋಟವನ್ನು ಪ್ರಚೋದಿಸಲು ಇನ್‌ಪುಟ್‌ನಲ್ಲಿ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ .

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "ಇಲ್ಲಿ ಇನ್‌ಪುಟ್ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ..." ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ >

ಮಾನ್ಯತೆ ಹೇಳುತ್ತದೆ

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

ಏನೋ ತಪ್ಪಾಗಿರಬಹುದು
ದಯವಿಟ್ಟು ದೋಷವನ್ನು ಸರಿಪಡಿಸಿ
ಬಳಕೆದಾರ ಹೆಸರು ತೆಗೆದುಕೊಳ್ಳಲಾಗಿದೆ
ವೂಹೂ! 
  1. <div class = "ನಿಯಂತ್ರಣ-ಗುಂಪು ಎಚ್ಚರಿಕೆ" > 
  2.   <label class = "control-label" for = "inputWarning" > ಎಚ್ಚರಿಕೆಯೊಂದಿಗೆ ಇನ್‌ಪುಟ್ </label>  
  3.   <div class = "ನಿಯಂತ್ರಣಗಳು" > 
  4.     <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ಐಡಿ = "ಇನ್ಪುಟ್ ವಾರ್ನಿಂಗ್" >  
  5.     <span class = "help-inline" > ಏನೋ ತಪ್ಪಾಗಿರಬಹುದು </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "ನಿಯಂತ್ರಣ-ಗುಂಪು ದೋಷ" > 
  10.   <label class = "control-label" for = "inputError" > ದೋಷದೊಂದಿಗೆ ಇನ್‌ಪುಟ್ </label>  
  11.   <div class = "ನಿಯಂತ್ರಣಗಳು" > 
  12.     <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ಐಡಿ = "ಇನ್ಪುಟ್ ಎರರ್" >  
  13.     <span class = "help-inline" > ದಯವಿಟ್ಟು ದೋಷವನ್ನು ಸರಿಪಡಿಸಿ </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "ನಿಯಂತ್ರಣ-ಗುಂಪು ಮಾಹಿತಿ" > 
  18.   <label class = "control-label" for = "inputInfo" > ಮಾಹಿತಿಯೊಂದಿಗೆ ಇನ್‌ಪುಟ್ </label>  
  19.   <div class = "ನಿಯಂತ್ರಣಗಳು" > 
  20.     <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ಐಡಿ = "ಇನ್ಪುಟ್ಇನ್ಫೋ" >  
  21.     <span class = "help-inline" > ಬಳಕೆದಾರ ಹೆಸರನ್ನು ಈಗಾಗಲೇ ತೆಗೆದುಕೊಳ್ಳಲಾಗಿದೆ </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "ನಿಯಂತ್ರಣ-ಗುಂಪಿನ ಯಶಸ್ಸು" > 
  26.   <label class = "control-label" for = "inputSuccess" > ಯಶಸ್ಸಿನೊಂದಿಗೆ ಇನ್‌ಪುಟ್ </label>  
  27.   <div class = "ನಿಯಂತ್ರಣಗಳು" > 
  28.     <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ಐಡಿ = "ಇನ್ಪುಟ್ ಸಕ್ಸಸ್" >  
  29.     <span class = "help-inline" > ವೂಹೂ! </span> 
  30.   </div>
  31. </div>

ಗುಂಡಿಗಳು

ಡೀಫಾಲ್ಟ್ ಬಟನ್‌ಗಳು

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

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

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

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

ಬಟನ್ ಗಾತ್ರಗಳು

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

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > ದೊಡ್ಡ ಬಟನ್ </button>  
  3.   <button class = "btn btn-large" type = "button" > ದೊಡ್ಡ ಬಟನ್ </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > ಡೀಫಾಲ್ಟ್ ಬಟನ್ </button>  
  7.   <button class = "btn" type = "button" > ಡೀಫಾಲ್ಟ್ ಬಟನ್ </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > ಸಣ್ಣ ಬಟನ್ </button>  
  11.   <button class = "btn btn-small" type = "button" > ಸಣ್ಣ ಬಟನ್ </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini button </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini button </button>  
  16. </p>

ಸೇರಿಸುವ ಮೂಲಕ-ಪೋಷಕರ ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ವ್ಯಾಪಿಸಿರುವ ಬ್ಲಾಕ್ ಮಟ್ಟದ ಬಟನ್‌ಗಳನ್ನು ರಚಿಸಿ .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > ಬ್ಲಾಕ್ ಮಟ್ಟದ ಬಟನ್ </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > ಬ್ಲಾಕ್ ಮಟ್ಟದ ಬಟನ್ </button>

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

ಬಟನ್‌ಗಳನ್ನು 50% ಹಿಂದಕ್ಕೆ ಮಸುಕಾಗಿಸುವ ಮೂಲಕ ಕ್ಲಿಕ್ ಮಾಡದಂತೆ ಕಾಣುವಂತೆ ಮಾಡಿ.

ಆಂಕರ್ ಅಂಶ

ಬಟನ್‌ಗಳಿಗೆ .disabledವರ್ಗವನ್ನು ಸೇರಿಸಿ .<a>

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

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > ಪ್ರಾಥಮಿಕ ಲಿಂಕ್ </a>  
  2. <a href = "#" class = "btn btn-large disabled" > ಲಿಂಕ್ </a>

ತಲೆ ಎತ್ತಿ!.disabledಸಾಮಾನ್ಯ ವರ್ಗದಂತೆಯೇ ನಾವು ಇಲ್ಲಿ ಉಪಯುಕ್ತತೆಯ ವರ್ಗವಾಗಿ ಬಳಸುತ್ತೇವೆ .active, ಆದ್ದರಿಂದ ಯಾವುದೇ ಪೂರ್ವಪ್ರತ್ಯಯ ಅಗತ್ಯವಿಲ್ಲ. ಅಲ್ಲದೆ, ಈ ವರ್ಗವು ಸೌಂದರ್ಯಕ್ಕಾಗಿ ಮಾತ್ರ; ಇಲ್ಲಿ ಲಿಂಕ್‌ಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ನೀವು ಕಸ್ಟಮ್ JavaScript ಅನ್ನು ಬಳಸಬೇಕು.

ಬಟನ್ ಅಂಶ

ಬಟನ್‌ಗಳಿಗೆ disabledಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ .<button>

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > ಪ್ರಾಥಮಿಕ ಬಟನ್ </button>   
  2. <button type = "button" class = "btn btn-large" disabled > ಬಟನ್ </button>

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

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

ಲಿಂಕ್ 
  1. <a class = "btn" href = "" > ಲಿಂಕ್ </a>  
  2. <button class = "btn" type = "submit" > ಬಟನ್ </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

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

ಚಿತ್ರಗಳು

<img>ಯಾವುದೇ ಯೋಜನೆಯಲ್ಲಿ ಸುಲಭವಾಗಿ ಶೈಲಿಯ ಚಿತ್ರಗಳಿಗೆ ಒಂದು ಅಂಶಕ್ಕೆ ತರಗತಿಗಳನ್ನು ಸೇರಿಸಿ .

140x140 140x140 140x140 
  1. <img  src = "..." class = "img-rounded" > 
  2. <img  src = "..." class = "img-circle" > 
  3. <img src  = "..." class = "img-polaroid" >

ತಲೆ ಎತ್ತಿ! .img-roundedಮತ್ತು ಬೆಂಬಲದ .img-circleಕೊರತೆಯಿಂದಾಗಿ IE7-8 ನಲ್ಲಿ ಕೆಲಸ ಮಾಡಬೇಡಿ .border-radius

Glyphicons ಮೂಲಕ ಚಿಹ್ನೆಗಳು

ಐಕಾನ್ ಗ್ಲಿಫ್‌ಗಳು

ಸ್ಪ್ರೈಟ್ ರೂಪದಲ್ಲಿ 140 ಐಕಾನ್‌ಗಳು, ಗಾಢ ಬೂದು (ಡೀಫಾಲ್ಟ್) ಮತ್ತು ಬಿಳಿ ಬಣ್ಣದಲ್ಲಿ ಲಭ್ಯವಿದೆ, ಇದನ್ನು Glyphicons ನಿಂದ ಒದಗಿಸಲಾಗಿದೆ .

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

ಗ್ಲಿಫಿಕಾನ್ಸ್ ಗುಣಲಕ್ಷಣ

Glyphicons Halflings ಸಾಮಾನ್ಯವಾಗಿ ಉಚಿತವಾಗಿ ಲಭ್ಯವಿರುವುದಿಲ್ಲ, ಆದರೆ Bootstrap ಮತ್ತು Glyphicons ರಚನೆಕಾರರ ನಡುವಿನ ವ್ಯವಸ್ಥೆಯು ಡೆವಲಪರ್‌ಗಳಾಗಿ ನಿಮಗೆ ಯಾವುದೇ ವೆಚ್ಚವಿಲ್ಲದೆ ಇದನ್ನು ಸಾಧ್ಯವಾಗಿಸಿದೆ. ಧನ್ಯವಾದವಾಗಿ, ಪ್ರಾಯೋಗಿಕವಾದಾಗಲೆಲ್ಲಾ Glyphicons ಗೆ ಐಚ್ಛಿಕ ಲಿಂಕ್ ಅನ್ನು ಸೇರಿಸಲು ನಾವು ನಿಮ್ಮನ್ನು ಕೇಳುತ್ತೇವೆ .

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

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

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

ತಲೆಕೆಳಗಾದ (ಬಿಳಿ) ಐಕಾನ್‌ಗಳಿಗೆ ಶೈಲಿಗಳು ಲಭ್ಯವಿವೆ, ಒಂದು ಹೆಚ್ಚುವರಿ ವರ್ಗದೊಂದಿಗೆ ಸಿದ್ಧಗೊಳಿಸಲಾಗಿದೆ. ನ್ಯಾವ್ ಮತ್ತು ಡ್ರಾಪ್‌ಡೌನ್ ಲಿಂಕ್‌ಗಳಿಗಾಗಿ ನಾವು ನಿರ್ದಿಷ್ಟವಾಗಿ ಈ ವರ್ಗವನ್ನು ಹೋವರ್ ಮತ್ತು ಸಕ್ರಿಯ ಸ್ಥಿತಿಗಳಲ್ಲಿ ಜಾರಿಗೊಳಿಸುತ್ತೇವೆ.

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

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

ಐಕಾನ್ ಉದಾಹರಣೆಗಳು

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

ಗುಂಡಿಗಳು

ಬಟನ್ ಟೂಲ್‌ಬಾರ್‌ನಲ್ಲಿ ಬಟನ್ ಗುಂಪು
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
ಬಟನ್ ಗುಂಪಿನಲ್ಲಿ ಡ್ರಾಪ್‌ಡೌನ್
ಬಳಕೆದಾರ 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> ಬಳಕೆದಾರ </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "dropdown-menu" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> ಸಂಪಾದಿಸು </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> ಅಳಿಸು </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> ನಿಷೇಧಿಸು </a></li>  
  8.     <li class = "ವಿಭಾಜಕ" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> ನಿರ್ವಾಹಕರನ್ನಾಗಿ ಮಾಡಿ </a></li>  
  10.   </ul>
  11. </div>
ಬಟನ್ ಗಾತ್ರಗಳು
ನಕ್ಷತ್ರ ನಕ್ಷತ್ರ ನಕ್ಷತ್ರ 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> ನಕ್ಷತ್ರ </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> ನಕ್ಷತ್ರ </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> ನಕ್ಷತ್ರ </a>

ನ್ಯಾವಿಗೇಷನ್

  1. <ul class = "nav nav-list" > 
  2.   <li class = "ಸಕ್ರಿಯ" ><a href = "#" ><i class = "icon-home icon-white" ></i> ಮುಖಪುಟ </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> ಲೈಬ್ರರಿ </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> ಅಪ್ಲಿಕೇಶನ್‌ಗಳು </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> ಇತರೆ </a></li>  
  6. </ul>

ಫಾರ್ಮ್ ಕ್ಷೇತ್ರಗಳು

  1. <div class = "control-group" > 
  2.   <label class = "control-label" for = "inputIcon" > ಇಮೇಲ್ ವಿಳಾಸ </label>  
  3.   <div class = "ನಿಯಂತ್ರಣಗಳು" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>