ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਸਕੇਲ

ਸਮੁੱਚੀ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਗਰਿੱਡ ਸਾਡੀ 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.

ਜ਼ੋਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ

ਫਿਊਸ ਡੈਪੀਬਸ , ਟੇਲਸ ਏਸੀ ਕਰਸਸ ਕੋਮੋਡੋ , ਟੋਰਟਰ ਮੌਰੀਸ ਕੰਡੀਮੈਂਟਮ ਨਿਭ , ਯੂਟ ਫਰਮੈਂਟਮ ਮਾਸਾ ਜਸਟ ਅਮੇਟ ਰਿਸਸ । Maecenas faucibus mollis interdum. ਨੱਲਾ ਵਿਟਾਏ ਇਲੀਟ ਲਿਬੇਰੋ, ਇੱਕ ਫਰੇਟਰਾ ਔਗ।

ਨੋਟ: ਵਰਤਣ ਲਈ ਮੁਫ਼ਤ ਮਹਿਸੂਸ ਕਰੋ <b>ਅਤੇ <i>HTML5 ਵਿੱਚ, ਪਰ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਵਿੱਚ ਥੋੜਾ ਬਦਲਾਅ ਆਇਆ ਹੈ। <b>ਵਾਧੂ ਮਹੱਤਵ ਦੱਸੇ ਬਿਨਾਂ ਸ਼ਬਦਾਂ ਜਾਂ ਵਾਕਾਂਸ਼ਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਨ <i>ਲਈ ਹੈ ਜਦੋਂ ਕਿ ਜ਼ਿਆਦਾਤਰ ਆਵਾਜ਼, ਤਕਨੀਕੀ ਸ਼ਬਦਾਂ, ਆਦਿ ਲਈ ਹੈ।

ਉਦਾਹਰਨ ਪਤੇ

ਇੱਥੇ ਦੋ ਉਦਾਹਰਣਾਂ ਹਨ ਕਿ <address>ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ:

ਉਦਾਹਰਨ ਸੰਖੇਪ

ਸੰਖੇਪ ਰੂਪਾਂ ਨੂੰ ਵੱਡੇ ਅੱਖਰ ਟੈਕਸਟ ਅਤੇ ਇੱਕ ਹਲਕੇ ਬਿੰਦੀਆਂ ਵਾਲੇ ਹੇਠਲੇ ਕਿਨਾਰੇ ਨਾਲ ਸਟਾਈਲ ਕੀਤਾ ਗਿਆ ਹੈ। ਉਹਨਾਂ ਕੋਲ ਹੋਵਰ 'ਤੇ ਇੱਕ ਮਦਦ ਕਰਸਰ ਵੀ ਹੈ ਇਸਲਈ ਉਪਭੋਗਤਾਵਾਂ ਕੋਲ ਵਾਧੂ ਸੰਕੇਤ ਹਨ ਕਿ ਹੋਵਰ 'ਤੇ ਕੁਝ ਦਿਖਾਇਆ ਜਾਵੇਗਾ।

ਕੱਟੀ ਹੋਈ ਰੋਟੀ ਤੋਂ ਬਾਅਦ HTML ਸਭ ਤੋਂ ਵਧੀਆ ਚੀਜ਼ ਹੈ।

ਗੁਣ ਸ਼ਬਦ ਦਾ ਸੰਖੇਪ ਰੂਪ attr ਹੈ ।

ਇੱਕ ਬਲਾਕਕੋਟ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ, <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>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• ਮਾਸਾ ਤੇ ਪੂਰਨ ਅੰਕ ਮੋਲੇਸਟੀ ਲੋਰੇਮ
• ਪ੍ਰੀਟਿਅਮ ਨਿਸਲ ਐਲੀਕੇਟ ਵਿੱਚ ਫੈਸਿਲਿਸਿਸ
• ਨੂਲਾ ਵੁਲਟਪਟ ਅਲੀਕਮ ਵੇਲੀਟ
  • ਫੇਸੇਲਸ ਆਈਕੁਲਿਸ ਨੇਕ
  • ਪਰਸ ਸੋਡੇਲਸ ਅਲਟ੍ਰੀਸਿਸ
  • ਵੈਸਟੀਬੁਲਮ ਲਾਓਰੇਟ ਪੋਰਟਟੀਟਰ ਸੇਮ
  • ਏਸੀ ਟ੍ਰਿਸਟਿਕ ਲਿਬੇਰੋ ਵੋਲਟਪੈਟ 'ਤੇ
