అప్రోచ్

ప్రారంభ పేజీలు ప్రాజెక్ట్ యొక్క పరిచయ పర్యటనను మరియు అది అందించే వాటిని అందజేస్తుండగా, ఈ పత్రం మనం బూట్‌స్ట్రాప్‌లో చేసే పనులను ఎందుకు చేస్తాము అనే దానిపై దృష్టి పెడుతుంది. ఇది వెబ్‌లో నిర్మించడానికి మా తత్వశాస్త్రాన్ని వివరిస్తుంది, తద్వారా ఇతరులు మన నుండి నేర్చుకోగలరు, మాతో సహకరించగలరు మరియు మెరుగుపరచడంలో మాకు సహాయపడగలరు.

సరిగ్గా అనిపించని దాన్ని చూశారా లేదా బహుశా బాగా చేయవచ్చా? ఒక సమస్యను తెరవండి —దీనిని మీతో చర్చించడానికి మేము ఇష్టపడతాము.

సారాంశం

మేము వీటన్నింటిలో ప్రతిదానిలో మరింతగా ప్రవేశిస్తాము, కానీ అధిక స్థాయిలో, మా విధానానికి మార్గనిర్దేశం చేసేది ఇక్కడ ఉంది.

• భాగాలు ప్రతిస్పందించేవి మరియు మొబైల్-మొదట ఉండాలి
• భాగాలు బేస్ క్లాస్‌తో నిర్మించబడాలి మరియు మాడిఫైయర్ తరగతుల ద్వారా విస్తరించాలి
• కాంపోనెంట్ స్టేట్‌లు సాధారణ z-ఇండెక్స్ స్కేల్‌ను పాటించాలి
• సాధ్యమైనప్పుడల్లా, JavaScript కంటే HTML మరియు CSS అమలును ఇష్టపడండి
• సాధ్యమైనప్పుడల్లా, అనుకూల శైలులపై యుటిలిటీలను ఉపయోగించండి
• సాధ్యమైనప్పుడల్లా, కఠినమైన HTML అవసరాలను (పిల్లల ఎంపికదారులు) అమలు చేయకుండా ఉండండి

రెస్పాన్సివ్

బూట్‌స్ట్రాప్ యొక్క ప్రతిస్పందించే శైలులు ప్రతిస్పందించేలా నిర్మించబడ్డాయి, ఈ విధానాన్ని తరచుగా మొబైల్-ఫస్ట్ గా సూచిస్తారు . మేము ఈ పదాన్ని మా డాక్స్‌లో ఉపయోగిస్తాము మరియు దానితో ఎక్కువగా అంగీకరిస్తాము, కానీ కొన్నిసార్లు ఇది చాలా విస్తృతంగా ఉండవచ్చు. బూట్‌స్ట్రాప్‌లో ప్రతి భాగం పూర్తిగా స్పందించనప్పటికీ, ఈ ప్రతిస్పందించే విధానం CSS ఓవర్‌రైడ్‌లను తగ్గించడం ద్వారా వీక్షణపోర్ట్ పెద్దదిగా మారినప్పుడు శైలులను జోడించడానికి మిమ్మల్ని నెట్టడం.

బూట్‌స్ట్రాప్‌లో, మీరు దీన్ని మా మీడియా ప్రశ్నలలో చాలా స్పష్టంగా చూస్తారు. చాలా సందర్భాలలో, మేము min-widthనిర్దిష్ట బ్రేక్‌పాయింట్‌లో వర్తింపజేయడం ప్రారంభించే ప్రశ్నలను ఉపయోగిస్తాము మరియు అధిక బ్రేక్‌పాయింట్‌ల ద్వారా చేరుకుంటాము. ఉదాహరణకు, a నుండి అనంతం వరకు .d-noneవర్తిస్తుంది . min-width: 0మరోవైపు, .d-md-noneమీడియం బ్రేక్‌పాయింట్ మరియు అంతకంటే ఎక్కువ నుండి a వర్తిస్తుంది.

