ਮਾਡਲਾਂ ਬਾਰੇ

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

ਸਥਿਰ ਉਦਾਹਰਨ

ਹੇਠਾਂ ਇੱਕ ਸਥਿਰ ਰੂਪ ਵਿੱਚ ਰੈਂਡਰ ਮਾਡਲ ਹੈ।

ਲਾਈਵ ਡੈਮੋ

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

ਬੂਟਸਟਰੈਪ-ਮੋਡਲ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਮਾਡਲ ਨੂੰ ਕਾਲ ਕਰੋ:

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

ਵਿਕਲਪ

ਮਾਰਕਅੱਪ

ਤੁਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਇੱਕ ਲਾਈਨ ਲਿਖਣ ਤੋਂ ਬਿਨਾਂ ਆਸਾਨੀ ਨਾਲ ਆਪਣੇ ਪੰਨੇ 'ਤੇ ਮਾਡਲਾਂ ਨੂੰ ਸਰਗਰਮ ਕਰ ਸਕਦੇ ਹੋ। ਸਿਰਫ਼ data-toggle="modal"ਇੱਕ ਕੰਟਰੋਲਰ ਤੱਤ 'ਤੇ ਸੈੱਟ ਕਰੋ data-target="#foo"ਜਾਂ href="#foo"ਜੋ ਇੱਕ ਮਾਡਲ ਐਲੀਮੈਂਟ ਆਈਡੀ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ, ਅਤੇ ਜਦੋਂ ਕਲਿੱਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਹ ਤੁਹਾਡੇ ਮਾਡਲ ਨੂੰ ਲਾਂਚ ਕਰੇਗਾ।

ਨਾਲ ਹੀ, ਆਪਣੇ ਮਾਡਲ ਉਦਾਹਰਨ ਵਿੱਚ ਵਿਕਲਪਾਂ ਨੂੰ ਜੋੜਨ ਲਈ, ਉਹਨਾਂ ਨੂੰ ਕੰਟਰੋਲ ਐਲੀਮੈਂਟ ਜਾਂ ਮਾਡਲ ਮਾਰਕਅੱਪ 'ਤੇ ਵਾਧੂ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਜੋਂ ਸ਼ਾਮਲ ਕਰੋ।

<a class = "btn" data-toggle = "modal" href = "#myModal" > ਮਾਡਲ ਲਾਂਚ ਕਰੋ </a>    

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

ਢੰਗ

.modal(ਚੋਣਾਂ)

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

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

.modal('ਟੌਗਲ')

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

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

.modal('ਸ਼ੋਅ')

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

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

.modal('ਛੁਪਾਓ')

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

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

ਸਮਾਗਮ

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

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

ਡਰਾਪਡਾਊਨ ਬਾਰੇ

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

ਉਦਾਹਰਨਾਂ

ਡ੍ਰੌਪਡਾਉਨ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਨੇਵਬਾਰ ਅਤੇ ਗੋਲੀਆਂ ਵਿੱਚ ਡ੍ਰੌਪਡਾਊਨ ਨੈਵੀ ਲਿੰਕਾਂ 'ਤੇ ਕਲਿੱਕ ਕਰੋ।

• ਨਿਯਮਤ ਲਿੰਕ
• ਡਰਾਪ ਡਾਉਨ
  • Action
  • Another action
  • Something else here
  • Separated link
• ਡ੍ਰੌਪਡਾਊਨ 2
  • Action
  • Another action
  • Something else here
  • Separated link
• ਡ੍ਰੌਪਡਾਊਨ 3
  • Action
  • Another action
  • Something else here
  • Separated link

bootstrap-dropdown.js ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਡਰਾਪਡਾਊਨ ਨੂੰ ਕਾਲ ਕਰੋ:

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

ਮਾਰਕਅੱਪ

