ਬੂਟਸਟਰੈਪ

ਬੇਸ CSS

ਬੁਨਿਆਦੀ HTML ਤੱਤ ਸਟਾਈਲ ਕੀਤੇ ਗਏ ਅਤੇ ਵਿਸਤ੍ਰਿਤ ਕਲਾਸਾਂ ਨਾਲ ਵਿਸਤ੍ਰਿਤ ਕੀਤੇ ਗਏ ਹਨ।

ਟਾਈਪੋਗ੍ਰਾਫੀ

ਸਿਰਲੇਖ

ਸਾਰੇ HTML ਸਿਰਲੇਖ, <h1>ਦੁਆਰਾ <h6>ਉਪਲਬਧ ਹਨ।

h1. ਸਿਰਲੇਖ 1

h2. ਸਿਰਲੇਖ 2

h3. ਸਿਰਲੇਖ 3

h4. ਸਿਰਲੇਖ 4

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

ਸਰੀਰ ਦੀ ਨਕਲ

ਬੂਟਸਟਰੈਪ ਦਾ ਗਲੋਬਲ ਡਿਫੌਲਟ 14pxfont-size ਹੈ , 20px ਦੇ ਨਾਲ । ਇਹ ਅਤੇ ਸਾਰੇ ਪੈਰਿਆਂ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, (ਪੈਰੇਗ੍ਰਾਫ਼ਾਂ) ਨੂੰ ਉਹਨਾਂ ਦੀ ਲਾਈਨ-ਉਚਾਈ (ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ 10px) ਦਾ ਅੱਧਾ ਹੇਠਲਾ ਮਾਰਜਿਨ ਮਿਲਦਾ ਹੈ।line-height<body><p>

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

Cum sociis natoque penatibus et magnis dis parturient Montes, nascetur ridiculus mus. ਡੋਨੇਕ ਉਲਮਕੋਰਪਰ ਨੂਲਾ ਨਾਨ ਮੇਟਸ ਆਕਟਰ ਫਰਿੰਗਿਲਾ। Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. ਡੋਨੇਕ ਉਲਮਕੋਰਪਰ ਨੂਲਾ ਨਾਨ ਮੇਟਸ ਆਕਟਰ ਫਰਿੰਗਿਲਾ।

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

ਲੀਡ ਬਾਡੀ ਕਾਪੀ

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

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

<p ਕਲਾਸ = "ਲੀਡ" > ... </p>

ਘੱਟ ਨਾਲ ਬਣਾਇਆ ਗਿਆ

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

ਜ਼ੋਰ

ਹਲਕੇ ਸਟਾਈਲ ਦੇ ਨਾਲ HTML ਦੇ ਡਿਫੌਲਟ ਜ਼ੋਰ ਟੈਗਸ ਦੀ ਵਰਤੋਂ ਕਰੋ।

<small>

ਇਨਲਾਈਨ ਜਾਂ ਟੈਕਸਟ ਦੇ ਬਲਾਕਾਂ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ, ਛੋਟੇ ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਟੈਕਸਟ ਦੀ ਇਸ ਲਾਈਨ ਦਾ ਮਤਲਬ ਫਾਈਨ ਪ੍ਰਿੰਟ ਵਜੋਂ ਮੰਨਿਆ ਜਾਣਾ ਹੈ।

<p> <small> ਟੈਕਸਟ ਦੀ ਇਸ ਲਾਈਨ ਦਾ ਮਤਲਬ ਫਾਈਨ ਪ੍ਰਿੰਟ ਵਜੋਂ ਮੰਨਿਆ ਜਾਣਾ ਹੈ। </small> </p>

ਬੋਲਡ

ਇੱਕ ਭਾਰੀ ਫੌਂਟ-ਵਜ਼ਨ ਦੇ ਨਾਲ ਟੈਕਸਟ ਦੇ ਇੱਕ ਸਨਿੱਪਟ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ।

ਟੈਕਸਟ ਦੇ ਹੇਠਲੇ ਸਨਿੱਪਟ ਨੂੰ ਬੋਲਡ ਟੈਕਸਟ ਦੇ ਰੂਪ ਵਿੱਚ ਰੈਂਡਰ ਕੀਤਾ ਗਿਆ ਹੈ ।

<strong> ਬੋਲਡ ਟੈਕਸਟ </strong> ਦੇ ਰੂਪ ਵਿੱਚ ਰੈਂਡਰ ਕੀਤਾ ਗਿਆ

ਤਿਰਛੀ

ਇਟਾਲਿਕਸ ਦੇ ਨਾਲ ਟੈਕਸਟ ਦੇ ਇੱਕ ਸਨਿੱਪਟ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ।

ਟੈਕਸਟ ਦੇ ਹੇਠਲੇ ਸਨਿੱਪਟ ਨੂੰ ਇਟਾਲਿਕ ਟੈਕਸਟ ਦੇ ਰੂਪ ਵਿੱਚ ਰੈਂਡਰ ਕੀਤਾ ਗਿਆ ਹੈ ।

<em> ਇਟਾਲਿਕ ਟੈਕਸਟ </em> ਦੇ ਰੂਪ ਵਿੱਚ ਰੈਂਡਰ ਕੀਤਾ ਗਿਆ

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

ਅਲਾਈਨਮੈਂਟ ਕਲਾਸਾਂ

ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਕੰਪੋਨੈਂਟਾਂ ਲਈ ਟੈਕਸਟ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਰੀਲਾਈਨ ਕਰੋ।

ਖੱਬੇ ਪਾਸੇ ਇਕਸਾਰ ਟੈਕਸਟ।

ਕੇਂਦਰ ਇਕਸਾਰ ਟੈਕਸਟ।

ਸੱਜੇ ਇਕਸਾਰ ਟੈਕਸਟ।

  1. <p ਕਲਾਸ = "ਟੈਕਸਟ-ਖੱਬੇ" > ਖੱਬੇ ਪਾਸੇ ਇਕਸਾਰ ਟੈਕਸਟ। </p> 
  2. <p ਕਲਾਸ = "ਟੈਕਸਟ-ਸੈਂਟਰ" > ਕੇਂਦਰ ਵਿੱਚ ਇਕਸਾਰ ਟੈਕਸਟ। </p> 
  3. <p ਕਲਾਸ = "ਟੈਕਸਟ-ਸੱਜੇ" > ਸੱਜਾ ਇਕਸਾਰ ਟੈਕਸਟ। </p>

ਜ਼ੋਰ ਦੇਣ ਵਾਲੀਆਂ ਕਲਾਸਾਂ

ਮੁੱਠੀ ਭਰ ਜ਼ੋਰ ਦੇਣ ਵਾਲੀਆਂ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਰੰਗ ਦੁਆਰਾ ਅਰਥ ਵਿਅਕਤ ਕਰੋ।

ਫੂਸ ਡੈਪੀਬਸ, ਟੇਲਸ ਏਸੀ ਕਰਸਸ ਕੋਮੋਡੋ, ਟਾਰਟਰ ਮੌਰੀਸ ਨਿਭ।