• Faucibus porta lacus fringilla vel
• ਏਨੇਨ ਬੈਠ ਅਮੇਤ ਏਰਤ ਨੰਕ
• Eget porttitor lorem

ਅਨਸਟਾਇਲਡ

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• ਮਾਸਾ ਤੇ ਪੂਰਨ ਅੰਕ ਮੋਲੇਸਟੀ ਲੋਰੇਮ
• ਪ੍ਰੀਟਿਅਮ ਨਿਸਲ ਐਲੀਕੇਟ ਵਿੱਚ ਫੈਸਿਲਿਸਿਸ
• ਨੂਲਾ ਵੁਲਟਪਟ ਅਲੀਕਮ ਵੇਲੀਟ
  • ਫੇਸੇਲਸ ਆਈਕੁਲਿਸ ਨੇਕ
  • ਪਰਸ ਸੋਡੇਲਸ ਅਲਟ੍ਰੀਸਿਸ
  • ਵੈਸਟੀਬੁਲਮ ਲਾਓਰੇਟ ਪੋਰਟਟੀਟਰ ਸੇਮ
  • ਏਸੀ ਟ੍ਰਿਸਟਿਕ ਲਿਬੇਰੋ ਵੋਲਟਪੈਟ 'ਤੇ
• Faucibus porta lacus fringilla vel
• ਏਨੇਨ ਬੈਠ ਅਮੇਤ ਏਰਤ ਨੰਕ
• Eget porttitor lorem

ਆਰਡਰ ਕੀਤਾ

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. ਮਾਸਾ ਤੇ ਪੂਰਨ ਅੰਕ ਮੋਲੇਸਟੀ ਲੋਰੇਮ
4. ਪ੍ਰੀਟਿਅਮ ਨਿਸਲ ਐਲੀਕੇਟ ਵਿੱਚ ਫੈਸਿਲਿਸਿਸ
5. ਨੂਲਾ ਵੁਲਟਪਟ ਅਲੀਕਮ ਵੇਲੀਟ
6. Faucibus porta lacus fringilla vel
7. ਏਨੇਨ ਬੈਠ ਅਮੇਤ ਏਰਤ ਨੰਕ
8. Eget porttitor lorem

ਵਰਣਨ

<dl>

ਵਰਣਨ ਸੂਚੀਆਂ

ਇੱਕ ਵਰਣਨ ਸੂਚੀ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹੈ।

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

ਮਲੇਸੁਆਡਾ ਪੋਰਟਾ

Etiam porta sem malesuada magna mollis euismod.

ਇਨ ਲਾਇਨ

ਕੋਡ ਦੇ ਇਨਲਾਈਨ ਸਨਿੱਪਟ ਨੂੰ ਨਾਲ ਲਪੇਟੋ <code>।

ਉਦਾਹਰਨ ਲਈ , <code> ਭਾਗ </ code > ਨੂੰ ਇਨਲਾਈਨ ਦੇ ਰੂਪ ਵਿੱਚ ਲਪੇਟਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ।  

ਮੂਲ ਬਲਾਕ

<pre>ਕੋਡ ਦੀਆਂ ਕਈ ਲਾਈਨਾਂ ਲਈ ਵਰਤੋਂ । ਸਹੀ ਰੈਂਡਰਿੰਗ ਲਈ ਕਿਸੇ ਵੀ ਕੈਰੇਟਸ ਨੂੰ ਉਹਨਾਂ ਦੇ ਯੂਨੀਕੋਡ ਅੱਖਰਾਂ ਵਿੱਚ ਬਦਲਣਾ ਯਕੀਨੀ ਬਣਾਓ।

<p>ਇੱਥੇ ਨਮੂਨਾ ਪਾਠ...</p>

<pre>
  <p>ਨਮੂਨਾ ਟੈਕਸਟ ਇੱਥੇ...</p>
</pre>

ਨੋਟ:<pre> ਟੈਗਾਂ ਦੇ ਅੰਦਰ ਕੋਡ ਨੂੰ ਜਿੰਨਾ ਸੰਭਵ ਹੋ ਸਕੇ ਖੱਬੇ ਪਾਸੇ ਰੱਖਣਾ ਯਕੀਨੀ ਬਣਾਓ ; ਇਹ ਸਾਰੀਆਂ ਟੈਬਾਂ ਨੂੰ ਰੈਂਡਰ ਕਰੇਗਾ।

