ਵਿਅਕਤੀਗਤ ਜਾਂ ਸੰਕਲਿਤ

ਜੇਕਰ ਤੁਸੀਂ Bootstrap ਦਾ ਨਵੀਨਤਮ ਸੰਸਕਰਣ ਡਾਊਨਲੋਡ ਕੀਤਾ ਹੈ, ਤਾਂ bootstrap.js ਅਤੇ bootstrap.min.js ਦੋਵਾਂ ਵਿੱਚ ਇਸ ਪੰਨੇ 'ਤੇ ਸੂਚੀਬੱਧ ਸਾਰੇ ਪਲੱਗਇਨ ਸ਼ਾਮਲ ਹਨ।

ਡਾਟਾ ਗੁਣ

ਤੁਸੀਂ JavaScript ਦੀ ਇੱਕ ਵੀ ਲਾਈਨ ਲਿਖੇ ਬਿਨਾਂ ਮਾਰਕਅੱਪ API ਰਾਹੀਂ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਬੂਟਸਟਰੈਪ ਦੀ ਪਹਿਲੀ ਸ਼੍ਰੇਣੀ API ਹੈ ਅਤੇ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਤੁਹਾਡਾ ਪਹਿਲਾ ਵਿਚਾਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।

ਉਸ ਨੇ ਕਿਹਾ, ਕੁਝ ਸਥਿਤੀਆਂ ਵਿੱਚ ਇਸ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਬੰਦ ਕਰਨਾ ਫਾਇਦੇਮੰਦ ਹੋ ਸਕਦਾ ਹੈ। ਇਸ ਲਈ, ਅਸੀਂ `'data-api'` ਨਾਲ ਬੌਡੀ ਨੇਮਸਪੇਸ 'ਤੇ ਸਾਰੀਆਂ ਇਵੈਂਟਾਂ ਨੂੰ ਅਨਬਾਈਂਡ ਕਰਕੇ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾ API ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਦੀ ਸਮਰੱਥਾ ਵੀ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਾਂ। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:

$ ( 'ਸਰੀਰ' )। ਬੰਦ ( '.data-api' )

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

$ ( 'ਸਰੀਰ' )। ਬੰਦ ( '.alert.data-api' )

ਪ੍ਰੋਗਰਾਮੇਟਿਕ API

ਅਸੀਂ ਇਹ ਵੀ ਮੰਨਦੇ ਹਾਂ ਕਿ ਤੁਹਾਨੂੰ JavaScript API ਰਾਹੀਂ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਪਲੱਗਇਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਸਾਰੇ ਜਨਤਕ API ਸਿੰਗਲ, ਚੇਨ ਕਰਨ ਯੋਗ ਢੰਗ ਹਨ, ਅਤੇ ਕਾਰਵਾਈ ਕੀਤੇ ਗਏ ਸੰਗ੍ਰਹਿ ਨੂੰ ਵਾਪਸ ਕਰਦੇ ਹਨ।

$ ( ".btn. ਖ਼ਤਰਾ" )। ਬਟਨ ( "ਟੌਗਲ" )। addClass ( "ਚਰਬੀ" )

ਸਾਰੀਆਂ ਵਿਧੀਆਂ ਨੂੰ ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਆਬਜੈਕਟ, ਇੱਕ ਸਤਰ ਜੋ ਕਿਸੇ ਖਾਸ ਵਿਧੀ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦਾ ਹੈ, ਜਾਂ ਕੁਝ ਨਹੀਂ (ਜੋ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਨਾਲ ਇੱਕ ਪਲੱਗਇਨ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ) ਨੂੰ ਸਵੀਕਾਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ:

$ ( "#myModal" )। modal () // ਡਿਫਾਲਟ ਨਾਲ ਸ਼ੁਰੂ ਕੀਤਾ ਗਿਆ                       
$ ( "#myModal" )। modal ({ keyboard : false }) // ਬਿਨਾਂ ਕੀਬੋਰਡ ਦੇ ਸ਼ੁਰੂ ਕੀਤਾ ਗਿਆ     
$ ( "#myModal" )। modal ( 'show' ) // ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ ਅਤੇ ਸ਼ੋ ਨੂੰ ਤੁਰੰਤ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ                

ਹਰੇਕ ਪਲੱਗਇਨ ਇੱਕ 'ਕੰਸਟ੍ਰਕਟਰ' ਵਿਸ਼ੇਸ਼ਤਾ 'ਤੇ ਇਸ ਦੇ ਕੱਚੇ ਕੰਸਟਰਕਟਰ ਦਾ ਪਰਦਾਫਾਸ਼ ਵੀ ਕਰਦਾ ਹੈ: $.fn.popover.Constructor. ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਖਾਸ ਪਲੱਗਇਨ ਉਦਾਹਰਣ ਪ੍ਰਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਸਿੱਧੇ ਇੱਕ ਤੱਤ ਤੋਂ ਪ੍ਰਾਪਤ ਕਰੋ: $('[rel=popover]').data('popover').

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਜ਼ਿਆਦਾਤਰ ਪਲੱਗਇਨ ਦੀਆਂ ਵਿਲੱਖਣ ਕਾਰਵਾਈਆਂ ਲਈ ਕਸਟਮ ਇਵੈਂਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ, ਇਹ ਇੱਕ ਅਨੰਤ ਅਤੇ ਪਿਛਲੇ ਭਾਗੀਦਾਰ ਰੂਪ ਵਿੱਚ ਆਉਂਦੇ ਹਨ - ਜਿੱਥੇ ਇੱਕ ਘਟਨਾ ਦੀ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਅਨੰਤ (ਉਦਾਹਰਣ show) ਨੂੰ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇਹ ਪਿਛਲੇ ਭਾਗੀਦਾਰ ਰੂਪ (ਉਦਾ. shown) ਇੱਕ ਕਿਰਿਆ ਦੇ ਪੂਰਾ ਹੋਣ 'ਤੇ ਟਰਿੱਗਰ ਹੁੰਦਾ ਹੈ।

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