Etiam porta sem malesuada magna mollis euismod.

ਡੋਨੇਕ ਉਲਮਕੋਰਪਰ ਨੂਲਾ ਨਾਨ ਮੇਟਸ ਆਕਟਰ ਫਰਿੰਗਿਲਾ।

ਏਨੇਨ ਇਉ ਲੀਓ ਕਉਮ। Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p ਕਲਾਸ = "ਮਿਊਟ" > ਫੂਸ ਡੈਪੀਬਸ, ਟੇਲਸ ਏਸੀ ਕਰਸਸ ਕੋਮੋਡੋ, ਟਾਰਟਰ ਮੌਰੀਸ ਨਿਭ। </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

ਸੰਖੇਪ ਰੂਪ

<abbr>ਹੋਵਰ 'ਤੇ ਵਿਸਤ੍ਰਿਤ ਸੰਸਕਰਣ ਦਿਖਾਉਣ ਲਈ ਸੰਖੇਪ ਅਤੇ ਸੰਖੇਪ ਸ਼ਬਦਾਂ ਲਈ HTML ਦੇ ਤੱਤ ਦਾ ਸਟਾਈਲਾਈਜ਼ਡ ਲਾਗੂਕਰਨ । ਕਿਸੇ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਸੰਖੇਪ titleਰੂਪਾਂ ਵਿੱਚ ਇੱਕ ਹਲਕਾ ਬਿੰਦੀ ਵਾਲਾ ਹੇਠਲਾ ਕਿਨਾਰਾ ਅਤੇ ਹੋਵਰ 'ਤੇ ਇੱਕ ਮਦਦ ਕਰਸਰ ਹੈ, ਹੋਵਰ 'ਤੇ ਵਾਧੂ ਸੰਦਰਭ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

<abbr>

ਕਿਸੇ ਸੰਖੇਪ ਦੇ ਲੰਬੇ ਹੋਵਰ 'ਤੇ ਵਿਸਤ੍ਰਿਤ ਟੈਕਸਟ ਲਈ, titleਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ।

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

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

<abbr class="initialism">

.initialismਥੋੜੇ ਜਿਹੇ ਛੋਟੇ ਫੌਂਟ-ਆਕਾਰ ਲਈ ਸੰਖੇਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।

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

<abbr ਸਿਰਲੇਖ = "ਹਾਈਪਰ ਟੈਕਸਟ ਮਾਰਕਅੱਪ ਭਾਸ਼ਾ" ਕਲਾਸ = "ਸ਼ੁਰੂਆਤ" > HTML </abbr>

ਪਤੇ

ਨਜ਼ਦੀਕੀ ਪੂਰਵਜ ਜਾਂ ਕੰਮ ਦੇ ਪੂਰੇ ਸਰੀਰ ਲਈ ਸੰਪਰਕ ਜਾਣਕਾਰੀ ਪੇਸ਼ ਕਰੋ।

<address>

ਨਾਲ ਸਾਰੀਆਂ ਲਾਈਨਾਂ ਨੂੰ ਖਤਮ ਕਰਕੇ ਫਾਰਮੈਟਿੰਗ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖੋ <br>।

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, 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 = "Phone" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <ਪਤਾ>
  9.   <strong> ਪੂਰਾ ਨਾਮ </strong><br>
  10.   <a href="mailto:#" > [email protected] </a> _ _ 
  11. </address>

ਬਲਾਕਕੋਟ

ਤੁਹਾਡੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਅੰਦਰ ਕਿਸੇ ਹੋਰ ਸਰੋਤ ਤੋਂ ਸਮੱਗਰੀ ਦੇ ਬਲਾਕਾਂ ਦਾ ਹਵਾਲਾ ਦੇਣ ਲਈ।

ਡਿਫੌਲਟ ਬਲਾਕਕੋਟ

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ।

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ। </p>
  3. </blockquote>

ਬਲਾਕਕੋਟ ਵਿਕਲਪ

ਇੱਕ ਮਿਆਰੀ ਬਲਾਕਕੋਟ 'ਤੇ ਸਧਾਰਨ ਪਰਿਵਰਤਨ ਲਈ ਸ਼ੈਲੀ ਅਤੇ ਸਮੱਗਰੀ ਵਿੱਚ ਤਬਦੀਲੀਆਂ।

ਇੱਕ ਸਰੋਤ ਦਾ ਨਾਮ ਦੇਣਾ

<small>ਸਰੋਤ ਦੀ ਪਛਾਣ ਕਰਨ ਲਈ ਟੈਗ ਸ਼ਾਮਲ ਕਰੋ । ਵਿੱਚ ਸਰੋਤ ਕੰਮ ਦਾ ਨਾਮ ਲਪੇਟੋ <cite>।

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ।

ਸਰੋਤ ਸਿਰਲੇਖ ਵਿੱਚ ਮਸ਼ਹੂਰ ਕੋਈ ਵਿਅਕਤੀ 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ। </p>
  3.   <small> ਕੋਈ ਮਸ਼ਹੂਰ <cite title = "Source Title" > ਸਰੋਤ ਸਿਰਲੇਖ </cite></small> 
  4. </blockquote>

ਵਿਕਲਪਿਕ ਡਿਸਪਲੇ

.pull-rightਫਲੋਟਿਡ, ਸੱਜੇ-ਅਲਾਈਨ ਬਲਾਕਕੋਟ ਲਈ ਵਰਤੋਂ ।

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪੂਰਵ ਨੂੰ ਖਤਮ ਕਰੋ।

ਸਰੋਤ ਸਿਰਲੇਖ ਵਿੱਚ ਮਸ਼ਹੂਰ ਕੋਈ ਵਿਅਕਤੀ 
  1. <blockquote ਕਲਾਸ = "ਪੁੱਲ-ਸੱਜੇ" > 
  2.   ...
  3. </blockquote>

ਸੂਚੀਆਂ

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

ਆਈਟਮਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਜਿਸ ਵਿੱਚ ਆਰਡਰ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਮਾਇਨੇ ਨਹੀਂ ਰੱਖਦਾ।

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

ਆਰਡਰ ਕੀਤਾ

ਆਈਟਮਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਜਿਸ ਵਿੱਚ ਆਰਡਰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ।

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

ਅਨਸਟਾਇਲਡ

