જાવાસ્ક્રિપ્ટ
ડઝનથી વધુ કસ્ટમ jQuery પ્લગઈનો સાથે બુટસ્ટ્રેપના ઘટકોને જીવંત બનાવો. તે બધાને સરળતાથી અથવા એક પછી એક શામેલ કરો.
ડઝનથી વધુ કસ્ટમ jQuery પ્લગઈનો સાથે બુટસ્ટ્રેપના ઘટકોને જીવંત બનાવો. તે બધાને સરળતાથી અથવા એક પછી એક શામેલ કરો.
પ્લગઈનો વ્યક્તિગત રીતે (બૂટસ્ટ્રેપની વ્યક્તિગત *.js
ફાઈલોનો ઉપયોગ કરીને) અથવા એક જ સમયે ( bootstrap.js
અથવા મિનિફાઈડનો ઉપયોગ કરીને bootstrap.min.js
) સમાવેશ કરી શકાય છે.
બંને bootstrap.js
અને bootstrap.min.js
એક જ ફાઈલમાં બધા પ્લગઈનો સમાવે છે. ફક્ત એક જ શામેલ કરો.
કેટલાક પ્લગઇન્સ અને CSS ઘટકો અન્ય પ્લગઇન્સ પર આધાર રાખે છે. જો તમે વ્યક્તિગત રીતે પ્લગઇન્સનો સમાવેશ કરો છો, તો દસ્તાવેજમાં આ નિર્ભરતાઓ તપાસવાનું સુનિશ્ચિત કરો. એ પણ નોંધ કરો કે બધા પ્લગઇન્સ jQuery પર આધાર રાખે છે (આનો અર્થ એ છે કે પ્લગઇન ફાઇલો પહેલાં jQuery શામેલ હોવી આવશ્યક છે ). jQuery ના કયા વર્ઝન સપોર્ટેડ છે તે જોવા માટે અમારી સલાહ લો .bower.json
તમે JavaScript ની એક પણ લાઇન લખ્યા વિના માર્કઅપ API દ્વારા તમામ બુટસ્ટ્રેપ પ્લગિન્સનો ઉપયોગ કરી શકો છો. આ બુટસ્ટ્રેપનું ફર્સ્ટ-ક્લાસ API છે અને પ્લગઇનનો ઉપયોગ કરતી વખતે તમારી પ્રથમ વિચારણા હોવી જોઈએ.
તેણે કહ્યું, કેટલીક પરિસ્થિતિઓમાં આ કાર્યક્ષમતાને બંધ કરવાનું ઇચ્છનીય હોઈ શકે છે. તેથી, અમે સાથે સાથે દસ્તાવેજ નેમસ્પેસ પર તમામ ઇવેન્ટ્સને અનબાઈન્ડ કરીને ડેટા એટ્રિબ્યુટ API ને અક્ષમ કરવાની ક્ષમતા પણ પ્રદાન કરીએ છીએ data-api
. આ આના જેવું દેખાય છે:
વૈકલ્પિક રીતે, ચોક્કસ પ્લગઇનને લક્ષ્ય બનાવવા માટે, ફક્ત પ્લગઇનનું નામ નેમસ્પેસ તરીકે ડેટા-એપીઆઈ નેમસ્પેસની સાથે આ રીતે શામેલ કરો:
એક જ તત્વ પર બહુવિધ પ્લગિન્સમાંથી ડેટા વિશેષતાઓનો ઉપયોગ કરશો નહીં. ઉદાહરણ તરીકે, બટનમાં ટુલટીપ અને મોડલને ટૉગલ કરી શકાતું નથી. આ પરિપૂર્ણ કરવા માટે, રેપિંગ તત્વનો ઉપયોગ કરો.
અમે એમ પણ માનીએ છીએ કે તમે JavaScript API દ્વારા તમામ બુટસ્ટ્રેપ પ્લગિન્સનો સંપૂર્ણ ઉપયોગ કરી શકશો. તમામ સાર્વજનિક API એકલ, સાંકળવા યોગ્ય પદ્ધતિઓ છે અને તેના પર કાર્ય કરેલ સંગ્રહ પરત કરે છે.
બધી પદ્ધતિઓએ વૈકલ્પિક વિકલ્પો ઑબ્જેક્ટ સ્વીકારવી જોઈએ, એક સ્ટ્રિંગ જે કોઈ ચોક્કસ પદ્ધતિને લક્ષ્ય બનાવે છે, અથવા કંઈ નથી (જે ડિફૉલ્ટ વર્તન સાથે પ્લગઇન શરૂ કરે છે):
Constructor
દરેક પ્લગઇન તેના કાચા કન્સ્ટ્રક્ટરને પ્રોપર્ટી પર પણ એક્સપોઝ કરે છે : $.fn.popover.Constructor
. જો તમે કોઈ ચોક્કસ પ્લગઇન દાખલા મેળવવા માંગતા હો, તો તેને એક ઘટકમાંથી સીધા જ પુનઃપ્રાપ્ત કરો: $('[rel="popover"]').data('popover')
.
Constructor.DEFAULTS
તમે પ્લગઇનના ઑબ્જેક્ટમાં ફેરફાર કરીને પ્લગઇન માટે ડિફૉલ્ટ સેટિંગ્સ બદલી શકો છો :
કેટલીકવાર અન્ય UI ફ્રેમવર્ક સાથે બુટસ્ટ્રેપ પ્લગિન્સનો ઉપયોગ કરવો જરૂરી છે. આ સંજોગોમાં, નેમસ્પેસની અથડામણ અવારનવાર થઈ શકે છે. .noConflict
જો આવું થાય, તો તમે જે પ્લગઇનનું મૂલ્ય પાછું લાવવા માંગો છો તેના પર કૉલ કરી શકો છો.
બુટસ્ટ્રેપ મોટાભાગના પ્લગિન્સની અનન્ય ક્રિયાઓ માટે કસ્ટમ ઇવેન્ટ્સ પ્રદાન કરે છે. સામાન્ય રીતે, આ અનંત અને ભૂતકાળના પાર્ટિસિપલ સ્વરૂપમાં આવે છે - જ્યાં show
ઘટનાની શરૂઆતમાં અનંત (ઉદા. ) ટ્રિગર થાય છે, અને તેના ભૂતકાળના પાર્ટિસિપલ ફોર્મ (ઉદા. shown
) ક્રિયા પૂર્ણ થવા પર ટ્રિગર થાય છે.
3.0.0 મુજબ, બધી બુટસ્ટ્રેપ ઇવેન્ટ નેમસ્પેસમાં છે.
બધી અનંત ઘટનાઓ preventDefault
કાર્યક્ષમતા પ્રદાન કરે છે. આ ક્રિયા શરૂ થાય તે પહેલાં તેના અમલને રોકવાની ક્ષમતા પૂરી પાડે છે.
VERSION
દરેક બુટસ્ટ્રેપના jQuery પ્લગઈન્સનું વર્ઝન પ્લગઈનના કન્સ્ટ્રક્ટરની પ્રોપર્ટી દ્વારા એક્સેસ કરી શકાય છે . ઉદાહરણ તરીકે, ટૂલટિપ પ્લગઇન માટે:
જ્યારે JavaScript અક્ષમ હોય ત્યારે બુટસ્ટ્રેપના પ્લગઈન્સ ખાસ કરીને આકર્ષક રીતે પાછા પડતા નથી. જો તમે આ કિસ્સામાં વપરાશકર્તાના અનુભવની કાળજી લેતા હો, તો તમારા વપરાશકર્તાઓને <noscript>
પરિસ્થિતિ (અને કેવી રીતે JavaScript ફરીથી સક્ષમ કરવું) સમજાવવા અને/અથવા તમારા પોતાના કસ્ટમ ફૉલબેક્સ ઉમેરવા માટે ઉપયોગ કરો.
બુટસ્ટ્રેપ પ્રોટોટાઇપ અથવા jQuery UI જેવી તૃતીય-પક્ષ JavaScript લાઇબ્રેરીઓને સત્તાવાર રીતે સમર્થન આપતું નથી . .noConflict
ઇવેન્ટ્સ અને નામ સ્થાન હોવા છતાં , ત્યાં સુસંગતતા સમસ્યાઓ હોઈ શકે છે જેને તમારે તમારા પોતાના પર ઠીક કરવાની જરૂર છે.
સરળ સંક્રમણ પ્રભાવો માટે, transition.js
અન્ય JS ફાઇલોની સાથે એકવાર શામેલ કરો. જો તમે કમ્પાઈલ કરેલ (અથવા મિનિફાઈડ) નો ઉપયોગ કરી રહ્યાં છો bootstrap.js
, તો આને સામેલ કરવાની કોઈ જરૂર નથી—તે પહેલેથી જ છે.
Transition.js એ ઇવેન્ટ્સ માટે મૂળભૂત સહાયક transitionEnd
તેમજ CSS ટ્રાન્ઝિશન ઇમ્યુલેટર છે. તેનો ઉપયોગ અન્ય પ્લગઈનો દ્વારા CSS ટ્રાન્ઝિશન સપોર્ટની તપાસ કરવા અને હેંગિંગ ટ્રાન્ઝિશનને પકડવા માટે થાય છે.
નીચેના JavaScript સ્નિપેટનો ઉપયોગ કરીને સંક્રમણોને વૈશ્વિક સ્તરે અક્ષમ કરી શકાય છે, જે લોડ થયા પછી transition.js
(અથવા bootstrap.js
, bootstrap.min.js
કેસ હોઈ શકે છે) આવવું જોઈએ:
મોડલ્સ સુવ્યવસ્થિત છે, પરંતુ લવચીક છે, ન્યૂનતમ જરૂરી કાર્યક્ષમતા અને સ્માર્ટ ડિફોલ્ટ્સ સાથે સંવાદ સંકેત આપે છે.
જ્યારે બીજું દૃશ્યમાન હોય ત્યારે મોડલ ન ખોલવાની ખાતરી કરો. એક સમયે એક કરતાં વધુ મોડલ બતાવવા માટે કસ્ટમ કોડની જરૂર છે.
મોડલના દેખાવ અને/અથવા કાર્યક્ષમતાને અસર કરતા અન્ય ઘટકોને ટાળવા માટે હંમેશા તમારા દસ્તાવેજમાં મોડલના HTML કોડને ટોચના સ્તરની સ્થિતિમાં મૂકવાનો પ્રયાસ કરો.
મોબાઇલ ઉપકરણો પર મોડલ્સનો ઉપયોગ કરવા અંગે કેટલીક ચેતવણીઓ છે. વિગતો માટે અમારા બ્રાઉઝર સપોર્ટ દસ્તાવેજો જુઓ .
HTML5 તેના અર્થશાસ્ત્રને કેવી રીતે વ્યાખ્યાયિત કરે છે તેના કારણે, autofocus
બુટસ્ટ્રેપ મોડલમાં HTML વિશેષતાની કોઈ અસર થતી નથી. સમાન અસર પ્રાપ્ત કરવા માટે, કેટલીક કસ્ટમ JavaScript નો ઉપયોગ કરો:
હેડર, બોડી અને ફૂટરમાં ક્રિયાઓના સેટ સાથે રેન્ડર કરેલ મોડલ.
નીચેના બટનને ક્લિક કરીને JavaScript દ્વારા મોડલને ટૉગલ કરો. તે પૃષ્ઠની ટોચ પરથી નીચે સ્લાઇડ થશે અને ઝાંખું થઈ જશે.
મોડલ શીર્ષકનો સંદર્ભ આપતાં, માટે અને પોતે role="dialog"
ઉમેરવાની ખાતરી કરો .aria-labelledby="..."
.modal
role="document"
.modal-dialog
aria-describedby
વધુમાં, તમે ચાલુ સાથે તમારા મોડલ સંવાદનું વર્ણન આપી શકો છો .modal
.
મોડલમાં YouTube વિડિઓઝને એમ્બેડ કરવા માટે પ્લેબેક અને વધુને આપમેળે બંધ કરવા માટે વધારાની JavaScript જરૂરી છે જે બુટસ્ટ્રેપમાં નથી. વધુ માહિતી માટે આ મદદરૂપ સ્ટેક ઓવરફ્લો પોસ્ટ જુઓ .
મોડલ્સમાં બે વૈકલ્પિક કદ હોય છે, જે મોડિફાયર વર્ગો દ્વારા ઉપલબ્ધ છે .modal-dialog
.
જોવા માટે ઝાંખા પડવાને બદલે ખાલી દેખાતા મોડલ્સ માટે, .fade
તમારા મોડલ માર્કઅપમાંથી વર્ગને દૂર કરો.
મોડલની અંદર બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમનો લાભ લેવા માટે, ફક્ત .row
s નેસ્ટ કરો .modal-body
અને પછી સામાન્ય ગ્રીડ સિસ્ટમ વર્ગોનો ઉપયોગ કરો.
થોડી અલગ સામગ્રીઓ સાથે, બધા સમાન મોડલને ટ્રિગર કરતા બટનોનો સમૂહ છે? કયા બટન પર ક્લિક કરવામાં આવ્યું હતું તેના આધારે મોડલની સામગ્રીમાં ફેરફાર કરવા માટે (સંભવતઃ jQuery દ્વારા ) HTML લક્ષણોનો ઉપયોગ event.relatedTarget
કરો . પર વિગતો માટે મોડલ ઇવેન્ટ્સ ડોક્સ જુઓ ,data-*
relatedTarget
મોડલ પ્લગઇન ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા માંગ પર તમારી છુપાયેલી સામગ્રીને ટૉગલ કરે છે. તે ડિફૉલ્ટ સ્ક્રોલિંગ વર્તણૂકને ઓવરરાઇડ .modal-open
કરવા માટે પણ ઉમેરે છે અને મોડલની બહાર ક્લિક કરતી વખતે બતાવેલ મોડલ્સને કાઢી નાખવા માટે ક્લિક વિસ્તાર પ્રદાન કરવા માટે જનરેટ કરે છે.<body>
.modal-backdrop
JavaScript લખ્યા વિના મોડલ સક્રિય કરો. કંટ્રોલર એલિમેન્ટ પર સેટ કરો data-toggle="modal"
, જેમ કે બટન, સાથે data-target="#foo"
અથવા href="#foo"
ટૉગલ કરવા માટે ચોક્કસ મોડલને લક્ષ્ય બનાવવા માટે.
myModal
JavaScript ની એક લીટી સાથે id સાથે મોડલને કૉલ કરો :
વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-
, જેમ કે માં ઉમેરો data-backdrop=""
.
નામ | પ્રકાર | મૂળભૂત | વર્ણન |
---|---|---|---|
પૃષ્ઠભૂમિ | બુલિયન અથવા શબ્દમાળા'static' |
સાચું | મોડલ-બેકડ્રોપ ઘટકનો સમાવેશ થાય છે. વૈકલ્પિક રીતે, static બેકડ્રોપ માટે સ્પષ્ટ કરો કે જે ક્લિક પર મોડલ બંધ કરતું નથી. |
કીબોર્ડ | બુલિયન | સાચું | જ્યારે એસ્કેપ કી દબાવવામાં આવે ત્યારે મોડલ બંધ કરે છે |
બતાવો | બુલિયન | સાચું | જ્યારે પ્રારંભ થાય ત્યારે મોડલ બતાવે છે. |
દૂરસ્થ | માર્ગ | ખોટું | આ વિકલ્પ v3.3.0 થી નાપસંદ છે અને v4 માં દૂર કરવામાં આવ્યો છે. અમે તેને બદલે ક્લાયંટ-સાઇડ ટેમ્પ્લેટિંગ અથવા ડેટા બાઈન્ડિંગ ફ્રેમવર્કનો ઉપયોગ કરવાની અથવા jQuery.load જાતે કૉલ કરવાની ભલામણ કરીએ છીએ. જો રિમોટ URL આપવામાં આવે છે, તો સામગ્રીને jQuery ની પદ્ધતિ દ્વારા એકવાર લોડ કરવામાં આવશે અને div |
.modal(options)
તમારી સામગ્રીને મોડલ તરીકે સક્રિય કરે છે. વૈકલ્પિક વિકલ્પો સ્વીકારે છે object
.
.modal('toggle')
મૉડલને મેન્યુઅલી ટૉગલ કરે છે. મોડલ વાસ્તવમાં બતાવવામાં આવે અથવા છુપાવવામાં આવે તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે કે ઘટના shown.bs.modal
અથવા hidden.bs.modal
ઘટના બને તે પહેલાં).
.modal('show')
મેન્યુઅલી મોડલ ખોલે છે. મોડલ વાસ્તવમાં બતાવવામાં આવે તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે કે shown.bs.modal
ઘટના બને તે પહેલાં).
.modal('hide')
મેન્યુઅલી મોડલ છુપાવે છે. મોડલ વાસ્તવમાં છુપાયેલું હોય તે પહેલાં (એટલે કે hidden.bs.modal
ઘટના બને તે પહેલાં) કોલર પાસે પરત આવે છે.
.modal('handleUpdate')
જો સ્ક્રોલબાર દેખાય તો તેનો સામનો કરવા માટે મોડલની સ્થિતિને ફરીથી ગોઠવે છે, જે મોડલને ડાબી તરફ જમ્પ કરશે.
જ્યારે મોડલ ખુલ્લું હોય ત્યારે તેની ઊંચાઈ બદલાય ત્યારે જ જરૂરી છે.
બુટસ્ટ્રેપનો મોડલ ક્લાસ મોડલ કાર્યક્ષમતામાં જોડાવા માટે કેટલીક ઘટનાઓને ઉજાગર કરે છે.
તમામ મોડલ ઇવેન્ટ્સ મોડલ પર જ ફાયર કરવામાં આવે છે (એટલે કે <div class="modal">
).
ઇવેન્ટનો પ્રકાર | વર્ણન |
---|---|
show.bs.modal | show જ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે. જો ક્લિકને કારણે થયું હોય, તો ક્લિક કરેલ ઘટક relatedTarget ઇવેન્ટની મિલકત તરીકે ઉપલબ્ધ છે. |
બતાવેલ.bs.modal | જ્યારે મોડલ વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). જો ક્લિકને કારણે થયું હોય, તો ક્લિક કરેલ ઘટક relatedTarget ઇવેન્ટની મિલકત તરીકે ઉપલબ્ધ છે. |
hide.bs.modal | hide જ્યારે ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે. |
hidden.bs.modal | જ્યારે મોડલ વપરાશકર્તાથી છુપાવવાનું સમાપ્ત કરે છે ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). |
loaded.bs.modal | remote જ્યારે મોડલ વિકલ્પનો ઉપયોગ કરીને સામગ્રી લોડ કરે છે ત્યારે આ ઇવેન્ટને બરતરફ કરવામાં આવે છે . |
નવબાર, ટૅબ્સ અને ગોળીઓ સહિત આ સરળ પ્લગઇન વડે લગભગ કોઈપણ વસ્તુમાં ડ્રોપડાઉન મેનૂ ઉમેરો.
ડેટા એટ્રિબ્યુટ્સ અથવા JavaScript દ્વારા, ડ્રોપડાઉન પ્લગઇન .open
પિતૃ સૂચિ આઇટમ પર વર્ગને ટૉગલ કરીને છુપાયેલ સામગ્રી (ડ્રોપડાઉન મેનૂ) ને ટૉગલ કરે છે.
મોબાઇલ ઉપકરણો પર, ડ્રોપડાઉન ખોલવાથી .dropdown-backdrop
મેનૂની બહાર ટેપ કરતી વખતે ડ્રોપડાઉન મેનૂ બંધ કરવા માટે ટેપ વિસ્તાર તરીકે ઉમેરાય છે, યોગ્ય iOS સપોર્ટ માટેની આવશ્યકતા. આનો અર્થ એ છે કે ખુલ્લા ડ્રોપડાઉન મેનૂમાંથી અલગ ડ્રોપડાઉન મેનૂ પર સ્વિચ કરવા માટે મોબાઇલ પર વધારાના ટેપની જરૂર છે.
નોંધ: data-toggle="dropdown"
એટ્રિબ્યુટ એપ્લીકેશન લેવલ પર ડ્રોપડાઉન મેનુ બંધ કરવા માટે આધાર રાખે છે, તેથી તેનો હંમેશા ઉપયોગ કરવો એ સારો વિચાર છે.
data-toggle="dropdown"
ડ્રોપડાઉનને ટૉગલ કરવા માટે લિંક અથવા બટનમાં ઉમેરો .
લિંક બટનો સાથે URL ને અકબંધ રાખવા માટે, data-target
ની જગ્યાએ વિશેષતાનો ઉપયોગ કરો href="#"
.
JavaScript દ્વારા ડ્રોપડાઉનને કૉલ કરો:
data-toggle="dropdown"
હજુ પણ જરૂરી છેભલે તમે JavaScript દ્વારા તમારા ડ્રોપડાઉનને કૉલ કરો અથવા તેના બદલે data-api નો ઉપયોગ કરો, data-toggle="dropdown"
ડ્રોપડાઉનના ટ્રિગર તત્વ પર હંમેશા હાજર રહેવું જરૂરી છે.
કોઈ નહિ
$().dropdown('toggle')
આપેલ નેવબાર અથવા ટેબ કરેલ નેવિગેશનના ડ્રોપડાઉન મેનૂને ટોગલ કરે છે.
તમામ ડ્રોપડાઉન ઇવેન્ટ્સ .dropdown-menu
ના પેરેન્ટ એલિમેન્ટ પર ફાયર કરવામાં આવે છે.
તમામ ડ્રોપડાઉન ઇવેન્ટ્સમાં એક relatedTarget
પ્રોપર્ટી હોય છે, જેનું મૂલ્ય ટૉગલિંગ એન્કર એલિમેન્ટ છે.
ઇવેન્ટનો પ્રકાર | વર્ણન |
---|---|
show.bs.ડ્રોપડાઉન | જ્યારે શો ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે. |
બતાવેલ.bs.ડ્રોપડાઉન | જ્યારે ડ્રોપડાઉન વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). |
hide.bs.ડ્રોપડાઉન | જ્યારે હાઇડ ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે. |
hidden.bs.dropdown | જ્યારે ડ્રોપડાઉન વપરાશકર્તાથી છુપાવવાનું સમાપ્ત થઈ જાય ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). |
ScrollSpy પ્લગઇન સ્ક્રોલ સ્થિતિના આધારે નેવી લક્ષ્યોને આપમેળે અપડેટ કરવા માટે છે. નેવબારની નીચેનો વિસ્તાર સ્ક્રોલ કરો અને સક્રિય વર્ગમાં ફેરફાર જુઓ. ડ્રોપડાઉન પેટા વસ્તુઓ તેમજ હાઇલાઇટ કરવામાં આવશે.
એડ લેગિંગ્સ કીટાર, બ્રંચ આઈડી આર્ટ પાર્ટી ડોલર લેબર. Pitchfork yr enim lo-fi પહેલાં તેઓ qui વેચાઈ ગયા. Tumblr ફાર્મ-ટુ-ટેબલ સાયકલ અધિકારો ગમે તે હોય. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. કોસ્બી સ્વેટર લોમો જીન શોર્ટ્સ, વિલિયમ્સબર્ગ હૂડી મિનિમ ક્વિ તમે કદાચ તેમના વિશે સાંભળ્યું નથી અને કાર્ડિગન ટ્રસ્ટ ફંડ કુલ્પા બાયોડીઝલ વેસ એન્ડરસન એસ્થેટિક. નિહિલ ટેટૂ એક્યુસેમસ, ક્રેડ ઈરોની બાયોડીઝલ કેફીયેહ કારીગર ઉલમકો પરિણામ.
વેનિઅમ માર્ફા મૂછો સ્કેટબોર્ડ, એડિપિસિસિંગ ફ્યુગિયાટ વેલીટ પિચફોર્ક દાઢી. ફ્રીગન બીયર્ડ એલીક્વા કપિડેટેટ મેક્સવીની વેરો. ક્યુપિડેટટ ફોર લોકો નિસી, ઇએ હેલ્વેટિકા નુલ્લા કાર્લેસ. ટેટૂ કોસ્બી સ્વેટર ફૂડ ટ્રક, mcsweeney's quis non freegan vinyl. લો-ફાઇ વેસ એન્ડરસન +1 સાર્ટોરિયલ. કાર્લેસ નોન એસ્થેટિક એક્સરસિટેશન ક્વિસ નમ્રતા. બ્રુકલિન એડિપીસીસિંગ ક્રાફ્ટ બીયર વાઇસ કીટાર ડેઝરન્ટ.
Occaecat commodo aliqua delectus. Fap ક્રાફ્ટ બીયર ડેઝરન્ટ સ્કેટબોર્ડ ea. લોમો સાયકલ રાઇટ્સ એડિપીસીસિંગ બન્હ મી, વેલીટ ઇએ સન નેક્સ્ટ લેવલ લોકાવોર સિંગલ-ઓરિજિન કોફી ઇન મેગ્ના વેનિઆમ. હાઇ લાઇફ આઇડી વિનાઇલ, ઇકો પાર્ક કન્ઝક્વેટ ક્વિસ એલિક્વિપ બન્હ મી પિચફોર્ક. વેરો VHS એ એડિપિસિસિંગ છે. DIY ન્યૂનતમ મેસેન્જર બેગ સાથે જોડો. Cred ex in, ટકાઉ ડેલેકટસ કોન્સેક્ટેટુર ફેની પેક આઇફોન.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
કીટાર ટ્વી બ્લોગ, કુલ્પા મેસેન્જર બેગ માર્ફા ગમે તે ડિલેકટસ ફૂડ ટ્રક. Sapiente synth id ધારણા. Locavore sed helvetica cliche irony, thundercats તમે કદાચ તેમના વિશે સાંભળ્યું ન હોય પરિણામે હૂડી ગ્લુટેન-ફ્રી lo-fi fap aliquip. તેઓ વેચાઈ જાય તે પહેલાં લેબોર એલિટ પ્લેસિટ, ટેરી રિચર્ડસન પ્રોડેન્ટ બ્રંચ નેસિયન્ટ ક્વિસ કોસ્બી સ્વેટર પેરિયાતુર કેફિયેહ યુટ હેલ્વેટિકા આર્ટિસન. કાર્ડિગન ક્રાફ્ટ બીયર સીટન રેડીમેડ વેલીટ. VHS ચેમ્બ્રે લેબરિસ ટેમ્પર વેનિઅમ. એનિમ મોલીટ મિનિમ કોમોડો ઉલમકો થંડરકેટ્સ.
Navbar લિંક્સમાં ઉકેલી શકાય તેવા id લક્ષ્યો હોવા આવશ્યક છે. ઉદાહરણ તરીકે, <a href="#home">home</a>
DOM માં કંઈક અનુરૂપ હોવું જોઈએ જેમ કે <div id="home"></div>
.
:visible
લક્ષ્ય તત્વો અવગણવામાં:visible
jQuery અનુસાર ન હોય તેવા લક્ષ્ય તત્વોને અવગણવામાં આવશે અને તેમની અનુરૂપ નેવી આઇટમ્સ ક્યારેય હાઇલાઇટ કરવામાં આવશે નહીં.
position: relative;
અમલીકરણ પદ્ધતિથી કોઈ ફરક પડતો નથી, સ્ક્રોલસ્પાય માટે તમે જે તત્વની જાસૂસી કરી રહ્યાં છો તેના ઉપયોગની જરૂર છે . મોટા ભાગના કિસ્સાઓમાં આ છે <body>
. જ્યારે આ સિવાયના તત્વો પર સ્ક્રોલસ્પી કરી રહ્યા <body>
હોય, ત્યારે ખાતરી કરો કે height
સેટ અને overflow-y: scroll;
લાગુ કરો.
તમારા ટોપબાર નેવિગેશનમાં સરળતાથી સ્ક્રોલસ્પી વર્તન ઉમેરવા data-spy="scroll"
માટે, તમે જે તત્વની જાસૂસી કરવા માંગો છો તેમાં ઉમેરો (મોટાભાગે આ હશે <body>
). પછી data-target
કોઈપણ બુટસ્ટ્રેપ ઘટકના પેરેંટ એલિમેન્ટના ID અથવા વર્ગ સાથે વિશેષતા ઉમેરો .nav
.
તમારા CSS માં ઉમેર્યા પછી position: relative;
, JavaScript દ્વારા scrollspy ને કૉલ કરો:
.scrollspy('refresh')
DOM માંથી ઘટકો ઉમેરવા અથવા દૂર કરવા સાથે સ્ક્રોલસ્પીનો ઉપયોગ કરતી વખતે, તમારે રિફ્રેશ પદ્ધતિને આના જેવી કૉલ કરવાની જરૂર પડશે:
વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-
, જેમ કે માં ઉમેરો data-offset=""
.
નામ | પ્રકાર | મૂળભૂત | વર્ણન |
---|---|---|---|
ઓફસેટ | સંખ્યા | 10 | સ્ક્રોલની સ્થિતિની ગણતરી કરતી વખતે ઉપરથી ઓફસેટ કરવા માટેના પિક્સેલ્સ. |
ઇવેન્ટનો પ્રકાર | વર્ણન |
---|---|
activate.bs.scrollspy | જ્યારે પણ સ્ક્રોલસ્પી દ્વારા નવી આઇટમ સક્રિય થાય છે ત્યારે આ ઇવેન્ટ ફાયર થાય છે. |
ડ્રોપડાઉન મેનૂ દ્વારા પણ, સ્થાનિક સામગ્રીના ફલક દ્વારા સંક્રમણ કરવા માટે ઝડપી, ગતિશીલ ટેબ કાર્યક્ષમતા ઉમેરો. નેસ્ટેડ ટૅબ્સ સમર્થિત નથી.
કાચો ડેનિમ તમે કદાચ તેમને જીન શોર્ટ્સ ઓસ્ટિન વિશે સાંભળ્યું નથી. Nesciunt tofu stumptown aliqua, retro synth master cleanse. મૂછ ક્લિચ ટેમ્પોર, વિલિયમ્સબર્ગ કાર્લેસ વેગન હેલ્વેટિકા. Reprehenderit butcher retro keffiyeh dreamcatcher synth. કોસ્બી સ્વેટર ઇયુ બાન મી, ક્વિ ઇર ટેરી રિચર્ડસન ભૂતપૂર્વ સ્ક્વિડ. એલિક્વિપ પ્લેસેટ સાલ્વીયા સિલમ આઇફોન. Seitan aliquip quis cardigan American apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
આ પ્લગઇન ટેબેબલ વિસ્તારો ઉમેરવા માટે ટેબ કરેલ નેવિગેશન ઘટકને વિસ્તૃત કરે છે.
જાવાસ્ક્રિપ્ટ દ્વારા ટેબેબલ ટેબ્સને સક્ષમ કરો (દરેક ટેબને વ્યક્તિગત રીતે સક્રિય કરવાની જરૂર છે):
તમે વ્યક્તિગત ટેબને ઘણી રીતે સક્રિય કરી શકો છો:
તમે કોઈ પણ જાવાસ્ક્રિપ્ટ લખ્યા વિના ટેબ અથવા પિલ નેવિગેશનને ફક્ત સ્પષ્ટ કરીને data-toggle="tab"
અથવા data-toggle="pill"
તત્વ પર સક્રિય કરી શકો છો. nav
ટેબમાં અને nav-tabs
વર્ગો ઉમેરવાથી ul
બુટસ્ટ્રેપ ટેબ સ્ટાઇલ લાગુ થશે , જ્યારે nav
અને nav-pills
વર્ગો ઉમેરવાથી પિલ સ્ટાઇલ લાગુ થશે .
ટૅબ્સને ફેડ ઇન કરવા માટે, .fade
દરેકમાં ઉમેરો .tab-pane
. પ્રથમ ટ���બ ફલકમાં પણ .in
પ્રારંભિક સામગ્રી દૃશ્યમાન હોવી આવશ્યક છે.
$().tab
ટેબ ઘટક અને સામગ્રી કન્ટેનર સક્રિય કરે છે. ટૅબમાં DOM માં કન્ટેનર નોડને લક્ષિત કરવા માટે એક data-target
અથવા એક હોવું જોઈએ. href
ઉપરોક્ત ઉદાહરણોમાં, ટેબ એ એટ્રિબ્યુટ્સ <a>
સાથે s છે.data-toggle="tab"
.tab('show')
આપેલ ટેબ પસંદ કરે છે અને તેની સાથે સંકળાયેલ સામગ્રી દર્શાવે છે. કોઈપણ અન્ય ટેબ કે જે અગાઉ પસંદ કરવામાં આવી હતી તે નાપસંદ થઈ જાય છે અને તેની સાથે સંકળાયેલ સામગ્રી છુપાયેલ છે. ટેબ પેન વાસ્તવમાં બતાવવામાં આવે તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે કે shown.bs.tab
ઇવેન્ટ થાય તે પહેલાં).
નવી ટેબ બતાવતી વખતે, ઇવેન્ટ્સ નીચેના ક્રમમાં ફાયર થાય છે:
hide.bs.tab
(વર્તમાન સક્રિય ટેબ પર)show.bs.tab
(બતાવવાના ટેબ પર)hidden.bs.tab
(અગાઉના સક્રિય ટૅબ પર, hide.bs.tab
ઇવેન્ટની જેમ જ)shown.bs.tab
(નવા-સક્રિય-હમણાં-બતાવેલ ટેબ પર, show.bs.tab
ઇવેન્ટની જેમ જ)જો કોઈ ટેબ પહેલાથી જ સક્રિય ન હોય, તો પછી hide.bs.tab
અને hidden.bs.tab
ઇવેન્ટ્સને ફાયર કરવામાં આવશે નહીં.
ઇવેન્ટનો પ્રકાર | વર્ણન |
---|---|
show.bs.tab | આ ઇવેન્ટ ટેબ શો પર ફાયર થાય છે, પરંતુ નવી ટેબ બતાવવામાં આવે તે પહેલાં. અનુક્રમે સક્રિય ટેબ અને અગાઉના સક્રિય ટેબ (જો ઉપલબ્ધ હોય તો) નો ઉપયોગ કરો event.target અને તેને લક્ષ્ય બનાવો.event.relatedTarget |
બતાવેલ.bs.tab | આ ઇવેન્ટ ટેબ બતાવ્યા પછી ટેબ શો પર ફાયર થાય છે. અનુક્રમે સક્રિય ટેબ અને અગાઉના સક્રિય ટેબ (જો ઉપલબ્ધ હોય તો) નો ઉપયોગ કરો event.target અને તેને લક્ષ્ય બનાવો.event.relatedTarget |
hide.bs.tab | જ્યારે નવી ટેબ બતાવવાની હોય ત્યારે આ ઇવેન્ટ ફાયર થાય છે (અને આમ અગાઉની સક્રિય ટેબ છુપાવવાની હોય છે). અનુક્રમે વર્તમાન સક્રિય ટેબ અને નવા ટૂંક સમયમાં સક્રિય થનારી ટેબનો ઉપયોગ કરો event.target અને લક્ષ્યાંકિત કરો.event.relatedTarget |
hidden.bs.tab | નવી ટેબ દર્શાવ્યા પછી આ ઇવેન્ટ ફાયર થાય છે (અને આમ અગાઉની સક્રિય ટેબ છુપાયેલ છે). અનુક્રમે અગાઉના સક્રિય ટેબ અને નવા સક્રિય ટેબનો ઉપયોગ કરો event.target અને તેને લક્ષ્ય બનાવો.event.relatedTarget |
જેસન ફ્રેમ દ્વારા લખાયેલા ઉત્તમ jQuery.tipsy પ્લગઇનથી પ્રેરિત; ટૂલટિપ્સ એ અપડેટેડ વર્ઝન છે, જે ઈમેજીસ પર આધાર રાખતું નથી, એનિમેશન માટે CSS3 અને સ્થાનિક શીર્ષક સ્ટોરેજ માટે ડેટા-એટ્રીબ્યુટ્સનો ઉપયોગ કરે છે.
શૂન્ય-લંબાઈના શીર્ષકો સાથેની ટૂલટિપ્સ ક્યારેય પ્રદર્શિત થતી નથી.
ટૂલટિપ્સ જોવા માટે નીચેની લિંક્સ પર હોવર કરો:
ચુસ્ત પેન્ટ આગામી સ્તર keffiyeh તમે કદાચ તેમના વિશે સાંભળ્યું નથી. ફોટો બૂથ દાઢી કાચી ડેનિમ લેટરપ્રેસ વેગન મેસેન્જર બેગ સ્ટમ્પટાઉન. ફાર્મ-ટુ-ટેબલ સીટન, મેક્સવીની ફિક્સી સસ્ટેનેબલ ક્વિનોઆ 8-બીટ અમેરિકન એપેરલમાં ટેરી રિચર્ડસન વિનાઇલ ચેમ્બ્રે છે . દાઢી સ્ટમ્પટાઉન, કાર્ડિગન્સ બન્હ મી લોમો થંડરકેટ્સ. ટોફુ બાયોડીઝલ વિલિયમ્સબર્ગ માર્ફા, ચાર લોકો મેક્સવીની ક્લીન્સ વેગન ચેમ્બ્રે. એક ખરેખર માર્મિક કારીગર ગમે તે કીતાર , સીનસ્ટર ફાર્મ-ટુ-ટેબલ બેંકસી ઓસ્ટિન ટ્વિટર હેન્ડલ ફ્રીગન ક્રેડ રો ડેનિમ સિંગલ-ઓરિજિન કોફી વાયરલ.
ચાર વિકલ્પો ઉપલબ્ધ છે: ઉપર, જમણે, નીચે અને ડાબે સંરેખિત.
પ્રદર્શનના કારણોસર, ટૂલટિપ અને પોપઓવર ડેટા-એપીસ પસંદ કરવામાં આવે છે, એટલે કે તમારે તેમને જાતે જ પ્રારંભ કરવું પડશે .
પૃષ્ઠ પરની તમામ ટૂલટિપ્સને આરંભ કરવાની એક રીત એ છે કે તેમને તેમની data-toggle
વિશેષતા દ્વારા પસંદ કરવી:
ટૂલટિપ પ્લગઇન માંગ પર સામગ્રી અને માર્કઅપ જનરેટ કરે છે અને ડિફૉલ્ટ રૂપે તેમના ટ્રિગર ઘટક પછી ટૂલટિપ્સ મૂકે છે.
JavaScript દ્વારા ટૂલટિપને ટ્રિગર કરો:
ટૂલટિપ માટે જરૂરી માર્કઅપ માત્ર એક data
વિશેષતા છે અને title
HTML એલિમેન્ટ પર તમે ટૂલટિપ રાખવા માંગો છો. ટૂલટિપનું જનરેટ કરેલ માર્કઅપ એકદમ સરળ છે, જો કે તેને પોઝિશનની જરૂર છે (ડિફૉલ્ટ રૂપે, top
પ્લગઇન દ્વારા સેટ કરેલ છે).
કેટલીકવાર તમે હાયપરલિંકમાં ટૂલટિપ ઉમેરવા માંગો છો જે બહુવિધ રેખાઓને આવરિત કરે છે. ટૂલટિપ પ્લગઇનનું ડિફોલ્ટ વર્તન તેને આડા અને ઊભી રીતે કેન્દ્રમાં રાખવાનું છે. white-space: nowrap;
આને ટાળવા માટે તમારા એન્કરમાં ઉમેરો .
.btn-group
જ્યારે a અથવા an .input-group
, અથવા ટેબલ-સંબંધિત તત્વો ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, ) ની અંદરના ઘટકો પર ટૂલટિપ્સનો ઉપયોગ કરતી વખતે, તમારે અનિચ્છનીય આડઅસરો (જેમ કે તત્વ વ્યાપકપણે વધતા અને/) ટાળવા <tfoot>
માટે વિકલ્પ (નીચે દસ્તાવેજીકૃત) નો ઉલ્લેખ કરવો પડશે. container: 'body'
અથવા જ્યારે ટૂલટિપ ટ્રિગર થાય ત્યારે તેના ગોળાકાર ખૂણા ગુમાવે છે).
tabindex="0"
કીબોર્ડ વડે નેવિગેટ કરતા વપરાશકર્તાઓ અને ખાસ કરીને સહાયક ટેક્નોલોજીના વપરાશકર્તાઓ માટે, તમારે ફક્ત કીબોર્ડ-ફોકસેબલ તત્વો જેમ કે લિંક્સ, ફોર્મ કંટ્રોલ અથવા એટ્રિબ્યુટ સાથે કોઈપણ મનસ્વી ઘટકમાં ટૂલટિપ્સ ઉમેરવી જોઈએ .
disabled
એક અથવા તત્વમાં ટૂલટિપ ઉમેરવા માટે .disabled
, a ની અંદર તત્વ મૂકો અને તેના બદલે <div>
ટૂલટિપ લાગુ કરો .<div>
વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-
, જેમ કે માં ઉમેરો data-animation=""
.
નામ | પ્રકાર | ડિફૉલ્ટ | વર્ણન |
---|---|---|---|
એનિમેશન | બુલિયન | સાચું | ટૂલટિપ પર CSS ફેડ ટ્રાન્ઝિશન લાગુ કરો |
કન્ટેનર | શબ્દમાળા | ખોટું | ખોટું | ચોક્કસ તત્વ સાથે ટૂલટિપ જોડે છે. ઉદાહરણ |
વિલંબ | નંબર | પદાર્થ | 0 | ટૂલટિપ (ms) બતાવવામાં અને છુપાવવામાં વિલંબ - મેન્યુઅલ ટ્રિગર પ્રકાર પર લાગુ થતો નથી જો નંબર પૂરો પાડવામાં આવે છે, તો છુપાવો/શો બંને માટે વિલંબ લાગુ પડે છે ઑબ્જેક્ટ માળખું છે: |
html | બુલિયન | ખોટું | ટૂલટીપમાં HTML દાખલ કરો. text જો ખોટું હોય, તો DOM માં સામગ્રી દાખલ કરવા માટે jQuery ની પદ્ધતિનો ઉપયોગ કરવામાં આવશે. જો તમે XSS હુમલાઓ વિશે ચિંતિત હોવ તો ટેક્સ્ટનો ઉપયોગ કરો. |
પ્લેસમેન્ટ | શબ્દમાળા | કાર્ય | 'ટોચ' | ટૂલટીપને કેવી રીતે સ્થાન આપવું - ટોચ | નીચે | ડાબે | અધિકાર | ઓટો જ્યારે પ્લેસમેન્ટ નક્કી કરવા માટે ફંક્શનનો ઉપયોગ કરવામાં આવે છે, ત્યારે તેને ટૂલટિપ DOM નોડ સાથે તેની પ્રથમ દલીલ તરીકે અને ટ્રિગરિંગ ઘટક DOM નોડને તેના બીજા તરીકે કહેવામાં આવે છે. સંદર્ભ |
પસંદગીકાર | તાર | ખોટું | જો પસંદગીકાર પ્રદાન કરવામાં આવે, તો ટૂલટિપ ઑબ્જેક્ટ્સ ઉલ્લેખિત લક્ષ્યોને સોંપવામાં આવશે. વ્યવહારમાં, આનો ઉપયોગ ટૂલટિપ્સ ઉમેરવા માટે ગતિશીલ HTML સામગ્રીને સક્ષમ કરવા માટે થાય છે. આ અને એક માહિતીપ્રદ ઉદાહરણ જુઓ . |
નમૂનો | તાર | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
ટૂલટિપ બનાવતી વખતે ઉપયોગ કરવા માટે બેઝ HTML. ટૂલટીપને
સૌથી બહારના રેપર તત્વમાં |
શીર્ષક | શબ્દમાળા | કાર્ય | '' |
જો કોઈ ફંક્શન આપવામાં આવ્યું હોય, તો તેને તે તત્વ સાથે તેના |
ટ્રિગર | તાર | 'હોવર ફોકસ' | ટૂલટિપ કેવી રીતે ટ્રિગર થાય છે - ક્લિક કરો | હોવર | ફોકસ | મેન્યુઅલ તમે બહુવિધ ટ્રિગર્સ પસાર કરી શકો છો; તેમને જગ્યા સાથે અલગ કરો. manual અન્ય કોઈપણ ટ્રિગર સાથે જોડી શકાતું નથી. |
વ્યુપોર્ટ | શબ્દમાળા | પદાર્થ | કાર્ય | { પસંદગીકાર: 'બોડી', પેડિંગ: 0 } | આ તત્વની સીમામાં ટૂલટીપ રાખે છે. ઉદાહરણ: જો ફંક્શન આપવામાં આવે છે, તો તેને ટ્રિગરિંગ એલિમેન્ટ DOM નોડ સાથે તેની એકમાત્ર દલીલ તરીકે કહેવામાં આવે છે. સંદર્ભ |
વ્યક્તિગત ટૂલટિપ્સ માટેના વિકલ્પો વૈકલ્પિક રીતે ડેટા એટ્રિબ્યુટ્સના ઉપયોગ દ્વારા સ્પષ્ટ કરી શકાય છે, જેમ ઉપર સમજાવ્યું છે.
$().tooltip(options)
તત્વ સંગ્રહમાં ટૂલટિપ હેન્ડલર જોડે છે.
.tooltip('show')
તત્વની ટૂલટિપ દર્શાવે છે. ટૂલટિપ વાસ્તવમાં બતાવવામાં આવે તે પહેલાં (એટલે કે shown.bs.tooltip
ઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે. આને ટૂલટિપનું "મેન્યુઅલ" ટ્રિગરિંગ ગણવામાં આવે છે. શૂન્ય-લંબાઈના શીર્ષકો સાથેની ટૂલટિપ્સ ક્યારેય પ્રદર્શિત થતી નથી.
.tooltip('hide')
તત્વની ટૂલટિપ છુપાવે છે. ટૂલટિપ વાસ્તવમાં છુપાઈ જાય તે પહેલાં (એટલે કે hidden.bs.tooltip
ઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે. આને ટૂલટિપનું "મેન્યુઅલ" ટ્રિગરિંગ ગણવામાં આવે છે.
.tooltip('toggle')
તત્વની ટૂલટિપને ટૉગલ કરે છે. ટૂલટિપ વાસ્તવમાં બતાવવામાં આવે અથવા છુપાવવામાં આવે તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે કે ઘટના shown.bs.tooltip
અથવા hidden.bs.tooltip
ઘટના બને તે પહેલાં). આને ટૂલટિપનું "મેન્યુઅલ" ટ્રિગરિંગ ગણવામાં આવે છે.
.tooltip('destroy')
તત્વની ટૂલટિપ છુપાવે છે અને નાશ કરે છે. ટૂલટિપ્સ કે જે પ્રતિનિધિમંડળનો ઉપયોગ કરે છે (જે વિકલ્પનો ઉપયોગ કરીનેselector
બનાવવામાં આવે છે ) વંશજ ટ્રિગર તત્વો પર વ્યક્તિગત રીતે નાશ કરી શકાતી નથી.
ઇવેન્ટનો પ્રકાર | વર્ણન |
---|---|
show.bs.ટૂલટિપ | show જ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે. |
બતાવેલ.bs.ટૂલટિપ | જ્યારે ટૂલટિપ વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). |
hide.bs.tooltip | hide જ્યારે ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે. |
hidden.bs.tooltip | જ્યારે ટૂલટિપ વપરાશકર્તાથી છુપાયેલું સમાપ્ત થઈ જાય ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). |
inserted.bs.tooltip | show.bs.tooltip જ્યારે ટૂલટિપ ટેમ્પલેટ DOM માં ઉમેરવામાં આવ્યું હોય ત્યારે આ ઇવેન્ટને ઇવેન્ટ પછી ફાયર કરવામાં આવે છે. |
હાઉસિંગ ગૌણ માહિતી માટે કોઈપણ ઘટકમાં, iPad પરની જેમ સામગ્રીના નાના ઓવરલે ઉમેરો.
પોપોવર કે જેનું શીર્ષક અને સામગ્રી બંને શૂન્ય-લંબાઈના હોય તે ક્યારેય પ્રદર્શિત થતા નથી.
પોપોવર્સને બુટસ્ટ્રેપના તમારા સંસ્કરણમાં ટૂલટિપ પ્લગઇન શામેલ કરવાની જરૂર છે.
પ્રદર્શનના કારણોસર, ટૂલટિપ અને પોપઓવર ડેટા-એપીસ પસંદ કરવામાં આવે છે, એટલે કે તમારે તેમને જાતે જ પ્રારંભ કરવું પડશે .
પૃષ્ઠ પરના તમામ પોપોવર્સને પ્રારંભ કરવાની એક રીત એ છે કે તેમને તેમની data-toggle
વિશેષતા દ્વારા પસંદ કરવી:
.btn-group
જ્યારે a અથવા an .input-group
, અથવા ટેબલ-સંબંધિત તત્વો ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, ) ની અંદરના તત્વો પર પોપોવર્સનો ઉપયોગ કરતી વખતે, તમારે અનિચ્છનીય આડ અસરોને ટાળવા <tfoot>
માટે વિકલ્પ (નીચે દસ્તાવેજીકૃત) નો ઉલ્લેખ કરવો પડશે (જેમ કે તત્વ વધુ વ્યાપક અને/ container: 'body'
અથવા જ્યારે પોપઓવર ટ્રિગર થાય ત્યારે તેના ગોળાકાર ખૂણા ગુમાવે છે).
disabled
એક અથવા તત્વમાં પોપઓવર ઉમેરવા માટે .disabled
, તત્વને a ની અંદર મૂકો અને તેના બદલે તેના <div>
પર પોપઓવર લાગુ કરો .<div>
કેટલીકવાર તમે હાઇપરલિંકમાં પોપઓવર ઉમેરવા માંગો છો જે બહુવિધ લાઇનોને આવરિત કરે છે. પોપઓવર પ્લગઈનની ડિફોલ્ટ વર્તણૂક તેને આડી અને ઊભી રીતે કેન્દ્રમાં રાખવાની છે. white-space: nowrap;
આને ટાળવા માટે તમારા એન્કરમાં ઉમેરો .
ચાર વિકલ્પો ઉપલબ્ધ છે: ઉપર, જમણે, નીચે અને ડાબે સંરેખિત.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
focus
વપરાશકર્તા કરે છે તે આગલી ક્લિક પર પોપઓવરને કાઢી નાખવા માટે ટ્રિગરનો ઉપયોગ કરો .
યોગ્ય ક્રોસ-બ્રાઉઝર અને ક્રોસ-પ્લેટફોર્મ વર્તણૂક માટે, તમારે ટૅગનો ઉપયોગ કરવો જોઈએ <a>
, ટૅગનો નહીં<button>
, અને તમારે role="button"
અને tabindex
વિશેષતાઓનો પણ સમાવેશ કરવો જોઈએ.
JavaScript દ્વારા પોપોવર્સ સક્ષમ કરો:
વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-
, જેમ કે માં ઉમેરો data-animation=""
.
નામ | પ્રકાર | ડિફૉલ્ટ | વર્ણન |
---|---|---|---|
એનિમેશન | બુલિયન | સાચું | પોપઓવર પર CSS ફેડ ટ્રાન્ઝિશન લાગુ કરો |
કન્ટેનર | શબ્દમાળા | ખોટું | ખોટું | પોપઓવરને ચોક્કસ તત્વ સાથે જોડે છે. ઉદાહરણ |
સામગ્રી | શબ્દમાળા | કાર્ય | '' |
|
વિલંબ | નંબર | પદાર્થ | 0 | પોપઓવર (ms) બતાવવામાં અને છુપાવવામાં વિલંબ - મેન્યુઅલ ટ્રિગર પ્રકાર પર લાગુ થતો નથી જો નંબર પૂરો પાડવામાં આવે છે, તો છુપાવો/શો બંને માટે વિલંબ લાગુ પડે છે ઑબ્જેક્ટ માળખું છે: |
html | બુલિયન | ખોટું | પોપઓવરમાં HTML દાખલ કરો. text જો ખોટું હોય, તો DOM માં સામગ્રી દાખલ કરવા માટે jQuery ની પદ્ધતિનો ઉપયોગ કરવામાં આવશે. જો તમે XSS હુમલાઓ વિશે ચિંતિત હોવ તો ટેક્સ્ટનો ઉપયોગ કરો. |
પ્લેસમેન્ટ | શબ્દમાળા | કાર્ય | 'જમણું' | કેવી રીતે પોપઓવર - ટોપ | નીચે | ડાબે | અધિકાર | ઓટો જ્યારે ફંક્શનનો ઉપયોગ પ્લેસમેન્ટ નક્કી કરવા માટે થાય છે, ત્યારે તેને પોપઓવર DOM નોડ સાથે તેની પ્રથમ દલીલ તરીકે અને ટ્રિગરિંગ ઘટક DOM નોડને તેના બીજા તરીકે કહેવામાં આવે છે. સંદર્ભ |
પસંદગીકાર | તાર | ખોટું | જો પસંદગીકાર પ્રદાન કરવામાં આવે, તો પોપઓવર ઑબ્જેક્ટ્સ ઉલ્લેખિત લક્ષ્યોને સોંપવામાં આવશે. વ્યવહારમાં, આનો ઉપયોગ પોપોવર્સ ઉમેરવા માટે ગતિશીલ HTML સામગ્રીને સક્ષમ કરવા માટે થાય છે. આ અને એક માહિતીપ્રદ ઉદાહરણ જુઓ . |
નમૂનો | તાર | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
પોપઓવર બનાવતી વખતે ઉપયોગ કરવા માટે બેઝ HTML. પોપઓવરને પોપઓવરને
સૌથી બહારના રેપર તત્વમાં |
શીર્ષક | શબ્દમાળા | કાર્ય | '' |
|
ટ્રિગર | તાર | 'ક્લિક કરો' | પોપઓવર કેવી રીતે ટ્રિગર થાય છે - ક્લિક કરો | હોવર | ફોકસ | મેન્યુઅલ તમે બહુવિધ ટ્રિગર્સ પસાર કરી શકો છો; તેમને જગ્યા સાથે અલગ કરો. manual અન્ય કોઈપણ ટ્રિગર સાથે જોડી શકાતું નથી. |
વ્યુપોર્ટ | શબ્દમાળા | પદાર્થ | કાર્ય | { પસંદગીકાર: 'બોડી', પેડિંગ: 0 } | પોપઓવરને આ તત્વની સીમામાં રાખે છે. ઉદાહરણ: જો ફંક્શન આપવામાં આવે છે, તો તેને ટ્રિગરિંગ એલિમેન્ટ DOM નોડ સાથે તેની એકમાત્ર દલીલ તરીકે કહેવામાં આવે છે. સંદર્ભ |
વ્યક્તિગત પોપોવર્સ માટેના વિકલ્પોને વૈકલ્પિક રીતે ડેટા એટ્રિબ્યુટ્સના ઉપયોગ દ્વારા સ્પષ્ટ કરી શકાય છે, જેમ ઉપર સમજાવ્યું છે.
$().popover(options)
તત્વ સંગ્રહ માટે પોપોવર્સનો પ્રારંભ કરે છે.
.popover('show')
તત્વના પોપઓવરને દર્શાવે છે. પોપઓવર વાસ્તવમાં બતાવવામાં આવે તે પહેલાં કોલરને પરત કરે છે (એટલે કે shown.bs.popover
ઘટના બને તે પહેલાં). આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે. પોપોવર કે જેનું શીર્ષક અને સામગ્રી બંને શૂન્ય-લંબાઈના હોય તે ક્યારેય પ્રદર્શિત થતા નથી.
.popover('hide')
તત્વના પોપઓવરને છુપાવે છે. પોપઓવર વાસ્તવમાં છુપાયેલ હોય તે પહેલાં (એટલે કે hidden.bs.popover
ઘટના બને તે પહેલાં) કોલર પાસે પરત આવે છે. આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે.
.popover('toggle')
તત્વના પોપઓવરને ટૉગલ કરે છે. પોપઓવર વાસ્તવમાં બતાવવામાં આવે અથવા છુપાવવામાં આવે તે પહેલાં (એટલે કે ઘટના shown.bs.popover
અથવા hidden.bs.popover
ઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે. આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે.
.popover('destroy')
તત્વના પોપઓવરને છુપાવે છે અને તેનો નાશ કરે છે. ડેલિગેશનનો ઉપયોગ કરતા પોપોવર્સ (જે વિકલ્પનો ઉપયોગ કરીનેselector
બનાવવામાં આવે છે ) વંશજ ટ્રિગર તત્વો પર વ્યક્તિગત રીતે નાશ કરી શકાતા નથી.
ઇવેન્ટનો પ્રકાર | વર્ણન |
---|---|
show.bs.popover | show જ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે. |
દર્શાવવામાં આવ્યું છે.bs.popover | જ્યારે પોપઓવર વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). |
hide.bs.popover | hide જ્યારે ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે. |
hidden.bs.popover | જ્યારે પોપઓવર વપરાશકર્તાથી છુપાવવાનું સમાપ્ત કરે છે ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). |
inserted.bs.popover | show.bs.popover જ્યારે પોપઓવર ટેમ્પલેટ DOM માં ઉમેરવામાં આવ્યું હોય ત્યારે આ ઇવેન્ટને ઇવેન્ટ પછી ફાયર કરવામાં આવે છે. |
આ પ્લગઇન સાથેના તમામ ચેતવણી સંદેશાઓમાં ડિસમિસ કાર્યક્ષમતા ઉમેરો.
બટનનો ઉપયોગ કરતી વખતે .close
, તે પ્રથમ બાળક હોવું જોઈએ .alert-dismissible
અને માર્કઅપમાં તેની પહેલાં કોઈ ટેક્સ્ટ સામગ્રી આવી શકશે નહીં.
આ અને તે બદલો અને ફરી પ્રયાસ કરો. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
data-dismiss="alert"
આપમેળે ચેતવણી બંધ કાર્યક્ષમતા આપવા માટે ફક્ત તમારા બંધ બટનમાં ઉમેરો . ચેતવણી બંધ કરવાથી તે DOM માંથી દૂર થાય છે.
તમારી ચેતવણીઓ બંધ કરતી વખતે એનિમેશનનો ઉપયોગ કરવા માટે, ખાતરી કરો કે તેમની પાસે પહેલાથી જ .fade
અને .in
વર્ગો લાગુ છે.
$().alert()
data-dismiss="alert"
એટ્રિબ્યુટ ધરાવતા વંશજ તત્વો પર ક્લિક ઇવેન્ટ્સ માટે ચેતવણી સાંભળે છે . (ડેટા-એપીઆઈના સ્વતઃ-પ્રારંભિકરણનો ઉપયોગ કરતી વખતે જરૂરી નથી.)
$().alert('close')
ચેતવણીને DOM માંથી દૂર કરીને બંધ કરે છે. જો .fade
અને .in
વર્ગો તત્વ પર હાજર હોય, તો તેને દૂર કરવામાં આવે તે પહેલાં ચેતવણી ઝાંખી થઈ જશે.
બુટસ્ટ્રેપનું ચેતવણી પ્લગઇન ચેતવણી કાર્યક્ષમતામાં હૂક કરવા માટે કેટલીક ઘટનાઓને ઉજાગર કરે છે.
ઇવેન્ટનો પ્રકાર | વર્ણન |
---|---|
બંધ.બીએસ.એલર્ટ | close જ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે. |
બંધ.બીએસ.એલર્ટ | જ્યારે ચેતવણી બંધ કરવામાં આવી હોય ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). |
બટનો સાથે વધુ કરો. કંટ્રોલ બટન જણાવે છે અથવા ટૂલબાર જેવા વધુ ઘટકો માટે બટનોના જૂથો બનાવો.
ફાયરફોક્સ સમગ્ર પૃષ્ઠ લોડ પર નિયંત્રણ સ્થિતિઓ (અક્ષમતા અને તપાસ) ચાલુ રાખે છે . આ માટેનો ઉપાય વાપરવાનો છે autocomplete="off"
. મોઝિલા બગ #654072 જુઓ .
data-loading-text="Loading..."
બટન પર લોડિંગ સ્થિતિનો ઉપયોગ કરવા માટે ઉમેરો .
આ સુવિધા v3.3.5 થી દૂર કરવામાં આવી છે અને v4 માં દૂર કરવામાં આવી છે.
આ પ્રદર્શન ખાતર, અમે ઉપયોગ કરી રહ્યા છીએ data-loading-text
અને $().button('loading')
, પરંતુ તે એકમાત્ર રાજ્ય નથી જેનો તમે ઉપયોગ કરી શકો. દસ્તાવેજીકરણમાં નીચે આના પર વધુ જુઓ$().button(string)
.
data-toggle="button"
એક બટન પર ટોગલીંગ સક્રિય કરવા માટે ઉમેરો .
.active
અનેaria-pressed="true"
પ્રી-ટૉગલ કરેલા બટનો માટે, તમારે .active
ક્લાસ અને aria-pressed="true"
એટ્રિબ્યુટ તમારામાં ઉમેરવું આવશ્યક છે button
.
તેમની સંબંધિત શૈલીમાં ટૉગલિંગને સક્ષમ કરવા માટે ધરાવતા ચેકબોક્સ અથવા રેડિયો ઇનપુટ્સમાં data-toggle="buttons"
ઉમેરો ..btn-group
.active
પૂર્વપસંદ કરેલ વિકલ્પો માટે, તમારે જાતે .active
જ ઇનપુટમાં વર્ગ ઉમેરવો પડશે.label
જો ચેકબૉક્સ બટનની ચેક કરેલ સ્થિતિ બટન click
પર ઇવેન્ટને ફાયર કર્યા વિના અપડેટ કરવામાં આવે છે (દા.ત. ઇનપુટની પ્રોપર્ટી <input type="reset">
સેટ કરીને અથવા મારફતે ), તમારે ઇનપુટના જાતે ક્લાસને checked
ટૉગલ કરવાની જરૂર પડશે ..active
label
$().button('toggle')
ટૉગલ પુશ સ્ટેટ. બટનને એવો દેખાવ આપે છે કે તે સક્રિય થઈ ગયું છે.
$().button('reset')
બટન સ્થિતિ રીસેટ કરે છે - ટેક્સ્ટને મૂળ ટેક્સ્ટમાં સ્વેપ કરે છે. આ પદ્ધતિ અસુમેળ છે અને રીસેટિંગ વાસ્તવમાં પૂર્ણ થાય તે પહેલાં પરત કરે છે.
$().button(string)
કોઈપણ ડેટા વ્યાખ્યાયિત ટેક્સ્ટ સ્ટેટમાં ટેક્સ્ટને સ્વેપ કરે છે.
લવચીક પ્લગઇન જે સરળ ટૉગલ વર્તન માટે મુઠ્ઠીભર વર્ગોનો ઉપયોગ કરે છે.
સંકુચિત કરવા માટે તમારા બુટસ્ટ્રેપના સંસ્કરણમાં સંક્રમણ પ્લગઇન શામેલ કરવાની જરૂર છે.
વર્ગ ફેરફારો દ્વારા અન્ય ઘટક બતાવવા અને છુપાવવા માટે નીચેના બટનો પર ક્લિક કરો:
.collapse
સામગ્રી છુપાવે છે.collapsing
સંક્રમણો દરમિયાન લાગુ કરવામાં આવે છે.collapse.in
સામગ્રી બતાવે છેતમે href
એટ્રિબ્યુટ સાથેની લિંક અથવા એટ્રિબ્યુટ સાથેના બટનનો ઉપયોગ કરી શકો છો data-target
. બંને કિસ્સાઓમાં, data-toggle="collapse"
તે જરૂરી છે.
પેનલ ઘટક સાથે એકોર્ડિયન બનાવવા માટે ડિફોલ્ટ સંકુચિત વર્તનને વિસ્તૃત કરો.
.panel-body
s ને s સાથે સ્વેપ કરવું પણ શક્ય છે .list-group
.
aria-expanded
નિયંત્રણ તત્વ ઉમેરવાની ખાતરી કરો . આ વિશેષતા સ્ક્રીન રીડર્સ અને સમાન સહાયક તકનીકો માટે સંકુચિત તત્વની વર્તમાન સ્થિતિને સ્પષ્ટપણે વ્યાખ્યાયિત કરે છે. જો સંકુચિત તત્વ મૂળભૂત રીતે બંધ હોય, તો તેનું મૂલ્ય હોવું જોઈએ aria-expanded="false"
. in
જો તમે વર્ગનો ઉપયોગ કરીને સંકુચિત તત્વને ડિફૉલ્ટ રૂપે ખોલવા માટે સેટ કર્યું હોય , aria-expanded="true"
તો તેના બદલે નિયંત્રણ પર સેટ કરો. સંકુચિત તત્વ ખોલવામાં આવ્યું છે કે બંધ કરવામાં આવ્યું છે કે નહીં તેના આધારે પ્લગઇન આ લક્ષણને આપમેળે ટૉગલ કરશે.
વધુમાં, જો તમારું નિયંત્રણ તત્વ એક જ સંકુચિત તત્વને લક્ષ્ય બનાવી રહ્યું છે - એટલે કે data-target
વિશેષતા પસંદગીકાર તરફ નિર્દેશ કરી રહી છે - તો તમે સંકુચિત તત્વને સમાવતા નિયંત્રણ ઘટકમાં id
વધારાની વિશેષતા ઉમેરી શકો છો . આધુનિક સ્ક્રીન રીડર્સ અને સમાન સહાયક તકનીકો વપરાશકર્તાઓને સંકુચિત તત્વ પર સીધા જ નેવિગેટ કરવા માટે વધારાના શૉર્ટકટ્સ પ્રદાન કરવા માટે આ વિશેષતાનો ઉપયોગ કરે છે.aria-controls
id
પતન પ્લગઇન ભારે લિફ્ટિંગને હેન્ડલ કરવા માટે કેટલાક વર્ગોનો ઉપયોગ કરે છે:
.collapse
સામગ્રી છુપાવે છે.collapse.in
સામગ્રી બતાવે છે.collapsing
જ્યારે સંક્રમણ શરૂ થાય ત્યારે ઉમેરવામાં આવે છે, અને જ્યારે તે સમાપ્ત થાય ત્યારે દૂર કરવામાં આવે છેઆ વર્ગો માં મળી શકે છે component-animations.less
.
સંકુચિત તત્વનું નિયંત્રણ આપમેળે સોંપવા માટે ઘટકમાં ફક્ત data-toggle="collapse"
અને a ઉમેરો . data-target
સંકુચિતતા data-target
લાગુ કરવા માટે વિશેષતા CSS પસંદગીકારને સ્વીકારે છે. collapse
સંકુચિત તત્વમાં વર્ગ ઉમેરવાની ખાતરી કરો . જો તમે તેને ડિફોલ્ટ ખોલવા માંગતા હો, તો વધારાનો વર્ગ ઉમેરો in
.
સંકુચિત નિયંત્રણમાં એકોર્ડિયન જેવા જૂથ સંચાલન ઉમેરવા માટે, ડેટા વિશેષતા ઉમેરો data-parent="#selector"
. આને ક્રિયામાં જોવા માટે ડેમોનો સંદર્ભ લો.
આની સાથે મેન્યુઅલી સક્ષમ કરો:
વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-
, જેમ કે માં ઉમેરો data-parent=""
.
નામ | પ્રકાર | મૂળભૂત | વર્ણન |
---|---|---|---|
પિતૃ | પસંદગીકાર | ખોટું | જો પસંદગીકાર પ્રદાન કરવામાં આવે, તો જ્યારે આ સંકુચિત આઇટમ બતાવવામાં આવે ત્યારે ઉલ્લેખિત પેરેન્ટ હેઠળના તમામ સંકુચિત ઘટકો બંધ થઈ જશે. (પરંપરાગત એકોર્ડિયન વર્તન જેવું જ - આ panel વર્ગ પર આધારિત છે) |
ટૉગલ | બુલિયન | સાચું | ઇન્વોકેશન પર સંકુચિત ઘટકને ટૉગલ કરે છે |
.collapse(options)
સંકુચિત તત્વ તરીકે તમારી સામગ્રીને સક્રિય કરે છે. વૈકલ્પિક વિકલ્પો સ્વીકારે છે object
.
.collapse('toggle')
સંકુચિત તત્વને બતાવવામાં અથવા છુપાવવા માટે ટૉગલ કરે છે. સંકુચિત તત્વ વાસ્તવમાં બતાવવામાં આવે અથવા છુપાયેલ હોય તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે કે ઘટના shown.bs.collapse
અથવા hidden.bs.collapse
ઘટના બને તે પહેલાં).
.collapse('show')
સંકુચિત તત્વ બતાવે છે. સંકુચિત તત્વ વાસ્તવમાં બતાવવામાં આવે તે પહેલાં (એટલે કે shown.bs.collapse
ઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે.
.collapse('hide')
સંકુચિત તત્વ છુપાવે છે. સંકુચિત તત્વ વાસ્તવમાં છુપાયેલું હોય તે પહેલાં (એટલે કે hidden.bs.collapse
ઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે.
બુટસ્ટ્રેપનો પતન વર્ગ સંકુચિત કાર્યક્ષમતામાં હૂક કરવા માટે કેટલીક ઘટનાઓને ઉજાગર કરે છે.
ઇવેન્ટનો પ્રકાર | વર્ણન |
---|---|
show.bs.collapse | show જ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે. |
બતાવવામાં આવ્યું.bs.collaps | જ્યારે સંકુચિત ઘટક વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). |
hide.bs.collapse | hide જ્યારે પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે. |
hidden.bs.collapse | જ્યારે સંકુચિત ઘટક વપરાશકર્તાથી છુપાયેલ હોય ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). |
કેરોયુઝલ જેવા તત્વો દ્વારા સાયકલ ચલાવવા માટેનો સ્લાઇડશો ઘટક. નેસ્ટેડ કેરોયુસેલ્સ સપોર્ટેડ નથી.
કેરોયુઝલ ઘટક સામાન્ય રીતે સુલભતા ધોરણો સાથે સુસંગત નથી. જો તમારે અનુપાલન કરવાની જરૂર હોય, તો કૃપા કરીને તમારી સામગ્રી પ્રસ્તુત કરવા માટેના અન્ય વિકલ્પોનો વિચાર કરો.
બુટસ્ટ્રેપ ફક્ત તેના એનિમેશન માટે CSS3 નો ઉપયોગ કરે છે, પરંતુ Internet Explorer 8 અને 9 જરૂરી CSS ગુણધર્મોને સમર્થન આપતા નથી. આમ, આ બ્રાઉઝરનો ઉપયોગ કરતી વખતે કોઈ સ્લાઇડ ટ્રાન્ઝિશન એનિમેશન નથી. અમે સંક્રમણો માટે jQuery-આધારિત ફૉલબૅક્સનો સમાવેશ ન કરવાનો હેતુપૂર્વક નિર્ણય લીધો છે.
વર્ગને એક સ્લાઇડમાં .active
ઉમેરવાની જરૂર છે. નહિંતર, કેરોયુઝલ દેખાશે નહીં.
.glyphicon .glyphicon-chevron-left
નિયંત્રણો માટે અને .glyphicon .glyphicon-chevron-right
વર્ગોની આવશ્યકતા નથી . બુટસ્ટ્રેપ પૂરા પાડે છે .icon-prev
અને .icon-next
સાદા યુનિકોડ વિકલ્પો તરીકે.
.carousel-caption
કોઈપણ ની અંદર તત્વ સાથે સરળતાથી તમારી સ્લાઇડ્સમાં કૅપ્શન્સ ઉમેરો .item
. ત્યાં લગભગ કોઈપણ વૈકલ્પિક HTML મૂકો અને તે આપમેળે સંરેખિત અને ફોર્મેટ થઈ જશે.
કેરોયુઝલને યોગ્ય રીતે કાર્ય કરવા માટે કેરોયુઝલ નિયંત્રણો માટે id
સૌથી બહારના કન્ટેનર (the ) નો ઉપયોગ કરવાની જરૂર છે . .carousel
બહુવિધ કેરોયુઝલ ઉમેરતી વખતે, અથવા કેરોયુઝલ બદલતી વખતે id
, સંબંધિત નિયંત્રણોને અપડેટ કરવાની ખાતરી કરો.
કેરોયુઝલની સ્થિતિને સરળતાથી નિયંત્રિત કરવા માટે ડેટા વિશેષતાઓનો ઉપયોગ કરો. data-slide
કીવર્ડ્સ સ્વીકારે છે prev
અથવા next
, જે સ્લાઇડની સ્થિતિને તેની વર્તમાન સ્થિતિની તુલનામાં બદલે છે. વૈકલ્પિક રીતે, data-slide-to
કાચા સ્લાઇડ ઇન્ડેક્સને કેરોયુઝલમાં પસાર કરવા માટે ઉપયોગ કરો data-slide-to="2"
, જે સ્લાઇડની સ્થિતિને ચોક્કસ અનુક્રમણિકામાં શિફ્ટ કરે છે0
.
data-ride="carousel"
એટ્રિબ્યુટનો ઉપયોગ કેરોયુઝલને પૃષ્ઠ લોડથી શરૂ કરીને એનિમેટિંગ તરીકે ચિહ્નિત કરવા માટે થાય છે . તેનો ઉપયોગ સમાન કેરોયુઝલના (અનર્થક અને બિનજરૂરી) સ્પષ્ટ JavaScript આરંભ સાથે સંયોજનમાં કરી શકાતો નથી.
કેરોયુઝલને મેન્યુઅલી આની સાથે કૉલ કરો:
વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-
, જેમ કે માં ઉમેરો data-interval=""
.
નામ | પ્રકાર | મૂળભૂત | વર્ણન |
---|---|---|---|
અંતરાલ | સંખ્યા | 5000 | આઇટમને આપમેળે સાયકલ ચલાવવામાં વિલંબ થવાનો સમય. જો ખોટુ હોય, તો કેરોયુઝલ આપમેળે ચક્રમાં આવશે નહીં. |
વિરામ | શબ્દમાળા | નલ | "હોવર" | જો પર સેટ કરેલ હોય "hover" , તો કેરોયુઝલની સાયકલિંગ ચાલુને થોભાવે છે અને કેરોયુઝલની mouseenter સાયકલ ચાલુ કરવાનું ફરી શરૂ કરે છે mouseleave . જો પર સેટ કરેલ હોય null , તો કેરોયુઝલ પર હોવર કરવાથી તે થોભાવશે નહીં. |
લપેટી | બુલિયન | સાચું | કેરોયુઝલ સતત સાયકલ ચલાવવું જોઈએ કે સખત સ્ટોપ હોવું જોઈએ. |
કીબોર્ડ | બુલિયન | સાચું | કેરોયુઝલ કીબોર્ડ ઇવેન્ટ્સ પર પ્રતિક્રિયા આપવી જોઈએ કે કેમ. |
.carousel(options)
વૈકલ્પિક વિકલ્પો સાથે કેરોયુઝલની શરૂઆત કરે છે object
અને વસ્તુઓ દ્વારા સાયકલ ચલાવવાનું શરૂ કરે છે.
.carousel('cycle')
કેરોયુઝલ આઇટમ દ્વારા ડાબેથી જમણે સાયકલ કરો.
.carousel('pause')
કેરોયુઝલને વસ્તુઓ દ્વારા સાયકલ ચલાવવાથી રોકે છે.
.carousel(number)
કેરોયુઝલને ચોક્કસ ફ્રેમ પર સાયકલ કરે છે (0 આધારિત, એરેની જેમ).
.carousel('prev')
પાછલી આઇટમ પર ચક્ર.
.carousel('next')
આગલી આઇટમ પર સાયકલ.
બુટસ્ટ્રેપનો કેરોયુઝલ વર્ગ કેરોયુઝલ કાર્યક્ષમતામાં હૂક કરવા માટે બે ઘટનાઓને ઉજાગર કરે છે.
બંને ઇવેન્ટ્સમાં નીચેના વધારાના ગુણધર્મો છે:
direction
: કેરોયુઝલ જે દિશામાં સરકતું હોય તે દિશામાં (ક્યાં તો "left"
અથવા "right"
).relatedTarget
: DOM ઘટક કે જે સક્રિય આઇટમ તરીકે સ્થાને સરકવામાં આવી રહ્યું છે.તમામ કેરોયુઝલ ઇવેન્ટ્સ કેરોયુઝલ પર જ ફાયર કરવામાં આવે છે (એટલે કે <div class="carousel">
).
ઇવેન્ટનો પ્રકાર | વર્ણન |
---|---|
slide.bs.carousel | slide જ્યારે ઇન્સ્ટન્સ પદ્ધતિનો ઉપયોગ કરવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે. |
slid.bs.carousel | જ્યારે કેરોયુઝલ તેનું સ્લાઇડ સંક્રમણ પૂર્ણ કરે છે ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે. |
એફિક્સ પ્લગઇન position: fixed;
સાથે મળેલી અસરનું અનુકરણ કરીને ચાલુ અને બંધ ટૉગલ કરે છે position: sticky;
. જમણી બાજુએ સબનેવિગેશન એ એફિક્સ પ્લગઇનનો જીવંત ડેમો છે.
ડેટા એટ્રિબ્યુટ્સ દ્વારા અથવા તમારી પોતાની JavaScript સાથે મેન્યુઅલી એફિક્સ પ્લગઇનનો ઉપયોગ કરો.બંને પરિસ્થિતિઓમાં, તમારે તમારી જોડેલી સામગ્રીની સ્થિતિ અને પહોળાઈ માટે CSS પ્રદાન કરવું આવશ્યક છે.
નોંધ: Safari રેન્ડરિંગ બગને કારણે, ખેંચાયેલ અથવા દબાણ કરેલ કૉલમ જેવા પ્રમાણમાં સ્થિત ઘટકમાં સમાવિષ્ટ ઘટક પર affix પ્લગઇનનો ઉપયોગ કરશો નહીં .
એફિક્સ પ્લગઇન ત્રણ વર્ગો વચ્ચે ટૉગલ કરે છે, દરેક ચોક્કસ રાજ્યનું પ્રતિનિધિત્વ કરે છે: .affix
, .affix-top
, અને .affix-bottom
. વાસ્તવિક સ્થિતિને હેન્ડલ કરવા માટે તમારે આ વર્ગો માટે (આ પ્લગઇનથી સ્વતંત્ર) position: fixed;
પરના અપવાદ સાથે, શૈલીઓ પ્રદાન કરવી આવશ્યક છે ..affix
અફિક્સ પ્લગઇન કેવી રીતે કાર્ય કરે છે તે અહીં છે:
.affix-top
છે કે ઘટક તેની ટોચની સ્થિતિમાં છે. આ બિંદુએ કોઈ CSS પોઝિશનિંગ જરૂરી નથી..affix
બદલાય છે .affix-top
અને સેટ કરે છે position: fixed;
(બૂટસ્ટ્રેપના CSS દ્વારા પ્રદાન કરવામાં આવે છે)..affix
સાથે બદલવું જોઈએ .affix-bottom
. ઑફસેટ્સ વૈકલ્પિક હોવાથી, એક સેટ કરવા માટે તમારે યોગ્ય CSS સેટ કરવાની જરૂર છે. આ કિસ્સામાં, position: absolute;
જ્યારે જરૂરી હોય ત્યારે ઉમેરો. પ્લગઇન ડેટા એટ્રિબ્યુટ અથવા JavaScript વિકલ્પનો ઉપયોગ કરે છે તે નક્કી કરવા માટે કે તત્વને ત્યાંથી ક્યાં સ્થાન આપવું.નીચેના કોઈપણ ઉપયોગ વિકલ્પો માટે તમારા CSS સેટ કરવા માટે ઉપરોક્ત પગલાં અનુસરો.
કોઈપણ તત્વમાં સરળતાથી affix વર્તણૂક ઉમેરવા data-spy="affix"
માટે, તમે જે તત્વની જાસૂસી કરવા માંગો છો તેમાં ફક્ત ઉમેરો. એલિમેન્ટના પિનિંગને ક્યારે ટૉગલ કરવું તે નિર્ધારિત કરવા માટે ઑફસેટ્સનો ઉપયોગ કરો.
JavaScript દ્વારા affix પ્લગઇનને કૉલ કરો:
વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-
, જેમ કે માં ઉમેરો data-offset-top="200"
.
નામ | પ્રકાર | મૂળભૂત | વર્ણન |
---|---|---|---|
ઓફસેટ | નંબર | કાર્ય | પદાર્થ | 10 | સ્ક્રોલની સ્થિતિની ગણતરી કરતી વખતે સ્ક્રીનમાંથી ઑફસેટ કરવા માટે પિક્સેલ્સ. જો એક જ નંબર આપવામાં આવે છે, તો ઑફસેટ ઉપર અને નીચે બંને દિશામાં લાગુ કરવામાં આવશે. અનન્ય, નીચે અને ટોચની ઑફસેટ પ્રદાન કરવા માટે ફક્ત ઑબ્જેક્ટ પ્રદાન કરો offset: { top: 10 } અથવા offset: { top: 10, bottom: 5 } . જ્યારે તમારે ઑફસેટની ગતિશીલ રીતે ગણતરી કરવાની જરૂર હોય ત્યારે ફંક્શનનો ઉપયોગ કરો. |
લક્ષ્ય | પસંદગીકાર | નોડ | jQuery તત્વ | window પદાર્થ _ |
એફિક્સના લક્ષ્ય તત્વને સ્પષ્ટ કરે છે. |
.affix(options)
તમારી સામગ્રીને જોડેલી સામગ્રી તરીકે સક્રિય કરે છે. વૈકલ્પિક વિકલ્પો સ્વીકારે છે object
.
.affix('checkPosition')
સંબંધિત ઘટકોના પરિમાણો, સ્થિતિ અને સ્ક્રોલ સ્થિતિના આધારે જોડાણની સ્થિતિની પુનઃ ગણતરી કરે છે. , .affix
, .affix-top
અને .affix-bottom
વર્ગો નવી સ્થિતિ અનુસાર જોડાયેલ સામગ્રીમાં ઉમેરવામાં અથવા દૂર કરવામાં આવે છે. આ પદ્ધતિને જ્યારે પણ જોડવામાં આવેલ સામગ્રીના પરિમાણો અથવા લક્ષ્ય તત્વ બદલવામાં આવે ત્યારે બોલાવવાની જરૂર છે, જેથી ચોંટેલી સામગ્રીની સાચી સ્થિતિ સુનિશ્ચિત કરી શકાય.
બુટસ્ટ્રેપનું એફિક્સ પ્લગઇન એફિક્સ કાર્યક્ષમતા સાથે જોડાવા માટે કેટલીક ઇવેન્ટ્સને ઉજાગર કરે છે.
ઇવેન્ટનો પ્રકાર | વર્ણન |
---|---|
affix.bs.affix | આ ઘટના તત્વને ચોંટાડવામાં આવે તે પહેલાં તરત જ ફાયર થાય છે. |
affixed.bs.affix | તત્વ ચોંટાડ્યા પછી આ ઇવેન્ટને બરતરફ કરવામાં આવે છે. |
affix-top.bs.affix | આ ઘટના તત્વને ટોચ પર ચોંટાડવામાં આવે તે પહેલાં તરત જ ફાયર થાય છે. |
affixed-top.bs.affix | તત્વને ટોચ પર ચોંટાડવામાં આવ્યા પછી આ ઇવેન્ટને બરતરફ કરવામાં આવે છે. |
affix-bottom.bs.affix | આ ઘટના તત્વને ચોંટાડવામાં આવે તે પહેલાં તરત જ ફાયર થાય છે. |
affixed-bottom.bs.affix | તત્વ ચોંટી ગયા પછી આ ઇવેન્ટને બરતરફ કરવામાં આવે છે. |