ਸਕੈਫੋਲਡਿੰਗ ਦੇ ਸਿਖਰ 'ਤੇ, ਇੱਕ ਤਾਜ਼ਾ, ਇਕਸਾਰ ਦਿੱਖ ਅਤੇ ਮਹਿਸੂਸ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਬੁਨਿਆਦੀ HTML ਤੱਤਾਂ ਨੂੰ ਵਿਸਤ੍ਰਿਤ ਕਲਾਸਾਂ ਨਾਲ ਸਟਾਈਲ ਅਤੇ ਵਿਸਤ੍ਰਿਤ ਕੀਤਾ ਗਿਆ ਹੈ।
ਸਮੁੱਚੀ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਗਰਿੱਡ ਸਾਡੀ variables.less ਫਾਈਲ ਵਿੱਚ ਦੋ ਘੱਟ ਵੇਰੀਏਬਲਾਂ 'ਤੇ ਅਧਾਰਤ ਹੈ: @baseFontSizeਅਤੇ @baseLineHeight. ਪਹਿਲਾ ਹੈ ਬੇਸ ਫੌਂਟ-ਸਾਈਜ਼ ਜੋ ਕਿ ਭਰ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਦੂਜਾ ਬੇਸ ਲਾਈਨ-ਉਚਾਈ ਹੈ।
ਅਸੀਂ ਉਹਨਾਂ ਵੇਰੀਏਬਲਾਂ, ਅਤੇ ਕੁਝ ਗਣਿਤ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਕਿਸਮਾਂ ਅਤੇ ਹੋਰਾਂ ਦੇ ਹਾਸ਼ੀਏ, ਪੈਡਿੰਗ ਅਤੇ ਲਾਈਨ-ਹਾਈਟਸ ਬਣਾਉਣ ਲਈ।
ਨੱਲਮ ਕਵਿਸ ਰਿਸਸ ਈਗੇਟ ਉਰਨਾ ਮੋਲਿਸ ਓਰਨਾਰੇ ਵੇਲ ਈਯੂ ਲਿਓ. Cum sociis natoque penatibus et magnis dis parturient Montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| ਤੱਤ | ਵਰਤੋਂ | ਵਿਕਲਪਿਕ |
|---|---|---|
<strong> |
ਮਹੱਤਵਪੂਰਨ ਦੇ ਨਾਲ ਟੈਕਸਟ ਦੇ ਇੱਕ ਸਨਿੱਪਟ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ | ਕੋਈ ਨਹੀਂ |
<em> |
ਤਣਾਅ ਦੇ ਨਾਲ ਟੈਕਸਟ ਦੇ ਇੱਕ ਸਨਿੱਪਟ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ | ਕੋਈ ਨਹੀਂ |
<abbr> |
ਹੋਵਰ 'ਤੇ ਵਿਸਤ੍ਰਿਤ ਸੰਸਕਰਣ ਦਿਖਾਉਣ ਲਈ ਸੰਖੇਪ ਅਤੇ ਸੰਖੇਪ ਸ਼ਬਦਾਂ ਨੂੰ ਲਪੇਟਦਾ ਹੈ |
.initialismਵੱਡੇ ਅੱਖਰਾਂ ਲਈ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ । |
<address> |
ਇਸਦੇ ਨਜ਼ਦੀਕੀ ਪੂਰਵਜ ਜਾਂ ਕੰਮ ਦੇ ਪੂਰੇ ਸਰੀਰ ਲਈ ਸੰਪਰਕ ਜਾਣਕਾਰੀ ਲਈ | ਨਾਲ ਸਾਰੀਆਂ ਲਾਈਨਾਂ ਨੂੰ ਖਤਮ ਕਰਕੇ ਫਾਰਮੈਟਿੰਗ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰੋ<br> |
ਫਿਊਸ ਡੈਪੀਬਸ , ਟੇਲਸ ਏਸੀ ਕਰਸਸ ਕੋਮੋਡੋ , ਟੋਰਟਰ ਮੌਰੀਸ ਕੰਡੀਮੈਂਟਮ ਨਿਭ , ਯੂਟ ਫਰਮੈਂਟਮ ਮਾਸਾ ਜਸਟ ਅਮੇਟ ਰਿਸਸ । Maecenas faucibus mollis interdum. ਨੱਲਾ ਵਿਟਾਏ ਇਲੀਟ ਲਿਬੇਰੋ, ਇੱਕ ਫਰੇਟਰਾ ਔਗ।
ਨੋਟ: ਵਰਤਣ ਲਈ ਬੇਝਿਜਕ ਮਹਿਸੂਸ ਕਰੋ <b>ਅਤੇ <i>HTML5 ਵਿੱਚ, ਪਰ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਥੋੜੀ ਬਦਲ ਗਈ ਹੈ। <b>ਵਾਧੂ ਮਹੱਤਵ ਦੱਸੇ ਬਿਨਾਂ ਸ਼ਬਦਾਂ ਜਾਂ ਵਾਕਾਂਸ਼ਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਨ <i>ਲਈ ਹੈ ਜਦੋਂ ਕਿ ਜ਼ਿਆਦਾਤਰ ਆਵਾਜ਼, ਤਕਨੀਕੀ ਸ਼ਬਦਾਂ, ਆਦਿ ਲਈ ਹੈ।
ਇੱਥੇ ਦੋ ਉਦਾਹਰਣਾਂ ਹਨ ਕਿ <address>ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ:
ਕਿਸੇ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਸੰਖੇਪ titleਰੂਪਾਂ ਵਿੱਚ ਇੱਕ ਹਲਕਾ ਬਿੰਦੀ ਵਾਲਾ ਹੇਠਲਾ ਕਿਨਾਰਾ ਅਤੇ ਹੋਵਰ 'ਤੇ ਇੱਕ ਮਦਦ ਕਰਸਰ ਹੁੰਦਾ ਹੈ। ਇਹ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਵਾਧੂ ਸੰਕੇਤ ਦਿੰਦਾ ਹੈ ਕਿ ਹੋਵਰ 'ਤੇ ਕੁਝ ਦਿਖਾਇਆ ਜਾਵੇਗਾ।
initialismਇਸ ਨੂੰ ਥੋੜ੍ਹਾ ਛੋਟਾ ਟੈਕਸਟ ਆਕਾਰ ਦੇ ਕੇ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਇਕਸੁਰਤਾ ਵਧਾਉਣ ਲਈ ਕਲਾਸ ਨੂੰ ਸੰਖੇਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।
ਕੱਟੀ ਹੋਈ ਰੋਟੀ ਤੋਂ ਬਾਅਦ HTML ਸਭ ਤੋਂ ਵਧੀਆ ਚੀਜ਼ ਹੈ।
ਗੁਣ ਸ਼ਬਦ ਦਾ ਸੰਖੇਪ ਰੂਪ attr ਹੈ ।
| ਤੱਤ | ਵਰਤੋਂ | ਵਿਕਲਪਿਕ |
|---|---|---|
<blockquote> |
ਕਿਸੇ ਹੋਰ ਸਰੋਤ ਤੋਂ ਸਮੱਗਰੀ ਦਾ ਹਵਾਲਾ ਦੇਣ ਲਈ ਬਲਾਕ-ਪੱਧਰ ਦਾ ਤੱਤ |
.pull-leftਅਤੇ ਕਲਾਸਾਂ.pull-right |
<small> |
ਇੱਕ ਉਪਭੋਗਤਾ-ਸਾਹਮਣਾ ਵਾਲਾ ਹਵਾਲਾ ਜੋੜਨ ਲਈ ਵਿਕਲਪਿਕ ਤੱਤ, ਖਾਸ ਤੌਰ 'ਤੇ ਕੰਮ ਦੇ ਸਿਰਲੇਖ ਵਾਲਾ ਲੇਖਕ | <cite>ਸਰੋਤ ਦੇ ਸਿਰਲੇਖ ਜਾਂ ਨਾਮ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਰੱਖੋ |
ਇੱਕ ਬਲਾਕਕੋਟ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ, <blockquote>ਕਿਸੇ ਵੀ HTML ਨੂੰ ਹਵਾਲੇ ਦੇ ਰੂਪ ਵਿੱਚ ਲਪੇਟੋ। ਸਿੱਧੇ ਕੋਟਸ ਲਈ ਅਸੀਂ ਇੱਕ ਦੀ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ <p>।
ਆਪਣੇ ਸਰੋਤ ਦਾ ਹਵਾਲਾ ਦੇਣ ਲਈ ਇੱਕ ਵਿਕਲਪਿਕ <small>ਤੱਤ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਤੁਹਾਨੂੰ —ਸਟਾਈਲਿੰਗ ਦੇ ਉਦੇਸ਼ਾਂ ਲਈ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਐਮ ਡੈਸ਼ ਮਿਲੇਗਾ।
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ posuere erat a ante venenatis. </p>
- <small> ਕੋਈ ਮਸ਼ਹੂਰ </small>
- </blockquote>
ਡਿਫੌਲਟ ਬਲਾਕਕੋਟ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸਟਾਈਲ ਕੀਤਾ ਗਿਆ ਹੈ:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ posuere erat a ante venenatis.
ਕੰਮ ਦੇ ਸਰੀਰ ਵਿੱਚ ਮਸ਼ਹੂਰ ਕੋਈ
ਆਪਣੇ ਬਲਾਕਕੋਟ ਨੂੰ ਸੱਜੇ ਪਾਸੇ ਫਲੋਟ ਕਰਨ ਲਈ, ਸ਼ਾਮਲ ਕਰੋ class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ posuere erat a ante venenatis.
ਕੰਮ ਦੇ ਸਰੀਰ ਵਿੱਚ ਮਸ਼ਹੂਰ ਕੋਈ
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
ਕੋਡ ਦੇ ਇਨਲਾਈਨ ਸਨਿੱਪਟ ਨੂੰ ਨਾਲ ਲਪੇਟੋ <code>।
- ਉਦਾਹਰਨ ਲਈ , <code> ਭਾਗ </ code > ਨੂੰ ਇਨਲਾਈਨ ਦੇ ਰੂਪ ਵਿੱਚ ਲਪੇਟਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ।
<pre>ਕੋਡ ਦੀਆਂ ਕਈ ਲਾਈਨਾਂ ਲਈ ਵਰਤੋਂ । ਸਹੀ ਰੈਂਡਰਿੰਗ ਲਈ ਕੋਡ ਵਿੱਚ ਕਿਸੇ ਵੀ ਕੋਣ ਬਰੈਕਟਾਂ ਤੋਂ ਬਚਣਾ ਯਕੀਨੀ ਬਣਾਓ।
<p>ਇੱਥੇ ਨਮੂਨਾ ਪਾਠ...</p>
- <pre>
- <p>ਨਮੂਨਾ ਟੈਕਸਟ ਇੱਥੇ...</p>
- </pre>
ਨੋਟ:<pre> ਟੈਗਾਂ ਦੇ ਅੰਦਰ ਕੋਡ ਨੂੰ ਜਿੰਨਾ ਸੰਭਵ ਹੋ ਸਕੇ ਖੱਬੇ ਪਾਸੇ ਰੱਖਣਾ ਯਕੀਨੀ ਬਣਾਓ ; ਇਹ ਸਾਰੀਆਂ ਟੈਬਾਂ ਨੂੰ ਰੈਂਡਰ ਕਰੇਗਾ।
ਤੁਸੀਂ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਉਹ .pre-scrollableਕਲਾਸ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ ਜੋ 350px ਦੀ ਅਧਿਕਤਮ-ਉਚਾਈ ਸੈੱਟ ਕਰੇਗੀ ਅਤੇ ਇੱਕ y-ਧੁਰੀ ਸਕ੍ਰੌਲਬਾਰ ਪ੍ਰਦਾਨ ਕਰੇਗੀ।
ਉਹੀ <pre>ਤੱਤ ਲਓ ਅਤੇ ਵਿਸਤ੍ਰਿਤ ਰੈਂਡਰਿੰਗ ਲਈ ਦੋ ਵਿਕਲਪਿਕ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ।
- <p> ਨਮੂਨਾ ਪਾਠ ਇੱਥੇ... </p>
- <pre class = "prettyprint
- ਲਾਈਨਨਮ" >
- <p>ਨਮੂਨਾ ਟੈਕਸਟ ਇੱਥੇ...</p>
- </pre>
google-code-prettify ਨੂੰ ਡਾਉਨਲੋਡ ਕਰੋ ਅਤੇ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ ਲਈ ਰੀਡਮੀ ਦੇਖੋ।
| ਟੈਗ ਕਰੋ | ਵਰਣਨ |
|---|---|
<table> |
ਇੱਕ ਟੇਬਲਰ ਫਾਰਮੈਟ ਵਿੱਚ ਡੇਟਾ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਰੈਪਿੰਗ ਐਲੀਮੈਂਟ |
<thead> |
<tr>ਟੇਬਲ ਕਾਲਮਾਂ ਨੂੰ ਲੇਬਲ ਕਰਨ ਲਈ ਸਾਰਣੀ ਸਿਰਲੇਖ ਕਤਾਰਾਂ ( ) ਲਈ ਕੰਟੇਨਰ ਤੱਤ |
<tbody> |
ਸਾਰਣੀ ਦੇ ਮੁੱਖ ਭਾਗ ਵਿੱਚ ਸਾਰਣੀ ਦੀਆਂ ਕਤਾਰਾਂ ( <tr>) ਲਈ ਕੰਟੇਨਰ ਤੱਤ |
<tr> |
<td>ਟੇਬਲ ਸੈੱਲਾਂ ( ਜਾਂ ) ਦੇ ਇੱਕ ਸੈੱਟ ਲਈ ਕੰਟੇਨਰ ਤੱਤ <th>ਜੋ ਇੱਕ ਇੱਕਲੀ ਕਤਾਰ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ |
<td> |
ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸਾਰਣੀ ਸੈੱਲ |
<th> |
ਕਾਲਮ (ਜਾਂ ਕਤਾਰ, ਸਕੋਪ ਅਤੇ ਪਲੇਸਮੈਂਟ ਦੇ ਅਧਾਰ ਤੇ) ਲੇਬਲਾਂ ਲਈ ਵਿਸ਼ੇਸ਼ ਟੇਬਲ ਸੈੱਲ ਨੂੰ ਇੱਕ ਦੇ ਅੰਦਰ ਵਰਤਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ <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 |
ਲੰਬਕਾਰੀ ਪੈਡਿੰਗ ਨੂੰ ਅੱਧ ਵਿੱਚ ਕੱਟਦਾ ਹੈ, 8px ਤੋਂ 4px ਤੱਕ, ਸਾਰੇ tdਅਤੇ thਤੱਤਾਂ ਦੇ ਅੰਦਰ |
ਪੜ੍ਹਨਯੋਗਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਅਤੇ ਢਾਂਚੇ ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਲਈ ਟੇਬਲਾਂ ਨੂੰ ਸਿਰਫ਼ ਕੁਝ ਕਿਨਾਰਿਆਂ ਨਾਲ ਆਪਣੇ ਆਪ ਹੀ ਸਟਾਈਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। 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 |
ਸੰਖੇਪ ਸ਼ੈਲੀ ਲਈ ਖੱਬੇ-ਅਲਾਈਨ ਲੇਬਲ ਅਤੇ ਇਨਲਾਈਨ-ਬਲਾਕ ਨਿਯੰਤਰਣ |
| ਖੋਜ | .form-search |
ਇੱਕ ਆਮ ਖੋਜ ਸੁਹਜ ਲਈ ਵਾਧੂ-ਗੋਲ ਟੈਕਸਟ ਇੰਪੁੱਟ |
| ਹਰੀਜੱਟਲ | .form-horizontal |
ਨਿਯੰਤਰਣ ਦੇ ਤੌਰ 'ਤੇ ਉਸੇ ਲਾਈਨ 'ਤੇ ਖੱਬੇ, ਸੱਜੇ-ਅਲਾਈਨ ਕੀਤੇ ਲੇਬਲਾਂ ਨੂੰ ਫਲੋਟ ਕਰੋ |
v2.0 ਦੇ ਨਾਲ, ਸਾਡੇ ਕੋਲ ਫਾਰਮ ਸਟਾਈਲ ਲਈ ਹਲਕੇ ਅਤੇ ਚੁਸਤ ਡਿਫੌਲਟ ਹਨ। ਕੋਈ ਵਾਧੂ ਮਾਰਕਅੱਪ ਨਹੀਂ, ਸਿਰਫ਼ ਫਾਰਮ ਨਿਯੰਤਰਣ।
- <ਫਾਰਮ ਕਲਾਸ = "ਚੰਗੀ" >
- <label> ਲੇਬਲ ਨਾਮ </label>
- <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "span3" ਪਲੇਸਹੋਲਡਰ = "ਕੁਝ ਟਾਈਪ ਕਰੋ..." >
- <span class = "help-inline" > ਸੰਬੰਧਿਤ ਮਦਦ ਟੈਕਸਟ! </span>
- <ਲੇਬਲ ਕਲਾਸ = "ਚੈੱਕਬਾਕਸ" >
- <ਇਨਪੁਟ ਕਿਸਮ = "ਚੈੱਕਬਾਕਸ" > ਮੈਨੂੰ ਚੈੱਕ ਕਰੋ
- </label>
- <button type = "submit" class = "btn" > ਸਪੁਰਦ ਕਰੋ </button>
- </form>
ਪੂਰਵ-ਨਿਰਧਾਰਤ ਵੈਬਕਿੱਟ ਸ਼ੈਲੀਆਂ ਨੂੰ ਪ੍ਰਤੀਬਿੰਬਤ ਕਰਨਾ, ਸਿਰਫ਼ .form-searchਵਾਧੂ ਗੋਲ ਖੋਜ ਖੇਤਰਾਂ ਲਈ ਜੋੜੋ।
- <form ਕਲਾਸ = " well form-search" >
- <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "ਇਨਪੁਟ-ਮੀਡੀਅਮ ਖੋਜ-ਕਵੇਰੀ" >
- <button type = "submit" class = "btn" > ਖੋਜ </button>
- </form>
ਇਨਪੁਟਸ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਬਲਾਕ ਪੱਧਰ ਹਨ। ਲਈ .form-inlineਅਤੇ .form-horizontal, ਅਸੀਂ ਇਨਲਾਈਨ-ਬਲਾਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।
- <ਫਾਰਮ ਕਲਾਸ = "ਵੈਲ ਫਾਰਮ-ਇਨਲਾਈਨ" >
- <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "ਇਨਪੁਟ-ਸਮਾਲ" ਪਲੇਸਹੋਲਡਰ = "ਈਮੇਲ" >
- <ਇਨਪੁਟ ਕਿਸਮ = "ਪਾਸਵਰਡ" ਕਲਾਸ = "ਇਨਪੁਟ-ਸਮਾਲ" ਪਲੇਸਹੋਲਡਰ = "ਪਾਸਵਰਡ" >
- <ਲੇਬਲ ਕਲਾਸ = "ਚੈੱਕਬਾਕਸ" >
- <ਇਨਪੁਟ ਕਿਸਮ = "ਚੈੱਕਬਾਕਸ" > ਮੈਨੂੰ ਯਾਦ ਰੱਖੋ
- </label>
- <button type = "submit" class = "btn" > ਸਾਈਨ ਇਨ ਕਰੋ </button>
- </form>
ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਫਾਰਮ ਲੇਆਉਟ ਦੇ ਮੱਦੇਨਜ਼ਰ, ਇੱਥੇ ਪਹਿਲੇ ਇੰਪੁੱਟ ਅਤੇ ਕੰਟਰੋਲ ਗਰੁੱਪ ਨਾਲ ਸਬੰਧਿਤ ਮਾਰਕਅੱਪ ਹੈ। ਸਟਾਈਲਿੰਗ ਲਈ , , ਅਤੇ ਕਲਾਸਾਂ ਦੀ ਲੋੜ .control-groupਹੈ .control-label।.controls
- <ਫਾਰਮ ਕਲਾਸ = "ਫਾਰਮ-ਹਰੀਜ਼ੋਂਟਲ" >
- <fieldset>
- <legend> Legend text </legend>
- <div ਕਲਾਸ = "ਕੰਟਰੋਲ-ਗਰੁੱਪ" >
- <label class = "control-label" for = "input01" > ਟੈਕਸਟ ਇਨਪੁਟ </label>
- <div ਕਲਾਸ = "ਨਿਯੰਤਰਣ" >
- <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "ਇਨਪੁਟ-ਐਕਸਲਾਰਜ" ਆਈਡੀ = "ਇਨਪੁਟ01" >
- <p class = "help-block" > ਸਹਾਇਕ ਮਦਦ ਟੈਕਸਟ </p>
- </div>
- </div>
- </fieldset>
- </form>
ਖੱਬੇ ਪਾਸੇ ਦਿਖਾਏ ਗਏ ਸਾਰੇ ਡਿਫੌਲਟ ਫਾਰਮ ਨਿਯੰਤਰਣ ਹਨ ਜਿਨ੍ਹਾਂ ਦਾ ਅਸੀਂ ਸਮਰਥਨ ਕਰਦੇ ਹਾਂ। ਇੱਥੇ ਬੁਲੇਟ ਕੀਤੀ ਸੂਚੀ ਹੈ:
v1.4 ਤੱਕ, ਬੂਟਸਟਰੈਪ ਦੇ ਡਿਫਾਲਟ ਫਾਰਮ ਸਟਾਈਲ ਹਰੀਜੱਟਲ ਲੇਆਉਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਬੂਟਸਟਰੈਪ 2 ਦੇ ਨਾਲ, ਅਸੀਂ ਕਿਸੇ ਵੀ ਰੂਪ ਲਈ ਚੁਸਤ, ਵਧੇਰੇ ਸਕੇਲੇਬਲ ਡਿਫੌਲਟ ਰੱਖਣ ਲਈ ਉਸ ਰੁਕਾਵਟ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਹੈ।
ਬੂਟਸਟਰੈਪ ਬ੍ਰਾਊਜ਼ਰ-ਸਮਰਥਿਤ ਫੋਕਸਡ ਅਤੇ ਸਟੇਟਸ ਲਈ ਸਟਾਈਲ ਫੀਚਰ ਕਰਦਾ disabledਹੈ। ਅਸੀਂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਵੈਬਕਿੱਟ ਨੂੰ ਹਟਾ ਦਿੰਦੇ ਹਾਂ ਅਤੇ ਇਸਦੀ ਥਾਂ 'ਤੇ ਲਈ outlineਲਾਗੂ ਕਰਦੇ ਹਾਂ ।box-shadow:focus
ਇਸ ਵਿੱਚ ਗਲਤੀਆਂ, ਚੇਤਾਵਨੀਆਂ ਅਤੇ ਸਫਲਤਾ ਲਈ ਪ੍ਰਮਾਣਿਕਤਾ ਸਟਾਈਲ ਵੀ ਸ਼ਾਮਲ ਹਨ। ਵਰਤਣ ਲਈ, ਆਲੇ ਦੁਆਲੇ ਦੇ ਵਿੱਚ ਗਲਤੀ ਕਲਾਸ ਜੋੜੋ .control-group।
- <ਫੀਲਡਸੈੱਟ
- ਕਲਾਸ = "ਕੰਟਰੋਲ-ਗਰੁੱਪ ਗਲਤੀ" >
- …
- </fieldset>
ਇਨਪੁਟ ਸਮੂਹ—ਜੋੜੇ ਗਏ ਜਾਂ ਪਹਿਲਾਂ-ਪੇਸ਼ ਕੀਤੇ ਟੈਕਸਟ ਦੇ ਨਾਲ—ਤੁਹਾਡੇ ਇਨਪੁਟਸ ਲਈ ਵਧੇਰੇ ਸੰਦਰਭ ਦੇਣ ਦਾ ਆਸਾਨ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਮਹਾਨ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਟਵਿੱਟਰ ਉਪਭੋਗਤਾ ਨਾਮਾਂ ਲਈ @ ਚਿੰਨ੍ਹ ਜਾਂ ਵਿੱਤ ਲਈ $ ਸ਼ਾਮਲ ਹਨ।
v1.4 ਤੱਕ, ਬੂਟਸਟਰੈਪ ਨੂੰ ਉਹਨਾਂ ਨੂੰ ਸਟੈਕ ਕਰਨ ਲਈ ਚੈਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਵਾਧੂ ਮਾਰਕਅੱਪ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਹੁਣ, ਇਸ ਨੂੰ ਦੁਹਰਾਉਣਾ ਇੱਕ ਸਧਾਰਨ ਮਾਮਲਾ ਹੈ <label class="checkbox">ਜੋ ਲਪੇਟਦਾ ਹੈ <input type="checkbox">।
ਇਨਲਾਈਨ ਚੈੱਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਵੀ ਸਮਰਥਿਤ ਹਨ। ਬੱਸ .inlineਕਿਸੇ ਵਿੱਚ ਜੋੜੋ .checkboxਜਾਂ .radioਅਤੇ ਤੁਸੀਂ ਪੂਰਾ ਕਰ ਲਿਆ।
ਇੱਕ ਇਨਲਾਈਨ ਰੂਪ ਵਿੱਚ ਇਨਪੁਟਸ ਨੂੰ ਪਹਿਲਾਂ ਤੋਂ ਜੋੜਨ ਜਾਂ ਜੋੜਨ ਲਈ, ਖਾਲੀ ਥਾਂ ਤੋਂ ਬਿਨਾਂ ਅਤੇ ਉਸੇ ਲਾਈਨ 'ਤੇ ਰੱਖਣਾ ਯਕੀਨੀ .add-onਬਣਾਓ input।
ਆਪਣੇ ਫਾਰਮ ਇਨਪੁਟਸ ਲਈ ਮਦਦ ਟੈਕਸਟ ਸ਼ਾਮਲ ਕਰਨ ਲਈ, ਇਨਪੁੱਟ ਐਲੀਮੈਂਟ ਦੇ ਬਾਅਦ ਦੇ ਨਾਲ ਇਨਲਾਈਨ ਮਦਦ ਟੈਕਸਟ <span class="help-inline">ਜਾਂ ਮਦਦ ਟੈਕਸਟ ਬਲਾਕ ਸ਼ਾਮਲ ਕਰੋ।<p class="help-block">
ਹਰੇਕ ਆਈਕਨ ਨੂੰ ਇੱਕ ਵਾਧੂ ਬੇਨਤੀ ਕਰਨ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਸਪ੍ਰਾਈਟ ਵਿੱਚ ਕੰਪਾਇਲ ਕੀਤਾ ਹੈ - ਇੱਕ ਫਾਈਲ ਵਿੱਚ ਚਿੱਤਰਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਜੋ ਚਿੱਤਰਾਂ ਨੂੰ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖਣ ਲਈ CSS ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ background-position। ਇਹ ਉਹੀ ਤਰੀਕਾ ਹੈ ਜੋ ਅਸੀਂ Twitter.com 'ਤੇ ਵਰਤਦੇ ਹਾਂ ਅਤੇ ਇਸ ਨੇ ਸਾਡੇ ਲਈ ਵਧੀਆ ਕੰਮ ਕੀਤਾ ਹੈ।
ਸਾਰੇ ਆਈਕਨ ਕਲਾਸਾਂ ਨੂੰ .icon-ਸਹੀ ਨੇਮਸਪੇਸਿੰਗ ਅਤੇ ਸਕੋਪਿੰਗ ਲਈ ਅਗੇਤਰ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਸਾਡੇ ਦੂਜੇ ਭਾਗਾਂ ਵਾਂਗ। ਇਹ ਦੂਜੇ ਸਾਧਨਾਂ ਨਾਲ ਟਕਰਾਅ ਤੋਂ ਬਚਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।
Glyphicons ਨੇ ਸਾਨੂੰ ਸਾਡੀ ਓਪਨ-ਸੋਰਸ ਟੂਲਕਿੱਟ ਵਿੱਚ ਸੈੱਟ ਕੀਤੇ ਹਾਫਲਿੰਗਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੱਤੀ ਹੈ ਜਦੋਂ ਤੱਕ ਅਸੀਂ ਇੱਥੇ ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਇੱਕ ਲਿੰਕ ਅਤੇ ਕ੍ਰੈਡਿਟ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਾਂ। ਕਿਰਪਾ ਕਰਕੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਅਜਿਹਾ ਕਰਨ ਬਾਰੇ ਵਿਚਾਰ ਕਰੋ।
ਬੂਟਸਟਰੈਪ <i>ਸਾਰੇ ਆਈਕਾਨਾਂ ਲਈ ਇੱਕ ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਪਰ ਉਹਨਾਂ ਕੋਲ ਕੋਈ ਕੇਸ ਕਲਾਸ ਨਹੀਂ ਹੈ-ਸਿਰਫ ਇੱਕ ਸਾਂਝਾ ਅਗੇਤਰ। ਵਰਤਣ ਲਈ, ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਲਗਭਗ ਕਿਤੇ ਵੀ ਰੱਖੋ:
- <i ਕਲਾਸ = "ਆਈਕਨ-ਖੋਜ" ></i>
ਉਲਟੇ (ਚਿੱਟੇ) ਆਈਕਨਾਂ ਲਈ ਵੀ ਸਟਾਈਲ ਉਪਲਬਧ ਹਨ, ਜੋ ਇੱਕ ਵਾਧੂ ਕਲਾਸ ਨਾਲ ਤਿਆਰ ਹਨ:
- <i class = "icon-search icon-white" ></i>
ਤੁਹਾਡੇ ਆਈਕਾਨਾਂ ਲਈ ਚੁਣਨ ਲਈ 120 ਕਲਾਸਾਂ ਹਨ। ਬਸ <i>ਸਹੀ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਇੱਕ ਟੈਗ ਜੋੜੋ ਅਤੇ ਤੁਸੀਂ ਸੈੱਟ ਹੋ ਗਏ ਹੋ। ਤੁਸੀਂ ਪੂਰੀ ਸੂਚੀ sprites.less ਵਿੱਚ ਜਾਂ ਇੱਥੇ ਇਸ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਲੱਭ ਸਕਦੇ ਹੋ।
ਸਿਰ! <i>ਟੈਕਸਟ ਦੀਆਂ ਸਤਰਾਂ ਦੇ ਨਾਲ ਵਰਤਦੇ ਸਮੇਂ, ਜਿਵੇਂ ਕਿ ਬਟਨਾਂ ਜਾਂ ਨੇਵੀ ਲਿੰਕਾਂ ਵਿੱਚ, ਸਹੀ ਸਪੇਸਿੰਗ ਲਈ ਟੈਗ ਦੇ ਬਾਅਦ ਇੱਕ ਸਪੇਸ ਛੱਡਣਾ ਯਕੀਨੀ ਬਣਾਓ ।
ਆਈਕਨ ਬਹੁਤ ਵਧੀਆ ਹਨ, ਪਰ ਕੋਈ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਿੱਥੇ ਕਰੇਗਾ? ਇੱਥੇ ਕੁਝ ਵਿਚਾਰ ਹਨ:
ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ, ਕਿਤੇ ਵੀ ਤੁਸੀਂ ਇੱਕ <i>ਟੈਗ ਲਗਾ ਸਕਦੇ ਹੋ, ਤੁਸੀਂ ਇੱਕ ਆਈਕਨ ਲਗਾ ਸਕਦੇ ਹੋ।
ਉਹਨਾਂ ਨੂੰ ਬਟਨਾਂ, ਟੂਲਬਾਰ, ਨੈਵੀਗੇਸ਼ਨ, ਜਾਂ ਪ੍ਰਿਪੇਂਡ ਫਾਰਮ ਇਨਪੁਟਸ ਲਈ ਬਟਨ ਸਮੂਹਾਂ ਵਿੱਚ ਵਰਤੋ।