ਸੂਚੀ ਆਈਟਮਾਂ 'ਤੇ ਡਿਫੌਲਟ list-styleਅਤੇ ਖੱਬੇ ਪੈਡਿੰਗ ਨੂੰ ਹਟਾਓ (ਸਿਰਫ਼ ਤੁਰੰਤ ਬੱਚੇ)।

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • ਮਾਸਾ ਤੇ ਪੂਰਨ ਅੰਕ ਮੋਲੇਸਟੀ ਲੋਰੇਮ
  • ਪ੍ਰੀਟਿਅਮ ਨਿਸਲ ਐਲੀਕੇਟ ਵਿੱਚ ਫੈਸਿਲਿਸਿਸ
  • ਨੂਲਾ ਵੁਲਟਪਟ ਅਲੀਕਮ ਵੇਲੀਟ
    • ਫੇਸੇਲਸ ਆਈਕੁਲਿਸ ਨੇਕ
    • ਪਰਸ ਸੋਡੇਲਸ ਅਲਟ੍ਰੀਸਿਸ
    • ਵੈਸਟੀਬੁਲਮ ਲਾਓਰੇਟ ਪੋਰਟਟੀਟਰ ਸੇਮ
    • ਏਸੀ ਟ੍ਰਿਸਟਿਕ ਲਿਬੇਰੋ ਵੋਲਟਪੈਟ 'ਤੇ
  • Faucibus porta lacus fringilla vel
  • ਏਨੇਨ ਬੈਠ ਅਮੇਤ ਏਰਤ ਨੰਕ
  • Eget porttitor lorem
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

ਇਨ ਲਾਇਨ

ਸਾਰੀਆਂ ਸੂਚੀ ਆਈਟਮਾਂ ਨੂੰ ਇੱਕ ਲਾਈਨ 'ਤੇ ਰੱਖੋ inline-blockਅਤੇ ਕੁਝ ਹਲਕੇ ਪੈਡਿੰਗ ਦੇ ਨਾਲ।

  • Lorem ipsum
  • ਫੈਸੇਲਸ ਆਈਕੁਲਿਸ
  • ਨਲਾ ਵੁਲਟਪਟ
  1. <ul class = "ਇਨਲਾਈਨ" > 
  2.   <li> ... </li>
  3. </ul>

ਵਰਣਨ

ਉਹਨਾਂ ਦੇ ਸੰਬੰਧਿਤ ਵਰਣਨ ਦੇ ਨਾਲ ਸ਼ਬਦਾਂ ਦੀ ਇੱਕ ਸੂਚੀ।

ਵਰਣਨ ਸੂਚੀਆਂ
ਇੱਕ ਵਰਣਨ ਸੂਚੀ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹੈ।
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. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

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

ਸ਼ਰਤਾਂ ਅਤੇ ਵਰਣਨ ਨੂੰ <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.
Felis euismod semper eget lacinia
Fusce dapibus, teleus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl ਕਲਾਸ = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

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

ਕੋਡ

ਇਨ ਲਾਇਨ

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

ਉਦਾਹਰਨ ਲਈ, <section>ਇਨਲਾਈਨ ਦੇ ਰੂਪ ਵਿੱਚ ਲਪੇਟਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ. 
  1. ਉਦਾਹਰਨ ਲਈ , <code> & lt ; ਸੈਕਸ਼ਨ & gt ;</ code > ਨੂੰ ਇਨਲਾਈਨ ਵਾਂਗ ਲਪੇਟਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ।

ਬੁਨਿਆਦੀ ਬਲਾਕ

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

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

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

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

ਟੇਬਲ

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸ਼ੈਲੀਆਂ

.tableਮੁੱਢਲੀ ਸਟਾਈਲਿੰਗ ਲਈ—ਹਲਕੀ ਪੈਡਿੰਗ ਅਤੇ ਸਿਰਫ਼ ਹਰੀਜੱਟਲ ਡਿਵਾਈਡਰ— ਕਿਸੇ ਵੀ 'ਤੇ ਬੇਸ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰੋ <table>।

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

ਵਿਕਲਪਿਕ ਕਲਾਸਾਂ

ਹੇਠ ਲਿਖੀਆਂ ਕਲਾਸਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ .tableਬੇਸ ਕਲਾਸ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।

.table-striped

CSS ਚੋਣਕਾਰ (IE7-8 ਵਿੱਚ ਉਪਲਬਧ ਨਹੀਂ) <tbody>ਰਾਹੀਂ ਕਿਸੇ ਵੀ ਟੇਬਲ ਕਤਾਰ ਵਿੱਚ ਜ਼ੈਬਰਾ- ਸਟਰਿੱਪਿੰਗ ਜੋੜਦਾ ਹੈ।:nth-child

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

.table-bordered

ਟੇਬਲ ਵਿੱਚ ਬਾਰਡਰ ਅਤੇ ਗੋਲ ਕੋਨੇ ਸ਼ਾਮਲ ਕਰੋ।

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

.table-hover

ਇੱਕ ਦੇ ਅੰਦਰ ਸਾਰਣੀ ਦੀਆਂ ਕਤਾਰਾਂ 'ਤੇ ਇੱਕ ਹੋਵਰ ਸਥਿਤੀ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ <tbody>।

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

.table-condensed

ਸੈੱਲ ਪੈਡਿੰਗ ਨੂੰ ਅੱਧੇ ਵਿੱਚ ਕੱਟ ਕੇ ਟੇਬਲਾਂ ਨੂੰ ਹੋਰ ਸੰਖੇਪ ਬਣਾਉਂਦਾ ਹੈ।

# ਪਹਿਲਾ ਨਾਂ ਆਖਰੀ ਨਾਂਮ ਯੂਜ਼ਰਨੇਮ
1 ਮਾਰਕ ਓਟੋ @mdo
2 ਜੈਕਬ ਥੋਰਨਟਨ @ਚਰਬੀ
3 ਲੈਰੀ ਦ ਬਰਡ @ਟਵਿੱਟਰ 
  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 ਕਲਾਸ = "ਸਫਲਤਾ" >
  3.     <td> 1 < /td>
  4.     <td>TB - ਮਾਸਿਕ</ 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.   <ਕੈਪਸ਼ਨ> ... </ਕੈਪਸ਼ਨ>
  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. <form>
  2.   <fieldset>
  3.     <legend> Legend </legend>
  4.     <label> ਲੇਬਲ ਨਾਮ </label>
  5.     <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਪਲੇਸਹੋਲਡਰ = "ਕੁਝ ਟਾਈਪ ਕਰੋ..." >  
  6.     <span class = "help-block" > ਬਲਾਕ-ਪੱਧਰ ਦੀ ਮਦਦ ਟੈਕਸਟ ਦੀ ਉਦਾਹਰਨ ਇੱਥੇ ਹੈ। </span> 
  7.     <ਲੇਬਲ ਕਲਾਸ = "ਚੈੱਕਬਾਕਸ" > 
  8.       <ਇਨਪੁਟ ਕਿਸਮ = "ਚੈੱਕਬਾਕਸ" > ਮੈਨੂੰ ਚੈੱਕ ਕਰੋ 
  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" > ਖੋਜ </button>  
  4. </form>

ਇਨਲਾਈਨ ਫਾਰਮ

.form-inlineਇੱਕ ਸੰਖੇਪ ਖਾਕੇ ਲਈ ਖੱਬੇ-ਅਲਾਈਨ ਲੇਬਲ ਅਤੇ ਇਨਲਾਈਨ-ਬਲਾਕ ਨਿਯੰਤਰਣ ਲਈ ਜੋੜੋ ।

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

ਖਿਤਿਜੀ ਰੂਪ