ਗੂਗਲ ਪ੍ਰੀਟੀਫਾਈ

ਉਹੀ <pre>ਤੱਤ ਲਓ ਅਤੇ ਵਿਸਤ੍ਰਿਤ ਰੈਂਡਰਿੰਗ ਲਈ ਦੋ ਵਿਕਲਪਿਕ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ।

<p> ਨਮੂਨਾ ਪਾਠ ਇੱਥੇ... </p>

<pre class = "prettyprint 
     ਲਾਈਨਨਮ" >
  <p>ਨਮੂਨਾ ਟੈਕਸਟ ਇੱਥੇ...</p>
</pre>

google-code-prettify ਨੂੰ ਡਾਊਨਲੋਡ ਕਰੋ ਅਤੇ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ ਲਈ ਰੀਡਮੀ ਦੇਖੋ।

<ਟੇਬਲ>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

ਪੜ੍ਹਨਯੋਗਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਅਤੇ ਢਾਂਚੇ ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਲਈ ਟੇਬਲਾਂ ਨੂੰ ਸਿਰਫ਼ ਕੁਝ ਕਿਨਾਰਿਆਂ ਨਾਲ ਆਪਣੇ ਆਪ ਹੀ ਸਟਾਈਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। 2.0 ਦੇ ਨਾਲ, .tableਕਲਾਸ ਦੀ ਲੋੜ ਹੈ।

<ਟੇਬਲ ਕਲਾਸ = "ਟੇਬਲ" > 
  …
</table>

ਜ਼ੈਬਰਾ-ਸਟ੍ਰਿਪਿੰਗ ਜੋੜ ਕੇ ਆਪਣੀਆਂ ਟੇਬਲਾਂ ਨਾਲ ਥੋੜਾ ਜਿਹਾ ਫੈਂਸੀ ਪ੍ਰਾਪਤ ਕਰੋ—ਬੱਸ .table-stripedਕਲਾਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ।

ਨੋਟ: ਸਪ੍ਰਾਈਟਿਡ ਟੇਬਲ :nth-childCSS ਚੋਣਕਾਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਅਤੇ IE7-IE8 ਵਿੱਚ ਉਪਲਬਧ ਨਹੀਂ ਹਨ।

<ਟੇਬਲ ਕਲਾਸ = "ਟੇਬਲ ਟੇਬਲ-ਸਟਰਿਪਡ" > 
  …
</table>

ਸੁਹਜ ਦੇ ਉਦੇਸ਼ਾਂ ਲਈ ਪੂਰੀ ਮੇਜ਼ ਦੇ ਆਲੇ ਦੁਆਲੇ ਬਾਰਡਰ ਅਤੇ ਗੋਲ ਕੋਨਿਆਂ ਨੂੰ ਜੋੜੋ।

<ਟੇਬਲ ਕਲਾਸ = "ਟੇਬਲ ਟੇਬਲ ਬਾਰਡਰਡ" > 
  …
</table>

.table-condensedਟੇਬਲ ਸੈੱਲ ਪੈਡਿੰਗ ਨੂੰ ਅੱਧੇ (8px ਤੋਂ 4px ਤੱਕ) ਵਿੱਚ ਕੱਟਣ ਲਈ ਕਲਾਸ ਨੂੰ ਜੋੜ ਕੇ ਆਪਣੀਆਂ ਟੇਬਲਾਂ ਨੂੰ ਹੋਰ ਸੰਖੇਪ ਬਣਾਓ ।

<ਟੇਬਲ ਕਲਾਸ = "ਟੇਬਲ ਟੇਬਲ-ਕੰਡੈਂਸਡ" > 
  …
</table>

ਕਿਸੇ ਵੀ ਉਪਲਬਧ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੱਖ-ਵੱਖ ਦਿੱਖ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਕਿਸੇ ਵੀ ਟੇਬਲ ਕਲਾਸਾਂ ਨੂੰ ਜੋੜਨ ਲਈ ਬੇਝਿਜਕ ਮਹਿਸੂਸ ਕਰੋ।