$ ( '#myModal' )। on ( 'ਸ਼ੋ' , ਫੰਕਸ਼ਨ ( e ) {   
    ਜੇਕਰ (! ਡੇਟਾ ) ਵਾਪਸ ਈ . preventDefault () // ਮਾਡਲ ਨੂੰ ਦਿਖਾਉਣ ਤੋਂ ਰੋਕਦਾ ਹੈ   
})

ਪਰਿਵਰਤਨ ਬਾਰੇ

ਸਧਾਰਨ ਪਰਿਵਰਤਨ ਪ੍ਰਭਾਵਾਂ ਲਈ, ਇੱਕ ਵਾਰ ਹੋਰ JS ਫਾਈਲਾਂ ਦੇ ਨਾਲ bootstrap-transition.js ਸ਼ਾਮਲ ਕਰੋ। ਜੇਕਰ ਤੁਸੀਂ ਕੰਪਾਇਲ ਕੀਤੇ (ਜਾਂ ਮਿੰਨੀਫਾਈਡ) bootstrap.js ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਇਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੈ—ਇਹ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹੈ।

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

ਪਰਿਵਰਤਨ ਪਲੱਗਇਨ ਦੀਆਂ ਕੁਝ ਉਦਾਹਰਣਾਂ:

• ਮਾਡਲਾਂ ਵਿੱਚ ਸਲਾਈਡਿੰਗ ਜਾਂ ਫੇਡਿੰਗ
• ਟੈਬਾਂ ਨੂੰ ਫੇਡ ਕਰਨਾ
• ਅਲਰਟ ਆਊਟ ਹੋ ਰਿਹਾ ਹੈ
• ਸਲਾਈਡਿੰਗ ਕੈਰੋਜ਼ਲ ਪੈਨ

ਉਦਾਹਰਨਾਂ

ਮਾਡਲ ਸੁਚਾਰੂ, ਪਰ ਲਚਕਦਾਰ, ਘੱਟੋ-ਘੱਟ ਲੋੜੀਂਦੀ ਕਾਰਜਸ਼ੀਲਤਾ ਅਤੇ ਸਮਾਰਟ ਡਿਫੌਲਟ ਦੇ ਨਾਲ ਡਾਇਲਾਗ ਪ੍ਰੋਂਪਟ ਹਨ।

ਸਥਿਰ ਉਦਾਹਰਨ

ਫੁੱਟਰ ਵਿੱਚ ਸਿਰਲੇਖ, ਬਾਡੀ, ਅਤੇ ਕਾਰਵਾਈਆਂ ਦੇ ਸੈੱਟ ਦੇ ਨਾਲ ਇੱਕ ਰੈਂਡਰ ਕੀਤਾ ਮਾਡਲ।

<div ਕਲਾਸ = "ਮੋਡਲ ਹਾਈਡ ਫੇਡ" > 
  <div ਕਲਾਸ = "ਮੋਡਲ-ਹੈਡਰ" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </ ਬਟਨ>    
    <h3> ਮਾਡਲ ਹੈਡਰ </h3>
  </div>
  <div ਕਲਾਸ = "ਮੋਡਲ-ਬਾਡੀ" > 
    <p> ਇੱਕ ਵਧੀਆ ਸਰੀਰ… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > ਬੰਦ ਕਰੋ </a>  
    <a href="#" class="btn btn-primary" > ਬਦਲਾਅ ਸੁਰੱਖਿਅਤ ਕਰੋ </a> _  
  </div>
</div>

ਲਾਈਵ ਡੈਮੋ

ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ JavaScript ਰਾਹੀਂ ਇੱਕ ਮਾਡਲ ਨੂੰ ਟੌਗਲ ਕਰੋ। ਇਹ ਪੰਨੇ ਦੇ ਸਿਖਰ ਤੋਂ ਹੇਠਾਂ ਸਲਾਈਡ ਅਤੇ ਫਿੱਕਾ ਹੋ ਜਾਵੇਗਾ।

<-- ਮੋਡਲ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨ ਲਈ ਬਟਨ -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > ਡੈਮੋ ਮੋਡਲ ਲਾਂਚ ਕਰੋ </a>    
 
<-- ਮਾਡਲ -->
<div class = "modal" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div ਕਲਾਸ = "ਮੋਡਲ-ਹੈਡਰ" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > ਮਾਡਲ ਹੈਡਰ </h3> 
  </div>
  <div ਕਲਾਸ = "ਮੋਡਲ-ਬਾਡੀ" > 
    <p> ਇੱਕ ਵਧੀਆ ਸਰੀਰ… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > ਬੰਦ ਕਰੋ </button>   
    <button class = "btn btn-primary" > ਬਦਲਾਅ ਸੁਰੱਖਿਅਤ ਕਰੋ </button> 
  </div>
</div>

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

JavaScript ਲਿਖੇ ਬਿਨਾਂ ਇੱਕ ਮਾਡਲ ਨੂੰ ਸਰਗਰਮ ਕਰੋ। data-toggle="modal"ਇੱਕ ਕੰਟਰੋਲਰ ਤੱਤ 'ਤੇ ਸੈੱਟ ਕਰੋ , ਜਿਵੇਂ ਕਿ ਇੱਕ ਬਟਨ, ਇੱਕ ਦੇ ਨਾਲ data-target="#foo"ਜਾਂ href="#foo"ਟੌਗਲ ਕਰਨ ਲਈ ਇੱਕ ਖਾਸ ਮਾਡਲ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ।

