મોડલ્સ વિશે

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

સ્થિર ઉદાહરણ

નીચે સ્ટેટિકલી રેન્ડર કરેલ મોડલ છે.

લાઈવ ડેમો

નીચેના બટન પર ક્લિક કરીને જાવાસ્ક્રિપ્ટ દ્વારા મોડલને ટૉગલ કરો. તે પૃષ્ઠની ટોચ પરથી નીચે સ્લાઇડ થશે અને ઝાંખું થઈ જશે.

બુટસ્ટ્રેપ-મોડલનો ઉપયોગ કરવો

જાવાસ્ક્રિપ્ટ દ્વારા મોડલને કૉલ કરો:

$ ( '#myModal' ). મોડલ ( વિકલ્પો )

વિકલ્પો

માર્કઅપ

તમે જાવાસ્ક્રિપ્ટની એક લીટી લખ્યા વિના સરળતાથી તમારા પૃષ્ઠ પર મોડલ્સને સક્રિય કરી શકો છો. ફક્ત એક અથવા જે મોડલ એલિમેન્ટ આઈડીને અનુરૂપ હોય data-toggle="modal"તેવા નિયંત્રક તત્વ પર સેટ કરો અને જ્યારે ક્લિક કરવામાં આવે, ત્યારે તે તમારું મોડલ લોન્ચ કરશે.data-target="#foo"href="#foo"

ઉપરાંત, તમારા મોડલ ઉદાહરણમાં વિકલ્પો ઉમેરવા માટે, ફક્ત તેમને નિયંત્રણ તત્વ અથવા મોડલ માર્કઅપ પર વધારાના ડેટા લક્ષણો તરીકે શામેલ કરો.

<a class = "btn" data-toggle = "modal" href = "#myModal" > મોડલ લોંચ કરો </a>    

<div class = "modal " id = "myModal" >  
  <div વર્ગ = "મોડલ-હેડર" > 
    <બટન વર્ગ = "બંધ" ડેટા-ડિસમિસ = "મોડલ" > × </ બટન>  
    <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>

પદ્ધતિઓ

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

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

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

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

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

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

મોડલ('શો')

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

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

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

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

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

ઘટનાઓ

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

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

ડ્રોપડાઉન વિશે

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

ઉદાહરણો

ડ્રોપડાઉન ચકાસવા માટે navbar અને નીચેની ગોળીઓમાં ડ્રોપડાઉન એનએવી લિંક્સ પર ક્લિક કરો.

• નિયમિત લિંક
• ડ્રોપડાઉન
  • 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 નો ઉપયોગ કરીને

જાવાસ્ક્રિપ્ટ દ્વારા ડ્રોપડાઉનને કૉલ કરો:

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

માર્કઅપ

કોઈપણ તત્વમાં ઝડપથી ડ્રોપડાઉન કાર્યક્ષમતા ઉમેરવા માટે ફક્ત ઉમેરો data-toggle="dropdown"અને કોઈપણ માન્ય બુટસ્ટ્રેપ ડ્રોપડાઉન આપમેળે સક્રિય થઈ જશે.

<ul class = "nav nav-pills" > 
  <li વર્ગ = "સક્રિય" ><a href = "#" > નિયમિત લિંક </a></li>  
  <li class = "ડ્રોપડાઉન" id = "મેનુ1" >  
    <a class = "dropdown-toggle" data-toggle = "ડ્રોપડાઉન" href = "#menu1" >   
      ડ્રોપડાઉન
      <b class = "caret" ></b> 
    </a>
    <ul class = "ડ્રોપડાઉન-મેનુ" > 
      <li><a href = "#" > ક્રિયા </a></li> 
      <li><a href = "#" > બીજી ક્રિયા </a></li> 
      <li><a href = "#" > અહીં બીજું કંઈક </a></li> 
      <li class = "વિભાજક" ></li> 
      <li><a href = "#" > અલગ કરેલ લિંક </a></li> 
    </ul>
  </li>
  ...
</ul>

URL ને અકબંધ રાખવા માટે, data-targetની જગ્યાએ વિશેષતાનો ઉપયોગ કરો href="#".

<ul class = "nav nav-pills" > 
  <li class = "ડ્રોપડાઉન" > 
    <a વર્ગ = "ડ્રોપડાઉન-ટોગલ" ડેટા-ટોગલ = "ડ્રોપડાઉન" ડેટા-ટાર્ગેટ = "#" href = "path/to/page.html" >    
      ડ્રોપડાઉન
      <b class = "caret" ></b> 
    </a>
    <ul class = "ડ્રોપડાઉન-મેનુ" > 
      ...
    </ul>
  </li>
</ul>

પદ્ધતિઓ

$().ડ્રોપડાઉન()

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

ScrollSpy પ્લગઇન સ્ક્રોલ સ્થિતિના આધારે નેવી લક્ષ્યોને આપમેળે અપડેટ કરવા માટે છે.

scrollspy સાથે ઉદાહરણ navbar

નીચેના વિસ્તારને સ્ક્રોલ કરો અને નેવિગેશન અપડેટ જુઓ. ડ્રોપડાઉન પેટા વસ્તુઓ તેમજ હાઇલાઇટ કરવામાં આવશે. તેને અજમાવી જુઓ!

