ਬੇਸ CSS

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

ਸਿਰਲੇਖ ਅਤੇ ਬਾਡੀ ਕਾਪੀ

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

ਸਮੁੱਚੀ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਗਰਿੱਡ ਸਾਡੀ variables.less ਫਾਈਲ ਵਿੱਚ ਦੋ ਘੱਟ ਵੇਰੀਏਬਲਾਂ 'ਤੇ ਅਧਾਰਤ ਹੈ: @baseFontSizeਅਤੇ @baseLineHeight. ਪਹਿਲਾ ਹੈ ਬੇਸ ਫੌਂਟ-ਸਾਈਜ਼ ਜੋ ਕਿ ਭਰ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਦੂਜਾ ਬੇਸ ਲਾਈਨ-ਉਚਾਈ ਹੈ।

ਅਸੀਂ ਉਹਨਾਂ ਵੇਰੀਏਬਲਾਂ, ਅਤੇ ਕੁਝ ਗਣਿਤ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਕਿਸਮਾਂ ਅਤੇ ਹੋਰਾਂ ਦੇ ਹਾਸ਼ੀਏ, ਪੈਡਿੰਗ ਅਤੇ ਲਾਈਨ-ਹਾਈਟਸ ਬਣਾਉਣ ਲਈ।

ਉਦਾਹਰਨ ਬੌਡੀ ਟੈਕਸਟ

ਨੱਲਮ ਕਵਿਸ ਰਿਸਸ ਈਗੇਟ ਉਰਨਾ ਮੋਲਿਸ ਓਰਨਾਰੇ ਵੇਲ ਈਯੂ ਲੀਓ. Cum sociis natoque penatibus et magnis dis parturient Montes, nascetur ridiculus mus. ਨੁਲ੍ਲਮ ਇਦ ਡੋਲਰ ਆਈਡੀ ਨਿਭ ਅਲਟ੍ਰੀਸੀਸ ਵਾਹਨ.

ਲੀਡ ਬਾਡੀ ਕਾਪੀ

ਜੋੜ ਕੇ ਇੱਕ ਪੈਰਾਗ੍ਰਾਫ ਨੂੰ ਵੱਖਰਾ ਬਣਾਓ .lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. ਸਿਰਲੇਖ 1

h2. ਸਿਰਲੇਖ 2

h3. ਸਿਰਲੇਖ 3

h4. ਸਿਰਲੇਖ 4

h5. ਸਿਰਲੇਖ 5
h6. ਸਿਰਲੇਖ 6

ਜ਼ੋਰ, ਪਤਾ, ਅਤੇ ਸੰਖੇਪ

ਤੱਤ ਵਰਤੋਂ ਵਿਕਲਪਿਕ
<strong> ਮਹੱਤਵਪੂਰਨ ਦੇ ਨਾਲ ਟੈਕਸਟ ਦੇ ਇੱਕ ਸਨਿੱਪਟ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ ਕੋਈ ਨਹੀਂ
<em> ਤਣਾਅ ਦੇ ਨਾਲ ਟੈਕਸਟ ਦੇ ਇੱਕ ਸਨਿੱਪਟ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ ਕੋਈ ਨਹੀਂ
<abbr> ਹੋਵਰ 'ਤੇ ਵਿਸਤ੍ਰਿਤ ਸੰਸਕਰਣ ਦਿਖਾਉਣ ਲਈ ਸੰਖੇਪ ਅਤੇ ਸੰਖੇਪ ਸ਼ਬਦਾਂ ਨੂੰ ਲਪੇਟਦਾ ਹੈ

titleਵਿਸਤ੍ਰਿਤ ਟੈਕਸਟ ਲਈ ਵਿਕਲਪਿਕ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ

.initialismਵੱਡੇ ਅੱਖਰਾਂ ਲਈ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ ।
<address> ਇਸਦੇ ਨਜ਼ਦੀਕੀ ਪੂਰਵਜ ਜਾਂ ਕੰਮ ਦੇ ਪੂਰੇ ਸਰੀਰ ਲਈ ਸੰਪਰਕ ਜਾਣਕਾਰੀ ਲਈ ਨਾਲ ਸਾਰੀਆਂ ਲਾਈਨਾਂ ਨੂੰ ਖਤਮ ਕਰਕੇ ਫਾਰਮੈਟਿੰਗ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰੋ<br>

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

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

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

ਉਦਾਹਰਨ ਪਤੇ

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

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
ਪੂਰਾ ਨਾਮ
[email protected]

ਉਦਾਹਰਨ ਸੰਖੇਪ

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

initialismਇਸ ਨੂੰ ਥੋੜ੍ਹਾ ਛੋਟਾ ਟੈਕਸਟ ਆਕਾਰ ਦੇ ਕੇ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਇਕਸੁਰਤਾ ਵਧਾਉਣ ਲਈ ਕਲਾਸ ਨੂੰ ਸੰਖੇਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।

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

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

ਬਲਾਕਕੋਟ

ਤੱਤ ਵਰਤੋਂ ਵਿਕਲਪਿਕ
<blockquote> ਕਿਸੇ ਹੋਰ ਸਰੋਤ ਤੋਂ ਸਮੱਗਰੀ ਦਾ ਹਵਾਲਾ ਦੇਣ ਲਈ ਬਲਾਕ-ਪੱਧਰ ਦਾ ਤੱਤ