<button type = "button" data-toggle = "modal" data-target = "#myModal" > ਮਾਡਲ ਲਾਂਚ ਕਰੋ </button>   

JavaScript ਰਾਹੀਂ

myModalJavaScript ਦੀ ਇੱਕ ਲਾਈਨ ਨਾਲ id ਦੇ ਨਾਲ ਇੱਕ ਮਾਡਲ ਨੂੰ ਕਾਲ ਕਰੋ :

$ ( '#myModal' )। ਮਾਡਲ ( ਵਿਕਲਪ )

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-backdrop=""।

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

ਢੰਗ

.modal(ਚੋਣਾਂ)

ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਮਾਡਲ ਵਜੋਂ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ object।

$ ( '#myModal' )। ਮਾਡਲ ({
  ਕੀਬੋਰਡ : ਗਲਤ 
})

.modal('ਟੌਗਲ')

ਇੱਕ ਮਾਡਲ ਨੂੰ ਹੱਥੀਂ ਟੌਗਲ ਕਰਦਾ ਹੈ।

$ ( '#myModal' )। ਮਾਡਲ ( 'ਟੌਗਲ' )

.modal('ਸ਼ੋਅ')

ਹੱਥੀਂ ਇੱਕ ਮਾਡਲ ਖੋਲ੍ਹਦਾ ਹੈ।

$ ( '#myModal' )। ਮਾਡਲ ( 'ਸ਼ੋਅ' )

.modal('ਛੁਪਾਓ')

ਹੱਥੀਂ ਇੱਕ ਮਾਡਲ ਲੁਕਾਉਂਦਾ ਹੈ।

$ ( '#myModal' )। ਮਾਡਲ ( 'ਛੁਪਾਓ' )

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦੀ ਮਾਡਲ ਕਲਾਸ ਮਾਡਲ ਫੰਕਸ਼ਨੈਲਿਟੀ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਦੀ ਹੈ।

$ ( '#myModal' )। 'ਤੇ ( 'ਲੁਕਿਆ ਹੋਇਆ' , ਫੰਕਸ਼ਨ () {   
  // ਕੁਝ ਕਰੋ…
})

ਉਦਾਹਰਨਾਂ

ਇਸ ਸਧਾਰਨ ਪਲੱਗਇਨ ਨਾਲ ਲਗਭਗ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਵਿੱਚ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਸ਼ਾਮਲ ਕਰੋ, ਜਿਸ ਵਿੱਚ ਨਵਬਾਰ, ਟੈਬਾਂ ਅਤੇ ਗੋਲੀਆਂ ਸ਼ਾਮਲ ਹਨ।

ਇੱਕ ਨਵਬਾਰ ਦੇ ਅੰਦਰ

ਟੈਬਾਂ ਦੇ ਅੰਦਰ

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

data-toggle="dropdown"ਡ੍ਰੌਪਡਾਉਨ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਲਿੰਕ ਜਾਂ ਬਟਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।

<div ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਉਨ" > 
  <a class = "dropdown-toggle" href = "#" > ਡ੍ਰੌਪਡਾਉਨ ਟ੍ਰਿਗਰ </a>  
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਣ ਲਈ, ਦੀ data-targetਬਜਾਏ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰੋ href="#"।

<div ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਉਨ" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    ਡਰਾਪ ਡਾਉਨ
    <b ਕਲਾਸ = "ਕੈਰੇਟ" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScript ਰਾਹੀਂ

JavaScript ਦੁਆਰਾ ਡਰਾਪਡਾਊਨ ਨੂੰ ਕਾਲ ਕਰੋ:

$ ( '.dropdown-toggle' )। ਡ੍ਰੌਪਡਾਉਨ ()

ਵਿਕਲਪ

ਕੋਈ ਨਹੀਂ

ਢੰਗ

$().ਡਰਾਪਡਾਊਨ()

ਦਿੱਤੇ ਗਏ ਨਵਬਾਰ ਜਾਂ ਟੈਬਡ ਨੈਵੀਗੇਸ਼ਨ ਲਈ ਮੀਨੂ ਨੂੰ ਸਰਗਰਮ ਕਰਨ ਲਈ ਇੱਕ ਪ੍ਰੋਗਰਾਮੇਟਿਕ API।

