బటన్లు
బహుళ పరిమాణాలు, రాష్ట్రాలు మరియు మరిన్నింటికి మద్దతుతో ఫారమ్లు, డైలాగ్లు మరియు మరిన్నింటిలో చర్యల కోసం బూట్స్ట్రాప్ అనుకూల బటన్ శైలులను ఉపయోగించండి.
బూట్స్ట్రాప్ అనేక ముందే నిర్వచించబడిన బటన్ స్టైల్లను కలిగి ఉంటుంది, ప్రతి ఒక్కటి దాని స్వంత సెమాంటిక్ ప్రయోజనాన్ని అందిస్తాయి, మరింత నియంత్రణ కోసం కొన్ని అదనపు అంశాలు అందించబడతాయి.
సహాయక సాంకేతికతలకు అర్థాన్ని తెలియజేయడం
అర్థాన్ని జోడించడానికి రంగును ఉపయోగించడం అనేది దృశ్యమాన సూచనను మాత్రమే అందిస్తుంది, ఇది స్క్రీన్ రీడర్ల వంటి సహాయక సాంకేతికతల వినియోగదారులకు తెలియజేయబడదు. రంగు ద్వారా సూచించబడిన సమాచారం కంటెంట్లోనే స్పష్టంగా ఉందని (ఉదా. కనిపించే వచనం) లేదా .sr-only
క్లాస్తో దాచిన అదనపు వచనం వంటి ప్రత్యామ్నాయ మార్గాల ద్వారా చేర్చబడిందని నిర్ధారించుకోండి.
తరగతులు మూలకంతో .btn
ఉపయోగించబడేలా రూపొందించబడ్డాయి . <button>
అయితే, మీరు ఈ తరగతులను <a>
లేదా <input>
మూలకాలపై కూడా ఉపయోగించవచ్చు (కొన్ని బ్రౌజర్లు కొద్దిగా భిన్నమైన రెండరింగ్ని వర్తింపజేయవచ్చు).
<a>
ప్రస్తుత పేజీలోని కొత్త పేజీలు లేదా విభాగాలకు లింక్ చేయడం కంటే పేజీలో కార్యాచరణను (కంటెంట్ కుప్పకూలడం వంటివి) ట్రిగ్గర్ చేయడానికి ఉపయోగించే మూలకాలపై బటన్ క్లాస్లను ఉపయోగిస్తున్నప్పుడు, ఈ లింక్లు role="button"
తమ ఉద్దేశాన్ని సముచితంగా అందించాలి స్క్రీన్ రీడర్లు.
ఒక బటన్ అవసరం, కానీ వారు తీసుకువచ్చే భారీ నేపథ్య రంగులు కాదా? .btn-outline-*
ఏదైనా బటన్లో అన్ని నేపథ్య చిత్రాలు మరియు రంగులను తీసివేయడానికి డిఫాల్ట్ మాడిఫైయర్ తరగతులను వాటితో భర్తీ చేయండి .
పెద్ద లేదా చిన్న బటన్లను ఇష్టపడుతున్నారా? జోడించు .btn-lg
లేదా .btn-sm
అదనపు పరిమాణాల కోసం.
జోడించడం ద్వారా బ్లాక్ స్థాయి బటన్లను సృష్టించండి—తల్లిదండ్రుల పూర్తి వెడల్పులో ఉండేవి .btn-block
.
సక్రియంగా ఉన్నప్పుడు బటన్లు నొక్కినప్పుడు (ముదురు నేపథ్యం, ముదురు అంచు మరియు ఇన్సెట్ షాడోతో) కనిపిస్తాయి. వారు సూడో-క్లాస్ని ఉపయోగిస్తున్నందున s కి తరగతిని జోడించాల్సిన అవసరం లేదు<button>
. అయినప్పటికీ, మీరు ప్రోగ్రామాటిక్గా స్టేట్ను పునరావృతం చేయవలసి .active
వస్తే (మరియు లక్షణాన్ని చేర్చండి ) మీరు ఇప్పటికీ అదే క్రియాశీల రూపాన్ని బలవంతం చేయవచ్చు .aria-pressed="true"
ఏదైనా మూలకానికి disabled
బూలియన్ లక్షణాన్ని జోడించడం ద్వారా బటన్లు నిష్క్రియంగా కనిపించేలా చేయండి .<button>
మూలకాన్ని ఉపయోగించే డిసేబుల్ బటన్లు <a>
కొంచెం భిన్నంగా ప్రవర్తిస్తాయి:
<a>
లు లక్షణానికి మద్దతు ఇవ్వవు , కాబట్టి మీరు దానిని దృశ్యమానంగా డిజేబుల్గా కనిపించేలా చేయడానికి తరగతినిdisabled
తప్పనిసరిగా జోడించాలి ..disabled
pointer-events
యాంకర్ బటన్లలో అన్నింటినీ నిలిపివేయడానికి కొన్ని భవిష్యత్తు-స్నేహపూర్వక శైలులు చేర్చబడ్డాయి . ఆ ప్రాపర్టీకి మద్దతిచ్చే బ్రౌజర్లలో, మీరు డిసేబుల్ కర్సర్ని చూడలేరు.- డిసేబుల్ బటన్లు
aria-disabled="true"
సహాయక సాంకేతికతలకు మూలకం యొక్క స్థితిని సూచించడానికి లక్షణాన్ని కలిగి ఉండాలి.
లింక్ కార్యాచరణ హెచ్చరిక
s యొక్క లింక్ కార్యాచరణను నిలిపివేయడానికి .disabled
తరగతి pointer-events: none
ప్రయత్నిస్తుంది <a>
, కానీ ఆ CSS ప్రాపర్టీ ఇంకా ప్రామాణికం కాలేదు. అదనంగా, సపోర్ట్ చేసే బ్రౌజర్లలో కూడా pointer-events: none
, కీబోర్డ్ నావిగేషన్ ప్రభావితం కాదు, అంటే దృష్టిగల కీబోర్డ్ వినియోగదారులు మరియు సహాయక సాంకేతికతలను ఉపయోగించే వినియోగదారులు ఇప్పటికీ ఈ లింక్లను సక్రియం చేయగలరు. కాబట్టి సురక్షితంగా ఉండటానికి, tabindex="-1"
ఈ లింక్లపై ఒక లక్షణాన్ని జోడించండి (కీబోర్డ్ ఫోకస్ పొందకుండా నిరోధించడానికి) మరియు వాటి కార్యాచరణను నిలిపివేయడానికి అనుకూల JavaScriptని ఉపయోగించండి.
బటన్లతో మరిన్ని చేయండి. టూల్బార్ల వంటి మరిన్ని భాగాల కోసం కంట్రోల్ బటన్ స్టేట్మెంట్స్ లేదా బటన్ల గ్రూప్లను సృష్టించండి.
data-toggle="button"
బటన్ active
స్థితిని టోగుల్ చేయడానికి జోడించండి . మీరు బటన్ను ముందస్తుగా టోగుల్ చేస్తుంటే, మీరు తప్పనిసరిగా .active
క్లాస్ని మరియు aria-pressed="true"
కు మాన్యువల్గా జోడించాలి <button>
.
చెక్బాక్స్ లేదా రేడియో స్టైల్ బటన్ టోగుల్ను అందించడానికి బూట్స్ట్రాప్ .button
స్టైల్లు s వంటి ఇతర అంశాలకు వర్తించవచ్చు . JavaScript ద్వారా వారి టోగుల్ ప్రవర్తనను ప్రారంభించడానికి ఆ సవరించిన బటన్లను కలిగి ఉన్న వాటికి జోడించండి మరియు <label>
మీ బటన్లలోని s శైలికి జోడించండి. మీరు ఒకే ఇన్పుట్-ఆధారిత బటన్లు లేదా వాటి సమూహాలను సృష్టించవచ్చని గమనించండి.data-toggle="buttons"
.btn-group
.btn-group-toggle
<input>
ఈ బటన్ల కోసం తనిఖీ చేయబడిన స్థితి బటన్లోని ఈవెంట్ ద్వారా మాత్రమే నవీకరించబడుతుందిclick
. మీరు ఇన్పుట్ను అప్డేట్ చేయడానికి మరొక పద్ధతిని ఉపయోగిస్తే-ఉదా, <input type="reset">
ఇన్పుట్ ప్రాపర్టీని మాన్యువల్గా వర్తింపజేయడం ద్వారా లేదా మీరు మాన్యువల్గా checked
టోగుల్ చేయాల్సి ఉంటుంది ..active
<label>
.active
ముందుగా తనిఖీ చేసిన బటన్లు ఇన్పుట్లకు క్లాస్ని మాన్యువల్గా జోడించాల్సిన అవసరం ఉందని గుర్తుంచుకోండి <label>
.
పద్ధతి | వివరణ |
---|---|
$().button('toggle') |
పుష్ స్థితిని టోగుల్ చేస్తుంది. బటన్ సక్రియం చేయబడిన రూపాన్ని ఇస్తుంది. |
$().button('dispose') |
మూలకం యొక్క బటన్ను నాశనం చేస్తుంది. |