વ્યક્તિગત અથવા સંકલિત

પ્લગઇન્સનો વ્યક્તિગત રીતે સમાવેશ કરી શકાય છે (જોકે કેટલાકને જરૂરી અવલંબન હોય છે), અથવા બધા એકસાથે. bootstrap.js અને bootstrap.min.js બંને એક જ ફાઈલમાં તમામ પ્લગઈનો ધરાવે છે.

ડેટા લક્ષણો

તમે JavaScript ની એક પણ લાઇન લખ્યા વિના માર્કઅપ API દ્વારા તમામ બુટસ્ટ્રેપ પ્લગિન્સનો ઉપયોગ કરી શકો છો. આ બુટસ્ટ્રેપનું પ્રથમ વર્ગ API છે અને પ્લગઇનનો ઉપયોગ કરતી વખતે તમારી પ્રથમ વિચારણા હોવી જોઈએ.

તેણે કહ્યું, કેટલીક પરિસ્થિતિઓમાં આ કાર્યક્ષમતાને બંધ કરવાનું ઇચ્છનીય હોઈ શકે છે. તેથી, અમે `ડેટા-એપીઆઈ' સાથે બોડી નેમસ્પેસ પરની તમામ ઇવેન્ટ્સને અનબાઈન્ડ કરીને ડેટા એટ્રિબ્યુટ API ને અક્ષમ કરવાની ક્ષમતા પણ પ્રદાન કરીએ છીએ. આ આના જેવું દેખાય છે:

$ ( 'શરીર' ). બંધ ( '.ડેટા-એપીઆઈ' )

વૈકલ્પિક રીતે, ચોક્કસ પ્લગઇનને લક્ષ્ય બનાવવા માટે, ફક્ત પ્લગઇનનું નામ નેમસ્પેસ તરીકે ડેટા-એપીઆઈ નેમસ્પેસની સાથે આ રીતે શામેલ કરો:

$ ( 'શરીર' ). બંધ ( '.alert.data-api' )

પ્રોગ્રામેટિક API

અમે એમ પણ માનીએ છીએ કે તમે JavaScript API દ્વારા તમામ બુટસ્ટ્રેપ પ્લગિન્સનો સંપૂર્ણ ઉપયોગ કરી શકશો. તમામ સાર્વજનિક API એકલ, સાંકળવા યોગ્ય પદ્ધતિઓ છે અને તેના પર કાર્ય કરેલ સંગ્રહ પરત કરે છે.

$ ( ".btn. ડેન્જર" ). બટન ( "ટૉગલ" ). એડક્લાસ ( "ચરબી" )

બધી પદ્ધતિઓએ વૈકલ્પિક વિકલ્પો ઑબ્જેક્ટ સ્વીકારવી જોઈએ, એક સ્ટ્રિંગ જે કોઈ ચોક્કસ પદ્ધતિને લક્ષ્ય બનાવે છે, અથવા કંઈ નથી (જે ડિફૉલ્ટ વર્તન સાથે પ્લગઇન શરૂ કરે છે):

$ ( "#myModal" ). મોડલ () // ડિફૉલ્ટ સાથે પ્રારંભ                       
$ ( "#myModal" ). મોડલ ({ કીબોર્ડ : ખોટા }) // કોઈ કીબોર્ડ વિના પ્રારંભ     
$ ( "#myModal" ). મોડલ ( 'શો' ) // પ્રારંભ કરે છે અને તરત જ શોને બોલાવે છે                

દરેક પ્લગઇન તેના કાચા કન્સ્ટ્રક્ટરને `કન્સ્ટ્રક્ટર` પ્રોપર્ટી પર પણ એક્સપોઝ કરે છે: $.fn.popover.Constructor. જો તમે કોઈ ચોક્કસ પ્લગઇન દાખલા મેળવવા માંગતા હો, તો તેને એક ઘટકમાંથી સીધા જ પુનઃપ્રાપ્ત કરો: $('[rel=popover]').data('popover').

કોઈ સંઘર્ષ નથી

કેટલીકવાર અન્ય UI ફ્રેમવર્ક સાથે બુટસ્ટ્રેપ પ્લગિન્સનો ઉપયોગ કરવો જરૂરી છે. આ સંજોગોમાં, નેમસ્પેસની અથડામણ અવારનવાર થઈ શકે છે. .noConflictજો આવું થાય, તો તમે જે પ્લગઇનનું મૂલ્ય પાછું લાવવા માંગો છો તેના પર કૉલ કરી શકો છો.

var બુટસ્ટ્રેપ બટન = $ . fn _ બટન _ noConflict () // અગાઉ સોંપેલ મૂલ્ય પર $.fn.button પરત કરો 
$ . fn _ bootstrapBtn = બુટસ્ટ્રેપ             બટન // $().bootstrapBtn બુટસ્ટ્રેપ કાર્યક્ષમતા આપો

ઘટનાઓ

બુટસ્ટ્રેપ મોટાભાગના પ્લગઇનની અનન્ય ક્રિયાઓ માટે કસ્ટમ ઇવેન્ટ્સ પ્રદાન કરે છે. સામાન્ય રીતે, આ અનંત અને ભૂતકાળના પાર્ટિસિપલ સ્વરૂપમાં આવે છે - જ્યાં showઘટનાની શરૂઆતમાં અનંત (ઉદા. ) ટ્રિગર થાય છે, અને તેનું ભૂતકાળનું પાર્ટિસિપલ ફોર્મ (ઉદા. shown) ક્રિયા પૂર્ણ થવા પર ટ્રિગર થાય છે.

બધી અનંત ઘટનાઓ ડિફૉલ્ટ કાર્યક્ષમતા અટકાવે છે. આ ક્રિયા શરૂ થાય તે પહેલાં તેના અમલને રોકવાની ક્ષમતા પૂરી પાડે છે.

$ ( '#myModal' ). ચાલુ ( 'શો' , કાર્ય ( e ) {   
    જો (! ડેટા ) પરત કરો ઇ . ડિફૉલ્ટ () // મોડલને બતાવવાનું અટકાવે છે   
})

સંક્રમણો વિશે

સરળ સંક્રમણ અસરો માટે, અન્ય JS ફાઇલોની સાથે એકવાર bootstrap-transition.js નો સમાવેશ કરો. જો તમે કમ્પાઈલ કરેલ (અથવા મિનિફાઈડ) bootstrap.js નો ઉપયોગ કરી રહ્યાં છો , તો આને સામેલ કરવાની કોઈ જરૂર નથી—તે પહેલેથી જ છે.

કેસોનો ઉપયોગ કરો

સંક્રમણ પ્લગઇનના થોડા ઉદાહરણો:

• મોડલમાં સ્લાઇડિંગ અથવા ફેડિંગ
• ટૅબ્સ વિલીન થઈ રહ્યાં છે
• ચેતવણીઓ વિલીન થઈ રહી છે
• સ્લાઇડિંગ કેરોયુઝલ ફલક

ઉદાહરણો

મોડલ્સ સુવ્યવસ્થિત છે, પરંતુ લવચીક છે, ન્યૂનતમ જરૂરી કાર્યક્ષમતા અને સ્માર્ટ ડિફોલ્ટ્સ સાથે સંવાદ સંકેત આપે છે.

સ્થિર ઉદાહરણ

હેડર, બોડી અને ફૂટરમાં ક્રિયાઓના સેટ સાથે રેન્ડર કરેલ મોડલ.

<div class = "modal hide fade" > 
  <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 id = "myModal" class = "modal hide fade " 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>

પદ્ધતિઓ

મોડલ(વિકલ્પો)

તમારી સામગ્રીને મોડલ તરીકે સક્રિય કરે છે. વૈકલ્પિક વિકલ્પો સ્વીકારે છે object.

$ ( '#myModal' ). મોડલ ({
  કીબોર્ડ : ખોટું 
})

મોડલ('ટૉગલ')

મૉડલને મેન્યુઅલી ટૉગલ કરે છે.

$ ( '#myModal' ). મોડલ ( 'ટૉગલ' )

મોડલ('શો')

મેન્યુઅલી મોડલ ખોલે છે.

$ ( '#myModal' ). મોડલ ( 'શો' )

મોડલ('છુપાવો')

મેન્યુઅલી મોડલ છુપાવે છે.

$ ( '#myModal' ). મોડલ ( 'છુપાવો' )

ઘટનાઓ

બુટસ્ટ્રેપનો મોડલ ક્લાસ મોડલ કાર્યક્ષમતામાં જોડાવા માટે કેટલીક ઘટનાઓને ઉજાગર કરે છે.

$ ( '#myModal' ). પર ( 'છુપાયેલ' , કાર્ય () {   
  // કંઈક કરવું…
})

ઉદાહરણો

નવબાર, ટૅબ્સ અને ગોળીઓ સહિત આ સરળ પ્લગઇન વડે લગભગ કોઈપણ વસ્તુમાં ડ્રોપડાઉન મેનૂ ઉમેરો.

નવબારની અંદર

ટૅબ્સની અંદર

ઉપયોગ

ડેટા લક્ષણો દ્વારા

data-toggle="dropdown"ડ્રોપડાઉનને ટૉગલ કરવા માટે લિંક અથવા બટનમાં ઉમેરો .

<div વર્ગ = "ડ્રોપડાઉન" > 
  <a class = "dropdown-toggle" data-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 class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScript દ્વારા

JavaScript દ્વારા ડ્રોપડાઉનને કૉલ કરો:

$ ( '.ડ્રોપડાઉન-ટૉગલ' ). ડ્રોપડાઉન ()

વિકલ્પો

કોઈ નહિ

પદ્ધતિઓ

$().ડ્રોપડાઉન('ટૉગલ')

આપેલ નેવબાર અથવા ટેબ કરેલ નેવિગેશન માટે મેનુને ટોગલ કરવા માટે પ્રોગ્રામેટિક API.

નવબારમાં ઉદાહરણ

ScrollSpy પ્લગઇન સ્ક્રોલ સ્થિતિના આધારે નેવી લક્ષ્યોને આપમેળે અપડેટ કરવા માટે છે. નેવબારની નીચેનો વિસ્તાર સ્ક્રોલ કરો અને સક્રિય વર્ગમાં ફેરફાર જુઓ. ડ્રોપડાઉન પેટા વસ્તુઓ તેમજ હાઇલાઇટ કરવામાં આવશે.

ઉપયોગ

ડેટા લક્ષણો દ્વારા

તમારા ટોપબાર નેવિગેશનમાં સરળતાથી સ્ક્રોલસ્પી વર્તણૂક ઉમેરવા data-spy="scroll"માટે, તમે જે તત્વની જાસૂસી કરવા માંગો છો તેમાં ફક્ત ઉમેરો (મોટાભાગે આ મુખ્ય ભાગ હશે) અને data-target=".navbar"કઈ નેવીનો ઉપયોગ કરવો તે પસંદ કરો. .navતમે એક ઘટક સાથે scrollspy ઉપયોગ કરવા માંગો છો પડશે .

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

JavaScript દ્વારા

JavaScript દ્વારા scrollspy ને કૉલ કરો:

$ ( '#navbar' ). સ્ક્રોલસ્પી ()

પદ્ધતિઓ

.scrollspy('તાજું કરો')

DOM માંથી ઘટકો ઉમેરવા અથવા દૂર કરવા સાથે સ્ક્રોલસ્પીનો ઉપયોગ કરતી વખતે, તમારે રિફ્રેશ પદ્ધતિને આના જેવી કૉલ કરવાની જરૂર પડશે:

$ ( '[ડેટા-સ્પાય="સ્ક્રોલ"]' ). દરેક ( કાર્ય () {  
  var $spy = $ ( આ ). scrollspy ( 'તાજું કરો' )
});

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-offset="".

ઘટનાઓ

ઉદાહરણ ટૅબ્સ

ડ્રોપડાઉન મેનૂ દ્વારા પણ, સ્થાનિક સામગ્રીના ફલક દ્વારા સંક્રમણ કરવા માટે ઝડપી, ગતિશીલ ટેબ કાર્યક્ષમતા ઉમેરો.

ઉપયોગ

જાવાસ્ક્રિપ્ટ દ્વારા ટેબેબલ ટેબ્સને સક્ષમ કરો (દરેક ટેબને વ્યક્તિગત રીતે સક્રિય કરવાની જરૂર છે):

$ ( '#myTab a' ). ક્લિક કરો ( કાર્ય ( e ) {  
  ઇ _ ડિફોલ્ટ ();
  $ ( આ ). ટેબ ( 'બતાવો' );
})

તમે વ્યક્તિગત ટેબને ઘણી રીતે સક્રિય કરી શકો છો:

$ ( '#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 class = "active" ><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"]' ). પર ( 'બતાવેલ' , કાર્ય ( e ) {   
  ઇ _ લક્ષ્ય // સક્રિય ટેબ
  ઇ _ સંબંધિત લક્ષ્ય // અગાઉનું ટેબ
})

ઉદાહરણો

જેસન ફ્રેમ દ્વારા લખાયેલ ઉત્તમ jQuery.tipsy પ્લગઇન દ્વારા પ્રેરિત; ટૂલટીપ્સ એ અપડેટેડ વર્ઝન છે, જે ઈમેજીસ પર આધાર રાખતું નથી, એનિમેશન માટે CSS3 અને સ્થાનિક શીર્ષક સ્ટોરેજ માટે ડેટા-એટ્રીબ્યુટ્સનો ઉપયોગ કરે છે.

પ્રદર્શનના કારણોસર, ટૂલટિપ અને પોપઓવર ડેટા-એપીસ પસંદ કરવામાં આવે છે, એટલે કે તમારે તેમને જાતે જ પ્રારંભ કરવું પડશે .

ટૂલટિપ્સ જોવા માટે નીચેની લિંક્સ પર હોવર કરો:

ચાર દિશાઓ

ઇનપુટ જૂથોમાં ટૂલટિપ્સ

બુટસ્ટ્રેપ ઇનપુટ જૂથો સાથે ટૂલટિપ્સ અને પોપોવર્સનો ઉપયોગ કરતી વખતે, તમારે containerઅનિચ્છનીય આડઅસરો ટાળવા માટે (નીચે દસ્તાવેજીકૃત) વિકલ્પ સેટ કરવો પડશે.

ઉપયોગ

JavaScript દ્વારા ટૂલટિપને ટ્રિગર કરો:

$ ( '#example' ). ટૂલટિપ ( વિકલ્પો )

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-animation="".

માર્કઅપ

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > મારા ઉપર હોવર કરો </a>   

પદ્ધતિઓ

$().ટૂલટીપ(વિકલ્પો)

તત્વ સંગ્રહમાં ટૂલટિપ હેન્ડલર જોડે છે.

.ટૂલટિપ('શો')

તત્વની ટૂલટિપ દર્શાવે છે.

$ ( '# એલિમેન્ટ' ). ટૂલટિપ ( 'બતાવો' )

.ટૂલટિપ('છુપાવો')

તત્વની ટૂલટિપ છુપાવે છે.

$ ( '# એલિમેન્ટ' ). ટૂલટિપ ( 'છુપાવો' )

.ટૂલટિપ('ટૉગલ')

તત્વની ટૂલટિપને ટૉગલ કરે છે.

$ ( '# એલિમેન્ટ' ). ટૂલટિપ ( 'ટૉગલ' )

.ટૂલટિપ('નષ્ટ')

એલિમેન્ટની ટૂલટિપ છુપાવે છે અને તેનો નાશ કરે છે.

$ ( '# એલિમેન્ટ' ). ટૂલટિપ ( 'નષ્ટ' )

ઉદાહરણો

હાઉસિંગ ગૌણ માહિતી માટે કોઈપણ ઘટકમાં, iPad પરની જેમ સામગ્રીના નાના ઓવરલે ઉમેરો. પોપઓવરને ટ્રિગર કરવા માટે બટન પર હોવર કરો. સમાવવા માટે ટૂલટિપની જરૂર છે.

સ્થિર પોપઓવર

ચાર વિકલ્પો ઉપલબ્ધ છે: ઉપર, જમણે, નીચે અને ડાબે સંરેખિત.

dataપોપઓવર તરીકે દર્શાવવામાં આવેલ કોઈ માર્કઅપ JavaScript અને એટ્રિબ્યુટની અંદરની સામગ્રીમાંથી જનરેટ કરવામાં આવતું નથી .

લાઈવ ડેમો

ચાર દિશાઓ

ઉપયોગ

JavaScript દ્વારા પોપોવર્સ સક્ષમ કરો:

$ ( '#example' ). પોપઓવર ( વિકલ્પો )

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-animation="".

માર્કઅપ

પ્રદર્શનના કારણોસર, ટૂલટિપ અને પોપઓવર ડેટા-એપીસ પસંદ કરવામાં આવે છે. જો તમે તેનો ઉપયોગ કરવા માંગતા હોવ તો માત્ર પસંદગીકાર વિકલ્પનો ઉલ્લેખ કરો.

પદ્ધતિઓ

$().પોપઓવર(વિકલ્પો)

તત્વ સંગ્રહ માટે પોપોવર્સનો પ્રારંભ કરે છે.

.પોપઓવર('શો')

તત્વો પોપઓવર દર્શાવે છે.

$ ( '# એલિમેન્ટ' ). પોપઓવર ( 'શો' )

.પોપઓવર('છુપાવો')

તત્વો પોપઓવર છુપાવે છે.

$ ( '# એલિમેન્ટ' ). પોપઓવર ( 'છુપાવો' )

.પોપઓવર('ટૉગલ')

તત્વો પોપઓવરને ટૉગલ કરે છે.

$ ( '# એલિમેન્ટ' ). પોપઓવર ( 'ટૉગલ' )

.પોપઓવર('નષ્ટ')

તત્વના પોપઓવરને છુપાવે છે અને તેનો નાશ કરે છે.

$ ( '# એલિમેન્ટ' ). પોપઓવર ( 'નષ્ટ' )

ઉદાહરણ ચેતવણીઓ

આ પ્લગઇન સાથેના તમામ ચેતવણી સંદેશાઓમાં ડિસમિસ કાર્યક્ષમતા ઉમેરો.

ઉપયોગ

જાવાસ્ક્રિપ્ટ દ્વારા ચેતવણીને બરતરફી સક્ષમ કરો:

$ ( ". ચેતવણી" ). ચેતવણી ()

માર્કઅપ

data-dismiss="alert"આપમેળે ચેતવણી બંધ કાર્યક્ષમતા આપવા માટે ફક્ત તમારા બંધ બટનમાં ઉમેરો .

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

પદ્ધતિઓ

$().ચેતવણી()

નજીકની કાર્યક્ષમતા સાથે તમામ ચેતવણીઓને લપેટી. જ્યારે તમારી ચેતવણીઓ બંધ હોય ત્યારે એનિમેટ થાય તે માટે, ખાતરી કરો કે તેમની પાસે .fadeઅને .inવર્ગ પહેલેથી જ લાગુ છે.

ચેતવણી ('બંધ')

ચેતવણી બંધ કરે છે.

$ ( ". ચેતવણી" ). ચેતવણી ( 'બંધ' )

ઘટનાઓ

બુટસ્ટ્રેપનો ચેતવણી વર્ગ ચેતવણી કાર્યક્ષમતામાં હૂક કરવા માટે કેટલીક ઘટનાઓને ઉજાગર કરે છે.

$ ( '#my-alert' ). બાંધો ( 'બંધ' , કાર્ય () {   
  // કંઈક કરવું…
})

ઉદાહરણ ઉપયોગો

બટનો સાથે વધુ કરો. કંટ્રોલ બટન જણાવે છે અથવા ટૂલબાર જેવા વધુ ઘટકો માટે બટનોના જૂથો બનાવો.

સ્ટેટફુલ

data-loading-text="Loading..."બટન પર લોડિંગ સ્થિતિનો ઉપયોગ કરવા માટે ઉમેરો .

<button type = "button" class = "btn btn-primary" data-loading-text = "લોડ કરી રહ્યું છે..." > લોડિંગ સ્થિતિ </button>   

સિંગલ ટૉગલ

data-toggle="button"એક બટન પર ટૉગલ કરવાનું સક્રિય કરવા માટે ઉમેરો .

<button type = "button" class = "btn btn-primary" data-toggle = "button" > સિંગલ ટૉગલ </button>   

ચેકબોક્સ

data-toggle="buttons-checkbox"બીટીએન-ગ્રુપ પર ચેકબોક્સ શૈલી ટોગલ કરવા માટે ઉમેરો .

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > ડાબું </button>  
  <button type = "button" class = "btn btn-primary" > મધ્ય </button>  
  <button type = "button" class = "btn btn-primary" > જમણે </button>  
</div>

રેડિયો

data-toggle="buttons-radio"btn-જૂથ પર રેડિયો શૈલી ટોગલ કરવા માટે ઉમેરો .

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > ડાબું </button>  
  <button type = "button" class = "btn btn-primary" > મધ્ય </button>  
  <button type = "button" class = "btn btn-primary" > જમણે </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>

વિશે

એકોર્ડિયન અને નેવિગેશન જેવા સંકુચિત ઘટકો માટે આધાર શૈલીઓ અને લવચીક આધાર મેળવો.

* સંક્રમણ પ્લગઇનને સમાવવા માટે જરૂરી છે.

ઉદાહરણ એકોર્ડિયન

સંકુચિત પ્લગઇનનો ઉપયોગ કરીને, અમે એક સરળ એકોર્ડિયન શૈલીનું વિજેટ બનાવ્યું છે:

<div class = "accordion" id = "accordion2" >  
  <div વર્ગ = "એકોર્ડિયન-ગ્રુપ" > 
    <div વર્ગ = "એકોર્ડિયન-હેડિંગ" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        સંકુચિત જૂથ આઇટમ #1
      </a>
    </div>
    <div id = "collapseOne" વર્ગ = "એકોર્ડિયન-બોડી કોલેપ્સ ઇન" >  
      <div વર્ગ = "એકોર્ડિયન-ઇનર" > 
        એનિમ પેરિયાતુર ક્લિચે...
      </div>
    </div>
  </div>
  <div વર્ગ = "એકોર્ડિયન-ગ્રુપ" > 
    <div વર્ગ = "એકોર્ડિયન-હેડિંગ" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        સંકુચિત જૂથ આઇટમ #2
      </a>
    </div>
    <div id = "collapseTwo" વર્ગ = "એકોર્ડિયન-બોડી કોલેપ્સ" >  
      <div વર્ગ = "એકોર્ડિયન-ઇનર" > 
        એનિમ પેરિયાતુર ક્લિચે...
      </div>
    </div>
  </div>
</div>
...

તમે એકોર્ડિયન માર્કઅપ વિના પણ પ્લગઇનનો ઉપયોગ કરી શકો છો. અન્ય ઘટકના વિસ્તરણ અને સંકુચિતને ટૉગલ કરવા માટે એક બટન બનાવો.

<બટન પ્રકાર = "બટન" વર્ગ =   "btn btn- danger" data-toggle = "collapse" data-target = "#demo" >  
  સરળ સંકુચિત
</ બટન>
 
<div id = "ડેમો"   વર્ગ = "સંકુચિત કરો" > … </div>

ઉપયોગ

ડેટા લક્ષણો દ્વારા

સંકુચિત તત્વનું નિયંત્રણ આપમેળે સોંપવા માટે ફક્ત ઘટકમાં ઉમેરો data-toggle="collapse"અને a . data-targetસંકુચિતતા data-targetલાગુ કરવા માટે વિશેષતા css પસંદગીકારને સ્વીકારે છે. collapseસંકુચિત તત્વમાં વર્ગ ઉમેરવાની ખાતરી કરો . જો તમે તેને ડિફોલ્ટ ખોલવા માંગતા હો, તો વધારાનો વર્ગ ઉમેરો in.

સંકુચિત નિયંત્રણમાં એકોર્ડિયન જેવા જૂથ સંચાલન ઉમેરવા માટે, ડેટા વિશેષતા ઉમેરો data-parent="#selector". આને ક્રિયામાં જોવા માટે ડેમોનો સંદર્ભ લો.

JavaScript દ્વારા

આની સાથે મેન્યુઅલી સક્ષમ કરો:

$ ( ". સંકુચિત કરો" ). પતન ()

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પનું નામ તેમાં ઉમેરોdata-, જેમ કે માં ઉમેરો data-parent="".

પદ્ધતિઓ

.કોલેપ્સ (વિકલ્પો)

સંકુચિત તત્વ તરીકે તમારી સામગ્રીને સક્રિય કરે છે. વૈકલ્પિક વિકલ્પો સ્વીકારે છે object.

$ ( '#myCollapsible' ). પતન ({
  ટૉગલ કરો : ખોટા 
})

.કોલેપ્સ ('ટૉગલ')

સંકુચિત તત્વને બતાવવામાં અથવા છુપાવવા માટે ટૉગલ કરે છે.

.કોલેપ્સ ('શો')

સંકુચિત તત્વ બતાવે છે.

.કોલેપ્સ ('છુપાવો')

સંકુચિત તત્વ છુપાવે છે.

ઘટનાઓ

બુટસ્ટ્રેપનો પતન વર્ગ સંકુચિત કાર્યક્ષમતામાં હૂક કરવા માટે કેટલીક ઘટનાઓને ઉજાગર કરે છે.

$ ( '#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.

Second Thumbnail label

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.

Third Thumbnail label

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" વર્ગ = "કેરોયુઝલ સ્લાઇડ" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" વર્ગ = "સક્રિય" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- કેરોયુઝલ વસ્તુઓ -->
  <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>

ઉપયોગ

ડેટા લક્ષણો દ્વારા

કેરોયુઝલની સ્થિતિને સરળતાથી નિયંત્રિત કરવા માટે ડેટા વિશેષતાઓનો ઉપયોગ કરો. data-slideકીવર્ડ્સ સ્વીકારે છે prevઅથવા next, જે સ્લાઇડની સ્થિતિને તેની વર્તમાન સ્થિતિની તુલનામાં બદલે છે. વૈકલ્પિક રીતે, data-slide-toકાચી સ્લાઇડ ઇન્ડેક્સને કેરોયુઝલમાં પસાર કરવા માટે ઉપયોગ કરો data-slide-to="2", જે સ્લાઇડની સ્થિતિને ચોક્કસ અનુક્રમણિકા પર કૂદી જાય છે0 .

JavaScript દ્વારા

કેરોયુઝલને મેન્યુઅલી આની સાથે કૉલ કરો:

$ ( '. કેરોયુઝલ' ). હિંડોળા ()

વિકલ્પો

ડેટા એટ્રિબ્યુટ્સ અથવા JavaScriptz દ્વારા વિકલ્પો પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-interval="".

પદ્ધતિઓ

.કેરોયુઝલ(વિકલ્પો)

વૈકલ્પિક વિકલ્પો સાથે કેરોયુઝલની શરૂઆત કરે છે objectઅને વસ્તુઓ દ્વારા સાયકલ ચલાવવાનું શરૂ કરે છે.

$ ( '. કેરોયુઝલ' ). હિંડોળા ({
  અંતરાલ : 2000 
})

.કેરોયુઝલ('સાયકલ')

કેરોયુઝલ આઇટમ દ્વારા ડાબેથી જમણે સાયકલ કરો.

.કેરોયુઝલ('થોભો')

કેરોયુઝલને વસ્તુઓ દ્વારા સાયકલ ચલાવવાથી રોકે છે.

.કેરોયુઝલ(નંબર)

કેરોયુઝલને ચોક્કસ ફ્રેમ પર સાયકલ કરે છે (0 આધારિત, એરેની જેમ).

.કેરોયુઝલ('પહેલાં')

પાછલી આઇટમ પર ચક્ર.

.કેરોયુઝલ('આગલું')

આગલી આઇટમ પર સાયકલ.

ઘટનાઓ

બુટસ્ટ્રેપનો કેરોયુઝલ વર્ગ કેરોયુઝલ કાર્યક્ષમતામાં હૂક કરવા માટે બે ઘટનાઓને ઉજાગર કરે છે.

ઉદાહરણ

કોઈપણ ફોર્મ ટેક્સ્ટ ઇનપુટ સાથે ઝડપથી ભવ્ય ટાઇપહેડ્સ બનાવવા માટે મૂળભૂત, સરળતાથી વિસ્તૃત પ્લગઇન.

<ઇનપુટ પ્રકાર = "ટેક્સ્ટ" ડેટા- પ્રોવિડ = "ટાઇપહેડ" >  

તમે autocomplete="off"ડિફોલ્ટ બ્રાઉઝર મેનુને બુટસ્ટ્રેપ ટાઇપહેડ ડ્રોપડાઉન પર દેખાતા અટકાવવા માટે સેટ કરવા માગો છો.

ઉપયોગ

ડેટા લક્ષણો દ્વારા

ઉપરના ઉદાહરણમાં બતાવ્યા પ્રમાણે ટાઇપહેડ કાર્યક્ષમતા સાથે તત્વની નોંધણી કરવા માટે ડેટા લક્ષણો ઉમેરો.

JavaScript દ્વારા

ટાઇપહેડને મેન્યુઅલી આની સાથે કૉલ કરો:

$ ( '.ટાઈપહેડ' ). ટાઈપહેડ ()

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-source="".

પદ્ધતિઓ

.typeahead(વિકલ્પો)

ટાઇપહેડ સાથે ઇનપુટ શરૂ કરે છે.

ઉદાહરણ

ડાબી બાજુનું સબનેવિગેશન એ એફિક્સ પ્લગઇનનો જીવંત ડેમો છે.

ઉપયોગ

ડેટા લક્ષણો દ્વારા

કોઈપણ તત્વમાં સરળતાથી affix વર્તણૂક ઉમેરવા data-spy="affix"માટે, તમે જે તત્વની જાસૂસી કરવા માંગો છો તેમાં ફક્ત ઉમેરો. પછી એલિમેન્ટના પિનિંગને ક્યારે ચાલુ અને બંધ કરવું તે નિર્ધારિત કરવા માટે ઑફસેટ્સનો ઉપયોગ કરો.

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

JavaScript દ્વારા

JavaScript દ્વારા affix પ્લગઇનને કૉલ કરો:

$ ( '#navbar' ). જોડવું ()

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-offset-top="200".