ಸ್ಕ್ಯಾಫೋಲ್ಡಿಂಗ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ, ಮೂಲ HTML ಅಂಶಗಳು ತಾಜಾ, ಸ್ಥಿರವಾದ ನೋಟ ಮತ್ತು ಅನುಭವವನ್ನು ಒದಗಿಸಲು ವಿಸ್ತರಣಾ ತರಗತಿಗಳೊಂದಿಗೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ ಮತ್ತು ವರ್ಧಿಸಲಾಗಿದೆ.
ಸಂಪೂರ್ಣ ಟೈಪೋಗ್ರಾಫಿಕ್ ಗ್ರಿಡ್ ನಮ್ಮ variables.less ಫೈಲ್‌ನಲ್ಲಿ ಎರಡು ಕಡಿಮೆ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಆಧರಿಸಿದೆ: @baseFontSizeಮತ್ತು @baseLineHeight. ಮೊದಲನೆಯದು ಬೇಸ್ ಫಾಂಟ್-ಗಾತ್ರವನ್ನು ಉದ್ದಕ್ಕೂ ಬಳಸಲಾಗುತ್ತದೆ ಮತ್ತು ಎರಡನೆಯದು ಬೇಸ್ ಲೈನ್-ಎತ್ತರವಾಗಿದೆ.
ನಮ್ಮ ಎಲ್ಲಾ ಪ್ರಕಾರಗಳ ಅಂಚುಗಳು, ಪ್ಯಾಡಿಂಗ್‌ಗಳು ಮತ್ತು ಲೈನ್-ಎತ್ತರಗಳನ್ನು ರಚಿಸಲು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ರಚಿಸಲು ನಾವು ಆ ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ಕೆಲವು ಗಣಿತವನ್ನು ಬಳಸುತ್ತೇವೆ.
ನುಲ್ಲಮ್ ಕ್ವಿಸ್ ರಿಸಸ್ ಈಗೆಟ್ ಉರ್ನಾ ಮೊಲ್ಲಿಸ್ ಒರ್ನಾರೆ ವೆಲ್ ಇಯು ಲಿಯೋ. ಕಮ್ ಸೊಸೈಸ್ ನ್ಯಾಟೋಕ್ ಪೆನಾಟಿಬಸ್ ಮತ್ತು ಮ್ಯಾಗ್ನಿಸ್ ಡಿಸ್ ಪಾರ್ಚುರಿಯೆಂಟ್ ಮಾಂಟೆಸ್, ನಾಸ್ಸೆಟರ್ ರಿಡಿಕ್ಯುಲಸ್ ಮಸ್. Nullam id dolor id nibh ultricies ವೆಹಿಕುಲಾ ut id elit.
ವಿವಾಮಸ್ ಸಗಿಟಿಸ್ ಲ್ಯಾಕಸ್ ವೆಲ್ ಆಗ್ ಲಾರೆಟ್ ರುಟ್ರಮ್ ಫೌಸಿಬಸ್ ಡೋಲರ್ ಆಕ್ಟರ್. ಡುಯಿಸ್ ಮೊಲ್ಲಿಸ್, ಈಸ್ಟ್ ನಾನ್ ಕಮೊಡೊ ಲಕ್ಟಸ್, ನಿಸಿ ಎರಟ್ ಪೋರ್ಟಿಟರ್ ಲಿಗುಲಾ, ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್. ಡೊನೆಕ್ ಸೆಡ್ ಓಡಿಯೊ ದುಯಿ.
| ಅಂಶ | ಬಳಕೆ | ಐಚ್ಛಿಕ |
|---|---|---|
<strong> |
ಮುಖ್ಯವಾದ ಪಠ್ಯದ ತುಣುಕನ್ನು ಒತ್ತಿಹೇಳಲು | ಯಾವುದೂ |
<em> |
ಒತ್ತಡದೊಂದಿಗೆ ಪಠ್ಯದ ತುಣುಕನ್ನು ಒತ್ತಿಹೇಳಲು | ಯಾವುದೂ |
<abbr> |
ವಿಸ್ತರಿತ ಆವೃತ್ತಿಯನ್ನು ಹೋವರ್‌ನಲ್ಲಿ ತೋರಿಸಲು ಸಂಕ್ಷೇಪಣಗಳು ಮತ್ತು ಪ್ರಥಮಾಕ್ಷರಗಳನ್ನು ಸುತ್ತುತ್ತದೆ |
.initialismದೊಡ್ಡಕ್ಷರ ಸಂಕ್ಷೇಪಣಗಳಿಗೆ ವರ್ಗವನ್ನು ಬಳಸಿ . |
<address> |
ಅದರ ಹತ್ತಿರದ ಪೂರ್ವಜರ ಅಥವಾ ಸಂಪೂರ್ಣ ಕೆಲಸದ ಸಂಪರ್ಕ ಮಾಹಿತಿಗಾಗಿ | ಎಲ್ಲಾ ಸಾಲುಗಳನ್ನು ಕೊನೆಗೊಳಿಸುವ ಮೂಲಕ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ಸಂರಕ್ಷಿಸಿ<br> |
ಫ್ಯೂಸ್ ಡ್ಯಾಪಿಬಸ್ , ಟೆಲ್ಲಸ್ ಎಸಿ ಕರ್ಸಸ್ ಕಮೊಡೊ , ಟಾರ್ಟರ್ ಮಾರಿಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಿಬ್ , ಯುಟ್ ಫರ್ಮೆಂಟಮ್ ಮಸ್ಸಾ ಜಸ್ಟೊ ಸಿಟ್ ಅಮೆಟ್ ರಿಸಸ್. ಮೆಸೆನಾಸ್ ಫೌಸಿಬಸ್ ಮೊಲ್ಲಿಸ್ ಇಂಟರ್ಡಮ್. ನುಲ್ಲಾ ವಿಟೇ ಎಲಿಟ್ ಲಿಬೆರೊ, ಎ ಫಾರೆಟ್ರಾ ಆಗ್.
ಗಮನಿಸಿ: ಬಳಸಲು ಹಿಂಜರಿಯಬೇಡಿ <b>ಮತ್ತು <i>HTML5 ನಲ್ಲಿ, ಆದರೆ ಅವುಗಳ ಬಳಕೆಯು ಸ್ವಲ್ಪ ಬದಲಾಗಿದೆ. ಧ್ವನಿ, ತಾಂತ್ರಿಕ ಪದಗಳು ಇತ್ಯಾದಿಗಳಿಗೆ <b>ಹೆಚ್ಚಿನ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ನೀಡದೆಯೇ ಪದಗಳು ಅಥವಾ ಪದಗುಚ್ಛಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಉದ್ದೇಶಿಸಲಾಗಿದೆ .<i>
<address>ಟ್ಯಾಗ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದಕ್ಕೆ ಎರಡು ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ :
ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಸಂಕ್ಷೇಪಣಗಳು titleತಿಳಿ ಚುಕ್ಕೆಗಳ ಕೆಳಭಾಗದ ಅಂಚು ಮತ್ತು ಹೋವರ್‌ನಲ್ಲಿ ಸಹಾಯ ಕರ್ಸರ್ ಅನ್ನು ಹೊಂದಿವೆ. ಇದು ಬಳಕೆದಾರರಿಗೆ ಹೋವರ್‌ನಲ್ಲಿ ಏನನ್ನಾದರೂ ತೋರಿಸಲಾಗುವುದು ಎಂಬ ಹೆಚ್ಚುವರಿ ಸೂಚನೆಯನ್ನು ನೀಡುತ್ತದೆ.
initialismಸ್ವಲ್ಪ ಚಿಕ್ಕ ಪಠ್ಯ ಗಾತ್ರವನ್ನು ನೀಡುವ ಮೂಲಕ ಮುದ್ರಣದ ಸಾಮರಸ್ಯವನ್ನು ಹೆಚ್ಚಿಸಲು ವರ್ಗವನ್ನು ಸಂಕ್ಷೇಪಣಕ್ಕೆ ಸೇರಿಸಿ .
ಸ್ಲೈಸ್ಡ್ ಬ್ರೆಡ್‌ನಿಂದ HTML ಅತ್ಯುತ್ತಮ ವಿಷಯವಾಗಿದೆ.
ಗುಣಲಕ್ಷಣ ಪದದ ಸಂಕ್ಷೇಪಣವು attr ಆಗಿದೆ .
| ಅಂಶ | ಬಳಕೆ | ಐಚ್ಛಿಕ |
|---|---|---|
<blockquote> |
ಇನ್ನೊಂದು ಮೂಲದಿಂದ ವಿಷಯವನ್ನು ಉಲ್ಲೇಖಿಸಲು ಬ್ಲಾಕ್ ಮಟ್ಟದ ಅಂಶ |
.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>
<dl class="dl-horizontal">
ನೊಂದಿಗೆ ಕೋಡ್‌ನ ಇನ್ಲೈನ್ ತುಣುಕುಗಳನ್ನು ಸುತ್ತಿ <code>.
- ಉದಾಹರಣೆಗೆ , <code> ವಿಭಾಗ < / code > ಅನ್ನು ಇನ್‌ಲೈನ್‌ನಂತೆ ಸುತ್ತಿಡಬೇಕು .
<pre>ಕೋಡ್‌ನ ಬಹು ಸಾಲುಗಳಿಗಾಗಿ ಬಳಸಿ . ಸರಿಯಾದ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ ಕೋಡ್‌ನಲ್ಲಿನ ಯಾವುದೇ ಕೋನ ಬ್ರಾಕೆಟ್‌ಗಳಿಂದ ತಪ್ಪಿಸಿಕೊಳ್ಳಲು ಮರೆಯದಿರಿ.
<p>ಮಾದರಿ ಪಠ್ಯ ಇಲ್ಲಿದೆ...</p>
- <ಪೂರ್ವ>
- <p>ಮಾದರಿ ಪಠ್ಯ ಇಲ್ಲಿದೆ...</p>
- </pre>
ಗಮನಿಸಿ:<pre> ಟ್ಯಾಗ್‌ಗಳಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ಎಡಕ್ಕೆ ಸಾಧ್ಯವಾದಷ್ಟು ಹತ್ತಿರ ಇರಿಸಿಕೊಳ್ಳಲು ಮರೆಯದಿರಿ ; ಇದು ಎಲ್ಲಾ ಟ್ಯಾಬ್‌ಗಳನ್ನು ನಿರೂಪಿಸುತ್ತದೆ.
.pre-scrollable350px ಗರಿಷ್ಠ ಎತ್ತರವನ್ನು ಹೊಂದಿಸುವ ಮತ್ತು y-ಆಕ್ಸಿಸ್ ಸ್ಕ್ರಾಲ್‌ಬಾರ್ ಅನ್ನು ಒದಗಿಸುವ ವರ್ಗವನ್ನು ನೀವು ಐಚ್ಛಿಕವಾಗಿ ಸೇರಿಸಬಹುದು .
ಅದೇ <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 ವರೆಗೆ ಲಂಬವಾದ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಅರ್ಧದಷ್ಟು ಕತ್ತರಿಸುತ್ತದೆ |
ಓದುವಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಮತ್ತು ರಚನೆಯನ್ನು ನಿರ್ವಹಿಸಲು ಕೆಲವು ಅಂಚುಗಳೊಂದಿಗೆ ಕೋಷ್ಟಕಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. 2.0 ಜೊತೆಗೆ, .tableವರ್ಗದ ಅಗತ್ಯವಿದೆ.
- <ಟೇಬಲ್ ವರ್ಗ = "ಟೇಬಲ್" >
- …
- </table>
| # | ಮೊದಲ ಹೆಸರು | ಕೊನೆಯ ಹೆಸರು | ಬಳಕೆದಾರ ಹೆಸರು |
|---|---|---|---|
| 1 | ಮಾರ್ಕ್ | ಒಟ್ಟೊ | @mdo |
| 2 | ಜಾಕೋಬ್ | ಥಾರ್ನ್ಟನ್ | @ಕೊಬ್ಬು |
| 3 | ಲ್ಯಾರಿ | ಪಕ್ಷಿ |
ಜೀಬ್ರಾ-ಸ್ಟ್ರೈಪಿಂಗ್ ಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಟೇಬಲ್‌ಗಳೊಂದಿಗೆ ಸ್ವಲ್ಪ ಅಲಂಕಾರಿಕ ಪಡೆಯಿರಿ-ಕೇವಲ .table-stripedವರ್ಗವನ್ನು ಸೇರಿಸಿ.
ಗಮನಿಸಿ: ಪಟ್ಟಿಯಿರುವ ಕೋಷ್ಟಕಗಳು :nth-childCSS ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸುತ್ತವೆ ಮತ್ತು IE7-IE8 ನಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲ.
- <ಟೇಬಲ್ ಕ್ಲಾಸ್ = "ಟೇಬಲ್-ಸ್ಟ್ರೈಪ್ಡ್" >
- …
- </table>
| # | ಮೊದಲ ಹೆಸರು | ಕೊನೆಯ ಹೆಸರು | ಬಳಕೆದಾರ ಹೆಸರು |
|---|---|---|---|
| 1 | ಮಾರ್ಕ್ | ಒಟ್ಟೊ | @mdo |
| 2 | ಜಾಕೋಬ್ | ಥಾರ್ನ್ಟನ್ | @ಕೊಬ್ಬು |
| 3 | ಲ್ಯಾರಿ | ಪಕ್ಷಿ |
ಸೌಂದರ್ಯದ ಉದ್ದೇಶಗಳಿಗಾಗಿ ಸಂಪೂರ್ಣ ಟೇಬಲ್ ಮತ್ತು ದುಂಡಾದ ಮೂಲೆಗಳ ಸುತ್ತಲೂ ಗಡಿಗಳನ್ನು ಸೇರಿಸಿ.
- <ಟೇಬಲ್ ವರ್ಗ = "ಟೇಬಲ್-ಬೋರ್ಡರ್ಡ್" >
- …
- </table>
| # | ಮೊದಲ ಹೆಸರು | ಕೊನೆಯ ಹೆಸರು | ಬಳಕೆದಾರ ಹೆಸರು |
|---|---|---|---|
| 1 | ಮಾರ್ಕ್ | ಒಟ್ಟೊ | @mdo |
| ಮಾರ್ಕ್ | ಒಟ್ಟೊ | @Getbootstrap | |
| 2 | ಜಾಕೋಬ್ | ಥಾರ್ನ್ಟನ್ | @ಕೊಬ್ಬು |
| 3 | ಲ್ಯಾರಿ ಬರ್ಡ್ | ||
.table-condensedಟೇಬಲ್ ಸೆಲ್ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಅರ್ಧಕ್ಕೆ (8px ನಿಂದ 4px ವರೆಗೆ) ಕತ್ತರಿಸಲು ವರ್ಗವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಕೋಷ್ಟಕಗಳನ್ನು ಹೆಚ್ಚು ಕಾಂಪ್ಯಾಕ್ಟ್ ಮಾಡಿ .
- <ಟೇಬಲ್ ವರ್ಗ = "ಟೇಬಲ್-ಕಂಡೆನ್ಸ್ಡ್" >
- …
- </table>
| # | ಮೊದಲ ಹೆಸರು | ಕೊನೆಯ ಹೆಸರು | ಬಳಕೆದಾರ ಹೆಸರು |
|---|---|---|---|
| 1 | ಮಾರ್ಕ್ | ಒಟ್ಟೊ | @mdo |
| 2 | ಜಾಕೋಬ್ | ಥಾರ್ನ್ಟನ್ | @ಕೊಬ್ಬು |
| 3 | ಲ್ಯಾರಿ ಬರ್ಡ್ | ||
ಲಭ್ಯವಿರುವ ಯಾವುದೇ ತರಗತಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ವಿಭಿನ್ನ ನೋಟವನ್ನು ಸಾಧಿಸಲು ಯಾವುದೇ ಟೇಬಲ್ ತರಗತಿಗಳನ್ನು ಸಂಯೋಜಿಸಲು ಹಿಂಜರಿಯಬೇಡಿ.
- <ಟೇಬಲ್ ವರ್ಗ = "ಟೇಬಲ್-ಪಟ್ಟಿಯ ಟೇಬಲ್-ಬೋರ್ಡರ್ಡ್ ಟೇಬಲ್-ಕಂಡೆನ್ಸ್ಡ್" >
- ...
- </table>
| ಪೂರ್ಣ ಹೆಸರು | |||
|---|---|---|---|
| # | ಮೊದಲ ಹೆಸರು | ಕೊನೆಯ ಹೆಸರು | ಬಳಕೆದಾರ ಹೆಸರು |
| 1 | ಮಾರ್ಕ್ | ಒಟ್ಟೊ | @mdo |
| 2 | ಜಾಕೋಬ್ | ಥಾರ್ನ್ಟನ್ | @ಕೊಬ್ಬು |
| 3 | ಲ್ಯಾರಿ ಬರ್ಡ್ | ||
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿನ ಫಾರ್ಮ್‌ಗಳ ಉತ್ತಮ ಭಾಗವೆಂದರೆ ನಿಮ್ಮ ಎಲ್ಲಾ ಇನ್‌ಪುಟ್‌ಗಳು ಮತ್ತು ನಿಯಂತ್ರಣಗಳು ನಿಮ್ಮ ಮಾರ್ಕ್‌ಅಪ್‌ನಲ್ಲಿ ಅವುಗಳನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸಿದರೂ ಉತ್ತಮವಾಗಿ ಕಾಣುತ್ತವೆ. ಯಾವುದೇ ಹೆಚ್ಚುವರಿ HTML ಅಗತ್ಯವಿಲ್ಲ, ಆದರೆ ಅಗತ್ಯವಿರುವವರಿಗೆ ನಾವು ಮಾದರಿಗಳನ್ನು ಒದಗಿಸುತ್ತೇವೆ.
ಸುಲಭವಾದ ವಿನ್ಯಾಸ ಮತ್ತು ಈವೆಂಟ್ ಬೈಂಡಿಂಗ್‌ಗಾಗಿ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಲೇಔಟ್‌ಗಳು ಸಂಕ್ಷಿಪ್ತ ಮತ್ತು ಸ್ಕೇಲೆಬಲ್ ತರಗತಿಗಳೊಂದಿಗೆ ಬರುತ್ತವೆ, ಆದ್ದರಿಂದ ನೀವು ಪ್ರತಿ ಹಂತದಲ್ಲೂ ರಕ್ಷಣೆ ಪಡೆಯುತ್ತೀರಿ.
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ನಾಲ್ಕು ವಿಧದ ಫಾರ್ಮ್ ಲೇಔಟ್‌ಗಳಿಗೆ ಬೆಂಬಲದೊಂದಿಗೆ ಬರುತ್ತದೆ:
ವಿವಿಧ ರೀತಿಯ ಫಾರ್ಮ್ ಲೇಔಟ್‌ಗಳಿಗೆ ಮಾರ್ಕ್‌ಅಪ್‌ಗೆ ಕೆಲವು ಬದಲಾವಣೆಗಳ ಅಗತ್ಯವಿರುತ್ತದೆ, ಆದರೆ ನಿಯಂತ್ರಣಗಳು ಸ್ವತಃ ಉಳಿಯುತ್ತವೆ ಮತ್ತು ಒಂದೇ ರೀತಿ ವರ್ತಿಸುತ್ತವೆ.
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಫಾರ್ಮ್‌ಗಳು ಇನ್ಪುಟ್, ಟೆಕ್ಸ್ಟೇರಿಯಾ ಮತ್ತು ನೀವು ನಿರೀಕ್ಷಿಸುವ ಆಯ್ಕೆಯಂತಹ ಎಲ್ಲಾ ಮೂಲ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳಿಗೆ ಶೈಲಿಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ. ಆದರೆ ಇದು ಲಗತ್ತಿಸಲಾದ ಮತ್ತು ಪೂರ್ವಭಾವಿ ಇನ್‌ಪುಟ್‌ಗಳು ಮತ್ತು ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳ ಪಟ್ಟಿಗಳಿಗೆ ಬೆಂಬಲದಂತಹ ಹಲವಾರು ಕಸ್ಟಮ್ ಘಟಕಗಳೊಂದಿಗೆ ಬರುತ್ತದೆ.
ಪ್ರತಿಯೊಂದು ರೀತಿಯ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಕ್ಕೆ ದೋಷ, ಎಚ್ಚರಿಕೆ ಮತ್ತು ಯಶಸ್ಸಿನಂತಹ ಸ್ಥಿತಿಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ. ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾದ ನಿಯಂತ್ರಣಗಳಿಗಾಗಿ ಶೈಲಿಗಳನ್ನು ಸಹ ಸೇರಿಸಲಾಗಿದೆ.
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಸಾಮಾನ್ಯ ವೆಬ್ ಫಾರ್ಮ್‌ಗಳ ನಾಲ್ಕು ಶೈಲಿಗಳಿಗೆ ಸರಳ ಮಾರ್ಕ್ಅಪ್ ಮತ್ತು ಶೈಲಿಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
| ಹೆಸರು | ವರ್ಗ | ವಿವರಣೆ |
|---|---|---|
| ಲಂಬ (ಡೀಫಾಲ್ಟ್) | .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" >
- <ಲೇಬಲ್ ವರ್ಗ = "ಚೆಕ್ಬಾಕ್ಸ್" >
- <ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಚೆಕ್ಬಾಕ್ಸ್" > ನನ್ನನ್ನು ನೆನಪಿಡಿ
- </label>
- <button type = "submit" class = "btn" > ಸೈನ್ ಇನ್ </button>
- </form>
ಮೇಲಿನ ಉದಾಹರಣೆ ಫಾರ್ಮ್ ಲೇಔಟ್ ಅನ್ನು ನೀಡಿದರೆ, ಮೊದಲ ಇನ್ಪುಟ್ ಮತ್ತು ನಿಯಂತ್ರಣ ಗುಂಪಿನೊಂದಿಗೆ ಸಂಯೋಜಿತವಾಗಿರುವ ಮಾರ್ಕ್ಅಪ್ ಇಲ್ಲಿದೆ. ದಿ .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>
ನಾವು ಬೆಂಬಲಿಸುವ ಎಲ್ಲಾ ಡೀಫಾಲ್ಟ್ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ಎಡಭಾಗದಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ. ಬುಲೆಟ್ ಪಟ್ಟಿ ಇಲ್ಲಿದೆ:
v1.4 ವರೆಗೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಡೀಫಾಲ್ಟ್ ಫಾರ್ಮ್ ಶೈಲಿಗಳು ಸಮತಲ ವಿನ್ಯಾಸವನ್ನು ಬಳಸುತ್ತವೆ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 2 ನೊಂದಿಗೆ, ಯಾವುದೇ ಫಾರ್ಮ್‌ಗೆ ಚುರುಕಾದ, ಹೆಚ್ಚು ಸ್ಕೇಲೆಬಲ್ ಡಿಫಾಲ್ಟ್‌ಗಳನ್ನು ಹೊಂದಲು ನಾವು ಆ ನಿರ್ಬಂಧವನ್ನು ತೆಗೆದುಹಾಕಿದ್ದೇವೆ.
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬ್ರೌಸರ್-ಬೆಂಬಲಿತ ಕೇಂದ್ರೀಕೃತ ಮತ್ತು disabledರಾಜ್ಯಗಳಿಗಾಗಿ ಶೈಲಿಗಳನ್ನು ಹೊಂದಿದೆ. ನಾವು ಡೀಫಾಲ್ಟ್ ವೆಬ್‌ಕಿಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕುತ್ತೇವೆ ಮತ್ತು ಗಾಗಿ ಅದರ ಸ್ಥಳದಲ್ಲಿ outlinea ಅನ್ನು ಅನ್ವಯಿಸುತ್ತೇವೆ .box-shadow:focus
ಇದು ದೋಷಗಳು, ಎಚ್ಚರಿಕೆಗಳು ಮತ್ತು ಯಶಸ್ಸಿಗೆ ಮೌಲ್ಯೀಕರಣ ಶೈಲಿಗಳನ್ನು ಸಹ ಒಳಗೊಂಡಿದೆ. ಬಳಸಲು, ಸುತ್ತಮುತ್ತಲಿನ ದೋಷ ವರ್ಗವನ್ನು ಸೇರಿಸಿ .control-group.
- <ಫೀಲ್ಡ್ಸೆಟ್
- ವರ್ಗ = "ನಿಯಂತ್ರಣ-ಗುಂಪು ದೋಷ" >
- …
- </fieldset>
ಇನ್ಪುಟ್ ಗುಂಪುಗಳು-ಅನುಬಂಧಿತ ಅಥವಾ ಪೂರ್ವಭಾವಿ ಪಠ್ಯದೊಂದಿಗೆ-ನಿಮ್ಮ ಇನ್‌ಪುಟ್‌ಗಳಿಗೆ ಹೆಚ್ಚಿನ ಸಂದರ್ಭವನ್ನು ನೀಡಲು ಸುಲಭವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಉತ್ತಮ ಉದಾಹರಣೆಗಳಲ್ಲಿ Twitter ಬಳಕೆದಾರಹೆಸರುಗಳಿಗಾಗಿ @ ಚಿಹ್ನೆ ಅಥವಾ ಹಣಕಾಸುಗಾಗಿ $ ಸೇರಿವೆ.
v1.4 ವರೆಗೆ, ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಮತ್ತು ರೇಡಿಯೊಗಳನ್ನು ಜೋಡಿಸಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ಗೆ ಹೆಚ್ಚುವರಿ ಮಾರ್ಕ್ಅಪ್ ಅಗತ್ಯವಿದೆ. <label class="checkbox">ಈಗ, ಸುತ್ತುವದನ್ನು ಪುನರಾವರ್ತಿಸುವ ಸರಳ ವಿಷಯವಾಗಿದೆ <input type="checkbox">.
ಇನ್ಲೈನ್ ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಮತ್ತು ರೇಡಿಯೊಗಳನ್ನು ಸಹ ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ. .inlineಯಾವುದಕ್ಕೂ ಸೇರಿಸಿ .checkboxಅಥವಾ .radioನೀವು ಮುಗಿಸಿದ್ದೀರಿ.
ಇನ್ಲೈನ್ ರೂಪದಲ್ಲಿ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಪೂರ್ವಭಾವಿಯಾಗಿ ಬಳಸಲು ಅಥವಾ ಸೇರಿಸಲು, ಖಾಲಿ ಇಲ್ಲದೆ ಮತ್ತು ಅದೇ ಸಾಲಿನಲ್ಲಿ ಇರಿಸಲು .add-onಮರೆಯದಿರಿ input.
ನಿಮ್ಮ ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್‌ಗಳಿಗೆ ಸಹಾಯ ಪಠ್ಯವನ್ನು ಸೇರಿಸಲು, ಇನ್ಲೈನ್ ಸಹಾಯ ಪಠ್ಯವನ್ನು ಸೇರಿಸಿ ಅಥವಾ ಇನ್ಪುಟ್ ಅಂಶದ ನಂತರ <span class="help-inline">ಸಹಾಯ ಪಠ್ಯ ಬ್ಲಾಕ್ ಅನ್ನು ಸೇರಿಸಿ.<p class="help-block">
Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.
All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.
Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.
Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
- <i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class:
- <i class="icon-search icon-white"></i>
There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.
Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
Icons are great, but where would one use them? Here are a few ideas:
ಮೂಲಭೂತವಾಗಿ, ಎಲ್ಲಿಯಾದರೂ ನೀವು <i>ಟ್ಯಾಗ್ ಅನ್ನು ಹಾಕಬಹುದು, ನೀವು ಐಕಾನ್ ಅನ್ನು ಹಾಕಬಹುದು.
ಟೂಲ್‌ಬಾರ್, ನ್ಯಾವಿಗೇಷನ್ ಅಥವಾ ಪೂರ್ವಭಾವಿ ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್‌ಗಳಿಗಾಗಿ ಬಟನ್‌ಗಳು, ಬಟನ್ ಗುಂಪುಗಳಲ್ಲಿ ಅವುಗಳನ್ನು ಬಳಸಿ.