max-widthఒక భాగం యొక్క స్వాభావిక సంక్లిష్టత అవసరమైనప్పుడు మేము కొన్నిసార్లు ఉపయోగిస్తాము . కొన్ని సమయాల్లో, ఈ ఓవర్‌రైడ్‌లు మా కాంపోనెంట్‌ల నుండి కోర్ ఫంక్షనాలిటీని తిరిగి వ్రాయడం కంటే అమలు చేయడానికి మరియు మద్దతు ఇవ్వడానికి క్రియాత్మకంగా మరియు మానసికంగా స్పష్టంగా ఉంటాయి. మేము ఈ విధానాన్ని పరిమితం చేయడానికి ప్రయత్నిస్తాము, కానీ కాలానుగుణంగా దీన్ని ఉపయోగిస్తాము.

తరగతులు

మా రీబూట్ కాకుండా, క్రాస్-బ్రౌజర్ సాధారణీకరణ స్టైల్‌షీట్, మా అన్ని స్టైల్‌లు తరగతులను సెలెక్టర్‌లుగా ఉపయోగించాలని లక్ష్యంగా పెట్టుకున్నాయి. దీనర్థం టైప్ సెలెక్టర్‌లు (ఉదా, input[type="text"]) మరియు అదనపు పేరెంట్ క్లాస్‌ల (ఉదా, ) నుండి స్టీరింగ్ క్లియర్ .parent .childస్టైల్‌లను సులభంగా ఓవర్‌రైడ్ చేయలేని విధంగా చేస్తుంది.

అందుకని, కాంపోనెంట్‌లు సాధారణమైన, ఓవర్‌రైడ్ చేయకూడని ఆస్తి-విలువ జంటలను కలిగి ఉండే బేస్ క్లాస్‌తో నిర్మించబడాలి. ఉదాహరణకు, .btnమరియు .btn-primary. మేము , మరియు .btnవంటి అన్ని సాధారణ శైలుల కోసం ఉపయోగిస్తాము . మేము అప్పుడు రంగు, నేపథ్య-రంగు, అంచు-రంగు మొదలైన వాటిని జోడించడం వంటి మాడిఫైయర్‌లను ఉపయోగిస్తాము .displaypaddingborder-width.btn-primary

బహుళ ప్రాపర్టీలు లేదా విలువలు బహుళ రూపాంతరాలలో మార్చబడినప్పుడు మాత్రమే మాడిఫైయర్ తరగతులను ఉపయోగించాలి. మాడిఫైయర్‌లు ఎల్లప్పుడూ అవసరం లేదు, కాబట్టి మీరు నిజంగా కోడ్ లైన్‌లను సేవ్ చేస్తున్నారని మరియు వాటిని సృష్టించేటప్పుడు అనవసరమైన ఓవర్‌రైడ్‌లను నివారిస్తున్నారని నిర్ధారించుకోండి. మాడిఫైయర్‌లకు మంచి ఉదాహరణలు మా థీమ్ కలర్ క్లాస్‌లు మరియు సైజు వేరియంట్‌లు.

z-సూచిక ప్రమాణాలు

బూట్‌స్ట్రాప్‌లో రెండు z-indexప్రమాణాలు ఉన్నాయి-ఒక భాగం మరియు అతివ్యాప్తి భాగాలు లోపల మూలకాలు.

కాంపోనెంట్ ఎలిమెంట్స్

• borderబూట్‌స్ట్రాప్‌లోని కొన్ని భాగాలు ఆస్తిని సవరించకుండా డబుల్ సరిహద్దులను నిరోధించడానికి అతివ్యాప్తి చెందుతున్న మూలకాలతో నిర్మించబడ్డాయి . ఉదాహరణకు, బటన్ సమూహాలు, ఇన్‌పుట్ సమూహాలు మరియు పేజినేషన్.
• ఈ భాగాలు ఒక ప్రామాణిక z-indexప్రమాణాన్ని పంచుకుంటాయి 0.3
• 0డిఫాల్ట్ (ప్రారంభం), 1ఉంది :hover, 2ఉంది :active/ , .activeమరియు 3.:focus
• ఈ విధానం అత్యధిక వినియోగదారు ప్రాధాన్యత యొక్క మా అంచనాలకు సరిపోలుతుంది. ఒక మూలకం ఫోకస్ చేయబడితే, అది వీక్షణలో మరియు వినియోగదారు దృష్టిలో ఉంటుంది. క్రియాశీల మూలకాలు స్థితిని సూచిస్తాయి కాబట్టి అవి రెండవ స్థానంలో ఉన్నాయి. హోవర్ మూడవ అత్యధికం ఎందుకంటే ఇది వినియోగదారు ఉద్దేశాన్ని సూచిస్తుంది, కానీ దాదాపు ఏదైనా హోవర్ చేయవచ్చు.

