ਬਟਨ ਸਮੂਹ

ਇੱਕ ਸੰਯੁਕਤ ਹਿੱਸੇ ਦੇ ਰੂਪ ਵਿੱਚ ਇੱਕਠੇ ਕਈ ਬਟਨਾਂ ਨੂੰ ਜੋੜਨ ਲਈ ਬਟਨ ਸਮੂਹਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਲੜੀ <a>ਜਾਂ <button>ਤੱਤਾਂ ਨਾਲ ਬਣਾਓ।

ਵਧੀਆ ਅਭਿਆਸ

ਅਸੀਂ ਬਟਨ ਸਮੂਹਾਂ ਅਤੇ ਟੂਲਬਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ:

• ਇੱਕ ਸਿੰਗਲ ਬਟਨ ਸਮੂਹ ਵਿੱਚ ਹਮੇਸ਼ਾਂ ਇੱਕੋ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰੋ, <a>ਜਾਂ <button>.
• ਇੱਕੋ ਬਟਨ ਸਮੂਹ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਰੰਗਾਂ ਦੇ ਬਟਨਾਂ ਨੂੰ ਨਾ ਮਿਲਾਓ।
• ਟੈਕਸਟ ਦੇ ਨਾਲ ਜਾਂ ਇਸ ਦੀ ਬਜਾਏ ਆਈਕਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਪਰ ਜਿੱਥੇ ਉਚਿਤ ਹੋਵੇ ਉੱਥੇ Alt ਅਤੇ ਸਿਰਲੇਖ ਟੈਕਸਟ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ।

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

ਡਿਫੌਲਟ ਉਦਾਹਰਨ

ਇਹ ਹੈ ਕਿ HTML ਐਂਕਰ ਟੈਗ ਬਟਨਾਂ ਨਾਲ ਬਣੇ ਸਟੈਂਡਰਡ ਬਟਨ ਸਮੂਹ ਨੂੰ ਕਿਵੇਂ ਵੇਖਦਾ ਹੈ:

<div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

ਟੂਲਬਾਰ ਉਦਾਹਰਨ

ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਭਾਗਾਂ ਲਈ <div class="btn-group">a ਵਿੱਚ ਸੈੱਟਾਂ ਨੂੰ ਜੋੜੋ ।<div class="btn-toolbar">

<div ਕਲਾਸ = "btn-ਟੂਲਬਾਰ" > 
  <div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
    ...
  </div>
</div>

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

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

ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰਾਪਤ ਕਰੋ »

ਬਟਨ ਸਮੂਹਾਂ ਵਿੱਚ ਡ੍ਰੌਪਡਾਊਨ

ਸਿਰ! ਡ੍ਰੌਪਡਾਊਨ ਵਾਲੇ ਬਟਨਾਂ ਨੂੰ ਸਹੀ ਰੈਂਡਰਿੰਗ ਲਈ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਆਪਣੇ ਆਪ .btn-groupਵਿੱਚ ਲਪੇਟਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।.btn-toolbar

ਸੰਖੇਪ ਜਾਣਕਾਰੀ ਅਤੇ ਉਦਾਹਰਣ

ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਇੱਕ ਦੇ ਅੰਦਰ ਰੱਖ ਕੇ .btn-groupਅਤੇ ਸਹੀ ਮੀਨੂ ਮਾਰਕਅੱਪ ਪ੍ਰਦਾਨ ਕਰਕੇ ਕਿਸੇ ਵੀ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰੋ।

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

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

<div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  <a ਕਲਾਸ = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    ਕਾਰਵਾਈ
    <span class = "caret" ></span> 
  </a>
  <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
    <!-- ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਲਿੰਕ -->
  </ul>
</div>

ਸਾਰੇ ਬਟਨ ਅਕਾਰ ਦੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ

ਬਟਨ ਡਰਾਪਡਾਊਨ ਕਿਸੇ ਵੀ ਆਕਾਰ 'ਤੇ ਕੰਮ ਕਰਦੇ ਹਨ। ਤੁਹਾਡੇ ਬਟਨ ਦਾ ਆਕਾਰ .btn-large, .btn-smallਜਾਂ .btn-mini.

ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਲੋੜ ਹੈ

ਬਟਨ ਡ੍ਰੌਪਡਾਉਨ ਨੂੰ ਕੰਮ ਕਰਨ ਲਈ ਬੂਟਸਟਰੈਪ ਡ੍ਰੌਪਡਾਉਨ ਪਲੱਗਇਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਕੁਝ ਮਾਮਲਿਆਂ ਵਿੱਚ—ਜਿਵੇਂ ਕਿ ਮੋਬਾਈਲ—ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਵਿਊਪੋਰਟ ਤੋਂ ਬਾਹਰ ਵਧੇਗਾ। ਤੁਹਾਨੂੰ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਹੱਥੀਂ ਜਾਂ ਕਸਟਮ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਹੱਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।

ਸੰਖੇਪ ਜਾਣਕਾਰੀ ਅਤੇ ਉਦਾਹਰਣ

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

ਆਕਾਰ

ਵਾਧੂ ਬਟਨ ਕਲਾਸਾਂ .btn-miniਦੀ ਵਰਤੋਂ ਕਰੋ .btn-small, ਜਾਂ .btn-largeਆਕਾਰ ਦੇਣ ਲਈ।

<div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  ...
  <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ ਪੁੱਲ-ਸੱਜੇ" > 
    <!-- ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਲਿੰਕ -->
  </ul>
</div>

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

ਅਸੀਂ ਦੂਜੀ ਬਟਨ ਐਕਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਸਧਾਰਣ ਬਟਨ ਡ੍ਰੌਪਡਾਊਨ 'ਤੇ ਵਿਸਤਾਰ ਕਰਦੇ ਹਾਂ ਜੋ ਇੱਕ ਵੱਖਰੇ ਡ੍ਰੌਪਡਾਉਨ ਟ੍ਰਿਗਰ ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ।

<div ਕਲਾਸ = "btn-ਗਰੁੱਪ" > 
  <button class = "btn" > ਕਾਰਵਾਈ </button> 
  <ਬਟਨ ਕਲਾਸ = "btn ਡਰਾਪਡਾਉਨ-ਟੌਗਲ" ਡੇਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ" >  
    <span class = "caret" ></span> 
  </ ਬਟਨ>
  <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
    <!-- ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਲਿੰਕ -->
  </ul>
</div>

ਡ੍ਰੌਪਅੱਪ ਮੇਨੂ

ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਦੇ ਤਤਕਾਲੀ ਮਾਤਾ-ਪਿਤਾ ਵਿੱਚ ਇੱਕ ਸਿੰਗਲ ਕਲਾਸ ਜੋੜ ਕੇ ਹੇਠਾਂ ਤੋਂ ਉੱਪਰ ਤੱਕ ਟੌਗਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ .dropdown-menu। ਇਹ ਦੀ ਦਿਸ਼ਾ ਨੂੰ ਫਲਿਪ ਕਰੇਗਾ .caretਅਤੇ ਉੱਪਰ ਤੋਂ ਹੇਠਾਂ ਦੀ ਬਜਾਏ ਹੇਠਾਂ ਤੋਂ ਉੱਪਰ ਜਾਣ ਲਈ ਮੀਨੂ ਨੂੰ ਆਪਣੇ ਆਪ ਵਿੱਚ ਬਦਲ ਦੇਵੇਗਾ।