citeਸਰੋਤ URL ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ

ਫਲੋਟਿਡ ਵਿਕਲਪਾਂ ਲਈ ਵਰਤੋਂ .pull-leftਅਤੇ ਕਲਾਸਾਂ.pull-right
<small> ਇੱਕ ਉਪਭੋਗਤਾ-ਸਾਹਮਣਾ ਵਾਲਾ ਹਵਾਲਾ ਜੋੜਨ ਲਈ ਵਿਕਲਪਿਕ ਤੱਤ, ਖਾਸ ਤੌਰ 'ਤੇ ਕੰਮ ਦੇ ਸਿਰਲੇਖ ਵਾਲਾ ਲੇਖਕ <cite>ਸਰੋਤ ਦੇ ਸਿਰਲੇਖ ਜਾਂ ਨਾਮ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਰੱਖੋ

ਇੱਕ ਬਲਾਕਕੋਟ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ, <blockquote>ਕਿਸੇ ਵੀ HTML ਨੂੰ ਹਵਾਲੇ ਦੇ ਰੂਪ ਵਿੱਚ ਲਪੇਟੋ। ਸਿੱਧੇ ਕੋਟਸ ਲਈ ਅਸੀਂ ਇੱਕ ਦੀ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ <p>

ਆਪਣੇ ਸਰੋਤ ਦਾ ਹਵਾਲਾ ਦੇਣ ਲਈ ਇੱਕ ਵਿਕਲਪਿਕ <small>ਤੱਤ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਤੁਹਾਨੂੰ &mdash;ਸਟਾਈਲਿੰਗ ਦੇ ਉਦੇਸ਼ਾਂ ਲਈ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਐਮ ਡੈਸ਼ ਮਿਲੇਗਾ।

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ posuere erat a ante venenatis. </p>
  3. <small> ਕੋਈ ਮਸ਼ਹੂਰ </small>
  4. </blockquote>

ਬਲਾਕ ਕੋਟਸ ਦੀ ਉਦਾਹਰਨ

ਡਿਫੌਲਟ ਬਲਾਕਕੋਟ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸਟਾਈਲ ਕੀਤਾ ਗਿਆ ਹੈ:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਵਿਨੇਨਾਟਿਸ ਹੈ।

ਕੰਮ ਦੇ ਸਰੀਰ ਵਿੱਚ ਮਸ਼ਹੂਰ ਕੋਈ

ਆਪਣੇ ਬਲਾਕਕੋਟ ਨੂੰ ਸੱਜੇ ਪਾਸੇ ਫਲੋਟ ਕਰਨ ਲਈ, ਸ਼ਾਮਲ ਕਰੋ class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਵਿਨੇਨਾਟਿਸ ਹੈ।

ਕੰਮ ਦੇ ਸਰੀਰ ਵਿੱਚ ਮਸ਼ਹੂਰ ਕੋਈ

ਸੂਚੀਆਂ

ਬਿਨਾਂ ਕ੍ਰਮਬੱਧ

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

ਹਰੀਜ਼ੱਟਲ ਵਰਣਨ

<dl class="dl-horizontal">

ਵਰਣਨ ਸੂਚੀਆਂ
ਇੱਕ ਵਰਣਨ ਸੂਚੀ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹੈ।
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.
Felis euismod semper eget lacinia
Fusce dapibus, teleus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

ਸਿਰ! ਹਰੀਜ਼ੱਟਲ ਵਰਣਨ ਸੂਚੀਆਂ ਉਹਨਾਂ ਸ਼ਬਦਾਂ ਨੂੰ ਕੱਟਣਗੀਆਂ ਜੋ ਖੱਬੇ ਕਾਲਮ ਫਿਕਸ ਵਿੱਚ ਫਿੱਟ ਹੋਣ ਲਈ ਬਹੁਤ ਲੰਬੇ ਹਨ text-overflow। ਤੰਗ ਵਿਊਪੋਰਟਾਂ ਵਿੱਚ, ਉਹ ਡਿਫੌਲਟ ਸਟੈਕਡ ਲੇਆਉਟ ਵਿੱਚ ਬਦਲ ਜਾਣਗੇ।

ਇਨ ਲਾਇਨ

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

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

ਮੂਲ ਬਲਾਕ

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

<p>ਇੱਥੇ ਨਮੂਨਾ ਪਾਠ...</p>
  1. <pre>
  2. <p>ਨਮੂਨਾ ਟੈਕਸਟ ਇੱਥੇ...</p>
  3. </pre>

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

ਤੁਸੀਂ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਉਹ .pre-scrollableਕਲਾਸ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ ਜੋ 350px ਦੀ ਅਧਿਕਤਮ-ਉਚਾਈ ਸੈੱਟ ਕਰੇਗੀ ਅਤੇ ਇੱਕ y-ਧੁਰੀ ਸਕ੍ਰੌਲਬਾਰ ਪ੍ਰਦਾਨ ਕਰੇਗੀ।

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

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

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

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

ਸਾਰਣੀ ਮਾਰਕਅੱਪ