ਨਵਬਾਰ ਵਿੱਚ ਉਦਾਹਰਨ

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

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਆਪਣੀ ਟੌਪਬਾਰ ਨੈਵੀਗੇਸ਼ਨ ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ ਸਕ੍ਰੌਲਸਪੀ ਵਿਵਹਾਰ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ, ਸਿਰਫ਼ data-spy="scroll"ਉਸ ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਜਿਸ ਦੀ ਤੁਸੀਂ ਜਾਸੂਸੀ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ (ਆਮ ਤੌਰ 'ਤੇ ਇਹ ਬਾਡੀ ਹੋਵੇਗੀ) ਅਤੇ data-target=".navbar"ਇਹ ਚੁਣੋ ਕਿ ਕਿਹੜਾ ਨੈਵੀ ਵਰਤਣਾ ਹੈ। ਤੁਹਾਨੂੰ ਇੱਕ ਹਿੱਸੇ ਦੇ ਨਾਲ scrollspy ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹੋਵੋਗੇ .nav.

<body data-spy = "ਸਕ੍ਰੌਲ" ਡਾਟਾ-ਟਾਰਗੇਟ = ".navbar" > ... </body>  

JavaScript ਰਾਹੀਂ

JavaScript ਦੁਆਰਾ scrollspy ਨੂੰ ਕਾਲ ਕਰੋ:

$ ( '#navbar' )। scrollspy ()

ਢੰਗ

.scrollspy('ਰਿਫਰੇਸ਼')

DOM ਤੋਂ ਤੱਤਾਂ ਨੂੰ ਜੋੜਨ ਜਾਂ ਹਟਾਉਣ ਦੇ ਨਾਲ scrollspy ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਤੁਹਾਨੂੰ ਰਿਫਰੈਸ਼ ਵਿਧੀ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਕਾਲ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ:

$ ( '[data-spy="scroll"]' )। ਹਰੇਕ ( ਫੰਕਸ਼ਨ () {  
  var $spy = $ ( ਇਹ ). scrollspy ( 'ਤਾਜ਼ਾ' )
});

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-offset=""।

ਸਮਾਗਮ

ਉਦਾਹਰਨ ਟੈਬਾਂ

ਸਥਾਨਕ ਸਮਗਰੀ ਦੇ ਪੈਨ ਦੁਆਰਾ ਟਰਾਂਜ਼ਿਟ ਕਰਨ ਲਈ ਤੇਜ਼, ਗਤੀਸ਼ੀਲ ਟੈਬ ਕਾਰਜਕੁਸ਼ਲਤਾ ਸ਼ਾਮਲ ਕਰੋ, ਇੱਥੋਂ ਤੱਕ ਕਿ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਦੁਆਰਾ ਵੀ।

ਵਰਤੋਂ

JavaScript ਰਾਹੀਂ ਟੈਬਬਲ ਟੈਬਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ (ਹਰੇਕ ਟੈਬ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਕਿਰਿਆਸ਼ੀਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ):

$ ( '#myTab a' )। ਕਲਿੱਕ ( ਫੰਕਸ਼ਨ ( e ) {  
  ਈ . preventDefault ();
  $ ( ਇਹ ) ਟੈਬ ( 'ਦਿਖਾਓ' );
})

ਤੁਸੀਂ ਵਿਅਕਤੀਗਤ ਟੈਬਾਂ ਨੂੰ ਕਈ ਤਰੀਕਿਆਂ ਨਾਲ ਸਰਗਰਮ ਕਰ ਸਕਦੇ ਹੋ:

$ ( '#myTab a[href="#profile"]' )। ਟੈਬ ( 'ਦਿਖਾਓ' ); // ਨਾਮ ਦੁਆਰਾ ਟੈਬ ਚੁਣੋ 
$ ( '#myTab a:first' )। ਟੈਬ ( 'ਦਿਖਾਓ' ); // ਪਹਿਲੀ ਟੈਬ ਚੁਣੋ 
$ ( '#myTab a:last' )। ਟੈਬ ( 'ਦਿਖਾਓ' ); // ਆਖਰੀ ਟੈਬ ਚੁਣੋ 
$ ( '#myTab li:eq(2) a' )। ਟੈਬ ( 'ਦਿਖਾਓ' ); // ਤੀਜੀ ਟੈਬ ਚੁਣੋ (0-ਇੰਡੈਕਸਡ) 

ਮਾਰਕਅੱਪ

data-toggle="tab"ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਨੂੰ ਸਿਰਫ਼ ਨਿਰਧਾਰਿਤ ਕਰਕੇ ਜਾਂ data-toggle="pill"ਕਿਸੇ ਤੱਤ 'ਤੇ ਲਿਖੇ ਬਿਨਾਂ ਇੱਕ ਟੈਬ ਜਾਂ ਪਿਲ ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਸਰਗਰਮ ਕਰ ਸਕਦੇ ਹੋ । navਟੈਬ ਵਿੱਚ ਅਤੇ nav-tabsਕਲਾਸਾਂ ਨੂੰ ਜੋੜਨ ਨਾਲ ulਬੂਟਸਟਰੈਪ ਟੈਬ ਸਟਾਈਲਿੰਗ ਲਾਗੂ ਹੋਵੇਗੀ।

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > ਪ੍ਰੋਫਾਈਲ </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > ਸੁਨੇਹੇ </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > ਸੈਟਿੰਗਾਂ </a></li>  
</ul>

ਢੰਗ

$().ਟੈਬ

ਇੱਕ ਟੈਬ ਤੱਤ ਅਤੇ ਸਮੱਗਰੀ ਕੰਟੇਨਰ ਨੂੰ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਟੈਬ ਵਿੱਚ DOM ਵਿੱਚ ਇੱਕ data-targetਜਾਂ hrefਇੱਕ ਕੰਟੇਨਰ ਨੋਡ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ।

<ul class = "nav nav-tabs" id = "myTab" >  
  <li ਕਲਾਸ = "ਐਕਟਿਵ" ><a href = "#home" > ਘਰ </a></li>  
  <li><a href = "#profile" > ਪ੍ਰੋਫਾਈਲ </a></li> 
  <li><a href = "#messages" > ਸੁਨੇਹੇ </a></li> 
  <li><a href = "#settings" > ਸੈਟਿੰਗਾਂ </a></li> 
</ul>
 
<div ਕਲਾਸ = "ਟੈਬ-ਸਮੱਗਰੀ" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( ਫੰਕਸ਼ਨ () {  
    $ ( '#myTab a:last' )। ਟੈਬ ( 'ਦਿਖਾਓ' );
  })
</script>

ਸਮਾਗਮ

$ ( 'a[data-toggle="tab"]' )। on ( 'ਦਿਖਾਇਆ ਗਿਆ' , ਫੰਕਸ਼ਨ ( e ) {   
  ਈ . ਟੀਚਾ // ਕਿਰਿਆਸ਼ੀਲ ਟੈਬ
  ਈ . ਸੰਬੰਧਿਤ ਟਾਰਗੇਟ // ਪਿਛਲੀ ਟੈਬ
})

ਉਦਾਹਰਨਾਂ

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

ਟੂਲਟਿਪਸ ਦੇਖਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਲਿੰਕਾਂ 'ਤੇ ਹੋਵਰ ਕਰੋ:

ਚਾਰ ਦਿਸ਼ਾਵਾਂ

ਵਰਤੋਂ

JavaScript ਦੁਆਰਾ ਟੂਲਟਿਪ ਨੂੰ ਟਰਿੱਗਰ ਕਰੋ:

$ ( '#ਉਦਾਹਰਨ' )। ਟੂਲਟਿਪ ( ਵਿਕਲਪ )

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-animation=""।

ਮਾਰਕਅੱਪ

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

<a href = "#" rel = "tooltip" title = "first tooltip" > ਮੇਰੇ ਉੱਤੇ ਹੋਵਰ ਕਰੋ </a>   

ਢੰਗ

$().ਟੂਲਟਿਪ(ਚੋਣਾਂ)

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

.ਟੂਲਟਿਪ('ਸ਼ੋਅ')

ਇੱਕ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਨੂੰ ਪ੍ਰਗਟ ਕਰਦਾ ਹੈ।

$ ( '# ਤੱਤ' )। ਟੂਲਟਿਪ ( 'ਦਿਖਾਓ' )

.ਟੂਲਟਿਪ('ਛੁਪਾਓ')

ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ।

$ ( '# ਤੱਤ' )। ਟੂਲਟਿਪ ( 'ਲੁਕਾਓ' )

.ਟੂਲਟਿਪ('ਟੌਗਲ')

ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ।

$ ( '# ਤੱਤ' )। ਟੂਲਟਿਪ ( 'ਟੌਗਲ' )

.ਟੂਲਟਿਪ('ਨਸ਼ਟ ਕਰੋ')

ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਲੁਕਾਉਂਦਾ ਅਤੇ ਨਸ਼ਟ ਕਰਦਾ ਹੈ।

$ ( '# ਤੱਤ' )। ਟੂਲਟਿਪ ( 'ਨਸ਼ਟ ਕਰੋ' )

ਉਦਾਹਰਨਾਂ

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

ਸਥਿਰ ਪੌਪਓਵਰ

ਚਾਰ ਵਿਕਲਪ ਉਪਲਬਧ ਹਨ: ਉੱਪਰ, ਸੱਜੇ, ਹੇਠਾਂ, ਅਤੇ ਖੱਬਾ ਇਕਸਾਰ।

dataਕਿਸੇ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਅੰਦਰ JavaScript ਅਤੇ ਸਮਗਰੀ ਤੋਂ ਪੌਪਓਵਰ ਦੇ ਰੂਪ ਵਿੱਚ ਕੋਈ ਮਾਰਕਅੱਪ ਨਹੀਂ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ।

ਲਾਈਵ ਡੈਮੋ

ਵਰਤੋਂ

JavaScript ਦੁਆਰਾ ਪੌਪਓਵਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ:

$ ( '#ਉਦਾਹਰਨ' )। ਪੌਪਓਵਰ ( ਵਿਕਲਪ )

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-animation=""।

ਮਾਰਕਅੱਪ

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

ਢੰਗ

$().popover(ਵਿਕਲਪ)

ਇੱਕ ਤੱਤ ਸੰਗ੍ਰਹਿ ਲਈ ਪੌਪਓਵਰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।

.popover('ਸ਼ੋਅ')

ਇੱਕ ਤੱਤ ਪੌਪਓਵਰ ਨੂੰ ਪ੍ਰਗਟ ਕਰਦਾ ਹੈ.

$ ( '# ਤੱਤ' )। ਪੌਪਓਵਰ ( 'ਸ਼ੋ' )

.popover('ਛੁਪਾਓ')

ਇੱਕ ਤੱਤ ਪੌਪਓਵਰ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ।

$ ( '# ਤੱਤ' )। ਪੋਪਓਵਰ ( 'ਛੁਪਾਓ' )

.popover('ਟੌਗਲ')

ਇੱਕ ਤੱਤ ਪੌਪਓਵਰ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ।

$ ( '# ਤੱਤ' )। ਪੌਪਓਵਰ ( 'ਟੌਗਲ' )

.popover('ਨਸ਼ਟ')

ਇੱਕ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਲੁਕਾਉਂਦਾ ਅਤੇ ਨਸ਼ਟ ਕਰਦਾ ਹੈ।

$ ( '# ਤੱਤ' )। ਪੌਪਓਵਰ ( 'ਨਸ਼ਟ' )

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

ਇਸ ਪਲੱਗਇਨ ਨਾਲ ਸਾਰੇ ਅਲਰਜ ਸੁਨੇਹਿਆਂ ਵਿੱਚ ਖਾਰਜ ਕਾਰਜਸ਼ੀਲਤਾ ਸ਼ਾਮਲ ਕਰੋ।

ਵਰਤੋਂ

JavaScript ਦੁਆਰਾ ਇੱਕ ਚੇਤਾਵਨੀ ਨੂੰ ਬਰਖਾਸਤ ਕਰਨ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ:

$ ( ". ਚੇਤਾਵਨੀ" )। ਚੇਤਾਵਨੀ ()

ਮਾਰਕਅੱਪ

data-dismiss="alert"ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਅਲਰਟ ਨਜ਼ਦੀਕੀ ਕਾਰਜਸ਼ੀਲਤਾ ਦੇਣ ਲਈ ਬਸ ਆਪਣੇ ਬੰਦ ਬਟਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।

<a ਕਲਾਸ = "close" data- dismiss = "alert" href = "#" > × </a>   

ਢੰਗ

$().ਸੂਚਨਾ()

ਨਜ਼ਦੀਕੀ ਕਾਰਜਸ਼ੀਲਤਾ ਨਾਲ ਸਾਰੀਆਂ ਚੇਤਾਵਨੀਆਂ ਨੂੰ ਸਮੇਟਦਾ ਹੈ। ਬੰਦ ਹੋਣ 'ਤੇ ਤੁਹਾਡੀਆਂ ਸੁਚੇਤਨਾਵਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਉਹਨਾਂ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਹੀ .fadeਅਤੇ .inਕਲਾਸ ਲਾਗੂ ਹੈ।

.alert('close')

ਇੱਕ ਚੇਤਾਵਨੀ ਬੰਦ ਕਰਦਾ ਹੈ।

$ ( ". ਚੇਤਾਵਨੀ" )। ਚੇਤਾਵਨੀ ( 'ਬੰਦ' )

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦੀ ਚੇਤਾਵਨੀ ਕਲਾਸ ਚੇਤਾਵਨੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਦਾ ਪਰਦਾਫਾਸ਼ ਕਰਦੀ ਹੈ।

$ ( '#my-alert' )। ਬੰਨ੍ਹ ( 'ਬੰਦ' , ਫੰਕਸ਼ਨ () {   
  // ਕੁਝ ਕਰੋ…
})

ਉਦਾਹਰਨ ਵਰਤਦਾ ਹੈ

ਬਟਨਾਂ ਨਾਲ ਹੋਰ ਕਰੋ। ਕੰਟਰੋਲ ਬਟਨ ਸਟੇਟਸ ਜਾਂ ਟੂਲਬਾਰਾਂ ਵਰਗੇ ਹੋਰ ਹਿੱਸਿਆਂ ਲਈ ਬਟਨਾਂ ਦੇ ਸਮੂਹ ਬਣਾਓ।

ਸਟੇਟਫੁੱਲ

ਇੱਕ ਬਟਨ 'ਤੇ ਲੋਡਿੰਗ ਸਥਿਤੀ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਡੇਟਾ-ਲੋਡਿੰਗ-ਟੈਕਸਟ="ਲੋਡਿੰਗ..." ਸ਼ਾਮਲ ਕਰੋ।

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > ਲੋਡਿੰਗ ਸਥਿਤੀ </button>   

ਸਿੰਗਲ ਟੌਗਲ

ਇੱਕ ਸਿੰਗਲ ਬਟਨ 'ਤੇ ਟੌਗਲਿੰਗ ਨੂੰ ਸਰਗਰਮ ਕਰਨ ਲਈ ਡੇਟਾ-ਟੌਗਲ="ਬਟਨ" ਸ਼ਾਮਲ ਕਰੋ।

<button type = "button" class = "btn" data-toggle = "button" > ਸਿੰਗਲ ਟੌਗਲ </button>   

ਚੈੱਕਬਾਕਸ

Btn-ਗਰੁੱਪ 'ਤੇ ਚੈਕਬਾਕਸ ਸ਼ੈਲੀ ਟੌਗਲ ਕਰਨ ਲਈ data-toggle="buttons-checkbox" ਸ਼ਾਮਲ ਕਰੋ।

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn" > ਖੱਬਾ </button>  
  <button type = "button" class = "btn" > ਮੱਧ </button>  
  <button type = "button" class = "btn" > ਸੱਜਾ </button>  
</div>

ਰੇਡੀਓ

Btn-ਗਰੁੱਪ 'ਤੇ ਰੇਡੀਓ ਸ਼ੈਲੀ ਟੌਗਲ ਕਰਨ ਲਈ data-toggle="buttons-radio" ਸ਼ਾਮਲ ਕਰੋ।

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn" > ਖੱਬਾ </button>  
  <button type = "button" class = "btn" > ਮੱਧ </button>  
  <button type = "button" class = "btn" > ਸੱਜਾ </button>  
</div>

ਵਰਤੋਂ

JavaScript ਦੁਆਰਾ ਬਟਨਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ:

$ ( '.nav-tabs' )। ਬਟਨ ()

ਮਾਰਕਅੱਪ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਬਟਨ ਪਲੱਗਇਨ ਲਈ ਅਟੁੱਟ ਹਨ। ਵੱਖ-ਵੱਖ ਮਾਰਕਅੱਪ ਕਿਸਮਾਂ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਉਦਾਹਰਨ ਕੋਡ ਦੀ ਜਾਂਚ ਕਰੋ।

ਵਿਕਲਪ

ਕੋਈ ਨਹੀਂ

ਢੰਗ

$().ਬਟਨ('ਟੌਗਲ')

ਪੁਸ਼ ਸਥਿਤੀ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਬਟਨ ਨੂੰ ਇਹ ਦਿੱਖ ਦਿੰਦਾ ਹੈ ਕਿ ਇਹ ਕਿਰਿਆਸ਼ੀਲ ਹੋ ਗਿਆ ਹੈ।

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().ਬਟਨ('ਲੋਡਿੰਗ')

ਬਟਨ ਸਥਿਤੀ ਨੂੰ ਲੋਡ ਕਰਨ ਲਈ ਸੈੱਟ ਕਰਦਾ ਹੈ - ਬਟਨ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਟੈਕਸਟ ਨੂੰ ਲੋਡ ਕਰਨ ਲਈ ਟੈਕਸਟ ਬਦਲਦਾ ਹੈ। ਲੋਡਿੰਗ ਟੈਕਸਟ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਬਟਨ ਤੱਤ 'ਤੇ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ data-loading-text।

<button type = "button" class = "btn" data-loading-text = "ਲੋਡਿੰਗ ਸਮੱਗਰੀ..." > ... </button>    

$().ਬਟਨ('ਰੀਸੈੱਟ')

ਬਟਨ ਸਥਿਤੀ ਨੂੰ ਰੀਸੈੱਟ ਕਰਦਾ ਹੈ - ਟੈਕਸਟ ਨੂੰ ਮੂਲ ਟੈਕਸਟ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।

$().ਬਟਨ(ਸਟਰਿੰਗ)

ਬਟਨ ਸਥਿਤੀ ਨੂੰ ਰੀਸੈੱਟ ਕਰਦਾ ਹੈ - ਟੈਕਸਟ ਨੂੰ ਕਿਸੇ ਵੀ ਡੇਟਾ ਪਰਿਭਾਸ਼ਿਤ ਟੈਕਸਟ ਸਥਿਤੀ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।

<button type = "button" class = "btn" data-complete-text = "ਮੁਕੰਮਲ!" > ... </ ਬਟਨ>    
<script>
  $ ( '.btn' )। ਬਟਨ ( 'ਪੂਰਾ' )
</script>

ਬਾਰੇ

ਅਕਾਰਡੀਅਨ ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਵਰਗੇ ਸਮੇਟਣਯੋਗ ਭਾਗਾਂ ਲਈ ਬੇਸ ਸਟਾਈਲ ਅਤੇ ਲਚਕਦਾਰ ਸਹਾਇਤਾ ਪ੍ਰਾਪਤ ਕਰੋ।

* ਪਰਿਵਰਤਨ ਪਲੱਗਇਨ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।

ਉਦਾਹਰਨ accordion

ਸਮੇਟਣ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਅਸੀਂ ਇੱਕ ਸਧਾਰਨ ਐਕੌਰਡਿਅਨ ਸ਼ੈਲੀ ਵਿਜੇਟ ਬਣਾਇਆ ਹੈ:

<button type = "button" class = "btn btn-ਖ਼ਤਰਾ" data-toggle = "colapse " data-target = "#demo" >    
  ਸਧਾਰਨ ਸਮੇਟਣਯੋਗ
</ ਬਟਨ>
 
<div id = "demo" class = "colapse in" > … </div>  

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਦੇ ਨਿਯੰਤਰਣ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਸਿਰਫ਼ ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ data-toggle="collapse"ਅਤੇ a . ਵਿਸ਼ੇਸ਼ਤਾ ਸਮੇਟਣ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਇੱਕ css ਚੋਣਕਾਰ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦੀ ਹੈ data-target। ਕਲਾਸ ਨੂੰ ਸਮੇਟਣਯੋਗ ਤੱਤ ਵਿੱਚ data-targetਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ । collapseਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਡਿਫੌਲਟ ਖੋਲ੍ਹਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਵਾਧੂ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰੋ in।

ਇੱਕ ਸਮੇਟਣਯੋਗ ਨਿਯੰਤਰਣ ਵਿੱਚ ਅਕਾਰਡੀਅਨ-ਵਰਗੇ ਸਮੂਹ ਪ੍ਰਬੰਧਨ ਨੂੰ ਜੋੜਨ ਲਈ, ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ data-parent="#selector"। ਇਸ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖਣ ਲਈ ਡੈਮੋ ਵੇਖੋ।

JavaScript ਰਾਹੀਂ

ਇਸ ਨਾਲ ਹੱਥੀਂ ਯੋਗ ਕਰੋ:

$ ( ". ਸਮੇਟਣਾ" )। ਢਹਿ ()

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-parent=""।

ਢੰਗ

.colapse(ਵਿਕਲਪ)

ਤੁਹਾਡੀ ਸਮਗਰੀ ਨੂੰ ਸਮੇਟਣ ਯੋਗ ਤੱਤ ਦੇ ਤੌਰ ਤੇ ਕਿਰਿਆਸ਼ੀਲ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ object।

$ ( '#myCollapsible' )। ਸਮੇਟਣਾ ({
  ਟੌਗਲ : ਗਲਤ 
})

.colapse('ਟੌਗਲ')

ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਦਿਖਾਉਣ ਜਾਂ ਲੁਕਾਉਣ ਲਈ ਟੌਗਲ ਕਰਦਾ ਹੈ।

.colapse('ਦਿਖਾਓ')

ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਦਿਖਾਉਂਦਾ ਹੈ।

.colapse('ਲੁਕਾਓ')

ਇੱਕ ਸਮੇਟਣਯੋਗ ਤੱਤ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ।

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦੀ ਸਮੇਟਣ ਦੀ ਕਲਾਸ ਸਮੇਟਣ ਦੀ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਦੀ ਹੈ।

$ ( '#myCollapsible' )। 'ਤੇ ( 'ਲੁਕਿਆ ਹੋਇਆ' , ਫੰਕਸ਼ਨ () {   
  // ਕੁਝ ਕਰੋ…
})

