ਕੰਪੋਨੈਂਟਸ

ਨੈਵੀਗੇਸ਼ਨ, ਚੇਤਾਵਨੀਆਂ, ਪੌਪਓਵਰ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਦਰਜਨਾਂ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਹਿੱਸੇ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਬਣਾਏ ਗਏ ਹਨ।

ਬਟਨ ਸਮੂਹ

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

ਵਧੀਆ ਅਭਿਆਸ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ਬਟਨ ਡਰਾਪਡਾਊਨ

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

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

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

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

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

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

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

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

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

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


ਸਪਲਿਟ ਬਟਨ ਡ੍ਰੌਪਡਾਊਨ

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

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

ਆਕਾਰ

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

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

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

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

  1. <div ਕਲਾਸ = "btn-ਗਰੁੱਪ" >
  2. <button class = "btn" > ਕਾਰਵਾਈ </button>
  3. <ਬਟਨ ਕਲਾਸ = "btn ਡਰਾਪਡਾਉਨ-ਟੌਗਲ" ਡੇਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ" >
  4. <span class = "caret" ></span>
  5. </ ਬਟਨ>
  6. <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" >
  7. <!-- ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਲਿੰਕ -->
  8. </ul>
  9. </div>

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

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

  1. <div ਕਲਾਸ = "btn-ਗਰੁੱਪ ਡਰਾਪਅੱਪ" >
  2. <button class = "btn" > ਡ੍ਰੌਪਅੱਪ </button>
  3. <ਬਟਨ ਕਲਾਸ = "btn ਡਰਾਪਡਾਉਨ-ਟੌਗਲ" ਡੇਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ" >
  4. <span class = "caret" ></span>
  5. </ ਬਟਨ>
  6. <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" >
  7. <!-- ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਲਿੰਕ -->
  8. </ul>
  9. </div>

ਮਲਟੀਕੋਨ-ਪੰਨਾ ਪੰਨਾਬੰਦੀ

ਕਦੋਂ ਵਰਤਣਾ ਹੈ

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

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

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

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

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

ਉਦਾਹਰਨਾਂ

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

ਮਾਰਕਅੱਪ

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

  1. <div ਕਲਾਸ = "ਪੰਨਾਬੰਦੀ" >
  2. <ul>
  3. <li><a href = "#" > ਪਿਛਲਾ </a></li>
  4. <li ਕਲਾਸ = "ਸਰਗਰਮ" >
  5. <a href="#" > 1 </a> _ _
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > ਅੱਗੇ </a></li>
  11. </ul>
  12. </div>

ਤੇਜ਼ ਪਿਛਲੇ ਅਤੇ ਅਗਲੇ ਲਿੰਕਾਂ ਲਈ ਪੇਜਰ

ਪੇਜਰ ਬਾਰੇ

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

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

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

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

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

  1. <ul class = "ਪੇਜਰ" >
  2. <li>
  3. <a href="#" > ਪਿਛਲਾ </a> _ _
  4. </li>
  5. <li>
  6. <a href="#" > ਅੱਗੇ </a> _ _
  7. </li>
  8. </ul>

ਇਕਸਾਰ ਲਿੰਕ

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

  1. <ul class = "ਪੇਜਰ" >
  2. <li ਕਲਾਸ = "ਪਿਛਲਾ" >
  3. <a href = "#" > ਪੁਰਾਣੀ </a>
  4. </li>
  5. <li ਕਲਾਸ = "ਅਗਲਾ" >
  6. <a href = "#" > ਨਵੇਂ → </a>
  7. </li>
  8. </ul>
ਲੇਬਲ ਮਾਰਕਅੱਪ
ਡਿਫਾਲਟ <span class="label">Default</span>
ਸਫਲਤਾ <span class="label label-success">Success</span>
ਚੇਤਾਵਨੀ <span class="label label-warning">Warning</span>
ਮਹੱਤਵਪੂਰਨ <span class="label label-important">Important</span>
ਜਾਣਕਾਰੀ <span class="label label-info">Info</span>
ਉਲਟ <span class="label label-inverse">Inverse</span>

ਬਾਰੇ

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

ਉਪਲਬਧ ਕਲਾਸਾਂ

ਨਾਮ ਉਦਾਹਰਨ ਮਾਰਕਅੱਪ
ਡਿਫਾਲਟ 1 <span class="badge">1</span>
ਸਫਲਤਾ 2 <span class="badge badge-success">2</span>
ਚੇਤਾਵਨੀ 4 <span class="badge badge-warning">4</span>
ਮਹੱਤਵਪੂਰਨ 6 <span class="badge badge-important">6</span>
ਜਾਣਕਾਰੀ 8 <span class="badge badge-info">8</span>
ਉਲਟ 10 <span class="badge badge-inverse">10</span>

ਹੀਰੋ ਯੂਨਿਟ

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