ਟੈਗ ਕਰੋ ਵਰਣਨ
<table> ਇੱਕ ਟੇਬਲਰ ਫਾਰਮੈਟ ਵਿੱਚ ਡੇਟਾ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਰੈਪਿੰਗ ਐਲੀਮੈਂਟ
<thead> <tr>ਟੇਬਲ ਕਾਲਮਾਂ ਨੂੰ ਲੇਬਲ ਕਰਨ ਲਈ ਸਾਰਣੀ ਸਿਰਲੇਖ ਕਤਾਰਾਂ ( ) ਲਈ ਕੰਟੇਨਰ ਤੱਤ
<tbody> ਸਾਰਣੀ ਦੇ ਮੁੱਖ ਭਾਗ ਵਿੱਚ ਸਾਰਣੀ ਦੀਆਂ ਕਤਾਰਾਂ ( <tr>) ਲਈ ਕੰਟੇਨਰ ਤੱਤ
<tr> <td>ਟੇਬਲ ਸੈੱਲਾਂ ( ਜਾਂ ) ਦੇ ਇੱਕ ਸੈੱਟ ਲਈ ਕੰਟੇਨਰ ਤੱਤ <th>ਜੋ ਇੱਕ ਇੱਕਲੀ ਕਤਾਰ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
<td> ਪੂਰਵ-ਨਿਰਧਾਰਤ ਟੇਬਲ ਸੈੱਲ
<th> ਕਾਲਮ (ਜਾਂ ਕਤਾਰ, ਸਕੋਪ ਅਤੇ ਪਲੇਸਮੈਂਟ ਦੇ ਅਧਾਰ ਤੇ) ਲੇਬਲਾਂ ਲਈ ਵਿਸ਼ੇਸ਼ ਟੇਬਲ ਸੈੱਲ ਨੂੰ
ਇੱਕ ਦੇ ਅੰਦਰ ਵਰਤਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ<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 ਲੰਬਕਾਰੀ ਪੈਡਿੰਗ ਨੂੰ ਅੱਧੇ ਵਿੱਚ ਕੱਟਦਾ ਹੈ, 8px ਤੋਂ 4px ਤੱਕ, ਸਾਰੇ tdਅਤੇ thਤੱਤਾਂ ਦੇ ਅੰਦਰ

ਉਦਾਹਰਨ ਸਾਰਣੀਆਂ

1. ਡਿਫੌਲਟ ਟੇਬਲ ਸਟਾਈਲ

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

  1. <ਟੇਬਲ ਕਲਾਸ = "ਟੇਬਲ" >
  2. </table>
# ਪਹਿਲਾ ਨਾਂ ਆਖਰੀ ਨਾਂਮ ਯੂਜ਼ਰਨੇਮ
1 ਮਾਰਕ ਓਟੋ @mdo
2 ਜੈਕਬ ਥੋਰਨਟਨ @ਚਰਬੀ
3 ਲੈਰੀ ਪੰਛੀ @ਟਵਿੱਟਰ

2. ਧਾਰੀਦਾਰ ਟੇਬਲ

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

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

  1. <ਟੇਬਲ ਕਲਾਸ = "ਟੇਬਲ ਟੇਬਲ-ਸਟਰਿਪਡ" >
  2. </table>
# ਪਹਿਲਾ ਨਾਂ ਆਖਰੀ ਨਾਂਮ ਯੂਜ਼ਰਨੇਮ
1 ਮਾਰਕ ਓਟੋ @mdo
2 ਜੈਕਬ ਥੋਰਨਟਨ @ਚਰਬੀ
3 ਲੈਰੀ ਪੰਛੀ @ਟਵਿੱਟਰ

3. ਬਾਰਡਰਡ ਟੇਬਲ

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

  1. <ਟੇਬਲ ਕਲਾਸ = "ਟੇਬਲ ਟੇਬਲ ਬਾਰਡਰਡ" >
  2. </table>
# ਪਹਿਲਾ ਨਾਂ ਆਖਰੀ ਨਾਂਮ ਯੂਜ਼ਰਨੇਮ
1 ਮਾਰਕ ਓਟੋ @mdo
ਮਾਰਕ ਓਟੋ @getbootstrap
2 ਜੈਕਬ ਥੋਰਨਟਨ @ਚਰਬੀ
3 ਲੈਰੀ ਦ ਬਰਡ @ਟਵਿੱਟਰ

4. ਸੰਘਣਾ ਟੇਬਲ

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

  1. <ਟੇਬਲ ਕਲਾਸ = "ਟੇਬਲ ਟੇਬਲ-ਕੰਡੈਂਸਡ" >
  2. </table>
# ਪਹਿਲਾ ਨਾਂ ਆਖਰੀ ਨਾਂਮ ਯੂਜ਼ਰਨੇਮ
1 ਮਾਰਕ ਓਟੋ @mdo
2 ਜੈਕਬ ਥੋਰਨਟਨ @ਚਰਬੀ
3 ਲੈਰੀ ਦ ਬਰਡ @ਟਵਿੱਟਰ

5. ਉਹਨਾਂ ਸਾਰਿਆਂ ਨੂੰ ਮਿਲਾਓ!

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

  1. <ਟੇਬਲ ਕਲਾਸ = "ਟੇਬਲ ਟੇਬਲ-ਸਟਰਿਪਡ ਟੇਬਲ-ਬਾਰਡਰਡ ਟੇਬਲ-ਕੰਡੈਂਸਡ" >
  2. ...
  3. </table>
