ఈ కథనం బూట్స్ట్రాప్ బ్యాడ్జ్‌ల వినియోగాన్ని ప్రదర్శించడానికి క్రింది దృక్కోణాలను కవర్ చేస్తుంది:
- అదనపు సమాచారం కోసం బూట్స్ట్రాప్ బ్యాడ్జ్‌ని ఎలా ఉపయోగించాలి?
- సందర్భోచిత సమాచారం కోసం బూట్స్ట్రాప్ బ్యాడ్జ్‌ని ఎలా ఉపయోగించాలి?
- బూట్స్ట్రాప్ బ్యాడ్జ్‌కి అనుకూల శైలులను ఎలా జోడించాలి?
- బూట్స్ట్రాప్ బ్యాడ్జ్‌కి చిహ్నాలను ఎలా జోడించాలి?
- బూట్స్ట్రాప్ బ్యాడ్జ్‌ని మరొక మూలానికి లింక్ చేయడం ఎలా?
- బ్యాడ్జ్‌లను గుండ్రంగా చేయడం ఎలా?
- బూట్స్ట్రాప్ బ్యాడ్జ్‌ని కౌంటర్‌గా ఎలా ఉపయోగించాలి?
బూట్స్ట్రాప్ బ్యాడ్జ్‌లు అంటే ఏమిటి?
బ్యాడ్జ్‌లు సూచికను చూపించడానికి ఉపయోగించే ప్రాథమిక భాగాలు. ఉదాహరణకు, నోటిఫికేషన్‌లు లేదా సందేశాల సంఖ్యను చూపించడానికి వాటిని సంఖ్యా కౌంటర్‌గా ఉపయోగించవచ్చు:
ఇచ్చిన చిత్రంలో చూపిన విధంగా అదనపు సమాచారాన్ని ప్రదర్శించడానికి కూడా వాటిని ఉపయోగించవచ్చు:
అదనపు సమాచారం కోసం బూట్స్ట్రాప్ బ్యాడ్జ్‌ని ఎలా ఉపయోగించాలి?
అదనపు సమాచారంగా ఉపయోగించడానికి HTML మూలకాలలో బూట్స్ట్రాప్ బ్యాడ్జ్‌లను జోడించవచ్చు. ప్రదర్శన కోసం దిగువ పేర్కొన్న ఉదాహరణను చూడండి.
ఉదాహరణ
అదనపు సమాచారం కోసం బూట్స్ట్రాప్ బ్యాడ్జ్‌ని ఉపయోగించడానికి, ముందుగా:
- జోడించు' 'మరియు' ”మూలకాలు.
- ఉంచండి' 'మూలకంతో' బ్యాడ్జ్ 'మరియు' బ్యాడ్జ్-* 'తరగతులు. “బ్యాడ్జ్-*” క్లాస్ పేర్కొన్న రంగుతో బ్యాడ్జ్‌ని సూచిస్తుంది:
< h6 > స్కాలర్‌షిప్‌లు < వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-సెకండరీ' > కొత్తది < / వ్యవధి >< / h6 >
సంబంధిత శీర్షికలకు రెండు బ్యాడ్జ్‌లు జోడించబడడాన్ని గమనించవచ్చు:
సందర్భోచిత సమాచారం కోసం బూట్స్ట్రాప్ బ్యాడ్జ్‌ని ఎలా ఉపయోగించాలి?
బూట్స్ట్రాప్ బ్యాడ్జ్‌లు వంటి సందర్భోచిత సమాచారాన్ని అందించడానికి కూడా ఉపయోగించవచ్చు బ్యాడ్జ్-ప్రమాదం ” బ్యాడ్జ్‌ని ఎరుపు రంగులో ప్రదర్శిస్తుంది మరియు రద్దు, చెల్లని లేదా మరిన్ని వంటి కొన్ని విఫలమైన సందేశాలను చూపడానికి ఉపయోగించవచ్చు. ది ' బ్యాడ్జ్-విజయం ” మనం కొంత విజయ సందేశాన్ని చూపించాలనుకుంటున్న చోట ఉపయోగించబడుతుంది.
ఉదాహరణ
చర్చించిన దృశ్యాన్ని అర్థం చేసుకోవడానికి ఇచ్చిన కోడ్‌ను చూడండి:
< వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-ప్రమాదం' >ఖాతా ధృవీకరించబడలేదు< / వ్యవధి >< వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-సమాచారం' >ఇది బ్యాడ్జ్< / వ్యవధి >
< వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-హెచ్చరిక' > ఖాతా పెండింగ్‌లో ఉంది కోసం ఆమోదం < / వ్యవధి >
< వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-విజయం' >ఖాతా ధృవీకరించబడింది< / వ్యవధి >
అవుట్‌పుట్
బూట్స్ట్రాప్ బ్యాడ్జ్‌కి అనుకూల శైలులను ఎలా జోడించాలి?
బూట్స్ట్రాప్ బ్యాడ్జ్‌లకు కొన్ని ప్రత్యేకమైన స్టైలింగ్‌ను జోడించడానికి మీరు CSSని కూడా ఉపయోగించవచ్చు. మెరుగైన అవగాహన కోసం, ' పేరుతో తరగతి ఆచారం '' లోపల జోడించబడింది ' మూలకం. అప్పుడు, కింది లక్షణాలు వర్తించబడతాయి:
< వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-డేంజర్ కస్టమ్' >ఖాతా ధృవీకరించబడలేదు < / వ్యవధి >< వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-సమాచారం కస్టమ్' >ఇది బ్యాడ్జ్< / వ్యవధి >
< వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-హెచ్చరిక ఆచారం' > ఖాతా పెండింగ్‌లో ఉంది కోసం ఆమోదం < / వ్యవధి >
< వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-సక్సెస్ కస్టమ్' >ఖాతా ధృవీకరించబడింది< / వ్యవధి >
శైలి 'అనుకూల' తరగతి
.కస్టమ్ {ఫాంట్ పరిమాణం : 18px ;
ఫాంట్-వెయిట్ : 100 ;
అక్షర అంతరం : 1px ;
పాడింగ్ : 8px 15px ;
}
ది ' .కస్టమ్ '' యాక్సెస్ చేయడానికి ఉపయోగించబడుతుంది ఆచారం ” తరగతి. కింది లక్షణాలు దీనికి వర్తించబడతాయి:
- ' ఫాంట్ పరిమాణం ” ఫాంట్ పరిమాణాన్ని సర్దుబాటు చేస్తుంది.
- ' ఫాంట్-వెయిట్ ” ఫాంట్ యొక్క మందాన్ని తెలియజేస్తుంది.
- ' అక్షర అంతరం ” అక్షరాల మధ్య ఖాళీని జోడిస్తుంది.
- ' పాడింగ్ ” మూలకం కంటెంట్ చుట్టూ ఖాళీని అందిస్తుంది.
అవుట్‌పుట్
బూట్స్ట్రాప్ బ్యాడ్జ్‌కి చిహ్నాలను ఎలా జోడించాలి?
మేము బ్యాడ్జ్‌లకు విభిన్న చిహ్నాలను కూడా జోడించవచ్చు. అలా చేయడానికి, ఈ కారణం కోసం ఉపయోగించబడే అనేక తరగతులు ఉన్నాయి. మరింత సమాచారం కోసం, సందర్శించండి ఫాంట్ అద్భుతం వెబ్సైట్.
ఉదాహరణ
HTMLలో, ఒక “ని జోడించండి ' మూలకం. ఈ ఎలిమెంట్‌లో, ఐకాన్ క్లాస్‌ని ఇన్‌సర్ట్ చేయడానికి ఇన్‌లైన్ ఎలిమెంట్ “ ” లేదా “” ఉంచండి:
< వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-డేంజర్ కస్టమ్' > ఖాతా ధృవీకరించబడలేదు< i తరగతి = 'ఫార్ ఫా-టైమ్స్-సర్కిల్' >< / i >
< / వ్యవధి >
< వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-సక్సెస్ కస్టమ్' > ఖాతా ధృవీకరించబడింది
< i తరగతి = 'ఫాస్ ఫా-యూజర్-చెక్' >< / i >
< / వ్యవధి >
అవుట్‌పుట్
బూట్స్ట్రాప్ బ్యాడ్జ్‌ని మరొక మూలానికి లింక్ చేయడం ఎలా?
బూట్స్ట్రాప్ బ్యాడ్జ్‌లను క్లిక్ చేయగలిగేలా చేయడానికి, ' బ్యాడ్జ్ 'HTML' లోపల తరగతులు ' ట్యాగ్ చేసి, లింక్ చేయబడిన పేజీ యొక్క సూచనను 'లో అందించండి href ' గుణం:
< a href = '#' తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-డేంజర్ కస్టమ్' >రద్దు చేయి< / a >< a href = '#' తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-సమాచారం కస్టమ్' >సమర్పించు< / a >
అవుట్‌పుట్
బ్యాడ్జ్‌లను గుండ్రంగా చేయడం ఎలా?
బ్యాడ్జ్ అంచులను మరింత గుండ్రంగా చేయడానికి, ఒక తరగతిని జోడించండి “ బ్యాడ్జ్-పిల్ ”. ఈ తరగతి పెద్ద 'కి మద్దతు ఇస్తుంది సరిహద్దు-వ్యాసార్థం 'మరియు సమాంతర' పాడింగ్ 'గుణాలు:
< వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-పిల్ బ్యాడ్జ్-డేంజర్ కస్టమ్' >ఖాతా ధృవీకరించబడలేదు < / వ్యవధి >< వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-పిల్ బ్యాడ్జ్-హెచ్చరిక ఆచారం' > ఖాతా పెండింగ్‌లో ఉంది కోసం ఆమోదం < / వ్యవధి >
< వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-పిల్ బ్యాడ్జ్-సక్సెస్ కస్టమ్' >ఖాతా ధృవీకరించబడింది < / వ్యవధి >
అవుట్‌పుట్
బూట్స్ట్రాప్ బ్యాడ్జ్‌ని కౌంటర్‌గా ఎలా ఉపయోగించాలి?
కౌంటర్‌తో బటన్‌ను సృష్టించడానికి, HTML “ని జోడించండి <బటన్> '' రకంతో ట్యాగ్ బటన్ 'మరియు దానికి బటన్ తరగతులను కేటాయించండి' btn 'మరియు' btn-విజయం ”. అప్పుడు, చేర్చండి ' కౌంటర్ ఉంచడానికి మూలకం:
< బటన్ రకం = 'బటన్' తరగతి = 'btn btn-విజయం' >నోటిఫికేషన్‌లు < వ్యవధి తరగతి = 'బ్యాడ్జ్ బ్యాడ్జ్-లైట్' > 4 < / వ్యవధి >
< / బటన్ >
అవుట్‌పుట్
అది బూట్స్ట్రాప్ బ్యాడ్జ్‌లు మరియు బూట్‌స్ట్రాప్‌లోని వాటి సంబంధిత లేబుల్‌ల గురించి.
ముగింపు
బూట్స్ట్రాప్ ' బ్యాడ్జ్ 'వెబ్‌సైట్‌కు బ్యాడ్జ్‌లను జోడించడానికి తరగతి ఉపయోగించబడుతుంది. ఉదాహరణకు, 'వంటి తరగతులు బ్యాడ్జ్-ప్రమాదం ',' బ్యాడ్జ్-సమాచారం ”, మరియు మరిన్ని బ్యాడ్జ్‌లకు వాటి లేబుల్‌గా సందర్భోచిత సమాచారాన్ని జోడించడానికి ఉపయోగించవచ్చు. బ్యాడ్జ్‌లకు చిహ్నాలను జోడించడానికి కొన్ని తరగతులు వర్తింపజేయబడతాయి, ఉదాహరణకు “ ఫా-టైమ్స్-సర్కిల్ ” క్రాస్ సర్కిల్ చిహ్నాన్ని ఉంచడానికి. ఈ పోస్ట్ బూట్స్ట్రాప్ బ్యాడ్జ్‌లు మరియు లేబుల్‌లపై సమగ్ర మార్గదర్శిని అందించింది.