<div ਕਲਾਸ = "btn-ਗਰੁੱਪ ਡਰਾਪਅੱਪ" > 
  <button class = "btn" > ਡ੍ਰੌਪਅੱਪ </button> 
  <ਬਟਨ ਕਲਾਸ = "btn ਡਰਾਪਡਾਉਨ-ਟੌਗਲ" ਡੇਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ" >  
    <span class = "caret" ></span> 
  </ ਬਟਨ>
  <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
    <!-- ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਲਿੰਕ -->
  </ul>
</div>

ਸ਼ਕਤੀਸ਼ਾਲੀ ਬੇਸ ਕਲਾਸ

ਇੱਥੇ ਸਾਰੇ ਨੈਵ ਕੰਪੋਨੈਂਟ—ਟੈਬਾਂ, ਗੋਲੀਆਂ, ਅਤੇ ਸੂਚੀਆਂ— ਕਲਾਸ ਰਾਹੀਂ ਇੱਕੋ ਜਿਹੇ ਬੇਸ ਮਾਰਕਅੱਪ ਅਤੇ ਸ਼ੈਲੀਆਂ.nav ਨੂੰ ਸਾਂਝਾ ਕਰਦੇ ਹਨ ।

ਕਦੋਂ ਵਰਤਣਾ ਹੈ

ਟੈਬਸ ਅਤੇ ਗੋਲੀਆਂ ਸਮੱਗਰੀ ਦੇ ਭਾਗਾਂ ਜਾਂ ਸੰਬੰਧਿਤ ਸਮੱਗਰੀ ਦੇ ਪੰਨਿਆਂ ਦੇ ਵਿਚਕਾਰ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ ਵਧੀਆ ਹਨ।

ਕੰਪੋਨੈਂਟ ਅਲਾਈਨਮੈਂਟ

ਨੈਵੀ ਲਿੰਕਸ ਨੂੰ ਅਲਾਈਨ ਕਰਨ ਲਈ, .pull-leftਜਾਂ .pull-rightਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਦੋਵੇਂ ਕਲਾਸਾਂ ਨਿਰਧਾਰਤ ਦਿਸ਼ਾ ਵਿੱਚ ਇੱਕ CSS ਫਲੋਟ ਜੋੜਨਗੀਆਂ।

ਮੂਲ ਟੈਬਾਂ

ਨਿਯਮਤ <ul>ਲਿੰਕ ਲਓ ਅਤੇ ਸ਼ਾਮਲ ਕਰੋ .nav-tabs:

• ਘਰ
• ਪ੍ਰੋਫਾਈਲ
• ਸੁਨੇਹੇ

<ul class = "nav nav-tabs" > 
  <li ਕਲਾਸ = "ਸਰਗਰਮ" > 
    <a href="#" > ਘਰ </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

ਬੁਨਿਆਦੀ ਗੋਲੀਆਂ

ਉਹੀ HTML ਲਓ, ਪਰ ਇਸਦੀ .nav-pillsਬਜਾਏ ਵਰਤੋਂ:

• ਘਰ
• ਪ੍ਰੋਫਾਈਲ
• ਸੁਨੇਹੇ

<ul class = "nav nav-pills" > 
  <li ਕਲਾਸ = "ਸਰਗਰਮ" > 
    <a href="#" > ਘਰ </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

ਉਹਨਾਂ ਨੂੰ ਕਿਵੇਂ ਸਟੈਕ ਕਰਨਾ ਹੈ

ਜਿਵੇਂ ਕਿ ਟੈਬਾਂ ਅਤੇ ਗੋਲੀਆਂ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਹਰੀਜੱਟਲ ਹੁੰਦੀਆਂ ਹਨ, .nav-stackedਉਹਨਾਂ ਨੂੰ ਲੰਬਕਾਰੀ ਸਟੈਕਡ ਵਿਖਾਈ ਦੇਣ ਲਈ ਸਿਰਫ਼ ਇੱਕ ਦੂਜੀ ਸ਼੍ਰੇਣੀ, , ਜੋੜੋ।

ਸਟੈਕਡ ਟੈਬਾਂ

• ਘਰ
• ਪ੍ਰੋਫਾਈਲ
• ਸੁਨੇਹੇ

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

ਸਟੈਕਡ ਗੋਲੀਆਂ

• ਘਰ
• ਪ੍ਰੋਫਾਈਲ
• ਸੁਨੇਹੇ

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

ਅਮੀਰ ਮੇਨੂ ਨੂੰ ਆਸਾਨ ਬਣਾਇਆ ਗਿਆ ਹੈ

ਬੂਟਸਟਰੈਪ ਟੈਬਸ ਅਤੇ ਗੋਲੀਆਂ ਵਿੱਚ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਬਹੁਤ ਆਸਾਨ ਹਨ ਅਤੇ ਸਿਰਫ ਥੋੜਾ ਜਿਹਾ ਵਾਧੂ HTML ਅਤੇ ਇੱਕ ਹਲਕੇ jQuery ਪਲੱਗਇਨ ਦੀ ਲੋੜ ਹੈ।

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਡ੍ਰੌਪਡਾਊਨ ਸ਼ੁਰੂ ਕਰਨ ਬਾਰੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਪੜ੍ਹਨ ਲਈ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪੰਨੇ 'ਤੇ ਜਾਓ ।

ਡ੍ਰੌਪਡਾਊਨ ਵਾਲੀਆਂ ਟੈਬਾਂ

• ਘਰ
• ਮਦਦ ਕਰੋ
• ਡਰਾਪ ਡਾਉਨ
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਊਨ" > 
    <a ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਊਨ-ਟੌਗਲ" 
       ਡਾਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ"
       href = "#" >
        ਡਰਾਪ ਡਾਉਨ
        <b ਕਲਾਸ = "ਕੈਰੇਟ" ></b> 
      </a>
    <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
      <!-- ਲਿੰਕ -->
    </ul>
  </li>
</ul>

ਡਰਾਪਡਾਊਨ ਦੇ ਨਾਲ ਗੋਲੀਆਂ

• ਘਰ
• ਮਦਦ ਕਰੋ
• ਡਰਾਪ ਡਾਉਨ
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਊਨ" > 
    <a ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਊਨ-ਟੌਗਲ" 
       ਡਾਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ"
       href = "#" >
        ਡਰਾਪ ਡਾਉਨ
        <b ਕਲਾਸ = "ਕੈਰੇਟ" ></b> 
      </a>
    <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
      <!-- ਲਿੰਕ -->
    </ul>
  </li>
</ul>

ਐਪਲੀਕੇਸ਼ਨ-ਸ਼ੈਲੀ ਨੈਵੀਗੇਸ਼ਨ

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

ਸੰਰਚਨਾਤਮਕ ਤੌਰ 'ਤੇ, ਉਹ ਟੈਬਾਂ ਅਤੇ ਗੋਲੀਆਂ ਦੇ ਰੂਪ ਵਿੱਚ ਉਸੇ ਹੀ ਕੋਰ ਨੈਵ ਸਟਾਈਲ 'ਤੇ ਬਣਾਏ ਗਏ ਹਨ, ਇਸਲਈ ਵਰਤੋਂ ਅਤੇ ਅਨੁਕੂਲਤਾ ਸਿੱਧੇ ਹਨ।