ਪੂਰਾ ਨਾਂਮ
# ਪਹਿਲਾ ਨਾਂ ਆਖਰੀ ਨਾਂਮ ਯੂਜ਼ਰਨੇਮ
1 ਮਾਰਕ ਓਟੋ @mdo
2 ਜੈਕਬ ਥੋਰਨਟਨ @ਚਰਬੀ
3 ਲੈਰੀ ਦ ਬਰਡ @ਟਵਿੱਟਰ

ਲਚਕਦਾਰ HTML ਅਤੇ CSS

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

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

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

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

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

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

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

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

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

ਚਾਰ ਕਿਸਮਾਂ ਦੇ ਰੂਪ

ਬੂਟਸਟਰੈਪ ਆਮ ਵੈੱਬ ਫਾਰਮਾਂ ਦੀਆਂ ਚਾਰ ਸ਼ੈਲੀਆਂ ਲਈ ਸਧਾਰਨ ਮਾਰਕਅੱਪ ਅਤੇ ਸਟਾਈਲ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

ਨਾਮ ਕਲਾਸ ਵਰਣਨ
ਵਰਟੀਕਲ (ਡਿਫੌਲਟ) .form-vertical (ਲੋੜ ਨਹੀਂ) ਸਟੈਕਡ, ਨਿਯੰਤਰਣਾਂ ਉੱਤੇ ਖੱਬੇ-ਅਲਾਈਨ ਕੀਤੇ ਲੇਬਲ
ਇਨ ਲਾਇਨ .form-inline ਸੰਖੇਪ ਸ਼ੈਲੀ ਲਈ ਖੱਬੇ-ਅਲਾਈਨ ਲੇਬਲ ਅਤੇ ਇਨਲਾਈਨ-ਬਲਾਕ ਨਿਯੰਤਰਣ
ਖੋਜ .form-search ਇੱਕ ਆਮ ਖੋਜ ਸੁਹਜ ਲਈ ਵਾਧੂ-ਗੋਲ ਟੈਕਸਟ ਇੰਪੁੱਟ
ਹਰੀਜੱਟਲ .form-horizontal ਨਿਯੰਤਰਣ ਦੇ ਤੌਰ 'ਤੇ ਉਸੇ ਲਾਈਨ 'ਤੇ ਖੱਬੇ, ਸੱਜੇ-ਅਲਾਈਨ ਕੀਤੇ ਲੇਬਲਾਂ ਨੂੰ ਫਲੋਟ ਕਰੋ

ਸਿਰਫ਼ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਉਦਾਹਰਨ ਫਾਰਮ , ਕੋਈ ਵਾਧੂ ਮਾਰਕਅੱਪ ਨਹੀਂ

ਮੂਲ ਰੂਪ

ਬਿਨਾਂ ਵਾਧੂ ਮਾਰਕਅੱਪ ਦੇ ਸਮਾਰਟ ਅਤੇ ਲਾਈਟਵੇਟ ਡਿਫੌਲਟ।

ਬਲਾਕ-ਪੱਧਰ ਦੀ ਮਦਦ ਟੈਕਸਟ ਦੀ ਉਦਾਹਰਨ ਇੱਥੇ ਹੈ।

  1. <ਫਾਰਮ ਕਲਾਸ = "ਚੰਗੀ" >
  2. <label> ਲੇਬਲ ਨਾਮ </label>
  3. <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "span3" ਪਲੇਸਹੋਲਡਰ = "ਕੁਝ ਟਾਈਪ ਕਰੋ..." >
  4. <span class = "help-block" > ਬਲਾਕ-ਪੱਧਰ ਦੀ ਮਦਦ ਟੈਕਸਟ ਦੀ ਉਦਾਹਰਨ ਇੱਥੇ ਹੈ। </span>
  5. <ਲੇਬਲ ਕਲਾਸ = "ਚੈੱਕਬਾਕਸ" >
  6. <ਇਨਪੁਟ ਕਿਸਮ = "ਚੈੱਕਬਾਕਸ" > ਮੈਨੂੰ ਚੈੱਕ ਕਰੋ
  7. </label>
  8. <button type = "submit" class = "btn" > ਸਪੁਰਦ ਕਰੋ </button>
  9. </form>

ਖੋਜ ਫਾਰਮ

.form-searchਫਾਰਮ ਅਤੇ .search-queryਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ input.

  1. <form ਕਲਾਸ = " well form-search" >
  2. <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "ਇਨਪੁਟ-ਮੀਡੀਅਮ ਖੋਜ-ਕਵੇਰੀ" >
  3. <button type = "submit" class = "btn" > ਖੋਜ </button>
  4. </form>

ਇਨਲਾਈਨ ਫਾਰਮ

.form-inlineਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਦੀ ਲੰਬਕਾਰੀ ਅਲਾਈਨਮੈਂਟ ਅਤੇ ਸਪੇਸਿੰਗ ਨੂੰ ਵਧੀਆ ਬਣਾਉਣ ਲਈ ਜੋੜੋ ।

  1. <ਫਾਰਮ ਕਲਾਸ = "ਵੈਲ ਫਾਰਮ-ਇਨਲਾਈਨ" >
  2. <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "ਇਨਪੁਟ-ਸਮਾਲ" ਪਲੇਸਹੋਲਡਰ = "ਈਮੇਲ" >
  3. <ਇਨਪੁਟ ਕਿਸਮ = "ਪਾਸਵਰਡ" ਕਲਾਸ = "ਇਨਪੁਟ-ਸਮਾਲ" ਪਲੇਸਹੋਲਡਰ = "ਪਾਸਵਰਡ" >
  4. <ਲੇਬਲ ਕਲਾਸ = "ਚੈੱਕਬਾਕਸ" >
  5. <ਇਨਪੁਟ ਕਿਸਮ = "ਚੈੱਕਬਾਕਸ" > ਮੈਨੂੰ ਯਾਦ ਰੱਖੋ
  6. </label>
  7. <button type = "submit" class = "btn" > ਸਾਈਨ ਇਨ ਕਰੋ </button>
  8. </form>