<ਟੇਬਲ ਕਲਾਸ = "ਟੇਬਲ ਟੇਬਲ-ਸਟਰਿਪਡ ਟੇਬਲ-ਬਾਰਡਰਡ ਟੇਬਲ-ਕੰਡੈਂਸਡ" > 
  ...
</table>

ਲਚਕਦਾਰ HTML ਅਤੇ CSS

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਫਾਰਮਾਂ ਬਾਰੇ ਸਭ ਤੋਂ ਵਧੀਆ ਗੱਲ ਇਹ ਹੈ ਕਿ ਤੁਹਾਡੇ ਸਾਰੇ ਇਨਪੁਟਸ ਅਤੇ ਨਿਯੰਤਰਣ ਸ਼ਾਨਦਾਰ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਭਾਵੇਂ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਮਾਰਕਅੱਪ ਵਿੱਚ ਕਿਵੇਂ ਬਣਾਉਂਦੇ ਹੋ। ਕਿਸੇ ਲੋੜੀਂਦੇ HTML ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਪਰ ਅਸੀਂ ਉਹਨਾਂ ਲਈ ਪੈਟਰਨ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਾਂ ਜਿਨ੍ਹਾਂ ਨੂੰ ਇਸਦੀ ਲੋੜ ਹੈ।

ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਲੇਆਉਟ ਆਸਾਨ ਸਟਾਈਲਿੰਗ ਅਤੇ ਇਵੈਂਟ ਬਾਈਡਿੰਗ ਲਈ ਸੰਖੇਪ ਅਤੇ ਸਕੇਲੇਬਲ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਆਉਂਦੇ ਹਨ, ਇਸਲਈ ਤੁਸੀਂ ਹਰ ਕਦਮ 'ਤੇ ਕਵਰ ਹੋ ਜਾਂਦੇ ਹੋ।

ਚਾਰ ਲੇਆਉਟ ਸ਼ਾਮਲ ਹਨ

ਬੂਟਸਟਰੈਪ ਚਾਰ ਕਿਸਮਾਂ ਦੇ ਫਾਰਮ ਲੇਆਉਟ ਲਈ ਸਮਰਥਨ ਨਾਲ ਆਉਂਦਾ ਹੈ:

• ਵਰਟੀਕਲ (ਡਿਫੌਲਟ)
• ਖੋਜ
• ਇਨ ਲਾਇਨ
• ਹਰੀਜੱਟਲ

ਵੱਖ-ਵੱਖ ਕਿਸਮਾਂ ਦੇ ਫਾਰਮ ਲੇਆਉਟ ਨੂੰ ਮਾਰਕਅੱਪ ਲਈ ਕੁਝ ਤਬਦੀਲੀਆਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਪਰ ਨਿਯੰਤਰਣ ਆਪਣੇ ਆਪ ਹੀ ਰਹਿੰਦੇ ਹਨ ਅਤੇ ਉਹੀ ਵਰਤਾਓ ਕਰਦੇ ਹਨ।

ਕੰਟਰੋਲ ਰਾਜ ਅਤੇ ਹੋਰ

ਬੂਟਸਟਰੈਪ ਦੇ ਫਾਰਮਾਂ ਵਿੱਚ ਸਾਰੇ ਬੇਸ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਜਿਵੇਂ ਕਿ ਇਨਪੁਟ, ਟੈਕਸਟੇਰੀਆ, ਅਤੇ ਉਹ ਚੋਣ ਜੋ ਤੁਸੀਂ ਉਮੀਦ ਕਰਦੇ ਹੋ ਲਈ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ। ਪਰ ਇਹ ਕਈ ਕਸਟਮ ਕੰਪੋਨੈਂਟਸ ਦੇ ਨਾਲ ਵੀ ਆਉਂਦਾ ਹੈ ਜਿਵੇਂ ਕਿ ਜੋੜਿਆ ਅਤੇ ਪ੍ਰੀਪੇਂਡ ਇਨਪੁਟਸ ਅਤੇ ਚੈੱਕਬਾਕਸਾਂ ਦੀਆਂ ਸੂਚੀਆਂ ਲਈ ਸਮਰਥਨ।

ਹਰ ਕਿਸਮ ਦੇ ਫਾਰਮ ਨਿਯੰਤਰਣ ਲਈ ਗਲਤੀ, ਚੇਤਾਵਨੀ ਅਤੇ ਸਫਲਤਾ ਵਰਗੇ ਰਾਜ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਹਨ। ਅਯੋਗ ਨਿਯੰਤਰਣ ਲਈ ਸਟਾਈਲ ਵੀ ਸ਼ਾਮਲ ਹਨ।

