ප්රවේශය

Bootstrap ගොඩනැගීමට සහ නඩත්තු කිරීමට භාවිතා කරන මාර්ගෝපදේශක මූලධර්ම, උපාය මාර්ග සහ ශිල්පීය ක්‍රම ගැන ඉගෙන ගන්න එවිට ඔබට එය වඩාත් පහසුවෙන් අභිරුචිකරණය කිරීමට සහ දිගු කිරීමට හැකිය.

ආරම්භක පිටු ව්‍යාපෘතියේ හඳුන්වාදීමේ චාරිකාවක් සපයන අතර එය පිරිනමන දේ, මෙම ලේඛනය අපි Bootstrap හි කරන දේවල් කරන්නේ ඇයිද යන්න පිළිබඳව අවධානය යොමු කරයි. අන් අයට අපෙන් ඉගෙන ගැනීමට, අප සමඟ දායක වීමට සහ අපට වැඩිදියුණු කිරීමට උපකාර කිරීමට හැකි වන පරිදි වෙබය මත ගොඩනැගීමට අපගේ දර්ශනය පැහැදිලි කරයි.

හරි නැති දෙයක් බලන්න, නැත්නම් සමහර විට වඩා හොඳින් කළ හැකිද? ගැටලුවක් විවෘත කරන්න - අපි එය ඔබ සමඟ සාකච්ඡා කිරීමට කැමතියි.

සාරාංශය

අපි මේ සෑම එකක් තුළම තව තවත් කිමිදෙමු, නමුත් ඉහළ මට්ටමක දී, අපගේ ප්‍රවේශයට මඟ පෙන්වන දේ මෙන්න.

• සංරචක ප්‍රතිචාරාත්මක සහ ජංගම-පළමු විය යුතුය
• සංරචක මූලික පන්තියක් සමඟ ගොඩනගා ගත යුතු අතර විකරණකාරක පන්ති හරහා දිගු කළ යුතුය
• සංරචක තත්ත්වයන් පොදු z-දර්ශක පරිමාණයකට අවනත විය යුතුය
• හැකි සෑම විටම, JavaScript වලට වඩා HTML සහ CSS ක්‍රියාත්මක කිරීමට කැමති වන්න
• හැකි සෑම විටම, අභිරුචි මෝස්තර මත උපයෝගිතා භාවිතා කරන්න
• හැකි සෑම විටම, දැඩි HTML අවශ්‍යතා බලගැන්වීමෙන් වළකින්න (ළමා තේරීම්කරුවන්)

ප්රතිචාරාත්මක

Bootstrap හි ප්‍රතිචාරාත්මක විලාසයන් ප්‍රතිචාර දැක්වීමට ගොඩනගා ඇත, එය බොහෝ විට ජංගම-පළමු ලෙස හඳුන්වනු ලබන ප්‍රවේශයකි . අපි මෙම යෙදුම අපගේ ලේඛනයේ භාවිතා කරන අතර බොහෝ දුරට එයට එකඟ වේ, නමුත් සමහර විට එය ඉතා පුළුල් විය හැකිය. Bootstrap හි සෑම අංගයක්ම සම්පුර්ණයෙන්ම ප්‍රතිචාර දැක්විය යුතු නැති අතර , මෙම ප්‍රතිචාරාත්මක ප්‍රවේශය වන්නේ දර්ශන තොට විශාල වන විට මෝස්තර එකතු කිරීමට ඔබව තල්ලු කිරීමෙන් CSS අභිබවා යාම අඩු කිරීමයි.

Bootstrap හරහා, අපගේ මාධ්‍ය විමසුම් වලදී ඔබට මෙය වඩාත් පැහැදිලිව පෙනෙනු ඇත. බොහෝ අවස්ථාවන්හිදී, අපි min-widthවිශේෂිත බිඳුම් ලක්ෂ්‍යයක යෙදීමට පටන් ගන්නා සහ ඉහළ බිඳුම් ලක්ෂ්‍ය හරහා ගෙන යන විමසුම් භාවිතා කරමු. උදාහරණයක් ලෙස, a යන්නෙන් අනන්තය .d-noneදක්වා යෙදේ . min-width: 0අනෙක් අතට, .d-md-noneමධ්‍යම කඩඉම් ලක්ෂ්‍යයෙන් සහ ඉහළට අදාළ වේ.