ਲੇਟਵੇਂ ਰੂਪ

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

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

ਫ੍ਰੀਫਾਰਮ ਟੈਕਸਟ ਤੋਂ ਇਲਾਵਾ, ਕੋਈ ਵੀ HTML5 ਟੈਕਸਟ-ਅਧਾਰਿਤ ਇਨਪੁਟ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।

ਉਦਾਹਰਨ ਮਾਰਕਅੱਪ

ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਫਾਰਮ ਲੇਆਉਟ ਦੇ ਮੱਦੇਨਜ਼ਰ, ਇੱਥੇ ਪਹਿਲੇ ਇੰਪੁੱਟ ਅਤੇ ਕੰਟਰੋਲ ਗਰੁੱਪ ਨਾਲ ਸਬੰਧਿਤ ਮਾਰਕਅੱਪ ਹੈ। ਸਟਾਈਲਿੰਗ ਲਈ , , ਅਤੇ ਕਲਾਸਾਂ ਦੀ ਲੋੜ .control-groupਹੈ .control-label.controls

  1. <ਫਾਰਮ ਕਲਾਸ = "ਫਾਰਮ-ਹਰੀਜ਼ੋਂਟਲ" >
  2. <fieldset>
  3. <legend> Legend text </legend>
  4. <div ਕਲਾਸ = "ਕੰਟਰੋਲ-ਗਰੁੱਪ" >
  5. <label class = "control-label" for = "input01" > ਟੈਕਸਟ ਇਨਪੁਟ </label>
  6. <div ਕਲਾਸ = "ਕੰਟਰੋਲ" >
  7. <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "ਇਨਪੁਟ-ਐਕਸਲਾਰਜ" ਆਈਡੀ = "ਇਨਪੁਟ01" >
  8. <p class = "help-block" > ਸਹਾਇਕ ਮਦਦ ਟੈਕਸਟ </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

ਫਾਰਮ ਕੰਟਰੋਲ ਰਾਜ

ਬੂਟਸਟਰੈਪ ਬ੍ਰਾਊਜ਼ਰ-ਸਮਰਥਿਤ ਫੋਕਸਡ ਅਤੇ ਸਟੇਟਸ ਲਈ ਸਟਾਈਲ ਫੀਚਰ ਕਰਦਾ disabledਹੈ। ਅਸੀਂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਵੈਬਕਿੱਟ ਨੂੰ ਹਟਾ ਦਿੰਦੇ ਹਾਂ ਅਤੇ ਇਸਦੀ ਥਾਂ 'ਤੇ ਲਈ outlineਲਾਗੂ ਕਰਦੇ ਹਾਂ ।box-shadow:focus


ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ

ਇਸ ਵਿੱਚ ਗਲਤੀਆਂ, ਚੇਤਾਵਨੀਆਂ ਅਤੇ ਸਫਲਤਾ ਲਈ ਪ੍ਰਮਾਣਿਕਤਾ ਸਟਾਈਲ ਵੀ ਸ਼ਾਮਲ ਹਨ। ਵਰਤਣ ਲਈ, ਆਲੇ ਦੁਆਲੇ ਦੇ ਵਿੱਚ ਗਲਤੀ ਕਲਾਸ ਜੋੜੋ .control-group

  1. <ਫੀਲਡਸੈੱਟ
  2. ਕਲਾਸ = "ਕੰਟਰੋਲ-ਗਰੁੱਪ ਗਲਤੀ" >
  3. </fieldset>
ਇੱਥੇ ਕੁਝ ਮੁੱਲ
ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਕੁਝ ਗਲਤ ਹੋ ਗਿਆ ਹੋਵੇ
ਕਿਰਪਾ ਕਰਕੇ ਗਲਤੀ ਨੂੰ ਠੀਕ ਕਰੋ
ਵਾਹ!
ਵਾਹ!

ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਨੂੰ ਵਧਾਇਆ ਜਾ ਰਿਹਾ ਹੈ

ਇਨਪੁਟਸ ਨੂੰ ਅੱਗੇ ਵਧਾਓ ਅਤੇ ਜੋੜੋ

ਇਨਪੁਟ ਸਮੂਹ—ਜੋੜੇ ਗਏ ਜਾਂ ਪਹਿਲਾਂ-ਪੇਸ਼ ਕੀਤੇ ਟੈਕਸਟ ਦੇ ਨਾਲ—ਤੁਹਾਡੇ ਇਨਪੁਟਸ ਲਈ ਵਧੇਰੇ ਸੰਦਰਭ ਦੇਣ ਦਾ ਆਸਾਨ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਮਹਾਨ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਟਵਿੱਟਰ ਉਪਭੋਗਤਾ ਨਾਮਾਂ ਲਈ @ ਚਿੰਨ੍ਹ ਜਾਂ ਵਿੱਤ ਲਈ $ ਸ਼ਾਮਲ ਹਨ।


ਚੈੱਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ

v1.4 ਤੱਕ, ਬੂਟਸਟਰੈਪ ਨੂੰ ਉਹਨਾਂ ਨੂੰ ਸਟੈਕ ਕਰਨ ਲਈ ਚੈਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਵਾਧੂ ਮਾਰਕਅੱਪ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਹੁਣ, ਇਸ ਨੂੰ ਦੁਹਰਾਉਣਾ ਇੱਕ ਸਧਾਰਨ ਮਾਮਲਾ ਹੈ <label class="checkbox">ਜੋ ਲਪੇਟਦਾ ਹੈ <input type="checkbox">

ਇਨਲਾਈਨ ਚੈੱਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਵੀ ਸਮਰਥਿਤ ਹਨ। ਬੱਸ .inlineਕਿਸੇ ਵਿੱਚ ਜੋੜੋ .checkboxਜਾਂ .radioਅਤੇ ਤੁਸੀਂ ਪੂਰਾ ਕਰ ਲਿਆ।


ਇਨਲਾਈਨ ਫਾਰਮ ਅਤੇ ਜੋੜੋ/ਪ੍ਰੀਪੇਂਡ ਕਰੋ

ਇੱਕ ਇਨਲਾਈਨ ਰੂਪ ਵਿੱਚ ਇਨਪੁਟਸ ਨੂੰ ਪਹਿਲਾਂ ਤੋਂ ਜੋੜਨ ਜਾਂ ਜੋੜਨ ਲਈ, ਖਾਲੀ ਥਾਂ ਤੋਂ ਬਿਨਾਂ ਅਤੇ ਉਸੇ ਲਾਈਨ 'ਤੇ ਰੱਖਣਾ ਯਕੀਨੀ .add-onਬਣਾਓ input


ਫਾਰਮ ਮਦਦ ਟੈਕਸਟ

ਆਪਣੇ ਫਾਰਮ ਇਨਪੁਟਸ ਲਈ ਮਦਦ ਟੈਕਸਟ ਸ਼ਾਮਲ ਕਰਨ ਲਈ, ਇਨਪੁੱਟ ਐਲੀਮੈਂਟ ਦੇ ਬਾਅਦ ਦੇ ਨਾਲ ਇਨਲਾਈਨ ਮਦਦ ਟੈਕਸਟ <span class="help-inline">ਜਾਂ ਮਦਦ ਟੈਕਸਟ ਬਲਾਕ ਸ਼ਾਮਲ ਕਰੋ।<p class="help-block">

ਇਨਪੁਟ ਆਕਾਰਾਂ ਲਈ ਗਰਿੱਡ ਸਿਸਟਮ ਤੋਂ ਉਹੀ .span*ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਤੁਸੀਂ ਸਥਿਰ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਗਰਿੱਡ 'ਤੇ ਮੈਪ ਨਹੀਂ ਕਰਦੀਆਂ, ਜਵਾਬਦੇਹ CSS ਸ਼ੈਲੀਆਂ ਦੇ ਅਨੁਕੂਲ ਹੁੰਦੀਆਂ ਹਨ, ਜਾਂ ਵੱਖ-ਵੱਖ ਕਿਸਮਾਂ ਦੇ ਨਿਯੰਤਰਣਾਂ ਲਈ ਖਾਤਾ ਬਣਾਉਂਦੀਆਂ ਹਨ (ਉਦਾਹਰਨ ਲਈ, inputਬਨਾਮ 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 ਅਸਮਰੱਥ buttonਤੱਤਾਂ ਨੂੰ ਜੈਂਕੀਫਾਈ ਕਰਦਾ ਹੈ, ਇੱਕ ਗੰਦੇ ਟੈਕਸਟ-ਸ਼ੈਡੋ ਨਾਲ ਟੈਕਸਟ ਸਲੇਟੀ ਰੈਂਡਰ ਕਰਦਾ ਹੈ ਜਿਸ ਨੂੰ ਅਸੀਂ ਠੀਕ ਨਹੀਂ ਕਰ ਸਕਦੇ।

ਕਈ ਆਕਾਰ

ਫੈਨਸੀ ਵੱਡੇ ਜਾਂ ਛੋਟੇ ਬਟਨ? ਜੋੜੋ .btn-large, .btn-small, ਜਾਂ .btn-miniਦੋ ਵਾਧੂ ਆਕਾਰਾਂ ਲਈ।


ਅਪਾਹਜ ਸਥਿਤੀ

ਅਯੋਗ ਬਟਨਾਂ ਲਈ, .disabledਕਲਾਸ ਨੂੰ ਲਿੰਕਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਐਲੀਮੈਂਟਸ disabledਲਈ ਵਿਸ਼ੇਸ਼ਤਾ ।<button>

ਪ੍ਰਾਇਮਰੀ ਲਿੰਕ ਲਿੰਕ

ਸਿਰ! ਅਸੀਂ .disabledਇੱਥੇ ਇੱਕ ਉਪਯੋਗਤਾ ਕਲਾਸ ਦੇ ਤੌਰ ਤੇ ਵਰਤਦੇ ਹਾਂ, ਆਮ ਕਲਾਸ ਦੇ ਸਮਾਨ .active, ਇਸ ਲਈ ਕੋਈ ਅਗੇਤਰ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।