v2.0 ਦੇ ਨਾਲ, ਸਾਡੇ ਕੋਲ ਫਾਰਮ ਸਟਾਈਲ ਲਈ ਹਲਕੇ ਅਤੇ ਚੁਸਤ ਡਿਫੌਲਟ ਹਨ। ਕੋਈ ਵਾਧੂ ਮਾਰਕਅੱਪ ਨਹੀਂ, ਸਿਰਫ਼ ਫਾਰਮ ਨਿਯੰਤਰਣ।

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਵੈਬਕਿੱਟ ਸ਼ੈਲੀਆਂ ਨੂੰ ਪ੍ਰਤੀਬਿੰਬਤ ਕਰਨਾ, ਸਿਰਫ਼ .form-searchਵਾਧੂ ਗੋਲ ਖੋਜ ਖੇਤਰਾਂ ਲਈ ਜੋੜੋ।

ਇਨਪੁਟਸ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਬਲਾਕ ਪੱਧਰ ਹਨ। ਲਈ .form-inlineਅਤੇ .form-horizontal, ਅਸੀਂ ਇਨਲਾਈਨ-ਬਲਾਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।

ਕੀ ਸ਼ਾਮਲ ਹੈ

ਖੱਬੇ ਪਾਸੇ ਦਿਖਾਏ ਗਏ ਸਾਰੇ ਡਿਫੌਲਟ ਫਾਰਮ ਨਿਯੰਤਰਣ ਹਨ ਜਿਨ੍ਹਾਂ ਦਾ ਅਸੀਂ ਸਮਰਥਨ ਕਰਦੇ ਹਾਂ। ਇੱਥੇ ਬੁਲੇਟ ਕੀਤੀ ਸੂਚੀ ਹੈ:

• ਟੈਕਸਟ ਇਨਪੁਟਸ (ਟੈਕਸਟ, ਪਾਸਵਰਡ, ਈਮੇਲ, ਆਦਿ)
• ਚੈੱਕਬਾਕਸ
• ਰੇਡੀਓ
• ਚੁਣੋ
• ਮਲਟੀਪਲ ਚੋਣ
• ਫਾਈਲ ਇੰਪੁੱਟ
• ਟੈਕਸਟੇਰੀਆ

v2.0 ਦੇ ਨਾਲ ਨਵੇਂ ਡਿਫੌਲਟ

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">

ਕਾਰਵਾਈਆਂ ਲਈ ਬਟਨ

ਇੱਕ ਪਰੰਪਰਾ ਦੇ ਤੌਰ 'ਤੇ, ਬਟਨਾਂ ਦੀ ਵਰਤੋਂ ਸਿਰਫ਼ ਕਿਰਿਆਵਾਂ ਲਈ ਕੀਤੀ ਜਾਣੀ ਚਾਹੀਦੀ ਹੈ ਜਦੋਂ ਕਿ ਹਾਈਪਰਲਿੰਕਸ ਵਸਤੂਆਂ ਲਈ ਵਰਤੇ ਜਾਣੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, "ਡਾਊਨਲੋਡ" ਇੱਕ ਬਟਨ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜਦੋਂ ਕਿ "ਹਾਲੀਆ ਗਤੀਵਿਧੀ" ਇੱਕ ਲਿੰਕ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।

ਐਂਕਰ ਅਤੇ ਫਾਰਮ ਲਈ

ਬਟਨ ਸਟਾਈਲ ਨੂੰ ਲਾਗੂ ਕੀਤੇ ਨਾਲ ਕਿਸੇ ਵੀ ਚੀਜ਼ 'ਤੇ .btnਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ. ਹਾਲਾਂਕਿ, ਆਮ ਤੌਰ 'ਤੇ ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਸਿਰਫ਼ <a>ਅਤੇ <button>ਤੱਤਾਂ 'ਤੇ ਲਾਗੂ ਕਰਨਾ ਚਾਹੋਗੇ।

ਨੋਟ: ਸਾਰੇ ਬਟਨਾਂ ਵਿੱਚ .btnਕਲਾਸ ਸ਼ਾਮਲ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਇਕਸਾਰਤਾ ਲਈ ਬਟਨ ਸਟਾਈਲ <button>ਅਤੇ ਤੱਤ ਲਾਗੂ ਕੀਤੇ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ ।<a>