ਲੇਬਲਾਂ ਨੂੰ ਸੱਜਾ ਅਲਾਈਨ ਕਰੋ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਖੱਬੇ ਪਾਸੇ ਫਲੋਟ ਕਰੋ ਤਾਂ ਜੋ ਉਹਨਾਂ ਨੂੰ ਨਿਯੰਤਰਣ ਦੇ ਰੂਪ ਵਿੱਚ ਉਸੇ ਲਾਈਨ 'ਤੇ ਦਿਖਾਈ ਦੇ ਸਕੇ। ਇੱਕ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਫਾਰਮ ਤੋਂ ਸਭ ਤੋਂ ਵੱਧ ਮਾਰਕਅੱਪ ਤਬਦੀਲੀਆਂ ਦੀ ਲੋੜ ਹੈ:

  • .form-horizontalਫਾਰਮ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ
  • ਵਿੱਚ ਲੇਬਲ ਅਤੇ ਨਿਯੰਤਰਣ ਲਪੇਟੋ.control-group
  • .control-labelਲੇਬਲ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ
  • .controlsਸਹੀ ਅਲਾਈਨਮੈਂਟ ਲਈ ਕਿਸੇ ਵੀ ਸੰਬੰਧਿਤ ਨਿਯੰਤਰਣ ਨੂੰ ਸਮੇਟਣਾ
  1. <ਫਾਰਮ ਕਲਾਸ = "ਫਾਰਮ-ਹਰੀਜ਼ੋਂਟਲ" > 
  2.   <div ਕਲਾਸ = "ਕੰਟਰੋਲ-ਗਰੁੱਪ" > 
  3.     <label class = "control-label" for = "inputEmail" > ਈਮੇਲ </label>  
  4.     <div ਕਲਾਸ = "ਨਿਯੰਤਰਣ" > 
  5.       <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਆਈਡੀ = "ਇਨਪੁਟ ਈਮੇਲ" ਪਲੇਸਹੋਲਡਰ = "ਈਮੇਲ" >   
  6.     </div>
  7.   </div>
  8.   <div ਕਲਾਸ = "ਕੰਟਰੋਲ-ਗਰੁੱਪ" > 
  9.     <label class = "control-label" for = "inputPassword" > ਪਾਸਵਰਡ </label>  
  10.     <div ਕਲਾਸ = "ਨਿਯੰਤਰਣ" > 
  11.       <ਇਨਪੁਟ ਕਿਸਮ = "ਪਾਸਵਰਡ" ਆਈਡੀ = "ਇਨਪੁਟ ਪਾਸਵਰਡ" ਪਲੇਸਹੋਲਡਰ = "ਪਾਸਵਰਡ" >   
  12.     </div>
  13.   </div>
  14.   <div ਕਲਾਸ = "ਕੰਟਰੋਲ-ਗਰੁੱਪ" > 
  15.     <div ਕਲਾਸ = "ਨਿਯੰਤਰਣ" > 
  16.       <ਲੇਬਲ ਕਲਾਸ = "ਚੈੱਕਬਾਕਸ" > 
  17.         <ਇਨਪੁਟ ਕਿਸਮ = "ਚੈੱਕਬਾਕਸ" > ਮੈਨੂੰ ਯਾਦ ਰੱਖੋ 
  18.       </label>
  19.       <button type = "submit" class = "btn" > ਸਾਈਨ ਇਨ ਕਰੋ </button>  
  20.     </div>
  21.   </div>
  22. </form>

ਸਮਰਥਿਤ ਫਾਰਮ ਨਿਯੰਤਰਣ

ਉਦਾਹਰਨ ਫਾਰਮ ਲੇਆਉਟ ਵਿੱਚ ਸਮਰਥਿਤ ਮਿਆਰੀ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਦੀਆਂ ਉਦਾਹਰਨਾਂ।

ਇਨਪੁਟਸ

ਸਭ ਤੋਂ ਆਮ ਫਾਰਮ ਨਿਯੰਤਰਣ, ਟੈਕਸਟ-ਅਧਾਰਿਤ ਇਨਪੁਟ ਖੇਤਰ। ਸਾਰੀਆਂ HTML5 ਕਿਸਮਾਂ ਲਈ ਸਮਰਥਨ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ: ਟੈਕਸਟ, ਪਾਸਵਰਡ, ਮਿਤੀ ਸਮਾਂ, ਮਿਤੀ ਸਮਾਂ-ਸਥਾਨਕ, ਮਿਤੀ, ਮਹੀਨਾ, ਸਮਾਂ, ਹਫ਼ਤਾ, ਨੰਬਰ, ਈਮੇਲ, url, ਖੋਜ, ਟੈਲੀ, ਅਤੇ ਰੰਗ।

typeਹਰ ਸਮੇਂ ਇੱਕ ਨਿਰਧਾਰਤ ਦੀ ਵਰਤੋਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ।

  1. <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਪਲੇਸਹੋਲਡਰ = "ਟੈਕਸਟ ਇਨਪੁਟ" >

ਟੈਕਸਟਰੇਆ

ਫਾਰਮ ਨਿਯੰਤਰਣ ਜੋ ਟੈਕਸਟ ਦੀਆਂ ਕਈ ਲਾਈਨਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। rowsਲੋੜ ਅਨੁਸਾਰ ਗੁਣ ਬਦਲੋ ।

  1. <textarea ਕਤਾਰਾਂ = "3" ></textarea>

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

ਚੈਕਬਾਕਸ ਇੱਕ ਸੂਚੀ ਵਿੱਚ ਇੱਕ ਜਾਂ ਕਈ ਵਿਕਲਪਾਂ ਨੂੰ ਚੁਣਨ ਲਈ ਹੁੰਦੇ ਹਨ ਜਦੋਂ ਕਿ ਰੇਡੀਓ ਬਹੁਤ ਸਾਰੇ ਵਿੱਚੋਂ ਇੱਕ ਵਿਕਲਪ ਚੁਣਨ ਲਈ ਹੁੰਦੇ ਹਨ।

ਡਿਫੌਲਟ (ਸਟੈਕਡ)


  1. <ਲੇਬਲ ਕਲਾਸ = "ਚੈੱਕਬਾਕਸ" > 
  2.   <ਇਨਪੁਟ ਕਿਸਮ = "ਚੈੱਕਬਾਕਸ" ਮੁੱਲ = "" >  
  3.   ਇੱਕ ਵਿਕਲਪ ਇਹ ਹੈ ਅਤੇ ਉਹ ਹੈ—ਇਹ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਇਹ ਵਧੀਆ ਕਿਉਂ ਹੈ
  4. </label>
  5.  
  6. <ਲੇਬਲ ਕਲਾਸ = "ਰੇਡੀਓ" > 
  7.   <ਇਨਪੁਟ ਕਿਸਮ = "ਰੇਡੀਓ" ਨਾਮ = "optionsRadios" id = "optionsRadios1" ਮੁੱਲ = "option1" ਚੁਣਿਆ ਗਿਆ >     
  8.   ਇੱਕ ਵਿਕਲਪ ਇਹ ਹੈ ਅਤੇ ਉਹ ਹੈ—ਇਹ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਇਹ ਵਧੀਆ ਕਿਉਂ ਹੈ
  9. </label>
  10. <ਲੇਬਲ ਕਲਾਸ = "ਰੇਡੀਓ" > 
  11.   <ਇਨਪੁਟ  ਕਿਸਮ = "ਰੇਡੀਓ" ਨਾਮ = "optionsRadios" id = "optionsRadios2" ਮੁੱਲ = "option2" >   
  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"ਵਾਰ ਵਿੱਚ ਕਈ ਵਿਕਲਪ ਦਿਖਾਉਣ ਲਈ ਇੱਕ ਨਿਸ਼ਚਿਤ ਕਰੋ।


  1. <ਚੁਣੋ>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </ਚੁਣੋ>
  8.  
  9. < ਮਲਟੀਪਲ ਚੁਣੋ = "ਮਲਟੀਪਲ" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </ਚੁਣੋ>

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