ਉਦਾਹਰਨ ਕੈਰੋਜ਼ਲ

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

ਪਹਿਲਾ ਥੰਬਨੇਲ ਲੇਬਲ

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.

ਤੀਜਾ ਥੰਬਨੇਲ ਲੇਬਲ

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.

‹ ›

<div id = "myCarousel" ਕਲਾਸ = "ਕੈਰੋਜ਼ਲ ਸਲਾਈਡ" >  
  <!-- ਕੈਰੋਜ਼ਲ ਆਈਟਮਾਂ -->
  <div class = "carousel-inner" > 
    <div ਕਲਾਸ = "ਸਰਗਰਮ ਆਈਟਮ" > … </div> 
    <div ਕਲਾਸ = "ਆਈਟਮ" > … </div> 
    <div ਕਲਾਸ = "ਆਈਟਮ" > … </div> 
  </div>
  <!-- ਕੈਰੋਸੇਲ ਨੇਵੀ -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

...

JavaScript ਰਾਹੀਂ

ਕੈਰੋਸੇਲ ਨੂੰ ਇਸ ਨਾਲ ਹੱਥੀਂ ਕਾਲ ਕਰੋ:

$ ( '. ਕੈਰੋਜ਼ਲ' )। ਕੈਰੋਸੇਲ ()

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-interval=""।