అతివ్యాప్తి భాగాలు

బూట్‌స్ట్రాప్ ఒక రకమైన అతివ్యాప్తి వలె పనిచేసే అనేక భాగాలను కలిగి ఉంటుంది. ఇందులో అత్యధికంగా z-index, డ్రాప్‌డౌన్‌లు, స్థిర మరియు స్టిక్కీ నావ్‌బార్‌లు, మోడల్‌లు, టూల్‌టిప్‌లు మరియు పాప్‌ఓవర్‌లు ఉంటాయి. ఈ భాగాలు వాటి స్వంత z-indexస్కేల్‌ను కలిగి ఉంటాయి, అది ప్రారంభం అవుతుంది 1000. ఈ ప్రారంభ సంఖ్య ఏకపక్షంగా ఎంపిక చేయబడింది మరియు మా స్టైల్స్ మరియు మీ ప్రాజెక్ట్ అనుకూల శైలుల మధ్య చిన్న బఫర్‌గా పనిచేస్తుంది.

ప్రతి అతివ్యాప్తి భాగం దాని z-indexవిలువను కొద్దిగా పెంచుతుంది, తద్వారా సాధారణ UI సూత్రాలు వినియోగదారుని కేంద్రీకరించిన లేదా హోవర్ చేసిన మూలకాలను ఎల్లప్పుడూ వీక్షణలో ఉంచడానికి అనుమతిస్తాయి. ఉదాహరణకు, మోడల్ అనేది డాక్యుమెంట్ బ్లాకింగ్ (ఉదా, మోడల్ చర్య కోసం మీరు ఏ ఇతర చర్య తీసుకోలేరు), కాబట్టి మేము దానిని మా నావ్‌బార్‌ల పైన ఉంచాము.

z-indexమా లేఅవుట్ పేజీలో దీని గురించి మరింత తెలుసుకోండి .

JS ద్వారా HTML మరియు CSS

సాధ్యమైనప్పుడల్లా, మేము జావాస్క్రిప్ట్‌లో HTML మరియు CSSని వ్రాయడానికి ఇష్టపడతాము. సాధారణంగా, HTML మరియు CSS మరింత సమృద్ధిగా ఉంటాయి మరియు అన్ని విభిన్న అనుభవ స్థాయిల కంటే ఎక్కువ మంది వ్యక్తులకు అందుబాటులో ఉంటాయి. HTML మరియు CSS కూడా మీ బ్రౌజర్‌లో జావాస్క్రిప్ట్ కంటే వేగంగా ఉంటాయి మరియు మీ బ్రౌజర్ సాధారణంగా మీ కోసం చాలా ఎక్కువ కార్యాచరణను అందిస్తుంది.

ఈ సూత్రం dataలక్షణాలను ఉపయోగించి మా ఫస్ట్-క్లాస్ JavaScript API. మా జావాస్క్రిప్ట్ ప్లగిన్‌లను ఉపయోగించడానికి మీరు దాదాపు ఏ జావాస్క్రిప్ట్‌ను వ్రాయవలసిన అవసరం లేదు; బదులుగా, HTML వ్రాయండి. మా జావాస్క్రిప్ట్ అవలోకనం పేజీలో దీని గురించి మరింత చదవండి .

చివరగా, మా శైలులు సాధారణ వెబ్ మూలకాల యొక్క ప్రాథమిక ప్రవర్తనలపై ఆధారపడి ఉంటాయి. వీలైనప్పుడల్లా, మేము బ్రౌజర్ అందించే వాటిని ఉపయోగించడానికి ఇష్టపడతాము. ఉదాహరణకు, మీరు .btnదాదాపు ఏదైనా మూలకంపై క్లాస్‌ని ఉంచవచ్చు, కానీ చాలా ఎలిమెంట్‌లు సెమాంటిక్ విలువ లేదా బ్రౌజర్ కార్యాచరణను అందించవు. కాబట్టి బదులుగా, మేము <button>s మరియు <a>s ఉపయోగిస్తాము.