ਮੌਜੂਦਾ ਬ੍ਰਾਊਜ਼ਰ ਨਿਯੰਤਰਣ ਦੇ ਸਿਖਰ 'ਤੇ ਜੋੜਨਾ, ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਹੋਰ ਉਪਯੋਗੀ ਫਾਰਮ ਭਾਗ ਸ਼ਾਮਲ ਹਨ।

ਪਹਿਲਾਂ-ਪੇਸ਼ ਕੀਤੇ ਅਤੇ ਜੁੜੇ ਇਨਪੁਟਸ

ਕਿਸੇ ਵੀ ਟੈਕਸਟ-ਅਧਾਰਿਤ ਇਨਪੁਟ ਤੋਂ ਪਹਿਲਾਂ ਜਾਂ ਬਾਅਦ ਵਿੱਚ ਟੈਕਸਟ ਜਾਂ ਬਟਨ ਸ਼ਾਮਲ ਕਰੋ। ਨੋਟ ਕਰੋ ਕਿ selectਤੱਤ ਇੱਥੇ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਵਿਕਲਪ

ਇੱਕ ਇੰਪੁੱਟ ਵਿੱਚ ਟੈਕਸਟ ਨੂੰ ਅੱਗੇ ਜਾਂ ਜੋੜਨ ਲਈ ਦੋ ਕਲਾਸਾਂ ਵਿੱਚੋਂ ਇੱਕ ਨਾਲ an .add-onਅਤੇ an ਨੂੰ ਲਪੇਟੋ ।input

@

.00 
  1. <div ਕਲਾਸ = "ਇਨਪੁਟ-ਪ੍ਰੀਪੇਂਡ" > 
  2.   <span ਕਲਾਸ = "ਐਡ-ਆਨ" > @ </span> 
  3.   <input class = "span2" id = "prependedInput " type = "text" ਪਲੇਸਹੋਲਡਰ = "Username" >    
  4. </div>
  5. <div ਕਲਾਸ = "ਇਨਪੁਟ-ਅਪੈਂਡ" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span ਕਲਾਸ = "ਐਡ-ਆਨ" > .00 </span> 
  8. </div>

ਸੰਯੁਕਤ

.add-onਇੰਪੁੱਟ ਨੂੰ ਅੱਗੇ ਵਧਾਉਣ ਅਤੇ ਜੋੜਨ ਲਈ ਕਲਾਸਾਂ ਅਤੇ ਦੋ ਉਦਾਹਰਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ।

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span ਕਲਾਸ = "ਐਡ-ਆਨ" > $ </span> 
  3.   <ਇਨਪੁਟ ਕਲਾਸ = "span2" id = "appendedPrependedInput " ਕਿਸਮ = "text" >   
  4.   <span ਕਲਾਸ = "ਐਡ-ਆਨ" > .00 </span> 
  5. </div>

ਟੈਕਸਟ ਦੀ ਬਜਾਏ ਬਟਨ

<span>ਟੈਕਸਟ ਦੇ ਨਾਲ ਇੱਕ ਦੀ ਬਜਾਏ , .btnਇੱਕ ਬਟਨ (ਜਾਂ ਦੋ) ਨੂੰ ਇੱਕ ਇਨਪੁਟ ਨਾਲ ਜੋੜਨ ਲਈ ਇੱਕ ਦੀ ਵਰਤੋਂ ਕਰੋ।

  1. <div ਕਲਾਸ = "ਇਨਪੁਟ-ਅਪੈਂਡ" > 
  2.   <ਇਨਪੁਟ ਕਲਾਸ = "span2" id = "appendedInputButton " ਕਿਸਮ = "ਟੈਕਸਟ" >   
  3.   <button class = "btn" type = "button" > ਜਾਓ! </ ਬਟਨ>  
  4. </div>
  1. <div ਕਲਾਸ = "ਇਨਪੁਟ-ਅਪੈਂਡ" > 
  2.   <ਇਨਪੁਟ ਕਲਾਸ = "span2" id = "appendedInputButtons " ਕਿਸਮ = "ਟੈਕਸਟ" >   
  3.   <button class = "btn" type = "button" > ਖੋਜ </button>  
  4.   <button class = "btn" type = "button" > ਵਿਕਲਪ </button>  
  5. </div>

ਬਟਨ ਡਰਾਪਡਾਊਨ

  1. <div ਕਲਾਸ = "ਇਨਪੁਟ-ਅਪੈਂਡ" > 
  2.   <ਇਨਪੁਟ ਕਲਾਸ = "span2" id = "appendedDropdownButton " ਕਿਸਮ = "text" >   
  3.   <div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  4.     <ਬਟਨ ਕਲਾਸ = "btn ਡਰਾਪਡਾਉਨ-ਟੌਗਲ" ਡੇਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ" >  
  5.       ਕਾਰਵਾਈ
  6.       <span class = "caret" ></span> 
  7.     </ ਬਟਨ>
  8.     <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div ਕਲਾਸ = "ਇਨਪੁਟ-ਪ੍ਰੀਪੇਂਡ" > 
  2.   <div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  3.     <ਬਟਨ ਕਲਾਸ = "btn ਡਰਾਪਡਾਉਨ-ਟੌਗਲ" ਡੇਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ" >  
  4.       ਕਾਰਵਾਈ
  5.       <span class = "caret" ></span> 
  6.     </ ਬਟਨ>
  7.     <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <ਇਨਪੁਟ ਕਲਾਸ = "span2" id = "prependedDropdownButton " ਕਿਸਮ = "ਟੈਕਸਟ" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  3.     <ਬਟਨ ਕਲਾਸ = "btn ਡਰਾਪਡਾਉਨ-ਟੌਗਲ" ਡੇਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ" >  
  4.       ਕਾਰਵਾਈ
  5.       <span class = "caret" ></span> 
  6.     </ ਬਟਨ>
  7.     <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <ਇਨਪੁਟ ਕਲਾਸ = "span2" id = "appendedPrependedDropdownButton " ਕਿਸਮ = "ਟੈਕਸਟ" >   
  12.   <div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  13.     <ਬਟਨ ਕਲਾਸ = "btn ਡਰਾਪਡਾਉਨ-ਟੌਗਲ" ਡੇਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ" >  
  14.       ਕਾਰਵਾਈ
  15.       <span class = "caret" ></span> 
  16.     </ ਬਟਨ>
  17.     <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