ਆਈਕਾਨਾਂ ਨਾਲ

ਆਈਕਾਨਾਂ ਨਾਲ ਲੈਸ ਕਰਨ ਲਈ Nav ਸੂਚੀਆਂ ਵੀ ਆਸਾਨ ਹਨ। ਕਲਾਸ ਦੇ ਨਾਲ ਸਹੀ <i>ਟੈਗ ਜੋੜੋ ਅਤੇ ਤੁਸੀਂ ਸੈੱਟ ਹੋ।

ਹਰੀਜੱਟਲ ਡਿਵਾਈਡਰ

ਕਲਾਸ ਦੇ ਨਾਲ ਇੱਕ ਖਾਲੀ ਸੂਚੀ ਆਈਟਮ ਬਣਾ ਕੇ ਇੱਕ ਖਿਤਿਜੀ ਵਿਭਾਜਕ ਸ਼ਾਮਲ ਕਰੋ .divider, ਜਿਵੇਂ ਕਿ:

<ul class = "nav nav-list" > 
  ...
  <li ਕਲਾਸ = "ਡਿਵਾਈਡਰ" ></li> 
  ...
</ul>

ਉਦਾਹਰਨ nav ਸੂਚੀ

ਲਿੰਕਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਲਓ ਅਤੇ ਸ਼ਾਮਲ ਕਰੋ class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    ਸੂਚੀ ਸਿਰਲੇਖ
  </li>
  <li ਕਲਾਸ = "ਸਰਗਰਮ" > 
    <a href="#" > ਘਰ </a> _ _ 
  </li>
  <li>
    <a href="#" > ਲਾਇਬ੍ਰੇਰੀ </a> _ _ 
  </li>
  ...
</ul>

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

ਉਹੀ ਉਦਾਹਰਣ, ਪਰ <i>ਆਈਕਾਨਾਂ ਲਈ ਟੈਗਸ ਦੇ ਨਾਲ।

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i ਕਲਾਸ = "ਆਈਕਨ-ਬੁੱਕ" ></i> 
      ਲਾਇਬ੍ਰੇਰੀ
    </a>
  </li>
  ...
</ul>

ਕੀ ਸ਼ਾਮਲ ਹੈ

ਟੈਬਾਂ ਰਾਹੀਂ ਸਮੱਗਰੀ ਦੇ ਵਿਚਕਾਰ ਟੌਗਲ ਕਰਨ ਲਈ ਇੱਕ ਸਧਾਰਨ ਪਲੱਗਇਨ ਨਾਲ ਆਪਣੀਆਂ ਟੈਬਾਂ ਨੂੰ ਜੀਵਨ ਵਿੱਚ ਲਿਆਓ। ਬੂਟਸਟਰੈਪ ਚਾਰ ਸ਼ੈਲੀਆਂ ਵਿੱਚ ਟੈਬਬਲ ਟੈਬਾਂ ਨੂੰ ਏਕੀਕ੍ਰਿਤ ਕਰਦਾ ਹੈ: ਸਿਖਰ (ਡਿਫੌਲਟ), ਸੱਜੇ, ਹੇਠਾਂ, ਅਤੇ ਖੱਬਾ।

ਉਹਨਾਂ ਵਿਚਕਾਰ ਬਦਲਣਾ ਆਸਾਨ ਹੈ ਅਤੇ ਸਿਰਫ ਬਹੁਤ ਘੱਟ ਮਾਰਕਅੱਪ ਨੂੰ ਬਦਲਣ ਦੀ ਲੋੜ ਹੈ।

ਟੈਬਾਂ ਵਿੱਚ ਫੇਡ

ਟੈਬਾਂ ਨੂੰ ਫੇਡ ਇਨ ਬਣਾਉਣ ਲਈ, .fadeਹਰੇਕ ਵਿੱਚ ਜੋੜੋ .tab-pane।

jQuery ਪਲੱਗਇਨ ਦੀ ਲੋੜ ਹੈ

ਸਾਰੀਆਂ ਟੈਬਬਲ ਟੈਬਾਂ ਸਾਡੇ ਹਲਕੇ jQuery ਪਲੱਗਇਨ ਦੁਆਰਾ ਸੰਚਾਲਿਤ ਹਨ। ਜਾਵਾਸਕ੍ਰਿਪਟ ਡੌਕਸ ਪੰਨੇ 'ਤੇ ਟੈਬਬਲ ਟੈਬਾਂ ਨੂੰ ਜੀਵਨ ਵਿੱਚ ਕਿਵੇਂ ਲਿਆਉਣਾ ਹੈ ਇਸ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ ।

ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰਾਪਤ ਕਰੋ →

ਟੇਬਲ ਉਦਾਹਰਨ

ਟੈਬਾਂ ਨੂੰ ਟੈਬ ਕਰਨ ਯੋਗ ਬਣਾਉਣ ਲਈ, .tab-paneਹਰੇਕ ਟੈਬ ਲਈ ਇੱਕ ਵਿਲੱਖਣ ID ਨਾਲ ਬਣਾਓ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਵਿੱਚ ਲਪੇਟੋ .tab-content।

ਸੱਜੇ ਜਾਂ ਖੱਬੇ ਇਕਸਾਰ ਟੈਬਾਂ ਲਈ, .nav-tabsਅਤੇ .tab-contentਵਿੱਚ ਲਪੇਟੋ .tabbable।

ਸਿੱਧਾ ਮਾਰਕਅੱਪ

ਟੈਬਬਲ ਟੈਬਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਇੱਕ ਰੈਪਿੰਗ ਡਿਵ, ਟੈਬਾਂ ਦਾ ਇੱਕ ਸੈੱਟ, ਅਤੇ ਸਮੱਗਰੀ ਦੇ ਟੈਬਬਲ ਪੈਨ ਦੇ ਇੱਕ ਸੈੱਟ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

<div class = "tabbable" > <!-- ਸਿਰਫ਼ ਖੱਬੇ/ਸੱਜੇ ਟੈਬਾਂ ਲਈ ਲੋੜੀਂਦਾ ਹੈ -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > ਸੈਕਸ਼ਨ 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > ਸੈਕਸ਼ਨ 2 </a></li>  
  </ul>
  <div ਕਲਾਸ = "ਟੈਬ-ਸਮੱਗਰੀ" > 
    <div ਕਲਾਸ = "ਟੈਬ-ਪੈਨ ਐਕਟਿਵ" ਆਈਡੀ = "ਟੈਬ1" >  
      <p> ਮੈਂ ਸੈਕਸ਼ਨ 1 ਵਿੱਚ ਹਾਂ। </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> ਹਾਉਡੀ, ਮੈਂ ਸੈਕਸ਼ਨ 2 ਵਿੱਚ ਹਾਂ। </p>
    </div>
  </div>
</div>

ਹੇਠਾਂ ਟੈਬਾਂ

HTML ਦੇ ਕ੍ਰਮ ਨੂੰ ਫਲਿੱਪ ਕਰੋ ਅਤੇ ਟੈਬਾਂ ਨੂੰ ਹੇਠਾਂ ਰੱਖਣ ਲਈ ਇੱਕ ਕਲਾਸ ਜੋੜੋ।