සමහර අවස්ථාවලදී අපි max-widthසංරචකයක ආවේනික සංකීර්ණතාවයට එය අවශ්‍ය වූ විට භාවිතා කරන්නෙමු. සමහර අවස්ථාවලදී, මෙම අතික්‍රමණයන් අපගේ සංරචකවලින් මූලික ක්‍රියාකාරීත්වය නැවත ලිවීමට වඩා ක්‍රියාත්මක කිරීමට සහ සහාය දීමට ක්‍රියාකාරීව සහ මානසිකව පැහැදිලි වේ. මෙම ප්රවේශය සීමා කිරීමට අපි උත්සාහ කරමු, නමුත් එය වරින් වර භාවිතා කරනු ඇත.

පංතිවල

හරස් බ්‍රවුසර සාමාන්‍යකරණ මෝස්තර පත්‍රිකාවක් වන අපගේ නැවත පණගැන්වීම හැරුණු විට, අපගේ සියලුම මෝස්තර පන්ති තේරීම්කරුවන් ලෙස භාවිතා කිරීමට ඉලක්ක කරයි. මෙයින් අදහස් කරන්නේ පහසුවෙන් අභිබවා යාමට නොහැකි තරම් විශේෂිත වූ ශෛලීන් කරන ආකාරයේ තේරීම් (උදා, input[type="text"]) සහ බාහිර මාපිය පන්ති (උදා, ) මග හැරීමයි..parent .child

එනිසා, සංරචක පොදු, අභිබවා නොයන දේපල-වටිනාකම් යුගල ඇති මූලික පන්තියක් සමඟ ගොඩනගා ගත යුතුය. උදාහරණයක් ලෙස, .btnසහ .btn-primary. අපි , , සහ .btnවැනි සියලුම පොදු මෝස්තර සඳහා භාවිතා කරමු . අපි පසුව වර්ණය, පසුබිම් වර්ණය, මායිම්-වර්ණය, ආදිය එකතු කිරීමට වැනි විකරණකාරක භාවිතා කරමු.displaypaddingborder-width.btn-primary

විකරණකාරක පන්ති භාවිතා කළ යුත්තේ බහුවිධ ප්‍රභේද හරහා වෙනස් කිරීමට බහුවිධ ගුණාංග හෝ අගයන් ඇති විට පමණි. වෙනස් කරන්නන් සැමවිටම අවශ්‍ය නොවේ, එබැවින් ඔබ සැබවින්ම කේත රේඛා සුරකින බවත් ඒවා නිර්මාණය කිරීමේදී අනවශ්‍ය අභිබවා යාම වළක්වන බවත් සහතික කර ගන්න. නවීකරණ සඳහා හොඳ උදාහරණ වන්නේ අපගේ තේමා වර්ණ පන්ති සහ ප්‍රමාණයේ ප්‍රභේද වේ.

z-දර්ශක පරිමාණයන්

Bootstrap හි පරිමාණයන් දෙකක් z-indexඇත - සංරචකයක් තුළ ඇති මූලද්‍රව්‍ය සහ උඩුකුරු සංරචක.

සංරචක මූලද්රව්ය

• Bootstrap හි සමහර සංරචක borderදේපල වෙනස් නොකර ද්විත්ව මායිම් වැළැක්වීම සඳහා අතිච්ඡාදනය වන මූලද්‍රව්‍ය සමඟ ගොඩනගා ඇත. උදාහරණයක් ලෙස, බොත්තම් කණ්ඩායම්, ආදාන කණ්ඩායම් සහ පිටුකරණය.
• මෙම සංරචක හරහා සම්මත z-indexපරිමාණයක් බෙදා ගනී .03
• 0පෙරනිමිය (ආරම්භක), 1වේ :hover, 2වේ :active/ .active, සහ 3වේ :focus.
• මෙම ප්‍රවේශය අපගේ ඉහළම පරිශීලක ප්‍රමුඛතාවයේ අපේක්ෂාවන්ට ගැලපේ. කිසියම් මූලද්‍රව්‍යයක් නාභිගත කර ඇත්නම්, එය දර්ශනයේ සහ පරිශීලකයාගේ අවධානයට ලක්වේ. සක්‍රීය මූලද්‍රව්‍ය දෙවන ඉහළම වන්නේ ඒවා තත්ත්වය පෙන්නුම් කරන බැවිනි. Hover තෙවන ඉහළම ස්ථානය වන්නේ එය පරිශීලක අභිප්‍රාය පෙන්නුම් කරන නමුත් ඕනෑම දෙයක් පාහේ ගෙන යා හැක.