ਖੰਡਿਤ ਲਟਕਦੇ ਸਮੂਹ

  1. <form>
  2.   <div ਕਲਾਸ = "ਇਨਪੁਟ-ਪ੍ਰੀਪੇਂਡ" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" > 
  5.   </div>
  6.   <div ਕਲਾਸ = "ਇਨਪੁਟ-ਅਪੈਂਡ" > 
  7.     <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

ਖੋਜ ਫਾਰਮ

  1. <ਫਾਰਮ ਕਲਾਸ = "ਫਾਰਮ-ਖੋਜ" > 
  2.   <div ਕਲਾਸ = "ਇਨਪੁਟ-ਅਪੈਂਡ" > 
  3.     <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "ਸਪੈਨ 2 ਖੋਜ-ਕਵੇਰੀ" >  
  4.     <button type = "submit" class = "btn" > ਖੋਜ </button>  
  5.   </div>
  6.   <div ਕਲਾਸ = "ਇਨਪ��ਟ-ਪ੍ਰੀਪੇਂਡ" > 
  7.     <button type = "submit" class = "btn" > ਖੋਜ </button>  
  8.     <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "ਸਪੈਨ 2 ਖੋਜ-ਕਵੇਰੀ" >  
  9.   </div>
  10. </form>

ਨਿਯੰਤਰਣ ਆਕਾਰ

ਅਨੁਸਾਰੀ ਆਕਾਰ ਵਾਲੀਆਂ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ .input-largeਜਾਂ ਵਰਤਦੇ ਹੋਏ ਆਪਣੇ ਇਨਪੁਟਸ ਨੂੰ ਗਰਿੱਡ ਕਾਲਮ ਆਕਾਰਾਂ ਨਾਲ ਮੇਲ ਕਰੋ.span* ਦੀ ਵਰਤੋਂ ਕਰੋ ।

ਬਲਾਕ ਪੱਧਰ ਦੇ ਇਨਪੁਟਸ

ਕਿਸੇ ਵੀ <input>ਜਾਂ <textarea>ਤੱਤ ਨੂੰ ਬਲਾਕ ਪੱਧਰ ਦੇ ਤੱਤ ਵਾਂਗ ਵਰਤਾਓ।

  1. <input class = "input-block-level" type = "text" ਪਲੇਸਹੋਲਡਰ = ".input-block-level" >

ਅਨੁਸਾਰੀ ਆਕਾਰ

  1. <input class = "input-mini" type = "text" ਪਲੇਸਹੋਲਡਰ = ".input-mini" >   
  2. <input class = "input-small" type = "text" ਪਲੇਸਹੋਲਡਰ = ".input-small" >   
  3. <ਇਨਪੁਟ ਕਲਾਸ = "ਇਨਪੁਟ-ਮਾਧਿਅਮ" ਕਿਸਮ = "ਟੈਕਸਟ" ਪਲੇਸਹੋਲਡਰ = ".ਇਨਪੁਟ-ਮਾਧਿਅਮ" >   
  4. <input class = "input-large" type = "text" ਪਲੇਸਹੋਲਡਰ = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" ਪਲੇਸਹੋਲਡਰ = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" ਪਲੇਸਹੋਲਡਰ = ".input-xxlarge" >

ਸਿਰ!ਭਵਿੱਖ ਦੇ ਸੰਸਕਰਣਾਂ ਵਿੱਚ, ਅਸੀਂ ਆਪਣੇ ਬਟਨ ਦੇ ਆਕਾਰ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਇਹਨਾਂ ਸੰਬੰਧਿਤ ਇਨਪੁਟ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਨੂੰ ਬਦਲ ਰਹੇ ਹਾਂ। ਉਦਾਹਰਣ ਲਈ,.input-large ਇੱਕ ਇਨਪੁਟ ਦੀ ਪੈਡਿੰਗ ਅਤੇ ਫੌਂਟ-ਸਾਈਜ਼ ਨੂੰ ਵਧਾਏਗਾ।

ਗਰਿੱਡ ਦਾ ਆਕਾਰ

ਇੰਪੁੱਟ ਲਈ ਵਰਤੋ .span1ਜੋ .span12ਗਰਿੱਡ ਕਾਲਮਾਂ ਦੇ ਸਮਾਨ ਆਕਾਰ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ।

  1. <ਇਨਪੁਟ ਕਲਾਸ = "span1" ਕਿਸਮ = "ਟੈਕਸਟ" ਪਲੇਸਹੋਲਡਰ = ".span1" >   
  2. <ਇਨਪੁਟ ਕਲਾਸ = "span2" ਕਿਸਮ = "ਟੈਕਸਟ" ਪਲੇਸਹੋਲਡਰ = ".span2" >   
  3. <ਇਨਪੁਟ ਕਲਾਸ = "span3" ਕਿਸਮ = "ਟੈਕਸਟ" ਪਲੇਸਹੋਲਡਰ = ".span3" >   
  4. < ਕਲਾਸ ਚੁਣੋ = "span1" > 
  5.   ...
  6. </ਚੁਣੋ>
  7. < ਕਲਾਸ ਚੁਣੋ = "span2" > 
  8.   ...
  9. </ਚੁਣੋ>
  10. < ਕਲਾਸ ਚੁਣੋ = "span3" > 
  11.   ...
  12. </ਚੁਣੋ>

ਪ੍ਰਤੀ ਲਾਈਨ ਮਲਟੀਪਲ ਗਰਿੱਡ ਇਨਪੁਟਸ ਲਈ, ਸਹੀ ਸਪੇਸਿੰਗ ਲਈ ਮੋਡੀਫਾਇਰ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ.controls-row । ਇਹ ਵ੍ਹਾਈਟ-ਸਪੇਸ ਨੂੰ ਸਮੇਟਣ ਲਈ ਇਨਪੁਟਸ ਨੂੰ ਫਲੋਟ ਕਰਦਾ ਹੈ, ਸਹੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰਦਾ ਹੈ, ਅਤੇ ਫਲੋਟ ਨੂੰ ਸਾਫ਼ ਕਰਦਾ ਹੈ।

  1. <div ਕਲਾਸ = "ਨਿਯੰਤਰਣ" > 
  2.   <ਇਨਪੁਟ ਕਲਾਸ = "span5" ਕਿਸਮ = "ਟੈਕਸਟ" ਪਲੇਸਹੋਲਡਰ = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <ਇਨਪੁਟ ਕਲਾਸ = "span4" ਕਿਸਮ = "ਟੈਕਸਟ" ਪਲੇਸਹੋਲਡਰ = ".span4" >   
  6.   <ਇਨਪੁਟ ਕਲਾਸ = "span1" ਕਿਸਮ = "ਟੈਕਸਟ" ਪਲੇਸਹੋਲਡਰ = ".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. <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ><span ਕਲਾਸ = "help-inline" > ਇਨਲਾਈਨ ਮਦਦ ਟੈਕਸਟ </span>