<div ਕਲਾਸ = "ਟੈਬਬਲ ਟੈਬਸ-ਹੇਠਾਂ" > 
  <div ਕਲਾਸ = "ਟੈਬ-ਸਮੱਗਰੀ" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

ਖੱਬੇ ਪਾਸੇ ਟੈਬਾਂ

ਖੱਬੇ ਪਾਸੇ ਟੈਬਾਂ ਲਗਾਉਣ ਲਈ ਕਲਾਸ ਨੂੰ ਸਵੈਪ ਕਰੋ।

<div ਕਲਾਸ = "ਟੈਬਬਲ ਟੈਬਸ-ਖੱਬੇ" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div ਕਲਾਸ = "ਟੈਬ-ਸਮੱਗਰੀ" > 
    ...
  </div>
</div>

ਸੱਜੇ ਪਾਸੇ ਟੈਬਾਂ

ਸੱਜੇ ਪਾਸੇ ਟੈਬਾਂ ਰੱਖਣ ਲਈ ਕਲਾਸ ਨੂੰ ਸਵੈਪ ਕਰੋ।

<div ਕਲਾਸ = "ਟੈਬਬਲ ਟੈਬਸ-ਸੱਜੇ" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div ਕਲਾਸ = "ਟੈਬ-ਸਮੱਗਰੀ" > 
    ...
  </div>
</div>

ਨਵਬਾਰ ਸਕੈਫੋਲਡਿੰਗ

ਨਵਬਾਰ ਨੂੰ ਸਥਿਰ ਜਾਂ ਸਥਿਰ ਡਿਸਪਲੇ ਲਈ ਇਸ ਨੂੰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਬਣਾਉਣ ਲਈ ਸਿਰਫ਼ ਕੁਝ ਡਿਵਜ਼ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

<div ਕਲਾਸ = "ਨਵਬਾਰ" > 
  <div class = "navbar-inner" > 
    <div ਕਲਾਸ = "ਕੰਟੇਨਰ" > 
      ...
    </div>
  </div>
</div>

ਸਥਿਰ ਨਵਬਾਰ

ਸਭ ਤੋਂ ਬਾਹਰੀ div 'ਤੇ ਇੱਕ ਵਾਧੂ ਕਲਾਸ ਦੇ ਨਾਲ ਨੇਵਬਾਰ ਨੂੰ ਵਿਊਪੋਰਟ ਦੇ ਉੱਪਰ ਜਾਂ ਹੇਠਾਂ ਫਿਕਸ ਕਰੋ .navbar।

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

ਜਦੋਂ ਤੁਸੀਂ ਨਵਬਾਰ ਨੂੰ ਜੋੜਦੇ ਹੋ, ਤਾਂ ਹੇਠਾਂ ਲੁਕੇ ਹੋਏ ਖੇਤਰ ਦਾ ਲੇਖਾ-ਜੋਖਾ ਕਰਨਾ ਯਾਦ ਰੱਖੋ। ਵਿੱਚ 40px ਜਾਂ ਵੱਧ ਪੈਡਿੰਗ ਸ਼ਾਮਲ ਕਰੋ <body>। ਇਸ ਨੂੰ ਕੋਰ ਬੂਟਸਟਰੈਪ CSS ਤੋਂ ਬਾਅਦ ਅਤੇ ਵਿਕਲਪਿਕ ਜਵਾਬਦੇਹ CSS ਤੋਂ ਪਹਿਲਾਂ ਜੋੜਨਾ ਯਕੀਨੀ ਬਣਾਓ।

ਮਾਰਕਾ

ਤੁਹਾਡੇ ਬ੍ਰਾਂਡ ਜਾਂ ਪ੍ਰੋਜੈਕਟ ਦਾ ਨਾਮ ਦਿਖਾਉਣ ਲਈ ਇੱਕ ਸਧਾਰਨ ਲਿੰਕ ਲਈ ਸਿਰਫ਼ ਇੱਕ ਐਂਕਰ ਟੈਗ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

<a ਕਲਾਸ = "ਬ੍ਰਾਂਡ" href = "#" >  
  ਪ੍ਰੋਜੈਕਟ ਦਾ ਨਾਮ
</a>

ਨਵਬਾਰ ਵਿੱਚ ਫਾਰਮ

ਨਵਬਾਰ ਦੇ ਅੰਦਰ ਫਾਰਮ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਸਟਾਈਲ ਕਰਨ ਅਤੇ ਸਥਿਤੀ ਦੇਣ ਲਈ, ਹੇਠਾਂ ਦਰਸਾਏ ਅਨੁਸਾਰ ਢੁਕਵੀਆਂ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ। ਇੱਕ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਫਾਰਮ ਲਈ, ਸ਼ਾਮਲ ਕਰੋ .navbar-formਅਤੇ ਜਾਂ ਤਾਂ .pull-leftਜਾਂ .pull-rightਇਸ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਇਕਸਾਰ ਕਰੋ।

<form class = "navbar-form pull-left" > 
  <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "span2" >  
</form>

ਵਧੇਰੇ ਅਨੁਕੂਲਿਤ ਖੋਜ ਫਾਰਮ ਲਈ, ਨਵਬਾਰ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਸ਼ੈਲੀਆਂ ਲਈ ਇਨਪੁਟ ਵਿੱਚ .navbar-searchਅਤੇ formਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।.search-query

<ਫਾਰਮ ਕਲਾਸ = "ਨਵਬਾਰ-ਖੋਜ ਪੁੱਲ-ਖੱਬੇ" > 
  <ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਕਲਾਸ = "ਖੋਜ-ਕਵੇਰੀ" ਪਲੇਸਹੋਲਡਰ = "ਖੋਜ" >   
</form>

ਵਿਕਲਪਿਕ ਜਵਾਬਦੇਹ ਪਰਿਵਰਤਨ

ਤੁਹਾਡੇ ਟੌਪਬਾਰ ਵਿੱਚ ਸਮੱਗਰੀ ਦੀ ਮਾਤਰਾ 'ਤੇ ਨਿਰਭਰ ਕਰਦਿਆਂ, ਤੁਸੀਂ ਜਵਾਬਦੇਹ ਵਿਕਲਪਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਚਾਹ ਸਕਦੇ ਹੋ। ਅਜਿਹਾ ਕਰਨ ਲਈ, ਆਪਣੀ nav ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਰੱਖਣ ਵਾਲੇ div ਵਿੱਚ ਲਪੇਟੋ .nav-collapse.collapse, ਅਤੇ navbar ਟੌਗਲ ਬਟਨ ਨੂੰ ਜੋੜੋ .btn-navbar।

<div ਕਲਾਸ = "ਨਵਬਾਰ" > 
  <div class = "navbar-inner" > 
    <div ਕਲਾਸ = "ਕੰਟੇਨਰ" > 
 
      <!-- .btn-navbar ਨੂੰ ਨਸ਼ਟ ਕੀਤੀ ਨਵਬਾਰ ਸਮੱਗਰੀ ਲਈ ਟੌਗਲ ਵਜੋਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ -->
      <a ਕਲਾਸ = "btn btn-navbar" data-toggle = "colapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- ਬ੍ਰਾਂਡ ਨੂੰ ਉੱਥੇ ਛੱਡਣਾ ਯਕੀਨੀ ਬਣਾਓ ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ -->
      <a ਕਲਾਸ = "ਬ੍ਰਾਂਡ" href = "#" > ਪ੍ਰੋਜੈਕਟ ਦਾ ਨਾਮ </a>  
 
      <!-- ਹਰ ਚੀਜ਼ ਜੋ ਤੁਸੀਂ 940px ਜਾਂ ਇਸ ਤੋਂ ਘੱਟ 'ਤੇ ਲੁਕਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਇੱਥੇ ਰੱਖੋ -->
      <div class = "nav-collaps" > 
        <!-- .nav, .navbar-ਖੋਜ, .navbar-ਫਾਰਮ, ਆਦਿ -->
      </div>
 
    </div>
  </div>
