బటన్లు

బహుళ పరిమాణాలు, రాష్ట్రాలు మరియు మరిన్నింటికి మద్దతుతో ఫారమ్‌లు, డైలాగ్‌లు మరియు మరిన్నింటిలో చర్యల కోసం బూట్‌స్ట్రాప్ అనుకూల బటన్ శైలులను ఉపయోగించండి.

ఉదాహరణలు

బూట్‌స్ట్రాప్ అనేక ముందే నిర్వచించబడిన బటన్ స్టైల్‌లను కలిగి ఉంటుంది, ప్రతి ఒక్కటి దాని స్వంత సెమాంటిక్ ప్రయోజనాన్ని అందిస్తాయి, మరింత నియంత్రణ కోసం కొన్ని అదనపు అంశాలు అందించబడతాయి.

<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మీరు డిసేబుల్ లింక్‌లో లక్షణాన్ని ఉంచాల్సిన సందర్భాలను కవర్ చేయడానికి , 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>

పద్ధతులు