bootstrap-scrollspy.js નો ઉપયોગ કરીને

જાવાસ્ક્રિપ્ટ દ્વારા સ્ક્રોલસ્પીને કૉલ કરો:

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

માર્કઅપ

તમારા ટોપબાર નેવિગેશનમાં સરળતાથી સ્ક્રોલસ્પી વર્તણૂક ઉમેરવા data-spy="scroll"માટે, તમે જે તત્વની જાસૂસી કરવા માંગો છો તેમાં ફક્ત ઉમેરો (મોટાભાગે આ શરીર હશે).

<body data-spy = "સ્ક્રોલ" > ... </body>  

પદ્ધતિઓ

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

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

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

વિકલ્પો

ઘટનાઓ

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

ઉદાહરણ ટૅબ્સ

છુપાયેલા પેન વચ્ચે ટૉગલ કરવા માટે નીચેની ટૅબ પર ક્લિક કરો, ડ્રોપડાઉન મેનૂ દ્વારા પણ.

• ઘર
• પ્રોફાઇલ
• ડ્રોપડાઉન
  • @fat
  • @mdo

bootstrap-tab.js નો ઉપયોગ કરવો

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

$ ( '#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 અને સ્થાનિક શીર્ષક સ્ટોરેજ માટે ડેટા-એટ્રીબ્યુટ્સનો ઉપયોગ કરે છે.

ટૂલટિપ્સના ઉપયોગનું ઉદાહરણ

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

bootstrap-tooltip.js નો ઉપયોગ કરવો

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

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

વિકલ્પો

માર્કઅપ

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

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

પદ્ધતિઓ

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

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

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

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

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

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

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

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

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

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

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

popovers વિશે

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

* સમાવવા માટે ટૂલટીપની જરૂર છે

ઉદાહરણ હોવર પોપઓવર

પોપઓવરને ટ્રિગર કરવા માટે બટન પર હોવર કરો.

bootstrap-popover.js નો ઉપયોગ કરવો

જાવાસ્ક્રિપ્ટ દ્વારા પોપોવર્સ સક્ષમ કરો:

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

વિકલ્પો

માર્કઅપ

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

પદ્ધતિઓ

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

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

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

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

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

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

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

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

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

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

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

ચેતવણીઓ વિશે

ચેતવણી પ્લગઇન એ ચેતવણીઓમાં નજીકની કાર્યક્ષમતા ઉમેરવા માટે એક નાનો વર્ગ છે.

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

ચેતવણીઓ પ્લગઇન નિયમિત ચેતવણી સંદેશાઓ અને અવરોધિત સંદેશાઓ પર કામ કરે છે.

bootstrap-alert.js નો ઉપયોગ કરવો

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

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

માર્કઅપ

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

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

પદ્ધતિઓ

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

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

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

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

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

ઘટનાઓ

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

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

વિશે

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

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

સ્ટેટ્સ અને ટૉગલ માટે બટન્સ પ્લગઇનનો ઉપયોગ કરો.

bootstrap-button.js નો ઉપયોગ કરવો

જાવાસ્ક્રિપ્ટ દ્વારા બટનોને સક્ષમ કરો:

$ ( '.nav-tabs' ). બટન ()

માર્કઅપ

ડેટા લક્ષણો બટન પ્લગઇન માટે અભિન્ન છે. વિવિધ માર્કઅપ પ્રકારો માટે નીચે આપેલ ઉદાહરણ કોડ તપાસો.

<!-- એક બટન પર ટોગલીંગ સક્રિય કરવા માટે data-toggle="button" ઉમેરો -->
<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> 
  <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> 
  <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>

વિશે

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

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

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

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

bootstrap-collapse.js નો ઉપયોગ કરવો

જાવાસ્ક્રિપ્ટ દ્વારા સક્ષમ કરો:

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

વિકલ્પો

માર્કઅપ

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

<બટન વર્ગ = "btn btn-ડેન્જર" ડેટા-ટૉગલ = "કોલેપ્સ " ડેટા-ટાર્ગેટ = "#ડેમો" >   
  સરળ સંકુચિત
</ બટન>
 
<div id = "ડેમો" વર્ગ = "સંકુચિત કરો" > … </div>  

પદ્ધતિઓ

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

સંકુચિત તત્વ તરીકે તમારી સામગ્રીને સક્રિય કરે છે. વૈકલ્પિક વિકલ્પો સ્વીકારે છે 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.

‹ ›

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>

પદ્ધતિઓ

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

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

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

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

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

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

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

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

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

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

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

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

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

ઘટનાઓ

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

વિશે

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

ઉદાહરણ

ટાઇપહેડ પરિણામો બતાવવા માટે નીચેના ફીલ્ડમાં ટાઇપ કરવાનું શરૂ કરો.

bootstrap-typeahead.js નો ઉપયોગ કરવો

જાવાસ્ક્રિપ્ટ દ્વારા ટાઇપહેડને કૉલ કરો:

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

વિકલ્પો

માર્કઅપ

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

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

પદ્ધતિઓ

.typeahead(વિકલ્પો)

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