பொத்தான்கள்

பல அளவுகள், நிலைகள் மற்றும் பலவற்றிற்கான ஆதரவுடன் படிவங்கள், உரையாடல்கள் மற்றும் பலவற்றின் செயல்களுக்கு பூட்ஸ்டார்ப்பின் தனிப்பயன் பொத்தான் பாணிகளைப் பயன்படுத்தவும்.

எடுத்துக்காட்டுகள்

பூட்ஸ்டார்ப் பல முன் வரையறுக்கப்பட்ட பொத்தான் பாணிகளை உள்ளடக்கியது, ஒவ்வொன்றும் அதன் சொந்த சொற்பொருள் நோக்கத்தை வழங்குகின்றன, மேலும் சில கூடுதல் கட்டுப்பாடுகள் உள்ளன.

<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>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"இந்த tabindex="-1"இணைப்புகளில் விசைப்பலகை ஃபோகஸ் பெறுவதைத் தடுக்க, அவற்றின் செயல்பாட்டை முழுவதுமாக முடக்க தனிப்பயன் JavaScript ஐப் பயன்படுத்தவும்.

<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 போன்ற பிற உறுப்புகளுக்குப் பயன்படுத்தப்படலாம் . ஜாவாஸ்கிரிப்ட் வழியாக அவற்றின் மாறுதல் நடத்தையை செயல்படுத்த, மாற்றியமைக்கப்பட்ட பொத்தான்களைக் கொண்டவற்றில் சேர்க்கவும் மற்றும் உங்கள் <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>

முறைகள்