ਬਲਾਕ ਮਦਦ

ਮਦਦ ਟੈਕਸਟ ਦਾ ਇੱਕ ਲੰਮਾ ਬਲਾਕ ਜੋ ਇੱਕ ਨਵੀਂ ਲਾਈਨ 'ਤੇ ਟੁੱਟਦਾ ਹੈ ਅਤੇ ਇੱਕ ਲਾਈਨ ਤੋਂ ਅੱਗੇ ਵਧ ਸਕਦਾ ਹੈ। 
  1. <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ><span ਕਲਾਸ = "help-block" > ਮਦਦ ਟੈਕਸਟ ਦਾ ਇੱਕ ਲੰਬਾ ਬਲਾਕ ਜੋ ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਵਿੱਚ ਟੁੱਟਦਾ ਹੈ ਅਤੇ ਇੱਕ ਲਾਈਨ ਤੋਂ ਅੱਗੇ ਵਧ ਸਕਦਾ ਹੈ। </span>

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

ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਅਤੇ ਲੇਬਲਾਂ 'ਤੇ ਮੂਲ ਫੀਡਬੈਕ ਸਥਿਤੀਆਂ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਜਾਂ ਦਰਸ਼ਕਾਂ ਨੂੰ ਫੀਡਬੈਕ ਪ੍ਰਦਾਨ ਕਰੋ।

ਇੰਪੁੱਟ ਫੋਕਸ

outlineਅਸੀਂ ਕੁਝ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ 'ਤੇ ਡਿਫੌਲਟ ਸਟਾਈਲ ਨੂੰ ਹਟਾਉਂਦੇ ਹਾਂ ਅਤੇ box-shadowਇਸਦੀ ਥਾਂ 'ਤੇ ਲਈ ਲਾਗੂ ਕਰਦੇ ਹਾਂ :focus।

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "ਇਹ ਫੋਕਸ ਹੈ..." >

ਅਵੈਧ ਇਨਪੁੱਟ

ਨਾਲ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਬ੍ਰਾਊਜ਼ਰ ਕਾਰਜਕੁਸ਼ਲਤਾ ਰਾਹੀਂ ਸਟਾਈਲ ਇਨਪੁਟਸ :invalid। ਇੱਕ ਨਿਰਧਾਰਤ typeਕਰੋ, requiredਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ ਜੇਕਰ ਖੇਤਰ ਵਿਕਲਪਿਕ ਨਹੀਂ ਹੈ, ਅਤੇ (ਜੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ) ਇੱਕ ਨਿਸ਼ਚਿਤ ਕਰੋpattern ।

CSS ਸੂਡੋ ਚੋਣਕਾਰਾਂ ਲਈ ਸਮਰਥਨ ਦੀ ਘਾਟ ਕਾਰਨ ਇਹ ਇੰਟਰਨੈਟ ਐਕਸਪਲੋਰਰ 7-9 ਦੇ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।

  1. <ਇਨਪੁਟ ਕਲਾਸ = "span3" ਕਿਸਮ = "ਈਮੇਲ" ਲੋੜੀਂਦਾ >

ਅਯੋਗ ਇਨਪੁੱਟ

disabledਉਪਭੋਗਤਾ ਦੇ ਇਨਪੁਟ ਨੂੰ ਰੋਕਣ ਅਤੇ ਇੱਕ ਥੋੜੀ ਵੱਖਰੀ ਦਿੱਖ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਨ ਲਈ ਇੱਕ ਇਨਪੁਟ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ ।

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" ਪਲੇਸਹੋਲਡਰ = "ਇੱਥੇ ਅਯੋਗ ਇਨਪੁਟ..." ਅਯੋਗ >

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

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

ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਕੁਝ ਗਲਤ ਹੋ ਗਿਆ ਹੋਵੇ
ਕਿਰਪਾ ਕਰਕੇ ਗਲਤੀ ਨੂੰ ਠੀਕ ਕਰੋ
ਯੂਜ਼ਰਨੇਮ ਲਿਆ ਗਿਆ ਹੈ
ਵਾਹ! 
  1. <div ਕਲਾਸ = "ਕੰਟਰੋਲ-ਗਰੁੱਪ ਚੇਤਾਵਨੀ" > 
  2.   <label class = "control-label" for = "inputWarning" > ਚੇਤਾਵਨੀ ਦੇ ਨਾਲ ਇਨਪੁਟ </label>  
  3.   <div ਕਲਾਸ = "ਨਿਯੰਤਰਣ" > 
  4.     <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਆਈਡੀ = "ਇਨਪੁਟ ਵਾਰਨਿੰਗ" >  
  5.     <span class = "help-inline" > ਕੁਝ ਗਲਤ ਹੋ ਗਿਆ ਹੈ </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div ਕਲਾਸ = "ਕੰਟਰੋਲ-ਗਰੁੱਪ ਗਲਤੀ" > 
  10.   <label class = "control-label" for = "inputError" > ਗਲਤੀ ਨਾਲ ਇਨਪੁਟ </label>  
  11.   <div ਕਲਾਸ = "ਨਿਯੰਤਰਣ" > 
  12.     <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਆਈਡੀ = "ਇਨਪੁਟ ਐਰਰ" >  
  13.     <span class = "help-inline" > ਕਿਰਪਾ ਕਰਕੇ ਗਲਤੀ ਨੂੰ ਠੀਕ ਕਰੋ </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div ਕਲਾਸ = "ਕੰਟਰੋਲ-ਗਰੁੱਪ ਜਾਣਕਾਰੀ" > 
  18.   <label class = "control-label" for = "inputInfo" > ਜਾਣਕਾਰੀ ਦੇ ਨਾਲ ਇਨਪੁਟ </label>  
  19.   <div ਕਲਾਸ = "ਨਿਯੰਤਰਣ" > 
  20.     <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਆਈਡੀ = "ਇਨਪੁਟ ਇਨਫੋ" >  
  21.     <span class = "help-inline" > ਵਰਤੋਂਕਾਰ ਨਾਮ ਪਹਿਲਾਂ ਹੀ ਲਿਆ ਗਿਆ ਹੈ </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div ਕਲਾਸ = "ਕੰਟਰੋਲ-ਗਰੁੱਪ ਸਫਲਤਾ" > 
  26.   <label class = "control-label" for = "inputSuccess" > ਸਫਲਤਾ ਨਾਲ ਇਨਪੁਟ </label>  
  27.   <div ਕਲਾਸ = "ਨਿਯੰਤਰਣ" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </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 ਅਸਮਰੱਥ 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" > ਮਿੰਨੀ ਬਟਨ </button>  
  15.   <button class = "btn btn-mini" type = "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" ਅਯੋਗ > ਬਟਨ </button>

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

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

