አቀራረብ

የመነሻ ገፆች የፕሮጀክቱን እና የሚያቀርበውን የመግቢያ ጉብኝት ሲያቀርቡ፣ ይህ ሰነድ በ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ላሉ ሁሉም የተለመዱ ቅጦች እንጠቀማለን ። ከዚያም እንደ ቀለም፣ የበስተጀርባ ቀለም፣ የጠረፍ ቀለም፣ ወዘተ የመሳሰሉትን ማሻሻያዎችን እንጠቀማለን።displaypaddingborder-width.btn-primary

የመቀየሪያ ክፍሎች ጥቅም ላይ መዋል ያለባቸው በበርካታ ልዩነቶች ላይ የሚለወጡ ብዙ ንብረቶች ወይም እሴቶች ሲኖሩ ብቻ ነው። ማስተካከያዎች ሁል ጊዜ አስፈላጊ አይደሉም፣ ስለዚህ የኮድ መስመሮችን በትክክል እያስቀመጡ እና እነሱን በሚፈጥሩበት ጊዜ አላስፈላጊ መሻሮችን መከልከልዎን ያረጋግጡ። ጥሩ የመቀየሪያ ምሳሌዎች የእኛ ጭብጥ የቀለም ክፍሎች እና የመጠን ልዩነቶች ናቸው።

z-index ሚዛኖች

በ Bootstrap ውስጥ ሁለት ሚዛኖች አሉ z-index- በአንድ አካል ውስጥ ያሉ ንጥረ ነገሮች እና ተደራቢ አካላት።

የአካል ክፍሎች

• borderበBootstrap ውስጥ ያሉ አንዳንድ አካላት ንብረቱን ሳይቀይሩ ድርብ ድንበሮችን ለመከላከል በተደራረቡ አካላት የተገነቡ ናቸው ። ለምሳሌ፣ የአዝራር ቡድኖች፣ የግቤት ቡድኖች እና ፔጅኒሽን።
• እነዚህ ክፍሎች መደበኛ z-indexልኬት 0እስከ በኩል ይጋራሉ 3።
• 0ነባሪ (የመጀመሪያ) ነው፣ 1ነው :hover፣ 2ነው ፣ :activeእና ነው ።.active3: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 እንጠቀማለን ።