ਇੱਕ ਕਲਾਸ, ਕਈ ਟੈਗ

ਇੱਕ , , ਜਾਂ ਤੱਤ .btn'ਤੇ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ ।<a><button><input>

ਲਿੰਕ
  1. <a class="btn" href=""> ਲਿੰਕ </a> _ _ _ _ _
  2. <ਬਟਨ ਕਲਾਸ = "btn" ਕਿਸਮ = "ਸਬਮਿਟ" >
  3. ਬਟਨ
  4. </ ਬਟਨ>
  5. <ਇਨਪੁਟ ਕਲਾਸ = "btn" ਕਿਸਮ = "ਬਟਨ"
  6. ਮੁੱਲ = "ਇਨਪੁਟ" >
  7. <ਇਨਪੁਟ ਕਲਾਸ = "btn" ਕਿਸਮ = "ਸਬਮਿਟ"
  8. ਮੁੱਲ = "ਸਪੁਰਦ ਕਰੋ" >

ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸ ਦੇ ਤੌਰ 'ਤੇ, ਮੇਲ ਖਾਂਦੇ ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਰੈਂਡਰਿੰਗ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਤੁਹਾਡੇ ਸੰਦਰਭ ਲਈ ਤੱਤ ਨਾਲ ਮੇਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਹੈ , ਤਾਂ ਆਪਣੇ ਬਟਨ ਲਈ inputਇੱਕ ਦੀ ਵਰਤੋਂ ਕਰੋ।<input type="submit">

  • ਆਈਕਨ-ਗਲਾਸ
  • ਆਈਕਨ-ਸੰਗੀਤ
  • icon-ਖੋਜ
  • ਆਈਕਨ-ਲਿਫਾਫਾ
  • icon-ਦਿਲ
  • ਆਈਕਨ-ਸਟਾਰ
  • ਆਈਕਨ-ਸਟਾਰ-ਖਾਲੀ
  • ਆਈਕਨ-ਉਪਭੋਗਤਾ
  • ਆਈਕਨ-ਫਿਲਮ
  • ਆਈਕਨ-ਵੱਡਾ
  • icon-th
  • icon-th-list
  • ਆਈਕਨ-ਠੀਕ ਹੈ
  • icon-ਹਟਾਓ
  • ਆਈਕਨ-ਜ਼ੂਮ-ਇਨ
  • ਆਈਕਨ-ਜ਼ੂਮ-ਆਊਟ
  • ਆਈਕਨ-ਬੰਦ
  • ਆਈਕਨ-ਸਿਗਨਲ
  • icon-cog
  • icon-ਰੱਦੀ
  • icon-ਘਰ
  • icon-file
  • icon-time
  • ਆਈਕਨ-ਸੜਕ
  • icon-download-alt
  • icon-ਡਾਊਨਲੋਡ
  • icon-ਅੱਪਲੋਡ
  • ਆਈਕਨ-ਇਨਬਾਕਸ
  • ਆਈਕਨ-ਪਲੇ-ਸਰਕਲ
  • icon-ਦੁਹਰਾਓ
  • icon-ਤਾਜ਼ਾ
  • icon-list-alt
  • icon-lock
  • ਆਈਕਨ-ਝੰਡਾ
  • ਆਈਕਨ-ਹੈੱਡਫੋਨ
  • ਆਈਕਨ-ਵਾਲੀਅਮ-ਬੰਦ
  • ਆਈਕਨ-ਵਾਲੀਅਮ-ਡਾਊਨ
  • ਆਈਕਨ-ਵਾਲਿਊਮ-ਅੱਪ
  • icon-qrcode
  • ਆਈਕਨ-ਬਾਰਕੋਡ
  • icon-tag
  • ਆਈਕਨ-ਟੈਗ
  • ਆਈਕਨ-ਕਿਤਾਬ
  • ਆਈਕਨ-ਬੁੱਕਮਾਰਕ
  • ਆਈਕਨ-ਪ੍ਰਿੰਟ
  • ਆਈਕਨ ਕੈਮਰਾ
  • ਆਈਕਨ-ਫੌਂਟ
  • ਆਈਕਨ-ਬੋਲਡ
  • ਆਈਕਨ-ਇਟਾਲਿਕ
  • ਆਈਕਨ-ਟੈਕਸਟ-ਉਚਾਈ
  • ਆਈਕਨ-ਟੈਕਸਟ-ਚੌੜਾਈ
  • ਆਈਕਨ-ਅਲਾਈਨ-ਖੱਬੇ
  • icon-align-center
  • icon-ਅਲਾਈਨ-ਸੱਜੇ
  • icon-align-justify
  • ਆਈਕਨ-ਸੂਚੀ
  • ਆਈਕਨ-ਇੰਡੇਂਟ-ਖੱਬੇ
  • ਆਈਕਨ-ਇੰਡੇਂਟ-ਸੱਜੇ
  • ਆਈਕਨ-ਫੇਸਟਾਈਮ-ਵੀਡੀਓ
  • ਆਈਕਨ-ਤਸਵੀਰ
  • ਆਈਕਨ-ਪੈਨਸਿਲ
  • icon-map-marker
  • icon-ਅਡਜਸਟ ਕਰੋ
  • icon-tint
  • icon-ਸੰਪਾਦਨ
  • icon-share
  • ਆਈਕਨ-ਚੈੱਕ
  • icon-ਮੂਵ
  • icon-ਕਦਮ-ਪਿੱਛੇ
  • icon-ਤੇਜ਼-ਪਿੱਛੇ
  • icon-ਪਿੱਛੇ
  • icon-play
  • icon-ਵਿਰਾਮ
  • icon-ਸਟਾਪ
  • icon-ਅੱਗੇ
  • icon-ਫਾਸਟ-ਫਾਰਵਰਡ
  • ਆਈਕਨ-ਕਦਮ-ਅੱਗੇ
  • icon-eject
  • ਆਈਕਨ-ਸ਼ੇਵਰੋਨ-ਖੱਬੇ
  • icon-chevron-ਸੱਜੇ
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • ਆਈਕਨ-ਠੀਕ-ਚਿੰਨ੍ਹ
  • ਆਈਕਨ-ਸਵਾਲ-ਚਿੰਨ੍ਹ
  • icon-info-sign
  • ਆਈਕਨ-ਸਕ੍ਰੀਨਸ਼ਾਟ
  • icon-remove-circle
  • ਆਈਕਨ-ਠੀਕ-ਸਰਕਲ
  • icon-ban-ਸਰਕਲ
  • ਆਈਕਨ-ਤੀਰ-ਖੱਬੇ
  • ਆਈਕਨ-ਤੀਰ-ਸੱਜੇ
  • ਆਈਕਨ-ਤੀਰ-ਉੱਪਰ
  • ਆਈਕਨ-ਤੀਰ-ਹੇਠਾਂ
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • ਆਈਕਨ-ਤਾਰਾ ਚਿੰਨ੍ਹ
  • ਆਈਕਨ-ਵਿਸਮਿਕ ਚਿੰਨ੍ਹ-ਚਿੰਨ੍ਹ
  • ਆਈਕਨ-ਤੋਹਫ਼ਾ
  • ਆਈਕਨ-ਪੱਤਾ
  • ਆਈਕਨ-ਫਾਇਰ
  • ਆਈਕਨ-ਅੱਖ-ਖੁੱਲੀ
  • ਆਈਕਨ-ਅੱਖ ਬੰਦ ਕਰੋ
  • ਆਈਕਨ-ਚੇਤਾਵਨੀ-ਚਿੰਨ੍ਹ
  • icon-plane
  • ਆਈਕਨ-ਕੈਲੰਡਰ
  • icon-ਬੇਤਰਤੀਬ
  • icon-ਟਿੱਪਣੀ
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • ਆਈਕਨ-ਸ਼ੌਪਿੰਗ-ਕਾਰਟ
  • icon-folder-close
  • ਆਈਕਨ-ਫੋਲਡਰ-ਓਪਨ
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-ਘੰਟੀ
  • ਆਈਕਨ-ਸਰਟੀਫਿਕੇਟ
  • ਆਈਕਨ-ਥੰਬਸ-ਅੱਪ
  • ਆਈਕਨ-ਥੰਬਸ-ਡਾਊਨ
  • icon-hand-ਸੱਜੇ
  • ਆਈਕਨ-ਹੱਥ-ਖੱਬੇ
  • ਆਈਕਨ-ਹੈਂਡ-ਅੱਪ
  • icon-hand-down
  • ਆਈਕਨ-ਸਰਕਲ-ਤੀਰ-ਸੱਜੇ
  • ਆਈਕਨ-ਸਰਕਲ-ਤੀਰ-ਖੱਬੇ
  • ਆਈਕਨ-ਸਰਕਲ-ਤੀਰ-ਉੱਪਰ
  • ਆਈਕਨ-ਸਰਕਲ-ਤੀਰ-ਹੇਠਾਂ
  • icon-globe
  • ਆਈਕਨ-ਰੈਂਚ
  • ਆਈਕਨ-ਕਾਰਜ
  • icon-filter
  • ਆਈਕਨ-ਬ੍ਰੀਫਕੇਸ
  • ਆਈਕਨ-ਪੂਰੀ ਸਕਰੀਨ

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

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

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

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

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

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

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

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

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

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

ਸਿਰ! <i>ਟੈਕਸਟ ਦੀਆਂ ਸਤਰਾਂ ਦੇ ਨਾਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਜਿਵੇਂ ਕਿ ਬਟਨਾਂ ਜਾਂ ਨੇਵੀ ਲਿੰਕਾਂ ਵਿੱਚ, ਸਹੀ ਸਪੇਸਿੰਗ ਲਈ ਟੈਗ ਦੇ ਬਾਅਦ ਇੱਕ ਸਪੇਸ ਛੱਡਣਾ ਯਕੀਨੀ ਬਣਾਓ ।

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

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

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

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

ਉਦਾਹਰਨਾਂ

ਉਹਨਾਂ ਨੂੰ ਬਟਨਾਂ, ਟੂਲਬਾਰ, ਨੈਵੀਗੇਸ਼ਨ, ਜਾਂ ਪ੍ਰਿਪੇਂਡ ਫਾਰਮ ਇਨਪੁਟਸ ਲਈ ਬਟਨ ਸਮੂਹਾਂ ਵਿੱਚ ਵਰਤੋ।