අතිච්ඡාදනය සංරචක

බූට්ස්ට්‍රැප් හි යම් ආකාරයක උඩ තට්ටුවක් ලෙස ක්‍රියා කරන සංරචක කිහිපයක් ඇතුළත් වේ. මෙයට ඉහළම z-index, පතන, ස්ථාවර සහ ඇලෙන නව තීරු, ආකෘති, මෙවලම් ඉඟි සහ පොපෝවර් අනුපිළිවෙලට ඇතුළත් වේ. මෙම සංරචක වලට ඔවුන්ගේම z-indexපරිමාණයක් ඇති අතර එය ආරම්භ වේ 1000. මෙම ආරම්භක අංකය අත්තනෝමතික ලෙස තෝරාගෙන ඇති අතර අපගේ මෝස්තර සහ ඔබේ ව්‍යාපෘතියේ අභිරුචි මෝස්තර අතර කුඩා බෆරයක් ලෙස ක්‍රියා කරයි.

සෑම අතිච්ඡාදනය සංරචකයක්ම එහි z-indexඅගය සුළු වශයෙන් වැඩි කරන්නේ සාමාන්‍ය UI මූලධර්ම මඟින් පරිශීලක නාභිගත හෝ හොවර් කරන ලද මූලද්‍රව්‍ය සෑම විටම දර්ශනයේ රැඳී සිටීමට ඉඩ සලසන ආකාරයටය. උදාහරණයක් ලෙස, මාදිලියක් යනු ලේඛන අවහිර කිරීමකි (උදා, ඔබට මොඩලයේ ක්‍රියාව හැර වෙනත් ක්‍රියාමාර්ගයක් ගත නොහැක), එබැවින් අපි එය අපගේ navbars වලට ඉහලින් තබමු.

z-indexඅපගේ පිරිසැලසුම් පිටුවෙන් මේ ගැන වැඩි විස්තර දැනගන්න .

HTML සහ CSS හරහා JS

හැකි සෑම විටම, අපි JavaScript හරහා HTML සහ CSS ලිවීමට කැමැත්තෙමු. සාමාන්‍යයෙන්, HTML සහ CSS වඩාත් සාරවත් වන අතර විවිධ අත්දැකීම් මට්ටම් ඇති පුද්ගලයින්ට ප්‍රවේශ විය හැකිය. HTML සහ CSS ඔබගේ බ්‍රවුසරයේ JavaScript වලට වඩා වේගවත් වන අතර ඔබගේ බ්‍රවුසරය සාමාන්‍යයෙන් ඔබට විශාල ක්‍රියාකාරීත්වයක් සපයයි.

dataමෙම මූලධර්මය ගුණාංග භාවිතා කරන අපගේ පළමු පන්තියේ JavaScript API වේ. අපගේ ජාවාස්ක්‍රිප්ට් ප්ලගීන භාවිතා කිරීමට ඔබට ජාවාස්ක්‍රිප්ට් ලිවීමට අවශ්‍ය නැත; ඒ වෙනුවට, HTML ලියන්න. අපගේ JavaScript දළ විශ්ලේෂණය පිටුවෙන් මේ ගැන වැඩිදුර කියවන්න .

අවසාන වශයෙන්, අපගේ මෝස්තර පොදු වෙබ් මූලද්‍රව්‍යවල මූලික හැසිරීම් මත ගොඩනැගේ. හැකි සෑම විටම, අපි බ්‍රවුසරය සපයන දේ භාවිතා කිරීමට කැමැත්තෙමු. උදාහරණයක් ලෙස, ඔබට .btnඕනෑම මූලද්‍රව්‍යයක් මත පන්තියක් තැබිය හැක, නමුත් බොහෝ මූලද්‍රව්‍ය කිසිදු අර්ථකථන අගයක් හෝ බ්‍රවුසර ක්‍රියාකාරීත්වයක් සපයන්නේ නැත. එබැවින් ඒ වෙනුවට අපි <button>s සහ <a>s භාවිතා කරමු.