</div>

ਨਵ ਲਿੰਕ

ਨੈਵੀ ਆਈਟਮਾਂ ਬਿਨਾਂ ਕ੍ਰਮਬੱਧ ਸੂਚੀਆਂ ਰਾਹੀਂ ਜੋੜਨ ਲਈ ਸਧਾਰਨ ਹਨ।

<ul class = "nav" > 
  <li ਕਲਾਸ = "ਸਰਗਰਮ" > 
    <a href="#" > ਘਰ </a> _ _ 
  </li>
  <li><a href = "#" > ਲਿੰਕ </a></li> 
  <li><a href = "#" > ਲਿੰਕ </a></li> 
</ul>

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

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

ਕੰਪੋਨੈਂਟ ਅਲਾਈਨਮੈਂਟ

ਇੱਕ ਨੇਵੀ, ਖੋਜ ਫਾਰਮ, ਜਾਂ ਟੈਕਸਟ ਨੂੰ ਅਲਾਈਨ ਕਰਨ ਲਈ, .pull-leftਜਾਂ .pull-rightਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਦੋਵੇਂ ਕਲਾਸਾਂ ਨਿਰਧਾਰਤ ਦਿਸ਼ਾ ਵਿੱਚ ਇੱਕ CSS ਫਲੋਟ ਜੋੜਨਗੀਆਂ।

ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਜੋੜ ਰਿਹਾ ਹੈ

ਨੈਵੀ ਵਿੱਚ ਡ੍ਰੌਪਡਾਊਨ ਅਤੇ ਡ੍ਰੌਪਅੱਪ ਜੋੜਨਾ ਬਹੁਤ ਸਰਲ ਹੈ, ਪਰ ਸਾਡੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਦੀ ਲੋੜ ਹੈ ।

<ul class = "nav" > 
  <li ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਊਨ" > 
    <a href = "#" 
          ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਉਨ-ਟੌਗਲ"
          data-toggle = "ਡ੍ਰੌਪਡਾਉਨ" >
          ਖਾਤਾ
          <b ਕਲਾਸ = "ਕੈਰੇਟ" ></b> 
    </a>
    <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
      ...
    </ul>
  </li>
</ul>

ਜਾਵਾਸਕ੍ਰਿਪਟ ਪ੍ਰਾਪਤ ਕਰੋ →

ਨਵਬਾਰ ਵਿੱਚ ਟੈਕਸਟ

ਟੈਕਸਟ ਦੀਆਂ ਸਤਰਾਂ ਨੂੰ ਇੱਕ ਵਿੱਚ ਲਪੇਟੋ <.navbar-text>, ਆਮ ਤੌਰ 'ਤੇ <p>ਸਹੀ ਲੀਡਿੰਗ ਅਤੇ ਰੰਗ ਲਈ ਇੱਕ ਟੈਗ 'ਤੇ।

ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਕਰੀਏ

Breadcrumb ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇਹ ਦਿਖਾਉਣ ਦੇ ਤਰੀਕੇ ਵਜੋਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਕਿ ਉਹ ਇੱਕ ਐਪ ਜਾਂ ਸਾਈਟ ਦੇ ਅੰਦਰ ਕਿੱਥੇ ਹਨ, ਪਰ ਪ੍ਰਾਇਮਰੀ ਨੈਵੀਗੇਸ਼ਨ ਲਈ ਨਹੀਂ। ਸਭ ਤੋਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੋਣ ਲਈ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਨੂੰ ਘੱਟ ਅਤੇ ਸੰਖੇਪ ਰੱਖੋ।

ਉਦਾਹਰਨਾਂ

ਇੱਕ ਸਿੰਗਲ ਉਦਾਹਰਨ ਦਿਖਾਈ ਗਈ ਹੈ ਕਿਉਂਕਿ ਇਹ ਕਈ ਪੰਨਿਆਂ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋ ਸਕਦੀ ਹੈ।

• ਘਰ

• ਘਰ /
• ਲਾਇਬ੍ਰੇਰੀ

• ਘਰ /
• ਲਾਇਬ੍ਰੇਰੀ /
• ਡਾਟਾ

ਮਾਰਕਅੱਪ

HTML ਲਿੰਕਾਂ ਦੇ ਨਾਲ ਤੁਹਾਡੀ ਮਿਆਰੀ ਬਿਨਾਂ ਕ੍ਰਮਬੱਧ ਸੂਚੀ ਹੈ।

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > ਘਰ </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > ਲਾਇਬ੍ਰੇਰੀ </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > ਡਾਟਾ </li> 
</ul>

ਕਦੋਂ ਵਰਤਣਾ ਹੈ

Rdio ਦੁਆਰਾ ਪ੍ਰੇਰਿਤ ਅਤਿ ਸਰਲ ਅਤੇ ਘੱਟੋ-ਘੱਟ ਸਟਾਈਲ ਵਾਲਾ ਪੰਨਾ, ਐਪਾਂ ਅਤੇ ਖੋਜ ਨਤੀਜਿਆਂ ਲਈ ਵਧੀਆ। ਵੱਡੇ ਬਲਾਕ ਨੂੰ ਮਿਸ ਕਰਨਾ ਔਖਾ ਹੈ, ਆਸਾਨੀ ਨਾਲ ਸਕੇਲੇਬਲ ਹੈ, ਅਤੇ ਵੱਡੇ ਕਲਿਕ ਖੇਤਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

ਸਟੇਟਫੁਲ ਪੇਜ ਲਿੰਕ

ਲਿੰਕ ਅਨੁਕੂਲਿਤ ਹਨ ਅਤੇ ਸਹੀ ਕਲਾਸ ਦੇ ਨਾਲ ਕਈ ਸਥਿਤੀਆਂ ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਹਨ। .disabledਅਣ-ਕਲਿੱਕ ਕਰਨ ਯੋਗ ਲਿੰਕਾਂ ਅਤੇ .activeਮੌਜੂਦਾ ਪੰਨੇ ਲਈ।

ਲਚਕਦਾਰ ਅਲਾਈਨਮੈਂਟ

ਪੇਜਿਨੇਸ਼ਨ ਲਿੰਕਾਂ ਦੀ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਬਦਲਣ ਲਈ ਦੋ ਵਿਕਲਪਿਕ ਕਲਾਸਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਸ਼ਾਮਲ ਕਰੋ: .pagination-centeredਅਤੇ .pagination-right.

ਉਦਾਹਰਨਾਂ

ਡਿਫੌਲਟ ਪੇਜਿਨੇਸ਼ਨ ਕੰਪੋਨੈਂਟ ਲਚਕਦਾਰ ਹੁੰਦਾ ਹੈ ਅਤੇ ਕਈ ਭਿੰਨਤਾਵਾਂ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ।