ਕਿਸੇ ਵੀ ਤੱਤ ਵਿੱਚ ਡ੍ਰੌਪਡਾਉਨ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਜੋੜਨ ਲਈ ਬਸ ਜੋੜੋ data-toggle="dropdown"ਅਤੇ ਕੋਈ ਵੀ ਵੈਧ ਬੂਟਸਟਰੈਪ ਡਰਾਪਡਾਉਨ ਆਟੋਮੈਟਿਕਲੀ ਐਕਟੀਵੇਟ ਹੋ ਜਾਵੇਗਾ।

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > ਨਿਯਮਿਤ ਲਿੰਕ </a></li>  
  <li ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਉਨ" id = "menu1" >  
    <a ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਉਨ-ਟੌਗਲ" ਡੇਟਾ-ਟੌਗਲ = "ਡ੍ਰੌਪਡਾਉਨ" href = "#menu1" >   
      ਡਰਾਪ ਡਾਉਨ
      <b ਕਲਾਸ = "ਕੈਰੇਟ" ></b> 
    </a>
    <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
      <li><a href = "#" > ਕਾਰਵਾਈ </a></li> 
      <li><a href = "#" > ਇੱਕ ਹੋਰ ਕਾਰਵਾਈ </a></li> 
      <li><a href = "#" > ਇੱਥੇ ਕੁਝ ਹੋਰ </a></li> 
      <li ਕਲਾਸ = "ਡਿਵਾਈਡਰ" ></li> 
      <li><a href = "#" > ਵੱਖ ਕੀਤਾ ਲਿੰਕ </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li ਕਲਾਸ = "ਡ੍ਰੌਪਡਾਊਨ" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      ਡਰਾਪ ਡਾਉਨ
      <b ਕਲਾਸ = "ਕੈਰੇਟ" ></b> 
    </a>
    <ul class = "ਡ੍ਰੌਪਡਾਊਨ-ਮੇਨੂ" > 
      ...
    </ul>
  </li>
</ul>

ਢੰਗ

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

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

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

scrollspy ਨਾਲ ਉਦਾਹਰਨ navbar

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

bootstrap-scrollspy.js ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਸਕ੍ਰੌਲਸਪੀ ਨੂੰ ਕਾਲ ਕਰੋ:

$ ( '#navbar' )। scrollspy ()

ਮਾਰਕਅੱਪ

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

<body data-spy = "ਸਕ੍ਰੌਲ" > ... </body>  

ਢੰਗ

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

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

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

ਵਿਕਲਪ

ਸਮਾਗਮ

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

ਉਦਾਹਰਨ ਟੈਬਾਂ

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

• ਘਰ
• ਪ੍ਰੋਫਾਈਲ
• ਡਰਾਪ ਡਾਉਨ
  • @fat
  • @mdo

bootstrap-tab.js ਦੀ ਵਰਤੋਂ ਕਰਨਾ

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