වඩාත් සංකීර්ණ සංරචක සඳහාද එයම වේ. ආදාන තත්ත්වය මත පදනම්ව මාපිය මූලද්‍රව්‍යයකට පන්ති එකතු කිරීම සඳහා අපගේම පෝරම වලංගු කිරීමේ ප්ලගිනයක් ලිවිය හැකි අතර, එමඟින් අපට රතු පැහැයෙන් යුත් පෙළ මෝස්තර කිරීමට ඉඩ සලසයි, අපි සෑම බ්‍රවුසරයක්ම අපට සපයන :valid/ :invalidව්‍යාජ මූලද්‍රව්‍ය භාවිතා කිරීමට කැමැත්තෙමු.

උපයෝගිතා

උපයෝගිතා පන්ති - කලින් Bootstrap 3 හි සහායකයින් - CSS bloat සහ දුර්වල පිටු ක්‍රියාකාරිත්වයට එරෙහිව සටන් කිරීමේ ප්‍රබල සගයෙකි. උපයෝගිතා පන්තියක් යනු සාමාන්‍යයෙන් පන්තියක් ලෙස ප්‍රකාශිත තනි, වෙනස් කළ නොහැකි දේපල වටිනාකම් යුගලනයකි (උදා, .d-blockනියෝජනය කරයි display: block;). ඔවුන්ගේ මූලික අභියාචනය වන්නේ HTML ලිවීමේදී භාවිතා කිරීමේ වේගය සහ ඔබට ලිවීමට ඇති අභිරුචි CSS ප්‍රමාණය සීමා කිරීමයි.

විශේෂයෙන් අභිරුචි CSS සම්බන්ධයෙන්, උපයෝගිතා මඟින් ඔබේ බහුලව පුනරාවර්තනය වන දේපල වටිනාකම් යුගල තනි පන්තිවලට අඩු කිරීමෙන් ගොනු ප්‍රමාණය වැඩි කිරීමට එරෙහිව සටන් කිරීමට උපකාරී වේ. මෙය ඔබේ ව්‍යාපෘතිවල පරිමාණයෙන් නාටකාකාර බලපෑමක් ඇති කළ හැකිය.

නම්‍යශීලී HTML

සෑම විටම කළ නොහැකි නමුත්, අපි සංරචක සඳහා අපගේ HTML අවශ්‍යතා තුළ ඕනෑවට වඩා ආකල්පයෙන් වැළකී සිටීමට උත්සාහ කරමු. >මේ අනුව, අපි අපගේ CSS තේරීම්කරුවන් තුළ තනි පන්ති කෙරෙහි අවධානය යොමු කරන අතර ක්ෂණික ළමා තේරීම් ( ) වළක්වා ගැනීමට උත්සාහ කරමු . මෙය ඔබගේ ක්‍රියාත්මක කිරීමේදී ඔබට වඩාත් නම්‍යශීලී බවක් ලබා දෙන අතර අපගේ CSS සරල සහ අඩු නිශ්චිතව තබා ගැනීමට උපකාරී වේ.

කේත සම්මුතීන්

කේත මාර්ගෝපදේශය (Bootstrap co-creator, @mdo වෙතින්) අපි Bootstrap හරහා අපගේ HTML සහ CSS ලියන ආකාරය ලේඛනගත කරයි. එය සාමාන්‍ය හැඩතල ගැන්වීම, සාමාන්‍ය දැනීම පෙරනිමි, දේපල සහ ගුණාංග ඇණවුම් සහ තවත් දේ සඳහා මාර්ගෝපදේශ නියම කරයි.

අපගේ Sass/CSS හි මෙම ප්‍රමිතීන් සහ තවත් බොහෝ දේ බලාත්මක කිරීමට අපි Stylelint භාවිතා කරමු. අපගේ අභිරුචි ස්ටයිලින්ට් වින්‍යාසය විවෘත මූලාශ්‍රයක් වන අතර අනෙක් අයට භාවිතා කිරීමට සහ දිගු කිරීමට ලබා ගත හැකිය.

අපි සම්මත සහ අර්ථකථන HTML බලාත්මක කිරීමට මෙන්ම පොදු දෝෂ හඳුනා ගැනීමට vnu-jar භාවිතා කරමු.