ਮਾਰਕਅੱਪ

ਇੱਕ ਵਿੱਚ ਲਪੇਟਿਆ <div>, ਪੰਨਾ ਨੰਬਰ ਸਿਰਫ਼ ਇੱਕ ਹੈ <ul>।

<div ਕਲਾਸ = "ਪੰਨਾਬੰਦੀ" > 
  <ul>
    <li><a href = "#" > ਪਿਛਲਾ </a></li> 
    <li ਕਲਾਸ = "ਸਰਗਰਮ" > 
      <a href="#" > 1 </a> _ _ 
    </li>
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > ਅੱਗੇ </a></li> 
  </ul>
</div>

ਪੇਜਰ ਬਾਰੇ

ਪੇਜਰ ਕੰਪੋਨੈਂਟ ਹਲਕੇ ਮਾਰਕਅੱਪ ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਕਿ ਹਲਕੇ ਸਟਾਈਲ ਦੇ ਨਾਲ ਸਧਾਰਨ ਪੰਨਾਬੰਦੀ ਲਾਗੂ ਕਰਨ ਲਈ ਲਿੰਕਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਹੈ। ਬਲੌਗ ਜਾਂ ਮੈਗਜ਼ੀਨਾਂ ਵਰਗੀਆਂ ਸਧਾਰਨ ਸਾਈਟਾਂ ਲਈ ਇਹ ਬਹੁਤ ਵਧੀਆ ਹੈ।

ਵਿਕਲਪਿਕ ਅਯੋਗ ਸਥਿਤੀ

ਪੇਜਰ ਲਿੰਕ ਪੰਨਾਬੰਦੀ .disabledਤੋਂ ਆਮ ਸ਼੍ਰੇਣੀ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰਦੇ ਹਨ।

ਡਿਫੌਲਟ ਉਦਾਹਰਨ

ਮੂਲ ਰੂਪ ਵਿੱਚ, ਪੇਜਰ ਲਿੰਕਸ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ।

• ਪਿਛਲਾ
• ਅਗਲਾ

<ul class = "ਪੇਜਰ" > 
  <li>
    <a href="#" > ਪਿਛਲਾ </a> _ _ 
  </li>
  <li>
    <a href="#" > ਅੱਗੇ </a> _ _ 
  </li>
</ul>

ਇਕਸਾਰ ਲਿੰਕ

ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ ਹਰੇਕ ਲਿੰਕ ਨੂੰ ਪਾਸਿਆਂ ਨਾਲ ਇਕਸਾਰ ਕਰ ਸਕਦੇ ਹੋ:

• ← ਪੁਰਾਣੇ
• ਨਵਾਂ →

<ul class = "ਪੇਜਰ" > 
  <li ਕਲਾਸ = "ਪਿਛਲਾ" > 
    <a href = "#" > ← ਪੁਰਾਣੀ </a> 
  </li>
  <li ਕਲਾਸ = "ਅਗਲਾ" > 
    <a href = "#" > ਨਵੇਂ → </a> 
  </li>
</ul>

ਬਾਰੇ

ਬੈਜ ਇੱਕ ਸੂਚਕ ਜਾਂ ਕਿਸੇ ਕਿਸਮ ਦੀ ਗਿਣਤੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਛੋਟੇ, ਸਧਾਰਨ ਹਿੱਸੇ ਹੁੰਦੇ ਹਨ। ਉਹ ਆਮ ਤੌਰ 'ਤੇ ਈਮੇਲ ਕਲਾਇੰਟਸ ਜਿਵੇਂ ਕਿ Mail.app ਜਾਂ ਪੁਸ਼ ਸੂਚਨਾਵਾਂ ਲਈ ਮੋਬਾਈਲ ਐਪਾਂ 'ਤੇ ਪਾਏ ਜਾਂਦੇ ਹਨ।

ਉਪਲਬਧ ਕਲਾਸਾਂ

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

ਮਾਰਕਅੱਪ

ਆਪਣੀ ਸਮੱਗਰੀ ਨੂੰ divਇਸ ਤਰ੍ਹਾਂ ਲਪੇਟੋ:

<div ਕਲਾਸ = "ਹੀਰੋ-ਯੂਨਿਟ" > 
  <h1> ਸਿਰਲੇਖ </h1>
  <p> ਟੈਗਲਾਈਨ </p>
  <p>
    <a ਕਲਾਸ = "btn btn-ਪ੍ਰਾਇਮਰੀ btn-large" > 
      ਜਿਆਦਾ ਜਾਣੋ
    </a>
  </p>
</div>

h1ਇੱਕ ਪੰਨੇ 'ਤੇ ਸਮੱਗਰੀ ਦੇ ਭਾਗਾਂ ਨੂੰ ਉਚਿਤ ਤੌਰ 'ਤੇ ਬਾਹਰ ਕੱਢਣ ਅਤੇ ਭਾਗਾਂ ਨੂੰ ਵੰਡਣ ਲਈ ਇੱਕ ਸਧਾਰਨ ਸ਼ੈੱਲ । ਇਹ h1ਦੇ ਡਿਫਾਲਟ small, ਐਲੀਮੈਂਟ ਦੇ ਨਾਲ-ਨਾਲ ਜ਼ਿਆਦਾਤਰ ਹੋਰ ਭਾਗਾਂ (ਵਾਧੂ ਸਟਾਈਲ ਦੇ ਨਾਲ) ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹੈ।

<div ਕਲਾਸ = "ਪੰਨਾ-ਸਿਰਲੇਖ" > 
  <h1> ਉਦਾਹਰਨ ਪੰਨਾ ਸਿਰਲੇਖ </h1>
</div>

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਥੰਬਨੇਲ

ਮੂਲ ਰੂਪ ਵਿੱਚ, ਬੂਟਸਟਰੈਪ ਦੇ ਥੰਬਨੇਲ ਘੱਟੋ-ਘੱਟ ਲੋੜੀਂਦੇ ਮਾਰਕਅੱਪ ਨਾਲ ਲਿੰਕ ਕੀਤੇ ਚਿੱਤਰਾਂ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਤਿਆਰ ਕੀਤੇ ਗਏ ਹਨ।

ਬਹੁਤ ਜ਼ਿਆਦਾ ਅਨੁਕੂਲਿਤ

ਥੋੜ੍ਹੇ ਜਿਹੇ ਵਾਧੂ ਮਾਰਕਅੱਪ ਦੇ ਨਾਲ, ਥੰਬਨੇਲ ਵਿੱਚ ਕਿਸੇ ਵੀ ਕਿਸਮ ਦੀ HTML ਸਮੱਗਰੀ ਜਿਵੇਂ ਸਿਰਲੇਖ, ਪੈਰੇ ਜਾਂ ਬਟਨ ਸ਼ਾਮਲ ਕਰਨਾ ਸੰਭਵ ਹੈ।

• 

  ਥੰਬਨੇਲ ਲੇਬਲ

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  ਕਾਰਵਾਈ ਕਾਰਵਾਈ

• 

  ਥੰਬਨੇਲ ਲੇਬਲ

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  ਕਾਰਵਾਈ ਕਾਰਵਾਈ

ਥੰਬਨੇਲ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਕਰੀਏ

ਥੰਬਨੇਲ (ਪਹਿਲਾਂ .media-gridv1.4 ਤੱਕ) ਫੋਟੋਆਂ ਜਾਂ ਵੀਡੀਓਜ਼, ਚਿੱਤਰ ਖੋਜ ਨਤੀਜਿਆਂ, ਪ੍ਰਚੂਨ ਉਤਪਾਦਾਂ, ਪੋਰਟਫੋਲੀਓ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦੇ ਗਰਿੱਡ ਲਈ ਵਧੀਆ ਹਨ। ਉਹ ਲਿੰਕ ਜਾਂ ਸਥਿਰ ਸਮੱਗਰੀ ਹੋ ਸਕਦੇ ਹਨ।

ਸਧਾਰਨ, ਲਚਕਦਾਰ ਮਾਰਕਅੱਪ

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

ਗਰਿੱਡ ਕਾਲਮ ਆਕਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ

ਅੰਤ ਵਿੱਚ, ਥੰਬਨੇਲ ਕੰਪੋਨੈਂਟ ਥੰਬਨੇਲ ਮਾਪਾਂ ਦੇ ਨਿਯੰਤਰਣ ਲਈ ਮੌਜੂਦਾ ਗਰਿੱਡ ਸਿਸਟਮ ਕਲਾਸਾਂ — ਜਿਵੇਂ .span2ਜਾਂ — ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।.span3

ਮਾਰਕਅੱਪ

ਜਿਵੇਂ ਕਿ ਪਹਿਲਾਂ ਦੱਸਿਆ ਗਿਆ ਹੈ, ਥੰਬਨੇਲ ਲਈ ਲੋੜੀਂਦਾ ਮਾਰਕਅੱਪ ਹਲਕਾ ਅਤੇ ਸਿੱਧਾ ਹੈ। ਲਿੰਕਡ ਚਿੱਤਰਾਂ ਲਈ ਡਿਫੌਲਟ ਸੈੱਟਅੱਪ 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਹੈ :

<ul class = "ਥੰਬਨੇਲ" > 
  <li ਕਲਾਸ = "span3" > 
    <a href = "#" ਕਲਾਸ = "ਥੰਬਨੇਲ" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

ਥੰਬਨੇਲ ਵਿੱਚ ਕਸਟਮ HTML ਸਮੱਗਰੀ ਲਈ, ਮਾਰਕਅੱਪ ਥੋੜ੍ਹਾ ਬਦਲਦਾ ਹੈ। <a>ਬਲਾਕ ਪੱਧਰ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਕਿਤੇ ਵੀ ਆਗਿਆ ਦੇਣ ਲਈ, ਅਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਦੀ ਪਸੰਦ ਲਈ ਸਵੈਪ ਕਰਦੇ <div>ਹਾਂ:

<ul class = "ਥੰਬਨੇਲ" > 
  <li ਕਲਾਸ = "span3" > 
    <div ਕਲਾਸ = "ਥੰਬਨੇਲ" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> ਥੰਬਨੇਲ ਲੇਬਲ </h5>
      <p> ਇੱਥੇ ਥੰਬਨੇਲ ਸੁਰਖੀ... </p>
    </div>
  </li>
  ...
</ul>

ਹੋਰ ਉਦਾਹਰਣਾਂ

ਤੁਹਾਡੇ ਲਈ ਉਪਲਬਧ ਵੱਖ-ਵੱਖ ਗਰਿੱਡ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਆਪਣੇ ਸਾਰੇ ਵਿਕਲਪਾਂ ਦੀ ਪੜਚੋਲ ਕਰੋ। ਤੁਸੀਂ ਵੱਖ-ਵੱਖ ਆਕਾਰਾਂ ਨੂੰ ਵੀ ਮਿਕਸ ਅਤੇ ਮੈਚ ਕਰ ਸਕਦੇ ਹੋ।

ਮੁੜ ਲਿਖੀ ਬੇਸ ਕਲਾਸ

ਬੂਟਸਟਰੈਪ 2 ਦੇ ਨਾਲ, ਅਸੀਂ ਬੇਸ ਕਲਾਸ ਨੂੰ ਸਰਲ ਬਣਾਇਆ ਹੈ: .alertਦੀ ਬਜਾਏ .alert-message. ਅਸੀਂ ਘੱਟੋ-ਘੱਟ ਲੋੜੀਂਦੇ ਮਾਰਕਅੱਪ ਨੂੰ ਵੀ ਘਟਾ ਦਿੱਤਾ ਹੈ- <p>ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੈ, ਸਿਰਫ਼ ਬਾਹਰੀ <div>।

ਸਿੰਗਲ ਚੇਤਾਵਨੀ ਸੁਨੇਹਾ

ਘੱਟ ਕੋਡ ਵਾਲੇ ਵਧੇਰੇ ਟਿਕਾਊ ਹਿੱਸੇ ਲਈ, ਅਸੀਂ ਬਲਾਕ ਅਲਰਟ, ਸੁਨੇਹੇ ਜੋ ਵਧੇਰੇ ਪੈਡਿੰਗ ਅਤੇ ਆਮ ਤੌਰ 'ਤੇ ਵਧੇਰੇ ਟੈਕਸਟ ਦੇ ਨਾਲ ਆਉਂਦੇ ਹਨ, ਲਈ ਵੱਖ-ਵੱਖ ਦਿੱਖ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਹੈ। ਕਲਾਸ ਵੀ ਵਿੱਚ ਬਦਲ ਗਈ ਹੈ .alert-block।

ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਨਾਲ ਬਹੁਤ ਵਧੀਆ ਚਲਦਾ ਹੈ

ਬੂਟਸਟਰੈਪ ਇੱਕ ਵਧੀਆ jQuery ਪਲੱਗਇਨ ਦੇ ਨਾਲ ਆਉਂਦਾ ਹੈ ਜੋ ਚੇਤਾਵਨੀ ਸੁਨੇਹਿਆਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ, ਉਹਨਾਂ ਨੂੰ ਜਲਦੀ ਅਤੇ ਆਸਾਨ ਬਣਾ ਦਿੰਦਾ ਹੈ।

ਪਲੱਗਇਨ ਪ੍ਰਾਪਤ ਕਰੋ »

ਉਦਾਹਰਨ ਚੇਤਾਵਨੀਆਂ

ਸਧਾਰਨ ਕਲਾਸ ਦੇ ਨਾਲ ਇੱਕ ਡਿਵ ਵਿੱਚ ਆਪਣਾ ਸੁਨੇਹਾ ਅਤੇ ਇੱਕ ਵਿਕਲਪਿਕ ਬੰਦ ਆਈਕਨ ਲਪੇਟੋ।

<div ਕਲਾਸ = "ਅਲਰਟ" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> ਚੇਤਾਵਨੀ! </strong> ਸਭ ਤੋਂ ਵਧੀਆ ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਦੀ ਜਾਂਚ ਕਰੋ, ਤੁਸੀਂ ਬਹੁਤ ਵਧੀਆ ਨਹੀਂ ਲੱਗ ਰਹੇ ਹੋ।
</div>

