બટનો

બહુવિધ કદ, સ્થિતિઓ અને વધુ માટે સમર્થન સાથે ફોર્મ્સ, સંવાદો અને વધુમાં ક્રિયાઓ માટે બુટસ્ટ્રેપની કસ્ટમ બટન શૈલીઓનો ઉપયોગ કરો.

ઉદાહરણો

બુટસ્ટ્રેપમાં ઘણી પૂર્વવ્યાખ્યાયિત બટન શૈલીઓનો સમાવેશ થાય છે, દરેક તેના પોતાના સિમેન્ટીક હેતુને સેવા આપે છે, જેમાં વધુ નિયંત્રણ માટે થોડા વધારાઓ મૂકવામાં આવે છે.

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

ટેક્સ્ટ રેપિંગને અક્ષમ કરો

જો તમે બટન ટેક્સ્ટને લપેટવા માંગતા નથી, તો તમે બટનમાં .text-nowrapવર્ગ ઉમેરી શકો છો. Sass માં, તમે $btn-white-space: nowrapદરેક બટન માટે ટેક્સ્ટ રેપિંગને અક્ષમ કરવા માટે સેટ કરી શકો છો.

બટન ટૅગ્સ

વર્ગો તત્વ સાથે ઉપયોગમાં .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એન્કર બટનો પર તમામને અક્ષમ કરવા માટે કેટલીક ભાવિ-મૈત્રીપૂર્ણ શૈલીઓનો સમાવેશ કરવામાં આવ્યો છે . તે પ્રોપર્ટીને સપોર્ટ કરતા બ્રાઉઝર્સમાં, તમે અક્ષમ કર્સરને બિલકુલ જોશો નહીં.
• સહાયક તકનીકો માટે તત્વની સ્થિતિ દર્શાવવા માટે અક્ષમ બટનોનો ઉપયોગ <a>કરવો જોઈએ .aria-disabled="true"
• ઉપયોગ કરીને અક્ષમ કરેલ બટનોમાં વિશેષતા શામેલ <a> હોવી જોઈએ નહીં .href

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

લિંક કાર્યક્ષમતા ચેતવણી

hrefએવા કિસ્સાઓને આવરી લેવા માટે જ્યાં તમારે અક્ષમ કરેલ લિંક પર વિશેષતા રાખવાની હોય , .disabledવર્ગ s pointer-events: noneની લિંક કાર્યક્ષમતાને અક્ષમ કરવાનો પ્રયાસ કરવા માટે ઉપયોગ કરે છે <a>. નોંધ કરો કે આ CSS ગુણધર્મ હજુ સુધી HTML માટે પ્રમાણિત નથી, પરંતુ તમામ આધુનિક બ્રાઉઝર તેને સમર્થન આપે છે. વધુમાં, બ્રાઉઝર્સમાં પણ જે સપોર્ટ કરે છે pointer-events: none, કીબોર્ડ નેવિગેશન અપ્રભાવિત રહે છે, મતલબ કે દેખાતા કીબોર્ડ વપરાશકર્તાઓ અને સહાયક તકનીકોના વપરાશકર્તાઓ હજી પણ આ લિંક્સને સક્રિય કરવામાં સક્ષમ હશે. તેથી સલામત રહેવા માટે, ઉપરાંત , કીબોર્ડ ફોકસ મેળવવાથી રોકવા માટે આ લિંક્સ પર aria-disabled="true"એક વિશેષતા પણ શામેલ કરો અને તેમની કાર્યક્ષમતાને સંપૂર્ણ રીતે અક્ષમ કરવા માટે કસ્ટમ JavaScript નો ઉપયોગ કરો.tabindex="-1"

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

બટન પ્લગઇન

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

સ્ટેટ્સ ટૉગલ કરો

બટનની સ્થિતિને data-toggle="button"ટૉગલ કરવા માટે ઉમેરો . activeજો તમે બટનને પ્રી-ટૉગલ કરી રહ્યાં છો, તો તમારે મેન્યુઅલી .activeક્લાસ અને aria-pressed="true" તેમાં ઉમેરવું આવશ્યક છે <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  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> 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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

પદ્ધતિઓ