ਢੰਗ

.carousel(ਚੋਣਾਂ)

ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪਾਂ ਨਾਲ ਕੈਰੋਜ਼ਲ ਨੂੰ objectਸ਼ੁਰੂ ਕਰਦਾ ਹੈ ਅਤੇ ਆਈਟਮਾਂ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣਾ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।

$ ( '. ਕੈਰੋਜ਼ਲ' )। ਕੈਰੋਸਲ ({
  ਅੰਤਰਾਲ : 2000 
})

.carousel('ਚੱਕਰ')

ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਕੈਰੋਜ਼ਲ ਆਈਟਮਾਂ ਰਾਹੀਂ ਚੱਕਰ।

.carousel('ਵਿਰਾਮ')

ਕੈਰੋਜ਼ਲ ਨੂੰ ਆਈਟਮਾਂ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।

.carousel(ਨੰਬਰ)

ਕੈਰੋਸਲ ਨੂੰ ਕਿਸੇ ਖਾਸ ਫ੍ਰੇਮ (0 ਅਧਾਰਤ, ਇੱਕ ਐਰੇ ਦੇ ਸਮਾਨ) ਵਿੱਚ ਚੱਕਰ ਲਗਾਉਂਦਾ ਹੈ।

.carousel('ਪਿਛਲਾ')

