ബട്ടണുകൾ

ഒന്നിലധികം വലുപ്പങ്ങൾ, അവസ്ഥകൾ എന്നിവയ്‌ക്കും അതിലേറെ കാര്യങ്ങൾക്കുമുള്ള പിന്തുണയോടെ ഫോമുകൾ, ഡയലോഗുകൾ എന്നിവയിലും മറ്റും പ്രവർത്തനങ്ങൾക്കായി ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഇഷ്‌ടാനുസൃത ബട്ടൺ ശൈലികൾ ഉപയോഗിക്കുക.

ഉദാഹരണങ്ങൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ നിരവധി മുൻ‌നിർവചിക്കപ്പെട്ട ബട്ടൺ ശൈലികൾ ഉൾപ്പെടുന്നു, ഓരോന്നിനും അതിന്റേതായ സെമാന്റിക് ഉദ്ദേശ്യം നൽകുന്നു, കൂടുതൽ നിയന്ത്രണത്തിനായി കുറച്ച് എക്സ്ട്രാകൾ എറിയുന്നു.

<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ക്ലാസ് ചേർക്കാം. $btn-white-space: nowrapSass-ൽ, ഓരോ ബട്ടണിനും ടെക്സ്റ്റ് റാപ്പിംഗ് പ്രവർത്തനരഹിതമാക്കാൻ നിങ്ങൾക്ക് സജ്ജീകരിക്കാം .

ബട്ടൺ ടാഗുകൾ

എലമെന്റിനൊപ്പം ഉപയോഗിക്കാനാണ് .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>ആട്രിബ്യൂട്ടിനെ പിന്തുണയ്‌ക്കുന്നില്ല , അതിനാൽ അത് ദൃശ്യപരമായി പ്രവർത്തനരഹിതമാക്കുന്നതിന് നിങ്ങൾ ക്ലാസ് 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ഒരു ഡിസേബിൾഡ് ലിങ്കിൽ ആട്രിബ്യൂട്ട് സൂക്ഷിക്കേണ്ട കേസുകൾ കവർ ചെയ്യുന്നതിന് , s-ന്റെ ലിങ്ക് പ്രവർത്തനം പ്രവർത്തനരഹിതമാക്കാൻ .disabledക്ലാസ് ഉപയോഗിക്കുന്നു . ഈ CSS പ്രോപ്പർട്ടി ഇതുവരെ HTML-നായി സ്റ്റാൻഡേർഡ് ചെയ്തിട്ടില്ല, എന്നാൽ എല്ലാ ആധുനിക ബ്രൗസറുകളും ഇതിനെ പിന്തുണയ്ക്കുന്നു. കൂടാതെ, പിന്തുണയ്‌ക്കുന്ന ബ്രൗസറുകളിൽ പോലും , കീബോർഡ് നാവിഗേഷൻ ബാധിക്കപ്പെടാതെ തുടരുന്നു, അതായത് കാഴ്ചയുള്ള കീബോർഡ് ഉപയോക്താക്കൾക്കും സഹായ സാങ്കേതിക വിദ്യകളുടെ ഉപയോക്താക്കൾക്കും തുടർന്നും ഈ ലിങ്കുകൾ സജീവമാക്കാനാകും. സുരക്ഷിതമായിരിക്കാൻ, കൂടാതെ , ഈ ലിങ്കുകളിൽ കീബോർഡ് ഫോക്കസ് സ്വീകരിക്കുന്നതിൽ നിന്ന് തടയുന്നതിന് ഒരു ആട്രിബ്യൂട്ടും ഉൾപ്പെടുത്തുക, കൂടാതെ അവയുടെ പ്രവർത്തനം പൂർണ്ണമായും പ്രവർത്തനരഹിതമാക്കാൻ ഇഷ്‌ടാനുസൃത JavaScript ഉപയോഗിക്കുക.pointer-events: none<a>pointer-events: nonearia-disabled="true"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ശൈലികൾ s പോലുള്ള മറ്റ് ഘടകങ്ങളിൽ പ്രയോഗിക്കാൻ കഴിയും . JavaScript വഴിയുള്ള അവരുടെ ടോഗിൾ സ്വഭാവം പ്രാപ്തമാക്കുന്നതിന് ആ പരിഷ്കരിച്ച ബട്ടണുകൾ ഉൾക്കൊള്ളുന്നവയിലേക്ക് ചേർക്കുകയും നിങ്ങളുടെ <label>ബട്ടണുകൾക്കുള്ളിലെ s ശൈലിയിലേക്ക് ചേർക്കുകയും ചെയ്യുക. നിങ്ങൾക്ക് ഒറ്റ ഇൻപുട്ട്-പവർ ബട്ടണുകളോ അവയുടെ ഗ്രൂപ്പുകളോ സൃഷ്ടിക്കാനാകുമെന്നത് ശ്രദ്ധിക്കുക.data-toggle="buttons".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>

രീതികൾ