ਮਾਰਕਅੱਪ

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

  1. <div ਕਲਾਸ = "ਹੀਰੋ-ਯੂਨਿਟ" >
  2. <h1> ਸਿਰਲੇਖ </h1>
  3. <p> ਟੈਗਲਾਈਨ </p>
  4. <p>
  5. <a ਕਲਾਸ = "btn btn-ਪ੍ਰਾਇਮਰੀ btn-large" >
  6. ਜਿਆਦਾ ਜਾਣੋ
  7. </a>
  8. </p>
  9. </div>

ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ!

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

ਜਿਆਦਾ ਜਾਣੋ

ਪੰਨਾ ਸਿਰਲੇਖ

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

  1. <div ਕਲਾਸ = "ਪੰਨਾ-ਸਿਰਲੇਖ" >
  2. <h1> ਉਦਾਹਰਨ ਪੰਨਾ ਸਿਰਲੇਖ </h1>
  3. </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

ਮਾਰਕਅੱਪ

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

  1. <ul class = "ਥੰਬਨੇਲ" >
  2. <li ਕਲਾਸ = "span3" >
  3. <a href = "#" ਕਲਾਸ = "ਥੰਬਨੇਲ" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "ਥੰਬਨੇਲ" >
  2. <li ਕਲਾਸ = "span3" >
  3. <div ਕਲਾਸ = "ਥੰਬਨੇਲ" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> ਥੰਬਨੇਲ ਲੇਬਲ </h5>
  6. <p> ਇੱਥੇ ਥੰਬਨੇਲ ਸੁਰਖੀ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

ਹੋਰ ਉਦਾਹਰਣਾਂ

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

ਲਾਈਟਵੇਟ ਡਿਫਾਲਟ

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

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

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

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


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

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

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

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

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

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

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

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

ਚੇਤਾਵਨੀ!

ਆਪਣੇ ਆਪ ਦੀ ਜਾਂਚ ਕਰੋ, ਤੁਸੀਂ ਬਹੁਤ ਵਧੀਆ ਨਹੀਂ ਲੱਗ ਰਹੇ ਹੋ। ਨੱਲਾ ਵਿਟਾਏ ਇਲੀਟ ਲਿਬੇਰੋ, ਇੱਕ ਫਰੇਟਰਾ ਔਗ। Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

ਪ੍ਰਸੰਗਿਕ ਵਿਕਲਪ ਕਿਸੇ ਚੇਤਾਵਨੀ ਦੇ ਅਰਥ ਬਦਲਣ ਲਈ ਵਿਕਲਪਿਕ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ

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

ਓ ਸਨੈਪ! ਕੁਝ ਚੀਜ਼ਾਂ ਨੂੰ ਬਦਲੋ ਅਤੇ ਦੁਬਾਰਾ ਸਪੁਰਦ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।
  1. <div ਕਲਾਸ = "ਅਲਰਟ ਚੇਤਾਵਨੀ-ਗਲਤੀ" >
  2. ...
  3. </div>

ਸਫਲਤਾ

ਬਹੁਤ ਖੂਬ! ਤੁਸੀਂ ਇਸ ਮਹੱਤਵਪੂਰਨ ਚੇਤਾਵਨੀ ਸੰਦੇਸ਼ ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਪੜ੍ਹ ਲਿਆ ਹੈ।
  1. <div ਕਲਾਸ = "ਅਲਰਟ ਚੇਤਾਵਨੀ-ਸਫਲਤਾ" >
  2. ...
  3. </div>

ਜਾਣਕਾਰੀ

ਸਿਰ! ਇਸ ਚੇਤਾਵਨੀ ਨੂੰ ਤੁਹਾਡੇ ਧਿਆਨ ਦੀ ਲੋੜ ਹੈ, ਪਰ ਇਹ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਨਹੀਂ ਹੈ।
  1. <div ਕਲਾਸ = "ਸੂਚਨਾ ਚੇਤਾਵਨੀ-ਜਾਣਕਾਰੀ" >
  2. ...
  3. </div>

ਉਦਾਹਰਨਾਂ ਅਤੇ ਮਾਰਕਅੱਪ

ਮੂਲ

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

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

ਧਾਰੀਦਾਰ

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

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

ਐਨੀਮੇਟਡ

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

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

ਵਿਕਲਪ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਵਾਧੂ ਰੰਗ

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

ਧਾਰੀਦਾਰ ਬਾਰ

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

ਵਿਵਹਾਰ

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

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

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

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

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

ਖੂਹ

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

ਦੇਖੋ, ਮੈਂ ਇੱਕ ਖੂਹ ਵਿੱਚ ਹਾਂ!
  1. <div ਕਲਾਸ = "ਚੰਗੀ" >
  2. ...
  3. </div>

ਆਈਕਨ ਬੰਦ ਕਰੋ

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

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

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

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