$ ( '#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 ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਅਤੇ ਸਥਾਨਕ ਸਿਰਲੇਖ ਸਟੋਰੇਜ ਲਈ ਡਾਟਾ-ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।

ਟੂਲਟਿਪਸ ਦੀ ਉਦਾਹਰਨ ਵਰਤੋਂ

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

bootstrap-tooltip.js ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਟੂਲਟਿਪ ਨੂੰ ਟਰਿੱਗਰ ਕਰੋ:

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

ਵਿਕਲਪ

ਮਾਰਕਅੱਪ

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

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

ਢੰਗ

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

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

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

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

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

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

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

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

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

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

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

popovers ਬਾਰੇ

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

* ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਟੂਲਟਿੱਪ ਦੀ ਲੋੜ ਹੈ

ਹੋਵਰ ਪੌਪਓਵਰ ਦੀ ਉਦਾਹਰਨ

ਪੌਪਓਵਰ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨ ਲਈ ਬਟਨ ਉੱਤੇ ਹੋਵਰ ਕਰੋ।

bootstrap-popover.js ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਪੌਪਓਵਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ:

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

ਵਿਕਲਪ

ਮਾਰਕਅੱਪ

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

ਢੰਗ

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

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

.popover('ਸ਼ੋਅ')

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

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

.popover('ਛੁਪਾਓ')

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

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

.popover('ਟੌਗਲ')

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

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

ਚੇਤਾਵਨੀਆਂ ਬਾਰੇ

ਚੇਤਾਵਨੀ ਪਲੱਗਇਨ ਚੇਤਾਵਨੀਆਂ ਵਿੱਚ ਨਜ਼ਦੀਕੀ ਕਾਰਜਸ਼ੀਲਤਾ ਜੋੜਨ ਲਈ ਇੱਕ ਛੋਟੀ ਸ਼੍ਰੇਣੀ ਹੈ।

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

ਅਲਰਟ ਪਲੱਗਇਨ ਨਿਯਮਤ ਚੇਤਾਵਨੀ ਸੰਦੇਸ਼ਾਂ ਅਤੇ ਬਲੌਕ ਸੁਨੇਹਿਆਂ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ।

bootstrap-alert.js ਦੀ ਵਰਤੋਂ ਕਰਨਾ

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

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

ਮਾਰਕਅੱਪ

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

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

ਢੰਗ

$().ਸੂਚਨਾ()

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

.alert('close')

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

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

ਸਮਾਗਮ

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

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

ਬਾਰੇ

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

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

ਸਟੇਟਸ ਅਤੇ ਟੌਗਲ ਲਈ ਬਟਨ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰੋ।

bootstrap-button.js ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਬਟਨਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ:

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

ਮਾਰਕਅੱਪ

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

<!-- ਇੱਕ ਬਟਨ 'ਤੇ ਟੌਗਲਿੰਗ ਨੂੰ ਸਰਗਰਮ ਕਰਨ ਲਈ ਡੇਟਾ-ਟੌਗਲ="ਬਟਨ" ਸ਼ਾਮਲ ਕਰੋ -->
<button class = "btn" data-toggle = "button" > ਸਿੰਗਲ ਟੌਗਲ </button>  
 
<!-- btn-ਗਰੁੱਪ 'ਤੇ ਚੈੱਕਬਾਕਸ ਸ਼ੈਲੀ ਟੌਗਲ ਕਰਨ ਲਈ data-toggle="buttons-checkbox" ਸ਼ਾਮਲ ਕਰੋ -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > ਖੱਬਾ </button> 
  <button class = "btn" > ਮੱਧ </ ਬਟਨ> 
  <button class = "btn" > ਸੱਜਾ </button> 
</div>
 
<!-- btn-ਗਰੁੱਪ ਉੱਤੇ ਰੇਡੀਓ ਸ਼ੈਲੀ ਟੌਗਲ ਕਰਨ ਲਈ data-toggle="buttons-radio" ਸ਼ਾਮਲ ਕਰੋ -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > ਖੱਬਾ </button> 
  <button class = "btn" > ਮੱਧ </ ਬਟਨ> 
  <button class = "btn" > ਸੱਜਾ </button> 
</div>

ਢੰਗ

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

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

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

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

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

<button class = "btn" data-loading-text = "ਸਮੱਗਰੀ ਲੋਡ ਕਰ ਰਿਹਾ ਹੈ..." > ... </button>   

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

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

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

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

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

ਬਾਰੇ

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

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

ਉਦਾਹਰਨ accordion

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

bootstrap-collapse.js ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਯੋਗ ਕਰੋ:

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

ਵਿਕਲਪ

ਮਾਰਕਅੱਪ

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

<ਬਟਨ ਕਲਾਸ = "btn btn-ਖ਼ਤਰਾ" ਡੇਟਾ-ਟੌਗਲ = "ਸਮਝੋ " ਡੇਟਾ-ਟਾਰਗੇਟ = "# ਡੈਮੋ" >   
  ਸਧਾਰਨ ਸਮੇਟਣਯੋਗ
</ ਬਟਨ>
 
<div id = "demo" class = "colapse in" > … </div>  

ਢੰਗ

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

‹ ›

bootstrap-carousel.js ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਕਾਲ ਕਰੋ:

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

ਵਿਕਲਪ

ਮਾਰਕਅੱਪ

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

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

ਢੰਗ

.carousel(ਚੋਣਾਂ)

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

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

.carousel('ਚੱਕਰ')

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

.carousel('ਵਿਰਾਮ')

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

.carousel(ਨੰਬਰ)

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

.carousel('ਪਿਛਲਾ')

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

.carousel('ਅਗਲਾ')

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

ਸਮਾਗਮ

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

ਬਾਰੇ

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

ਉਦਾਹਰਨ

ਟਾਈਪਹੇਡ ਨਤੀਜੇ ਦਿਖਾਉਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਖੇਤਰ ਵਿੱਚ ਟਾਈਪ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੋ।

bootstrap-typeahead.js ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੁਆਰਾ ਟਾਈਪਹੈੱਡ ਨੂੰ ਕਾਲ ਕਰੋ:

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

ਵਿਕਲਪ

ਮਾਰਕਅੱਪ

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

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

ਢੰਗ

.typeahead(ਚੋਣਾਂ)

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