ਲਿੰਕ 
  1. <a class="btn" href=""> ਲਿੰਕ </a> _ _ _ _ _  
  2. <button class = "btn" type = "submit" > ਬਟਨ </button>  
  3. <ਇਨਪੁਟ ਕਲਾਸ = "btn" ਕਿਸਮ = "ਬਟਨ" ਮੁੱਲ = "ਇਨਪੁਟ" >   
  4. <ਇਨਪੁਟ ਕਲਾਸ = "btn" ਕਿਸਮ = "ਸਬਮਿਟ" ਮੁੱਲ = "ਸਬਮਿਟ" >

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

ਚਿੱਤਰ

<img>ਕਿਸੇ ਵੀ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਚਿੱਤਰਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਸਟਾਈਲ ਕਰਨ ਲਈ ਇੱਕ ਤੱਤ ਵਿੱਚ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ ।

140x140 140x140 140x140 
  1. <img src = "..." ਕਲਾਸ = "img-rounded" >  
  2. <img src = "..." ਕਲਾਸ = "img-ਸਰਕਲ" >  
  3. <img src = "..." ਕਲਾਸ = "img-polaroid" >

ਸਿਰ! .img-roundedਅਤੇ ਸਹਿਯੋਗ .img-circleਦੀ ਘਾਟ ਕਾਰਨ IE7-8 ਵਿੱਚ ਕੰਮ ਨਹੀਂ ਕਰਦੇ border-radius।

Glyphicons ਦੁਆਰਾ ਆਈਕਾਨ

ਆਈਕਨ ਗਲਾਈਫਸ

ਸਪ੍ਰਾਈਟ ਰੂਪ ਵਿੱਚ 140 ਆਈਕਨ, ਗੂੜ੍ਹੇ ਸਲੇਟੀ (ਡਿਫੌਲਟ) ਅਤੇ ਚਿੱਟੇ ਵਿੱਚ ਉਪਲਬਧ, ਗਲਾਈਫਿਕਨ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੇ ਗਏ ।

  • ਆਈਕਨ-ਗਲਾਸ
  • ਆਈਕਨ-ਸੰਗੀਤ
  • 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
  • ਆਈਕਨ-ਬ੍ਰੀਫਕੇਸ
  • ਆਈਕਨ-ਪੂਰੀ ਸਕਰੀਨ

Glyphicons ਵਿਸ਼ੇਸ਼ਤਾ

Glyphicons Halflings ਆਮ ਤੌਰ 'ਤੇ ਮੁਫਤ ਵਿੱਚ ਉਪਲਬਧ ਨਹੀਂ ਹੁੰਦੇ ਹਨ, ਪਰ Bootstrap ਅਤੇ Glyphicons ਸਿਰਜਣਹਾਰਾਂ ਵਿਚਕਾਰ ਇੱਕ ਵਿਵਸਥਾ ਨੇ ਵਿਕਾਸਕਰਤਾਵਾਂ ਵਜੋਂ ਤੁਹਾਡੇ ਲਈ ਬਿਨਾਂ ਕਿਸੇ ਕੀਮਤ ਦੇ ਇਸ ਨੂੰ ਸੰਭਵ ਬਣਾਇਆ ਹੈ। ਤੁਹਾਡੇ ਧੰਨਵਾਦ ਵਜੋਂ, ਜਦੋਂ ਵੀ ਵਿਹਾਰਕ ਹੋਵੇ , ਅਸੀਂ ਤੁਹਾਨੂੰ Glyphicons ਲਈ ਇੱਕ ਵਿਕਲਪਿਕ ਲਿੰਕ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਕਹਿੰਦੇ ਹਾਂ।

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

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

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

ਉਲਟੇ (ਚਿੱਟੇ) ਆਈਕਨਾਂ ਲਈ ਵੀ ਸਟਾਈਲ ਉਪਲਬਧ ਹਨ, ਜੋ ਇੱਕ ਵਾਧੂ ਕਲਾਸ ਨਾਲ ਤਿਆਰ ਹਨ। ਅਸੀਂ ਖਾਸ ਤੌਰ 'ਤੇ ਇਸ ਕਲਾਸ ਨੂੰ ਨੇਵੀ ਅਤੇ ਡ੍ਰੌਪਡਾਉਨ ਲਿੰਕਾਂ ਲਈ ਹੋਵਰ ਅਤੇ ਕਿਰਿਆਸ਼ੀਲ ਸਥਿਤੀਆਂ 'ਤੇ ਲਾਗੂ ਕਰਾਂਗੇ।

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

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

ਆਈਕਨ ਉਦਾਹਰਨਾਂ

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

ਬਟਨ

ਇੱਕ ਬਟਨ ਟੂਲਬਾਰ ਵਿੱਚ ਬਟਨ ਸਮੂਹ
  1. <div ਕਲਾਸ = "btn-ਟੂਲਬਾਰ" > 
  2.   <div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  3.     <a ਕਲਾਸ = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a ਕਲਾਸ = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a ਕਲਾਸ = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a ਕਲਾਸ = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
ਇੱਕ ਬਟਨ ਸਮੂਹ ਵਿੱਚ ਡ੍ਰੌਪਡਾਊਨ
ਉਪਭੋਗਤਾ 
  1. <div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  2.   <a ਕਲਾਸ = "btn btn-ਪ੍ਰਾਇਮਰੀ" href = "#" ><i ਕਲਾਸ = "icon-user icon-white" ></i> ਵਰਤੋਂਕਾਰ </a>   
  3.   <a ਕਲਾਸ = "btn btn-ਪ੍ਰਾਇਮਰੀ ਡਰਾਪਡਾਉਨ-ਟੌਗਲ" ਡੇਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ" href = "#" ><span ਕਲਾਸ = "ਕੈਰੇਟ" ></span></a>    
  4.   <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
  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 ਕਲਾਸ = "ਡਿਵਾਈਡਰ" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> ਐਡਮਿਨ ਬਣਾਓ </a></li>  
  10.   </ul>
  11. </div>
ਬਟਨ ਦੇ ਆਕਾਰ
ਤਾਰਾ ਤਾਰਾ ਤਾਰਾ 
  1. <a ਕਲਾਸ = "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 = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> ਘਰ </a></li>   
  3.   <li><a href = "#" ><i ਕਲਾਸ = "ਆਈਕਨ-ਬੁੱਕ" ></i> ਲਾਇਬ੍ਰੇਰੀ </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> ਐਪਲੀਕੇਸ਼ਨਾਂ </a></li>  
  5.   <li><a href = "#" ><i ਕਲਾਸ = "i" ></i> ਫੁਟਕਲ </a></li>  
  6. </ul>

ਫਾਰਮ ਖੇਤਰ

  1. <div ਕਲਾਸ = "ਕੰਟਰੋਲ-ਗਰੁੱਪ" > 
  2.   <label class = "control-label" for = "inputIcon" > ਈਮੇਲ ਪਤਾ </label>  
  3.   <div class="controls">
  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>