ਕਈ ਆਕਾਰ

ਫੈਨਸੀ ਵੱਡੇ ਜਾਂ ਛੋਟੇ ਬਟਨ? ਇਸ 'ਤੇ ਹੈ!

ਮੁੱਢਲੀ ਕਾਰਵਾਈ ਕਾਰਵਾਈ

ਮੁੱਢਲੀ ਕਾਰਵਾਈ ਕਾਰਵਾਈ

ਅਪਾਹਜ ਸਥਿਤੀ

ਅਯੋਗ ਬਟਨਾਂ ਲਈ, .btn-disabledਲਿੰਕਾਂ ਅਤੇ ਤੱਤਾਂ :disabledਲਈ ਵਰਤੋਂ।<button>

ਮੁੱਢਲੀ ਕਾਰਵਾਈ ਕਾਰਵਾਈ

ਮੁੱਢਲੀ ਕਾਰਵਾਈ ਕਾਰਵਾਈ

ਕਰਾਸ ਬਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ

IE9 ਵਿੱਚ, ਅਸੀਂ ਗੋਲ ਕੋਨਿਆਂ ਦੇ ਪੱਖ ਵਿੱਚ ਸਾਰੇ ਬਟਨਾਂ 'ਤੇ ਗਰੇਡੀਐਂਟ ਸੁੱਟ ਦਿੰਦੇ ਹਾਂ ਕਿਉਂਕਿ IE9 ਬੈਕਗ੍ਰਾਊਂਡ ਗਰੇਡੀਐਂਟ ਨੂੰ ਕੋਨਿਆਂ ਤੱਕ ਨਹੀਂ ਕੱਟਦਾ।

ਸੰਬੰਧਿਤ, IE9 ਅਸਮਰੱਥ buttonਤੱਤਾਂ ਨੂੰ ਜੈਂਕੀਫਾਈ ਕਰਦਾ ਹੈ, ਇੱਕ ਗੰਦੇ ਟੈਕਸਟ-ਸ਼ੈਡੋ ਨਾਲ ਟੈਕਸਟ ਸਲੇਟੀ ਰੈਂਡਰ ਕਰਦਾ ਹੈ — ਬਦਕਿਸਮਤੀ ਨਾਲ ਅਸੀਂ ਇਸਨੂੰ ਠੀਕ ਨਹੀਂ ਕਰ ਸਕਦੇ।

ਇੱਕ ਸਪ੍ਰਾਈਟ ਦੇ ਰੂਪ ਵਿੱਚ ਬਣਾਇਆ ਗਿਆ

ਹਰੇਕ ਆਈਕਨ ਨੂੰ ਇੱਕ ਵਾਧੂ ਬੇਨਤੀ ਕਰਨ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਸਪ੍ਰਾਈਟ ਵਿੱਚ ਕੰਪਾਇਲ ਕੀਤਾ ਹੈ - ਇੱਕ ਫਾਈਲ ਵਿੱਚ ਚਿੱਤਰਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਜੋ ਚਿੱਤਰਾਂ ਨੂੰ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖਣ ਲਈ CSS ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ background-position। ਇਹ ਉਹੀ ਤਰੀਕਾ ਹੈ ਜੋ ਅਸੀਂ Twitter.com 'ਤੇ ਵਰਤਦੇ ਹਾਂ ਅਤੇ ਇਸ ਨੇ ਸਾਡੇ ਲਈ ਵਧੀਆ ਕੰਮ ਕੀਤਾ ਹੈ।

ਸਾਰੇ ਆਈਕਨ ਕਲਾਸਾਂ ਨੂੰ .icon-ਸਹੀ ਨੇਮਸਪੇਸਿੰਗ ਅਤੇ ਸਕੋਪਿੰਗ ਲਈ ਅਗੇਤਰ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਸਾਡੇ ਦੂਜੇ ਭਾਗਾਂ ਵਾਂਗ। ਇਹ ਦੂਜੇ ਸਾਧਨਾਂ ਨਾਲ ਟਕਰਾਅ ਤੋਂ ਬਚਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।

