બટનો
બહુવિધ કદ, સ્થિતિઓ અને વધુ માટે સમર્થન સાથે ફોર્મ્સ, સંવાદો અને વધુમાં ક્રિયાઓ માટે બુટસ્ટ્રેપની કસ્ટમ બટન શૈલીઓનો ઉપયોગ કરો.
બુટસ્ટ્રેપમાં ઘણી પૂર્વવ્યાખ્યાયિત બટન શૈલીઓનો સમાવેશ થાય છે, દરેક તેના પોતાના સિમેન્ટીક હેતુને સેવા આપે છે, જેમાં વધુ નિયંત્રણ માટે થોડા વધારાઓ મૂકવામાં આવે છે.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>સહાયક તકનીકોનો અર્થ પહોંચાડવો
અર્થ ઉમેરવા માટે રંગનો ઉપયોગ કરવાથી માત્ર એક વિઝ્યુઅલ સંકેત મળે છે, જે સહાયક ટેક્નોલોજીના વપરાશકર્તાઓ સુધી પહોંચાડવામાં આવશે નહીં - જેમ કે સ્ક્રીન રીડર્સ. ખાતરી કરો કે રંગ દ્વારા સૂચવવામાં આવેલી માહિતી કાં તો સામગ્રીમાંથી જ સ્પષ્ટ છે (દા.ત. દૃશ્યમાન ટેક્સ્ટ), અથવા વૈકલ્પિક માધ્યમો દ્વારા શામેલ છે, જેમ કે .sr-onlyવર્ગ સાથે છુપાયેલ વધારાની ટેક્સ્ટ.
વર્ગો તત્વ સાથે ઉપયોગમાં .btnલેવા માટે રચાયેલ છે . <button>જો કે, તમે આ વર્ગોનો ઉપયોગ <a>અથવા <input>તત્વો પર પણ કરી શકો છો (જોકે કેટલાક બ્રાઉઝર થોડું અલગ રેન્ડરિંગ લાગુ કરી શકે છે).
<a>વર્તમાન પૃષ્ઠની અંદર નવા પૃષ્ઠો અથવા વિભાગોને લિંક કરવાને બદલે, ઇન-પેજ કાર્યક્ષમતાને ટ્રિગર કરવા માટે ઉપયોગમાં લેવાતા ઘટકો પર બટન વર્ગોનો ઉપયોગ કરતી વખતે , આ લિંક્સને role="button"સહાયક તકનીકો માટે તેમના હેતુને યોગ્ય રીતે પહોંચાડવા માટે આપવામાં આવવી જોઈએ જેમ કે સ્ક્રીન રીડર્સ.
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">એક બટનની જરૂર છે, પરંતુ તેઓ લાવે છે તે ભારે પૃષ્ઠભૂમિ રંગો નથી? .btn-outline-*કોઈપણ બટન પર તમામ પૃષ્ઠભૂમિ છબીઓ અને રંગોને દૂર કરવા માટે ડિફૉલ્ટ મોડિફાયર વર્ગોને વર્ગો સાથે બદલો .
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>ફેન્સી મોટા કે નાના બટનો? ઉમેરો .btn-lgઅથવા .btn-smવધારાના કદ માટે.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button><button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>બ્લોક લેવલ બટનો બનાવો—જે પેરેન્ટની સંપૂર્ણ પહોળાઈ સુધી ફેલાયેલા હોય— ઉમેરીને .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>જ્યારે સક્રિય હોય ત્યારે બટનો દબાવેલા દેખાશે (ઘાટા પૃષ્ઠભૂમિ, ઘાટા કિનારી અને ઇનસેટ શેડો સાથે). s માં વર્ગ ઉમેરવાની જરૂર નથી <button>કારણ કે તેઓ સ્યુડો-ક્લાસનો ઉપયોગ કરે છે . જો કે, જો તમારે રાજ્યની પ્રોગ્રામેટિકલી નકલ કરવાની જરૂર હોય તો તમે હજી પણ તે જ સક્રિય દેખાવ સાથે .active(અને એટ્રિબ્યુટ શામેલ કરો ) દબાણ કરી શકો છો.aria-pressed="true"
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>કોઈપણ તત્વમાં disabledબુલિયન એટ્રિબ્યુટ ઉમેરીને બટનોને નિષ્ક્રિય બનાવો .<button>
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>તત્વનો ઉપયોગ કરીને અક્ષમ કરેલ બટનો <a>થોડી અલગ રીતે વર્તે છે:
<a>s એ એટ્રિબ્યુટને સપોર્ટ કરતું નથીdisabled, તેથી તમારે.disabledતેને દૃષ્ટિની રીતે અક્ષમ કરવા માટે વર્ગ ઉમેરવો જ પડશે.pointer-eventsએન્કર બટનો પર તમામને અક્ષમ કરવા માટે કેટલીક ભાવિ-મૈત્રીપૂર્ણ શૈલીઓનો સમાવેશ કરવામાં આવ્યો છે . તે પ્રોપર્ટીને સપોર્ટ કરતા બ્રાઉઝર્સમાં, તમે અક્ષમ કર્સરને બિલકુલ જોશો નહીં.- અક્ષમ બટનોમાં
aria-disabled="true"સહાયક તકનીકો માટે તત્વની સ્થિતિ દર્શાવવા માટે વિશેષતા શામેલ હોવી જોઈએ.
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>લિંક કાર્યક્ષમતા ચેતવણી
.disabledવર્ગ s ની લિંક કાર્યક્ષમતાને અક્ષમ કરવાનો પ્રયાસ કરવા માટે ઉપયોગ કરે pointer-events: noneછે <a>, પરંતુ તે CSS ગુણધર્મ હજી પ્રમાણિત નથી. વધુમાં, બ્રાઉઝર્સમાં પણ જે સપોર્ટ કરે છે pointer-events: none, કીબોર્ડ નેવિગેશન અપ્રભાવિત રહે છે, મતલબ કે દેખાતા કીબોર્ડ વપરાશકર્તાઓ અને સહાયક તકનીકોના વપરાશકર્તાઓ હજી પણ આ લિંક્સને સક્રિય કરવામાં સક્ષમ હશે. તેથી સલામત રહેવા માટે, tabindex="-1"આ લિંક્સ પર વિશેષતા ઉમેરો (તેમને કીબોર્ડ ફોકસ પ્રાપ્ત કરવાથી રોકવા માટે) અને તેમની કાર્યક્ષમતાને અક્ષમ કરવા માટે કસ્ટમ JavaScript નો ઉપયોગ કરો.
બટનો સાથે વધુ કરો. કંટ્રોલ બટન જણાવે છે અથવા ટૂલબાર જેવા વધુ ઘટકો માટે બટનોના જૂથો બનાવો.
બટનની સ્થિતિને data-toggle="button"ટૉગલ કરવા માટે ઉમેરો . activeજો તમે બટનને પ્રી-ટૉગલ કરી રહ્યાં છો, તો તમારે મેન્યુઅલી .activeક્લાસ અને aria-pressed="true" તેમાં ઉમેરવું આવશ્યક છે <button>.
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>બુટસ્ટ્રેપની .buttonશૈલીઓ અન્ય ઘટકો પર લાગુ કરી શકાય છે, જેમ કે <label>s, ચેકબોક્સ અથવા રેડિયો શૈલી બટન ટોગલીંગ પ્રદાન કરવા માટે. JavaScript દ્વારા તેમના ટૉગલિંગ વર્તનને સક્ષમ કરવા માટે તે સંશોધિત બટનો ધરાવતા તેમાં ઉમેરો અને data-toggle="buttons"તમારા બટનોમાં s ને શૈલીમાં ઉમેરો. નોંધ કરો કે તમે સિંગલ ઇનપુટ-સંચાલિત બટનો અથવા તેમના જૂથો બનાવી શકો છો..btn-group.btn-group-toggle<input>
આ બટનો માટે ચેક કરેલ સ્થિતિ ફક્ત બટન પરની ઇવેન્ટ દ્વારા અપડેટ કરવામાં આવે છે. clickજો તમે ઇનપુટને અપડેટ કરવા માટે બીજી પદ્ધતિનો ઉપયોગ કરો છો-દા.ત., <input type="reset">ઇનપુટની મિલકત સાથે અથવા મેન્યુઅલી લાગુ કરીને checked-તમારે મેન્યુઅલી ટૉગલ કરવાની જરૂર .activeપડશે <label>.
.activeનોંધ કરો કે પ્રી-ચેક કરેલ બટનો માટે તમારે મેન્યુઅલી ક્લાસને ઇનપુટમાં ઉમેરવાની જરૂર છે <label>.
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Checked
</label>
</div><div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>| પદ્ધતિ | વર્ણન |
|---|---|
$().button('toggle') |
ટૉગલ પુશ સ્ટેટ. બટનને એવો દેખાવ આપે છે કે તે સક્રિય થઈ ગયું છે. |
$().button('dispose') |
તત્વના બટનનો નાશ કરે છે. |