ఈ వ్యాసం మీకు బోధిస్తుంది:
- బూట్‌స్ట్రాప్‌లో బటన్లను ఎలా తయారు చేయాలి?
- బూట్‌స్ట్రాప్‌లో అవుట్‌లైన్ బటన్లను ఎలా సృష్టించాలి?
- బూట్స్ట్రాప్ బటన్ పరిమాణాలను ఎలా సర్దుబాటు చేయాలి?
- బూట్‌స్ట్రాప్‌లో బ్లాక్-లెవల్ బటన్‌ను ఎలా తయారు చేయాలి?
- బూట్‌స్ట్రాప్‌లో యాక్టివ్ స్టేట్ బటన్లను ఎలా సృష్టించాలి?
- బూట్‌స్ట్రాప్‌లో డిసేబుల్ స్టేట్ బటన్లను ఎలా సృష్టించాలి?
బూట్‌స్ట్రాప్‌లో బటన్లను ఎలా తయారు చేయాలి?
బూట్స్ట్రాప్ ' btn 'బటన్లను సృష్టించడానికి తరగతి ఉపయోగించబడుతుంది. స్టైల్ బటన్లను జోడించడానికి, మీరు “ని ఉపయోగించవచ్చు btn 'వర్ణ తరగతితో తరగతి, ఉదాహరణకు' btn-విజయం ” ఆకుపచ్చ బటన్‌ని సృష్టించడానికి.
HTML లో, ' <బటన్> ',' ', మరియు' <ఇన్పుట్> '' రకంతో ట్యాగ్‌లు బటన్ ” బటన్లను రూపొందించడానికి ఉపయోగించబడతాయి. ది ' btn 'క్లాస్ ముందుగా నిర్వచించిన స్టైలింగ్‌ను కలిగి ఉంది, అది బటన్ ఎలిమెంట్‌లకు ప్రాథమిక స్టైలింగ్‌ను జోడించింది.
స్పష్టమైన భావన కోసం, దిగువ ఉదాహరణను చూడండి.
ఉదాహరణ
HTML ఫైల్‌లో, విభిన్న ట్యాగ్‌లను ఉపయోగించి బటన్లను సృష్టించడానికి దశలను అనుసరించండి:
- జోడించు' <బటన్> 'మరియు' 'మూలకాలు మరియు వాటిని కేటాయించండి' btn 'మరియు' btn-ప్రాధమిక 'తరగతులు.
- ఆపై, ఒక 'ని జోడించండి <ఇన్పుట్> '' రకంతో ట్యాగ్ బటన్ ”. దానిని కేటాయించండి' btn 'మరియు' btn-విజయం ” మొదటి రెండు బటన్లను నీలం రంగులో మరియు మూడవది ఆకుపచ్చగా స్టైలింగ్ కోసం:
< a తరగతి = 'btn btn-ప్రైమరీ' href = '#' > తెరవండి < / a >
< ఇన్పుట్ రకం = 'బటన్' తరగతి = 'btn btn-విజయం' విలువ = 'వెతకండి' >
అవుట్‌పుట్
బూట్‌స్ట్రాప్‌లో అవుట్‌లైన్ బటన్లను ఎలా సృష్టించాలి?
బటన్ అవుట్‌లైన్‌లను జోడించడానికి, బూట్స్ట్రాప్ “ btn-outline-* ” క్లాస్ ఉపయోగించబడుతుంది. దాని వాక్యనిర్మాణంలో,' * ” ఇక్కడ అవుట్‌లైన్ రంగును సూచిస్తుంది. ఉదాహరణకి, ' btn-outline-danger 'ఎరుపు రూపురేఖలను ఉంచుతుంది,' btn-ఔట్‌లైన్-ప్రైమరీ ” నీలి రంగు రూపురేఖలను సెట్ చేస్తుంది మరియు మరిన్ని.
క్రింద ఇవ్వబడిన కోడ్‌ను విశ్లేషించండి:
< బటన్ రకం = 'బటన్' తరగతి = 'btn btn-ఔట్‌లైన్-ప్రైమరీ' >తదుపరి< / బటన్ >< బటన్ రకం = 'బటన్' తరగతి = 'btn btn-ఔట్‌లైన్-ప్రమాదం' >రద్దు చేయి< / బటన్ >
< బటన్ రకం = 'బటన్' తరగతి = 'btn btn-ఔట్‌లైన్-విజయం' >విజయం< / బటన్ >
ఇది గమనించవచ్చు ' తరువాత 'బటన్ నీలి రంగు రూపురేఖలు కలిగి ఉంది, రద్దు చేయండి 'ఎరుపు రంగు రూపురేఖలతో బటన్, మరియు' విజయం ” బటన్ ఆకుపచ్చ రూపురేఖలతో స్టైల్ చేయబడింది:
బూట్స్ట్రాప్ బటన్ పరిమాణాలను ఎలా సర్దుబాటు చేయాలి?
బటన్ పరిమాణాలను సర్దుబాటు చేయడానికి కొన్ని బూట్స్ట్రాప్ తరగతులు వర్తించబడతాయి, అవి:
- ' btn-lg ” క్లాస్ పెద్ద బటన్‌ని సృష్టించడానికి వర్తించబడుతుంది. ఈ తరగతి ఫాంట్ పరిమాణాన్ని మరియు పాడింగ్‌ని పెంచుతుంది.
- ' btn-md ” మీడియం-సైజ్ బటన్‌ను సృష్టిస్తుంది.
- ' btn-sm ” ఒక చిన్న బటన్‌ను సృష్టిస్తుంది.
ఉదాహరణ
ఇప్పుడు, మేము వేర్వేరు పరిమాణాలు మరియు స్వీయ వివరణాత్మక పేర్లతో మూడు బటన్లను సృష్టిస్తాము:
< బటన్ రకం = 'బటన్' తరగతి = 'btn btn-సెకండరీ btn-lg' >పెద్ద< / బటన్ >< బటన్ రకం = 'బటన్' తరగతి = 'btn btn-హెచ్చరిక btn-md' >మీడియం< / బటన్ >
< బటన్ రకం = 'బటన్' తరగతి = 'btn btn-danger btn-sm' >చిన్న< / బటన్ >
అవుట్‌పుట్
బూట్‌స్ట్రాప్‌లో బ్లాక్-లెవల్ బటన్‌ను ఎలా తయారు చేయాలి?
బ్లాక్-లెవల్ బటన్లు పూర్తి-వెడల్పు పరిమాణాన్ని కలిగి ఉంటాయి. బ్లాక్-లెవల్ బటన్లను సృష్టించడానికి, ' btn-బ్లాక్ 'తరగతి క్రింది విధంగా ఉపయోగించబడుతుంది
< బటన్ రకం = 'బటన్' తరగతి = 'btn btn-హెచ్చరిక btn-బ్లాక్' > బటన్< / బటన్ >< బటన్ రకం = 'బటన్' తరగతి = 'btn btn-సెకండరీ btn-బ్లాక్' >బటన్ < / బటన్ >
అవుట్‌పుట్
బూట్‌స్ట్రాప్‌లో యాక్టివ్ స్టేట్ బటన్లను ఎలా సృష్టించాలి?
యాక్టివ్ స్టేట్ బటన్లు ప్రస్తుతం సక్రియంగా ఉన్న బటన్లను సూచిస్తాయి. ఈ బటన్లు సాధారణం కంటే కొంచెం ముదురు రంగులో ఉంటాయి. అటువంటి బటన్లను సృష్టించడానికి, బూట్స్ట్రాప్ ' చురుకుగా 'తరగతి ఉపయోగించబడుతుంది.
ఉదాహరణ
దిగువ కోడ్ రెండు బటన్లను సృష్టిస్తుంది. మొదటిది సాధారణ స్థితిలో ఉండగా మరొకటి ' చురుకుగా 'తరగతి:
< బటన్ రకం = 'బటన్' తరగతి = 'btn btn-విజయం' >విజయం< / బటన్ >< బటన్ రకం = 'బటన్' తరగతి = 'btn btn-సక్సెస్ యాక్టివ్' >విజయం< / బటన్ >
అవుట్‌పుట్
బూట్‌స్ట్రాప్‌లో డిసేబుల్ స్టేట్ బటన్లను ఎలా సృష్టించాలి?
డిసేబుల్ స్టేట్ బటన్లు క్లిక్ చేయలేని మరియు ఉపయోగించలేని బటన్లను సూచిస్తాయి. బూట్‌స్ట్రాప్‌లో, ' వికలాంగుడు 'క్లాస్ డిసేబుల్ స్టేట్ బటన్‌ను సృష్టించడానికి ఉపయోగించబడుతుంది. ది ' వికలాంగుడు ” లక్షణాన్ని కూడా ఈ ప్రయోజనం కోసం ఉపయోగించవచ్చు.
ఉదాహరణ
దిగువ అందించిన ఉదాహరణను తనిఖీ చేయండి:
- మొదటి బటన్ డిసేబుల్ స్థితిలో లేదు.
- రెండవది 'ని ఉపయోగిస్తుంది వికలాంగుడు ” డిసేబుల్ స్టేట్ బటన్‌ను సృష్టించడానికి తరగతి.
- మూడవది ' వికలాంగుడు ' గుణం:
< బటన్ రకం = 'బటన్' తరగతి = 'btn btn-విజయం నిలిపివేయబడింది' >విజయం< / బటన్ >
< బటన్ రకం = 'బటన్' తరగతి = 'btn btn-విజయం' నిలిపివేయబడింది>విజయం< / బటన్ >
అవుట్‌పుట్
మేము CSSలో బూట్స్ట్రాప్ బటన్లు మరియు వాటి స్టైలింగ్‌కు సంబంధించిన విభిన్న అంశాలను కవర్ చేసాము.
ముగింపు
ది ' btn 'తరగతి సాధారణ రూపకల్పనతో బూట్స్ట్రాప్ బటన్లను సృష్టించడానికి ఉపయోగించబడుతుంది. రంగు మరియు అవుట్‌లైన్ బటన్లను సృష్టించడానికి, ' btn-* 'మరియు' btn-outline-* 'తరగతులు ఎక్కడ ఉపయోగించబడతాయి' * ” ఏదైనా రంగు తరగతిని సూచిస్తుంది. ఉదాహరణకి, ' btn-హెచ్చరిక 'పసుపు బటన్‌ను సృష్టిస్తుంది,' btn-ఔట్‌లైన్-హెచ్చరిక ” పసుపు రంగులో ఉన్న బటన్‌ను సృష్టిస్తుంది మరియు మరెన్నో. బటన్లను యాక్టివ్ లేదా డిసేబుల్ చేయడానికి, వరుసగా 'యాక్టివ్' మరియు 'డిసేబుల్డ్' క్లాసులు వర్తింపజేయబడతాయి. ఈ పోస్ట్ బూట్స్ట్రాప్ బటన్‌లపై సమగ్ర మార్గదర్శిని అందించింది.