ਪਿਛਲੀ ਆਈਟਮ ਲਈ ਚੱਕਰ।

.carousel('ਅਗਲਾ')

ਅਗਲੀ ਆਈਟਮ 'ਤੇ ਚੱਕਰ ਲਗਾਓ।

ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ ਦੀ ਕੈਰੋਜ਼ਲ ਕਲਾਸ ਕੈਰੋਜ਼ਲ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਦੋ ਘਟਨਾਵਾਂ ਦਾ ਪਰਦਾਫਾਸ਼ ਕਰਦੀ ਹੈ।

ਉਦਾਹਰਨ

ਕਿਸੇ ਵੀ ਫਾਰਮ ਟੈਕਸਟ ਇੰਪੁੱਟ ਦੇ ਨਾਲ ਸ਼ਾਨਦਾਰ ਟਾਈਪਹੇਡਸ ਤੇਜ਼ੀ ਨਾਲ ਬਣਾਉਣ ਲਈ ਇੱਕ ਬੁਨਿਆਦੀ, ਆਸਾਨੀ ਨਾਲ ਵਿਸਤ੍ਰਿਤ ਪਲੱਗਇਨ।

<ਇਨਪੁਟ ਕਿਸਮ = "ਟੈਕਸਟ" ਡੇਟਾ-ਪ੍ਰਦਾਨ = "ਟਾਈਪਹੈੱਡ" >  

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

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