Glyphicons ਨੇ ਸਾਨੂੰ ਸਾਡੀ ਓਪਨ-ਸੋਰਸ ਟੂਲਕਿੱਟ ਵਿੱਚ ਸੈੱਟ ਕੀਤੇ ਹਾਫਲਿੰਗਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੱਤੀ ਹੈ ਜਦੋਂ ਤੱਕ ਅਸੀਂ ਇੱਥੇ ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਇੱਕ ਲਿੰਕ ਅਤੇ ਕ੍ਰੈਡਿਟ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਾਂ। ਕਿਰਪਾ ਕਰਕੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਅਜਿਹਾ ਕਰਨ ਬਾਰੇ ਵਿਚਾਰ ਕਰੋ।

ਇਹਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

v2.0.0 ਦੇ ਨਾਲ, ਅਸੀਂ ਆਪਣੇ <i>ਸਾਰੇ ਆਈਕਨਾਂ ਲਈ ਇੱਕ ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਚੋਣ ਕੀਤੀ ਹੈ, ਪਰ ਉਹਨਾਂ ਵਿੱਚ ਕੋਈ ਕੇਸ ਕਲਾਸ ਨਹੀਂ ਹੈ-ਸਿਰਫ ਇੱਕ ਸਾਂਝਾ ਅਗੇਤਰ ਹੈ। ਵਰਤਣ ਲਈ, ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਨੂੰ ਲਗਭਗ ਕਿਤੇ ਵੀ ਰੱਖੋ:

<i ਕਲਾਸ = "ਆਈਕਨ-ਖੋਜ" ></i> 

ਉਲਟੇ (ਚਿੱਟੇ) ਆਈਕਨਾਂ ਲਈ ਵੀ ਸਟਾਈਲ ਉਪਲਬਧ ਹਨ, ਜੋ ਇੱਕ ਵਾਧੂ ਕਲਾਸ ਨਾਲ ਤਿਆਰ ਹਨ:

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

ਤੁਹਾਡੇ ਆਈਕਾਨਾਂ ਲਈ ਚੁਣਨ ਲਈ 120 ਕਲਾਸਾਂ ਹਨ। ਬਸ <i>ਸਹੀ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਇੱਕ ਟੈਗ ਜੋੜੋ ਅਤੇ ਤੁਸੀਂ ਸੈੱਟ ਹੋ ਗਏ ਹੋ। ਤੁਸੀਂ ਪੂਰੀ ਸੂਚੀ sprites.less ਵਿੱਚ ਜਾਂ ਇੱਥੇ ਇਸ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਲੱਭ ਸਕਦੇ ਹੋ।

ਕੇਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ

ਆਈਕਨ ਬਹੁਤ ਵਧੀਆ ਹਨ, ਪਰ ਕੋਈ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਿੱਥੇ ਕਰੇਗਾ? ਇੱਥੇ ਕੁਝ ਵਿਚਾਰ ਹਨ:

• ਤੁਹਾਡੀ ਸਾਈਡਬਾਰ ਨੈਵੀਗੇਸ਼ਨ ਲਈ ਵਿਜ਼ੂਅਲ ਵਜੋਂ
• ਪੂਰੀ ਤਰ੍ਹਾਂ ਆਈਕਨ-ਸੰਚਾਲਿਤ ਨੈਵੀਗੇਸ਼ਨ ਲਈ
• ਕਿਸੇ ਕਾਰਵਾਈ ਦੇ ਅਰਥ ਦੱਸਣ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ ਬਟਨਾਂ ਲਈ
• ਉਪਭੋਗਤਾ ਦੀ ਮੰਜ਼ਿਲ 'ਤੇ ਸੰਦਰਭ ਸਾਂਝਾ ਕਰਨ ਲਈ ਲਿੰਕਾਂ ਦੇ ਨਾਲ

ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ, ਕਿਤੇ ਵੀ ਤੁਸੀਂ ਇੱਕ <i>ਟੈਗ ਲਗਾ ਸਕਦੇ ਹੋ, ਤੁਸੀਂ ਇੱਕ ਆਈਕਨ ਲਗਾ ਸਕਦੇ ਹੋ।

ਤਾਜ਼ਾ ਕਰੋ ਕਮਰਾ ਛੱਡ ਦਿਓ ਮਿਟਾਓ

ਟਿੱਪਣੀ ਸੈਟਿੰਗਾਂ ਹੋਰ ਜਾਣਕਾਰੀ