ਸਿਰ! iOS ਡਿਵਾਈਸਾਂ href="#"ਨੂੰ ਚੇਤਾਵਨੀਆਂ ਨੂੰ ਬਰਖਾਸਤ ਕਰਨ ਲਈ ਇੱਕ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਐਂਕਰ ਕਲੋਜ਼ ਆਈਕਨਾਂ ਲਈ ਇਸਨੂੰ ਅਤੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ। ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ <button>ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਇੱਕ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਸ ਨੂੰ ਅਸੀਂ ਆਪਣੇ ਡੌਕਸ ਲਈ ਚੁਣਿਆ ਹੈ। ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ <button>, ਤੁਹਾਨੂੰ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ type="button"ਹੈ ਜਾਂ ਤੁਹਾਡੇ ਫਾਰਮ ਜਮ੍ਹਾਂ ਨਹੀਂ ਹੋ ਸਕਦੇ।

ਦੋ ਵਿਕਲਪਿਕ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਮਿਆਰੀ ਚੇਤਾਵਨੀ ਸੰਦੇਸ਼ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਵਧਾਓ: .alert-blockਵਧੇਰੇ ਪੈਡਿੰਗ ਅਤੇ ਟੈਕਸਟ ਨਿਯੰਤਰਣ ਅਤੇ .alert-headingਇੱਕ ਮੇਲ ਖਾਂਦੇ ਸਿਰਲੇਖ ਲਈ।

<div ਕਲਾਸ = "ਅਲਰਟ ਅਲਰਟ-ਬਲਾਕ" > 
  <a class = "close" data- dismiss = "alert" href = "#" > × </a>   
  <h4 ਕਲਾਸ = "ਅਲਰਟ-ਸਿਰਲੇਖ" > ਚੇਤਾਵਨੀ! </h4> 
  ਆਪਣੇ ਆਪ ਦੀ ਜਾਂਚ ਕਰੋ, ਤੁਸੀਂ ਨਹੀਂ ਹੋ...
</div>

ਗਲਤੀ ਜਾਂ ਖ਼ਤਰਾ

<div ਕਲਾਸ = "ਅਲਰਟ ਚੇਤਾਵਨੀ-ਗਲਤੀ" > 
  ...
</div>

ਸਫਲਤਾ

<div ਕਲਾਸ = "ਅਲਰਟ ਚੇਤਾਵਨੀ-ਸਫਲਤਾ" > 
  ...
</div>

ਜਾਣਕਾਰੀ

<div ਕਲਾਸ = "ਸੂਚਨਾ ਚੇਤਾਵਨੀ-ਜਾਣਕਾਰੀ" > 
  ...
</div>

ਮੂਲ

ਇੱਕ ਲੰਬਕਾਰੀ ਗਰੇਡੀਐਂਟ ਨਾਲ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤਰੱਕੀ ਪੱਟੀ।

<div ਕਲਾਸ = "ਪ੍ਰਗਤੀ" > 
  <div ਕਲਾਸ = "ਬਾਰ" 
       style = " ਚੌੜਾਈ : 60 %; " ></div> 
</div>

ਧਾਰੀਦਾਰ

ਇੱਕ ਧਾਰੀਦਾਰ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ ਇੱਕ ਗਰੇਡੀਐਂਟ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ (ਕੋਈ IE ਨਹੀਂ)।

<div ਕਲਾਸ = "ਪ੍ਰਗਤੀ ਤਰੱਕੀ-ਧਾਰੀਦਾਰ" > 
  <div ਕਲਾਸ = "ਬਾਰ" 
       style = " ਚੌੜਾਈ : 20 %; " ></div> 
</div>

ਐਨੀਮੇਟਡ

ਧਾਰੀਦਾਰ ਉਦਾਹਰਣ ਲੈਂਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਐਨੀਮੇਟ ਕਰਦਾ ਹੈ (ਕੋਈ IE ਨਹੀਂ)।

<div ਕਲਾਸ = "ਪ੍ਰਗਤੀ ਪ੍ਰਗਤੀ-ਧਾਰੀ 
     ਸਰਗਰਮ" >
  <div ਕਲਾਸ = "ਬਾਰ" 
       style = " ਚੌੜਾਈ : 40 %; " ></div> 
</div>

ਵਾਧੂ ਰੰਗ

ਪ੍ਰਗਤੀ ਬਾਰ ਇਕਸਾਰ ਸਟਾਈਲ ਲਈ ਕੁਝ ਸਮਾਨ ਬਟਨ ਅਤੇ ਚੇਤਾਵਨੀ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।

ਧਾਰੀਦਾਰ ਬਾਰ

ਠੋਸ ਰੰਗਾਂ ਦੇ ਸਮਾਨ, ਸਾਡੇ ਕੋਲ ਵੱਖੋ-ਵੱਖਰੇ ਸਟ੍ਰਿਪਡ ਪ੍ਰੋਗਰੈਸ ਬਾਰ ਹਨ।

ਵਿਵਹਾਰ

ਪ੍ਰਗਤੀ ਬਾਰ CSS3 ਪਰਿਵਰਤਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ, ਇਸਲਈ ਜੇਕਰ ਤੁਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਚੌੜਾਈ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਵਿਵਸਥਿਤ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਹ ਆਸਾਨੀ ਨਾਲ ਮੁੜ ਆਕਾਰ ਦੇਵੇਗਾ।

ਜੇਕਰ ਤੁਸੀਂ .activeਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡੀਆਂ .progress-stripedਪ੍ਰਗਤੀ ਪੱਟੀਆਂ ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਪੱਟੀਆਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨਗੀਆਂ।

ਬਰਾਊਜ਼ਰ ਸਹਿਯੋਗ

ਪ੍ਰੋਗਰੈਸ ਬਾਰ ਆਪਣੇ ਸਾਰੇ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ CSS3 ਗਰੇਡੀਐਂਟ, ਪਰਿਵਰਤਨ, ਅਤੇ ਐਨੀਮੇਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ IE7-9 ਜਾਂ ਫਾਇਰਫਾਕਸ ਦੇ ਪੁਰਾਣੇ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ।

ਓਪੇਰਾ ਅਤੇ IE ਇਸ ਸਮੇਂ ਐਨੀਮੇਸ਼ਨਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ।

ਖੂਹ

ਇਸ ਨੂੰ ਇੱਕ ਇਨਸੈੱਟ ਪ੍ਰਭਾਵ ਦੇਣ ਲਈ ਇੱਕ ਤੱਤ 'ਤੇ ਇੱਕ ਸਧਾਰਨ ਪ੍ਰਭਾਵ ਦੇ ਰੂਪ ਵਿੱਚ ਖੂਹ ਦੀ ਵਰਤੋਂ ਕਰੋ।

<div ਕਲਾਸ = "ਚੰਗੀ" > 
  ...
</div>

ਆਈਕਨ ਬੰਦ ਕਰੋ

ਮਾਡਲਾਂ ਅਤੇ ਚੇਤਾਵਨੀਆਂ ਵਰਗੀ ਸਮੱਗਰੀ ਨੂੰ ਖਾਰਜ ਕਰਨ ਲਈ ਆਮ ਬੰਦ ਆਈਕਨ ਦੀ ਵਰਤੋਂ ਕਰੋ।

×

<button class = "close" > × </ ਬਟਨ> 

iOS ਡਿਵਾਈਸਾਂ ਨੂੰ ਕਲਿੱਕ ਇਵੈਂਟਾਂ ਲਈ ਇੱਕ href="#" ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਐਂਕਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ।

<a ਕਲਾਸ = "close" href = "#" > × </a>