JavaScript ਰਾਹੀਂ

ਟਾਈਪਹੈੱਡ ਨੂੰ ਇਸ ਨਾਲ ਹੱਥੀਂ ਕਾਲ ਕਰੋ:

$ ( '.typeahead' )। ਟਾਈਪਹੈੱਡ ()

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-source=""।

ਢੰਗ

.typeahead(ਚੋਣਾਂ)

ਟਾਈਪਹੈੱਡ ਨਾਲ ਇੱਕ ਇਨਪੁਟ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।

ਉਦਾਹਰਨ

ਖੱਬੇ ਪਾਸੇ ਸਬਨੇਵੀਗੇਸ਼ਨ affix ਪਲੱਗਇਨ ਦਾ ਲਾਈਵ ਡੈਮੋ ਹੈ।

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਕਿਸੇ ਵੀ ਤੱਤ ਨਾਲ ਆਸਾਨੀ ਨਾਲ affix ਵਿਵਹਾਰ ਜੋੜਨ ਲਈ, ਸਿਰਫ਼ data-spy="affix"ਉਸ ਤੱਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਜਿਸਦੀ ਤੁਸੀਂ ਜਾਸੂਸੀ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਫਿਰ ਇਹ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਔਫਸੈੱਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਕਿ ਕਿਸੇ ਤੱਤ ਦੀ ਪਿਨਿੰਗ ਨੂੰ ਕਦੋਂ ਚਾਲੂ ਅਤੇ ਬੰਦ ਕਰਨਾ ਹੈ।

<div data-spy = "affix" data-offset-top = "200" > ... </body>  

JavaScript ਰਾਹੀਂ

JavaScript ਦੁਆਰਾ affix ਪਲੱਗਇਨ ਨੂੰ ਕਾਲ ਕਰੋ:

$ ( '#navbar' )। affix ()

ਢੰਗ

.affix('ਤਾਜ਼ਾ')

DOM ਤੋਂ ਤੱਤਾਂ ਨੂੰ ਜੋੜਨ ਜਾਂ ਹਟਾਉਣ ਦੇ ਨਾਲ affix ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਤੁਸੀਂ ਰਿਫ੍ਰੈਸ਼ ਵਿਧੀ ਨੂੰ ਕਾਲ ਕਰਨਾ ਚਾਹੋਗੇ:

$ ( '[data-spy="affix"]' )। ਹਰੇਕ ( ਫੰਕਸ਼ਨ () {  
  $ ( ਇਹ ) affix ( 'ਤਾਜ਼ਾ' )
});

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-offset-top="200"।