మరింత సంక్లిష్టమైన భాగాలకు కూడా ఇది వర్తిస్తుంది. ఇన్‌పుట్ స్థితి ఆధారంగా పేరెంట్ ఎలిమెంట్‌కి క్లాస్‌లను జోడించడానికి మా స్వంత ఫారమ్ ధ్రువీకరణ ప్లగ్‌ఇన్‌ను వ్రాయగలిగినప్పటికీ, టెక్స్ట్‌ను ఎరుపు రంగులో స్టైల్ చేయడానికి అనుమతిస్తుంది, ప్రతి బ్రౌజర్:valid మాకు అందించే / :invalidసూడో-ఎలిమెంట్‌లను ఉపయోగించడాన్ని మేము ఇష్టపడతాము.

యుటిలిటీస్

యుటిలిటీ తరగతులు—బూట్‌స్ట్రాప్ 3లో గతంలో సహాయకులు—CSS ఉబ్బరం మరియు పేలవమైన పేజీ పనితీరును ఎదుర్కోవడంలో శక్తివంతమైన మిత్రుడు. యుటిలిటీ క్లాస్ అనేది సాధారణంగా ఒకే, మార్పులేని ఆస్తి-విలువ జతగా వర్గంగా వ్యక్తీకరించబడుతుంది (ఉదా, .d-blockసూచిస్తుంది display: block;). HTML వ్రాసేటప్పుడు మరియు మీరు వ్రాయవలసిన కస్టమ్ CSS మొత్తాన్ని పరిమితం చేయడంలో వారి ప్రధాన ఆకర్షణ వేగం.

ప్రత్యేకంగా కస్టమ్ CSSకి సంబంధించి, యుటిలిటీలు మీ అత్యంత సాధారణంగా పునరావృతమయ్యే ఆస్తి-విలువ జతలను ఒకే తరగతులుగా తగ్గించడం ద్వారా పెరుగుతున్న ఫైల్ పరిమాణాన్ని ఎదుర్కోవడంలో సహాయపడతాయి. ఇది మీ ప్రాజెక్ట్‌లలో స్కేల్‌లో నాటకీయ ప్రభావాన్ని చూపుతుంది.

ఫ్లెక్సిబుల్ HTML

ఎల్లప్పుడూ సాధ్యం కానప్పటికీ, భాగాల కోసం మా HTML అవసరాలలో అతిగా పిడివాదాన్ని నివారించడానికి మేము ప్రయత్నిస్తాము. >ఆ విధంగా, మేము మా CSS సెలెక్టర్‌లలో ఒకే తరగతులపై దృష్టి కేంద్రీకరిస్తాము మరియు వెంటనే పిల్లల ఎంపికదారులను ( ) నివారించేందుకు ప్రయత్నిస్తాము . ఇది మీ అమలులో మీకు మరింత సౌలభ్యాన్ని ఇస్తుంది మరియు మా CSSని సరళంగా మరియు తక్కువ నిర్దిష్టంగా ఉంచడంలో సహాయపడుతుంది.

కోడ్ సమావేశాలు

కోడ్ గైడ్ (బూట్‌స్ట్రాప్ సహ-సృష్టికర్త, @mdo నుండి) బూట్‌స్ట్రాప్ అంతటా మన HTML మరియు CSSని ఎలా వ్రాస్తామో డాక్యుమెంట్ చేస్తుంది. ఇది సాధారణ ఫార్మాటింగ్, ఇంగితజ్ఞానం డిఫాల్ట్‌లు, ప్రాపర్టీ మరియు అట్రిబ్యూట్ ఆర్డర్‌లు మరియు మరిన్నింటి కోసం మార్గదర్శకాలను నిర్దేశిస్తుంది.

మేము మా Sass/CSSలో ఈ ప్రమాణాలను మరియు మరిన్నింటిని అమలు చేయడానికి Stylelint ని ఉపయోగిస్తాము. మా అనుకూల స్టైలింట్ కాన్ఫిగరేషన్ ఓపెన్ సోర్స్ మరియు ఇతరులు ఉపయోగించడానికి మరియు పొడిగించడానికి అందుబాటులో ఉంది.

మేము ప్రామాణిక మరియు అర్థ HTMLని అమలు చేయడానికి, అలాగే సాధారణ లోపాలను గుర్తించడానికి vnu-jar ని ఉపయోగిస్తాము.