አቀራረብ
በቀላሉ ለማበጀት እና እራስዎ ለማራዘም Bootstrapን ለመገንባት እና ለመጠገን ስለሚጠቀሙባቸው የመመሪያ መርሆዎች፣ ስልቶች እና ቴክኒኮች ይወቁ።
የመነሻ ገፆች የፕሮጀክቱን እና የሚያቀርበውን የመግቢያ ጉብኝት ሲያቀርቡ፣ ይህ ሰነድ በBootstrap ውስጥ ለምንሰራቸው ነገሮች ላይ ያተኩራል። ሌሎች ከእኛ እንዲማሩ፣ ከእኛ ጋር እንዲያዋጡ እና እንድንሻሻል እንዲረዱን በድር ላይ መገንባት ፍልስፍናችንን ያብራራል።
የማይመስል ነገር ይመልከቱ፣ ወይም ምናልባት የተሻለ ሊደረግ ይችላል? አንድ ጉዳይ ይክፈቱ - ከእርስዎ ጋር ብንወያይ ደስ ይለናል።
ማጠቃለያ
በእያንዳንዳቸው ውስጥ በይበልጥ ዘልቀን እንገባለን፣ ነገር ግን በከፍተኛ ደረጃ፣ አካሄዳችንን የሚመራው ይኸው ነው።
- አካላት ምላሽ ሰጪ እና ሞባይል-መጀመሪያ መሆን አለባቸው
- አካላት ከመሠረታዊ ክፍል ጋር መገንባት እና በማሻሻያ ክፍሎች ማራዘም አለባቸው
- የክፍለ-ግዛቶች የጋራ የ z-index ልኬትን መታዘዝ አለባቸው
- በሚቻልበት ጊዜ ሁሉ ከጃቫ ስክሪፕት ይልቅ HTML እና CSS ትግበራን ይምረጡ
- በተቻለ መጠን መገልገያዎችን በብጁ ቅጦች ላይ ይጠቀሙ
- በተቻለ መጠን ጥብቅ የኤችቲኤምኤል መስፈርቶችን (የልጆች መራጮችን) ከማስከበር ይቆጠቡ።
ምላሽ ሰጪ
የቡትስትራፕ ምላሽ ሰጭ ቅጦች ምላሽ ሰጭ እንዲሆኑ የተገነቡ ናቸው፣ ይህ አካሄድ ብዙውን ጊዜ ሞባይል-መጀመሪያ ተብሎ ይጠራል ። ይህንን ቃል በሰነዶቻችን ውስጥ እንጠቀማለን እና በአብዛኛው በእሱ እንስማማለን፣ ነገር ግን አንዳንድ ጊዜ በጣም ሰፊ ሊሆን ይችላል። በ Bootstrap ውስጥ እያንዳንዱ አካል ሙሉ በሙሉ ምላሽ መስጠት ባይኖርበትም፣ ይህ ምላሽ ሰጪ አቀራረብ የእይታ መስጫው ትልቅ በሚሆንበት ጊዜ ቅጦችን እንዲጨምሩ በመግፋት የCSS መሻሮችን መቀነስ ነው።
ከBootstrap ባሻገር፣ ይህንን በእኛ የሚዲያ መጠይቆች ላይ በግልፅ ያያሉ። በአብዛኛዎቹ ሁኔታዎች፣ min-width
በተወሰነ የመግቻ ነጥብ ላይ መተግበር የሚጀምሩ እና ከፍ ወዳለ የመለያያ ነጥቦች የሚሄዱ መጠይቆችን እንጠቀማለን። ለምሳሌ፡- ከወደ ኢንፊኒቲስ .d-none
ተፈጻሚ ይሆናል min-width: 0
። በሌላ በኩል፣ .d-md-none
ከመካከለኛ መሰባበር ነጥብ እና ወደ ላይ ይተገበራል።
max-width
አንዳንድ ጊዜ የአንድ አካል ውስጣዊ ውስብስብነት ሲፈልግ እንጠቀማለን ። አንዳንድ ጊዜ እነዚህ መሻሮች ዋና ተግባራትን ከክፍላችን እንደገና ከመፃፍ ይልቅ ለመተግበር እና ለመደገፍ በተግባራዊ እና በአእምሮ ግልጥ ናቸው። ይህንን አሰራር ለመገደብ እንተጋለን, ነገር ግን ከጊዜ ወደ ጊዜ እንጠቀማለን.
ክፍሎች
ከዳግም ማስነሳታችን በተጨማሪ የአሳሽ መደበኛ የቅጥ ሉህ፣ ሁሉም የእኛ ቅጦች ዓላማ ክፍሎችን እንደ መራጭ መጠቀም ነው። ይህ ማለት ከዓይነት መራጮች (ለምሳሌ፣ input[type="text"]
) እና ከውጪ የወላጅ ክፍሎችን (ለምሳሌ) ንፁህ ማድረግ ማለት .parent .child
ሲሆን ይህም ቅጦችን በቀላሉ ለመሻር በጣም ልዩ ያደርገዋል።
እንደዚያው፣ ክፍሎች የጋራ፣ የማይሻሩ የንብረት-ዋጋ ጥንዶችን በሚያኖር ቤዝ መደብ መገንባት አለባቸው። ለምሳሌ, .btn
እና .btn-primary
. እንደ ፣፣ እና .btn
ላሉ ሁሉም የተለመዱ ቅጦች እንጠቀማለን ። ከዚያም እንደ ቀለም፣ የበስተጀርባ ቀለም፣ የጠረፍ ቀለም፣ ወዘተ የመሳሰሉትን ማሻሻያዎችን እንጠቀማለን።display
padding
border-width
.btn-primary
የመቀየሪያ ክፍሎች ጥቅም ላይ መዋል ያለባቸው በበርካታ ልዩነቶች ላይ የሚለወጡ ብዙ ንብረቶች ወይም እሴቶች ሲኖሩ ብቻ ነው። ማስተካከያዎች ሁል ጊዜ አስፈላጊ አይደሉም፣ ስለዚህ የኮድ መስመሮችን በትክክል እያስቀመጡ እና እነሱን በሚፈጥሩበት ጊዜ አላስፈላጊ መሻሮችን መከልከልዎን ያረጋግጡ። ጥሩ የመቀየሪያ ምሳሌዎች የእኛ ጭብጥ የቀለም ክፍሎች እና የመጠን ልዩነቶች ናቸው።
z-index ሚዛኖች
በBootstrap ውስጥ ሁለት ሚዛኖች አሉ z-index
-በአንድ አካል ውስጥ ያሉ ንጥረ ነገሮች እና ተደራቢ አካላት።
የአካል ክፍሎች
border
በBootstrap ውስጥ ያሉ አንዳንድ አካላት ንብረቱን ሳይቀይሩ ድርብ ድንበሮችን ለመከላከል በተደራረቡ አካላት የተገነቡ ናቸው ። ለምሳሌ፣ የአዝራር ቡድኖች፣ የግቤት ቡድኖች እና ፔጅኒሽን።- እነዚህ ክፍሎች መደበኛ
z-index
ልኬት0
እስከ በኩል ይጋራሉ3
። 0
ነባሪ (የመጀመሪያ) ነው፣1
ነው:hover
፣2
ነው ፣:active
እና ነው ።.active
3
:focus
- ይህ አካሄድ ከከፍተኛ የተጠቃሚዎች ቅድሚያ የምንጠብቀው ጋር ይዛመዳል። አንድ ኤለመንት ካተኮረ በእይታ እና በተጠቃሚው ትኩረት ነው። ሁኔታን ስለሚያመለክቱ ንቁ ንጥረ ነገሮች በሁለተኛ ደረጃ ላይ ይገኛሉ። ማንዣበብ ሦስተኛው ከፍተኛ ነው ምክንያቱም የተጠቃሚውን ፍላጎት ያሳያል፣ ነገር ግን ማንኛውም ነገር ማንዣበብ ይቻላል ማለት ይቻላል።
ተደራቢ አካላት
ቡትስትራፕ እንደ አንድ ዓይነት ተደራቢ ሆነው የሚሰሩ በርካታ ክፍሎችን ያካትታል። ይህ በከፍተኛ ደረጃ በቅደም ተከተል z-index
ተቆልቋይዎች፣ ቋሚ እና ተለጣፊ ናቭባርስ፣ ሞዳሎች፣ የመሳሪያ ምክሮች እና ፖፖቨርስ ያካትታል። z-index
እነዚህ ክፍሎች የሚጀምሩት የራሳቸው ልኬት አላቸው 1000
። ይህ የመነሻ ቁጥር በዘፈቀደ የተመረጠ ነው እና በእኛ ቅጦች እና በፕሮጀክትዎ ብጁ ቅጦች መካከል እንደ ትንሽ ቋት ያገለግላል።
እያንዳንዱ ተደራቢ ክፍል z-index
የጋራ UI መርሆዎች ተጠቃሚው ያተኮረ ወይም ማንዣበብ አባሎችን በማንኛውም ጊዜ በእይታ እንዲቆዩ በሚያስችል መንገድ እሴቱን በትንሹ ይጨምራል። ለምሳሌ፣ ሞዳል ሰነድ ማገድ ነው (ለምሳሌ፣ ለሞዳል እርምጃው ሌላ ማንኛውንም እርምጃ መውሰድ አይችሉም)፣ ስለዚህ ያንን ከናቭባርዎቻችን በላይ እናስቀምጣለን።
z-index
ስለዚህ ጉዳይ በእኛ አቀማመጥ ገጽ ላይ የበለጠ ይረዱ ።
HTML እና CSS በJS ላይ
በተቻለ መጠን HTML እና CSS በጃቫ ስክሪፕት መፃፍ እንመርጣለን። በአጠቃላይ፣ ኤችቲኤምኤል እና ሲኤስኤስ የበለጠ የበለፀጉ እና በሁሉም የተለያየ የልምድ ደረጃዎች ላሉ ብዙ ሰዎች ተደራሽ ናቸው። ኤችቲኤምኤል እና ሲኤስኤስ በአሳሽዎ ውስጥ ከጃቫ ስክሪፕት የበለጠ ፈጣን ናቸው፣ እና አሳሽዎ በአጠቃላይ ለእርስዎ ብዙ ተግባራትን ይሰጥዎታል።
ይህ መርህ ባህሪያትን በመጠቀም የኛ አንደኛ ደረጃ ጃቫስክሪፕት ኤፒአይ data
ነው። የእኛን ጃቫ ስክሪፕት ፕለጊን ለመጠቀም ማንኛውንም ጃቫ ስክሪፕት መጻፍ አያስፈልግዎትም። በምትኩ HTML ጻፍ። በጃቫ ስክሪፕት አጠቃላይ እይታ ገጻችን ውስጥ ስለዚህ ጉዳይ የበለጠ ያንብቡ ።
በመጨረሻም፣ የእኛ ቅጦች በጋራ የድር አካላት መሰረታዊ ባህሪያት ላይ ይገነባሉ። በተቻለ መጠን አሳሹ የሚያቀርበውን መጠቀም እንመርጣለን። ለምሳሌ፣ .btn
በማንኛውም ኤለመንት ላይ ክፍልን ማስቀመጥ ትችላለህ፣ ነገር ግን አብዛኛዎቹ ክፍሎች ምንም አይነት የትርጉም እሴት ወይም የአሳሽ ተግባር አይሰጡም። <button>
ስለዚህ በምትኩ s እና s እንጠቀማለን <a>
።
ለተጨማሪ ውስብስብ አካላት ተመሳሳይ ነው. በግቤት ሁኔታ ላይ ተመስርተን ክፍሎችን ወደ ወላጅ አካል ለመጨመር የራሳችንን ቅጽ ማረጋገጫ ፕለጊን መፃፍ ብንችልም ፣ በዚህም ቀይ የሚለውን ፅሑፍ እንድንሰራ ያስችለናል፣ እያንዳንዱ አሳሽ የሚሰጠንን :valid
/ የውሸት-ንጥረ ነገሮችን መጠቀም እንመርጣለን።:invalid
መገልገያዎች
የመገልገያ ክፍሎች - የቀድሞ ረዳቶች በ Bootstrap 3 - የ CSS እብጠትን እና ደካማ የገጽ አፈጻጸምን ለመዋጋት ኃይለኛ አጋር ናቸው። የመገልገያ ክፍል በተለምዶ ነጠላ፣ የማይለዋወጥ የንብረት-እሴት ማጣመር እንደ ክፍል የተገለጸ ነው (ለምሳሌ፣ .d-block
ይወክላል display: block;
)። ዋናው ይግባኝ ኤችቲኤምኤልን በሚጽፉበት ጊዜ የአጠቃቀም ፍጥነት እና መፃፍ ያለብዎትን ብጁ CSS መጠን መገደብ ነው።
በተለይ ብጁ CSSን በተመለከተ፣ መገልገያዎች በብዛት የሚደጋገሙ የንብረት እሴት ጥንዶችዎን ወደ ነጠላ ክፍሎች በመቀነስ የፋይል መጠን መጨመርን ለመቋቋም ይረዳሉ። ይህ በፕሮጀክቶችዎ ውስጥ በሚያስደንቅ ሁኔታ ላይ ተጽዕኖ ሊያሳድር ይችላል።
ተለዋዋጭ HTML
ሁልጊዜ የሚቻል ባይሆንም በኤችቲኤምኤል ለክፍሎች መስፈርቶች ከመጠን በላይ ቀኖናዊ ከመሆን ለመዳን እንጥራለን። ስለዚህ፣ በሲኤስኤስ መምረጫዎቻችን ውስጥ ነጠላ ክፍሎች ላይ እናተኩራለን እና የቅርብ ልጆች መራጮችን ( >
) ለማስወገድ እንሞክራለን። ይህ በአተገባበርዎ ላይ የበለጠ ተለዋዋጭነት ይሰጥዎታል እና የእኛን CSS ቀላል እና ያነሰ ዝርዝር ለማድረግ ይረዳል።
የኮድ ስምምነቶች
የኮድ መመሪያ (ከBootstrap ተባባሪ ፈጣሪ፣ @mdo) የእኛን HTML እና CSS በ Bootstrap ላይ እንዴት እንደምንጽፍ ይዘግባል። ለአጠቃላይ ቅርጸት መመሪያዎችን ፣የተለመደ ስሜት ነባሪዎችን ፣ንብረት እና የባህሪ ትዕዛዞችን እና ሌሎችንም ይገልጻል።
እነዚህን መመዘኛዎች ለማስፈጸም ስታይልሊንትን እንጠቀማለን እና ሌሎችንም በእኛ Sass/CSS ውስጥ። የእኛ ብጁ የStylint ውቅረት ክፍት ምንጭ እና ለሌሎች ለመጠቀም እና ለማራዘም ይገኛል።
መደበኛ እና የትርጉም ኤችቲኤምኤልን ለማስፈጸም እና የተለመዱ ስህተቶችን ለመለየት vnu-jar እንጠቀማለን ።