ቅረብ

እቶም ናይ ምጅማር ገጻት ናይቲ ፕሮጀክትን እንታይ ከም ዘቕርብን መእተዊ ዑደት ክህቡ እንከለዉ፡ እዚ ሰነድ ግን ስለምንታይ ኣብ ቡትስትራፕ እንገብሮ ነገራት ከም እንገብር ዘተኮረ እዩ። ካልኦት ካባና ክመሃሩ፡ ምሳና ኣበርክቶ ክገብሩ፡ ንኽመሓየሹ ክሕግዙና ኣብ መርበብ ሓበሬታ ምህናጽ ዝብል ፍልስፍናና ይገልጽ።

ቅኑዕ ዘይመስል ነገር ርኢኻ ወይ ምናልባት ካብዚ ዝሓሸ ክግበር ዝኽእል? ሓደ ጉዳይ ክፈት —ምሳኻትኩም ክንዘራረበሉ ንፈቱ።

መጠቃለሊ

ኣብ ነፍሲ ወከፍ ካብዚኦም ዝያዳ ኣብ ምሉእ ክንጥሕል ኢና፡ ብዝለዓለ ደረጃ ግን፡ ንኣቀራርባና ዝመርሕ እንሆ።

• ኣካላት ምላሽ ዝህቡን ተንቀሳቓሲ-ቀዳምነት ዝህቡን ክኾኑ ይግባእ
• ኣካላት ብመሰረታዊ ክፍሊ ክህነጹን ብመንገዲ መቐየሪ ክፍልታት ክዝርግሑን ይግባእ
• ኣካላት ግዝኣታት ንሓባራዊ z-index ስኬል ክእዘዙ ይግባእ
• ብዝተኻእለ መጠን ካብ ጃቫስክሪፕት ንላዕሊ HTMLን CSSን ኣተገባብራ ምረጽ
• ብዝተኻእለ መጠን ኣብ ልዕሊ ብሕታዊ ቅዲታት ዩቲሊቲታት ተጠቐም
• ብዝተኻእለ መጠን፡ ጽኑዕ ናይ HTML ረቛሒታት (መምረጺ ህጻናት) ካብ ምትግባር ተቖጠብ

ምላሽ ዝህብ

ናይ Bootstrap ምላሽ ዝህቡ ቅዲታት ምላሽ ዝህቡ ንኽኾኑ ዝተሃንጹ ኮይኖም፡ እዚ ኣገባብ እዚ መብዛሕትኡ ግዜ mobile-first ተባሂሉ ዝጽዋዕ እዩ ። ነዚ ቃል ኣብ ዶክስና ንጥቀመሉን ብዓቢኡ ንሰማምዓሉን ኢና፡ ኣብ ገለ እዋናት ግን ኣዝዩ ሰፊሕ ክኸውን ይኽእል እዩ። ኣብ ቡትስትራፕ ኩሉ ኣካል ምሉእ ብምሉእ ምላሽ ዝህብ ክኸውን እኳ እንተዘይብሉ ፡ እዚ ምላሽ ዝህብ ኣገባብ ግን እቲ ቪውፖርት እናዓበየ ምስ ከደ ቅዲታት ክትውስኽ ብምድፋእ ንCSS overrides ምጉዳል እዩ።

ኣብ ስግር ቡትስትራፕ፡ እዚ ኣብ ናይ ሚድያ ሕቶታትና ብዝያዳ ብንጹር ክትሪእዎ ኢኹም። min-widthኣብ መብዛሕትኡ እዋን ፡ ኣብ ሓደ ፍሉይ ነጥቢ ምብታኽ ክሰርሑ ዝጅምሩን በቲ ዝለዓለ ናይ ምብታኽ ነጥብታት ንላዕሊ ዝስከሙን ሕቶታት ንጥቀም ። ንኣብነት a ካብ ክሳብ ዘይውዳእ .d-noneይምልከት ። min-width: 0ብኻልእ ወገን ድማ a .d-md-noneካብቲ ማእከላይ ነጥቢ ምብታኽን ንላዕሊን ይምልከት።

max-widthኣብ ገለ እዋናት ናይ ሓደ ኣካል ባህርያዊ ውስብስብነት ኣብ ዝጠልቦ እዋን ክንጥቀመሉ ኢና ። ኣብ ገለ እዋናት፡ እዞም ምግዳፍ ካብ ባእታታትና ንቐንዲ ተግባራት ዳግማይ ምጽሓፍ፡ ብተግባርን ብኣእምሮን ንምትግባሮምን ንምድጋፍን ዝያዳ ንጹር እዩ። ነዚ ኣገባብ እዚ ክንድርቶ ንጽዕር፡ ግን በብእዋኑ ክንጥቀመሉ ኢና።

ክፍልታት

ብዘይካ’ቲ ናትና Reboot ዝበሃል ስግረ-ብራውዘር ንቡር ምግባር ቅዲ ጽሑፍ፡ ኩሎም ቅዲታትና ንክላሳት ከም መምረጺ ንምጥቃም ዝዓለሙ እዮም። እዚ ማለት ካብ ዓይነት መምረጺታት (ንኣብነት ፡ ) ከምኡ’ውን ቅዲታት ብቐሊሉ ንምግዳፍ ኣዝዮም ፍሉያት ዝገብሩ input[type="text"]ውጽእ ዝኾኑ ወላዲ ክፍልታት (ንኣብነት ፡ ) ርሓቕ ማለት እዩ።.parent .child

ከምኡ ስለዝኾነ፡ ኣካላት ብሓደ መሰረታዊ ክፍሊ ክህነጹ ኣለዎም፡ እዚ ድማ ልሙዳት፡ ዘይግለጹ ጽምዲ ንብረት-ዋጋ ዝሓዘ እዩ። ንኣብነት .btn፡ ከምኡውን .btn-primary. ንኹሎም .btnልሙዳት ቅዲታት ከም display, padding, ከምኡውን border-width. ብድሕሪኡ ከም .btn-primaryሕብሪ ምውሳኽ፡ ድሕረ ባይታ-ሕብሪ፡ ዶብ-ሕብሪ ወዘተ ዝኣመሰሉ መቐየሪታት ንጥቀም።

ናይ መቐየሪ ክፍልታት ኣብ ልዕሊ ብዙሓት ፍልልያት ክቕየሩ ዘለዎም ብዙሓት ባህርያት ወይ ክብርታት ምስ ዝህልዉ ጥራይ እዩ ክጥቀሙ ዘለዎም። መቐየሪታት ኩሉ ግዜ ኣድለይቲ ኣይኮኑን፣ ስለዚ ብሓቂ መስመራት ኮድ ትዕቅቦም ከምዘለኻን ክትፈጥሮም ከለኻ ዘየድሊ ምግዳፍ ትከላኸልን ከምዘለኻ ኣረጋግጽ። ጽቡቕ ኣብነታት ናይ መቐየሪታት ናትና ቴማ ሕብሪ ክፍልታትን ዓቐን ፍልልያትን እዮም።

z-index ዝበሃሉ ሚዛናት

ኣብ ቡትስትራፕ ክልተ z-indexሚዛናት ኣለዉ-ኣብ ውሽጢ ሓደ ኣካል ዝርከቡ ባእታታትን ንባእታታት ምድብላቕን።

ናይ ኣካል ባእታታት

• ገለ ኣካላት ኣብ ቡትስትራፕ ነቲ borderንብረት ከይቀየርካ ድርብ ዶባት ንምክልኻል ብዝተደራረቡ ባእታታት ዝተሃንጹ እዮም። ንኣብነት ናይ መጠወቒ ጉጅለታት፣ ናይ ምእታው ጉጅለታትን ገጻት ምግባርን።
• እዞም ባእታታት z-indexእዚኦም 0ብመንገዲ 3.
• 0ነባሪ (መጀመርታ) እዩ፣ 1እዩ :hover፣ 2እዩ :active/ .active፣ ከምኡውን 3እዩ :focus።
• እዚ ኣገባብ እዚ ምስ ትጽቢትና ዝለዓለ ቀዳምነት ተጠቃሚ ዝሰማማዕ እዩ። ሓደ ባእታ ትኹረት ዝገበረ እንተኾይኑ ኣብ ርእይቶን ኣብ ኣቓልቦ ተጠቃሚን ይርከብ። ንጡፋት ባእታታት ኩነታት ስለ ዘመልክቱ ካልኣይ ዝለዓለ ደረጃ ኣለዎም። ሆቨር ዕላማ ተጠቃሚ ስለ ዘመልክት ሳልሳይ ዝለዓለ ኮይኑ፡ ዳርጋ ዝኾነ ነገር ግን ሆቨር ክግበር ይኽእል።

ምድብላቕ ኣካላት

ቡትስትራፕ ከም ገለ ዓይነት ምድብላቕ ዝሰርሑ ሓያሎ ኣካላት ዘጠቓልል እዩ። እዚ ድማ፡ ብቕደም ተኸተል ዝለዓለ z-index፡ ንቑልቁል ዝወርድ፡ ጽኑዕን ተጣባቒን ናቭባር፡ ሞዳላት፡ ምኽሪ መሳርሒታትን ፖፖቨርን የጠቓልል። z-indexእዞም ባእታታት እዚኦም ካብ 1000 ዝጅምር ናይ ገዛእ ርእሶም ሚዛን ኣለዎም 1000። እዚ መበገሲ ቁጽሪ ብዘይ ፍቓድ ዝተመርጸ ኮይኑ ኣብ መንጎ ቅዲታትናን ናይ ፕሮጀክትኩም ብሕታዊ ቅዲታትን ከም ንእሽቶ መዕቆሪ ኮይኑ የገልግል።

ነፍሲ ወከፍ ናይ ምድብላቕ ኣካል z-indexዋጋኡ ቁሩብ ብኸምዚ ይውስኾ፡ እዚ ድማ ሓባራዊ መትከላት UI ብተጠቃሚ ዘተኮሩ ወይ ዝንሳፈፉ ባእታታት ኩሉ ግዜ ኣብ ምርኣይ ክጸንሑ የኽእሉ። ንኣብነት ሓደ ሞዳል ምዕጋት ሰነድ እዩ (ንኣብነት፡ ብዘይካ ናይቲ ሞዳል ስጉምቲ ካልእ ስጉምቲ ክትወስድ ኣይትኽእልን ኢኻ)፡ ስለዚ ንሱ ልዕሊ ናቭባርና ነቐምጦ።

ብዛዕባ እዚ ኣብ z-indexገጽ ኣቀማምጣና ዝያዳ ፍለጡ ።

HTMLን CSSን ኣብ ልዕሊ JS

ብዝተኻእለ መጠን ኣብ ልዕሊ ጃቫስክሪፕት HTMLን CSSን ክንጽሕፍ ንመርጽ። ብሓፈሻ ኤችቲኤምኤልን ሲኤስኤስን ዝያዳ ፍርያምን ንኹሉ ዝተፈላለየ ደረጃ ተመኩሮ ዘለዎም ዝያዳ ሰባት ዝበጽሕን እዩ። HTMLን CSSን እውን ኣብ መርበብ ሓበሬታኻ ካብ ጃቫስክሪፕት ዝቐልጠፉ እዮም፣ ብሓፈሻ መርበብ ሓበሬታኻ ድማ ዓቢ ተግባር ይህበካ።

እዚ መትከል እዚ ባህርያት ዝጥቀም ቀዳማይ ደረጃ ጃቫስክሪፕት ኤፒኣይና እዩ data። ንናይ ጃቫስክሪፕት ፕላጊናትና ንምጥቃም ዳርጋ ዝኾነ ጃቫስክሪፕት ምጽሓፍ ኣየድልየካን እዩ፤ ኣብ ክንድኡስ ኤችቲኤምኤል ጽሓፍ። ብዛዕባ እዚ ዝያዳ ኣብ ገጽ ሓፈሻዊ ትዕዝብቲ ጃቫስክሪፕትና ኣንብብ ።

ኣብ መወዳእታ፡ ቅዲታትና ኣብ መሰረታዊ ባህርያት ናይ ሓባራዊ መርበብ ባእታታት ዝሃንጽ እዩ። ብዝተኻእለ መጠን፡ እቲ መርበብ ሓበሬታ ዝህቦ ክንጥቀም ንመርጽ። ንኣብነት .btnዳርጋ ኣብ ዝኾነ ባእታ ክፍሊ ከተቐምጥ ትኽእል ኢኻ፡ መብዛሕትኦም ባእታታት ግን ዝኾነ ትርጉማዊ ዋጋ ወይ ናይ መርበብ ሓበሬታ ተግባር ኣይህቡን እዮም። <button>ስለዚ ኣብ ክንድኡ ስን ስን ንጥቀም <a>።

ንዝያዳ ዝተሓላለኹ ባእታታት እውን ከምኡ። ኣብ ሓደ ምእታው ኩነታት ተመርኲስና ናብ ወላዲ ባእታ ክፍልታት ንምውሳኽ ናይ ገዛእ ርእስና ቅጥዒ ምጽራይ ፕላግ-ኢን ክንጽሕፍ ንኽእል እኳ እንተኾንና፡ በዚ ድማ ነቲ ጽሑፍ ቀይሕ ክንብል ቅዲ ክንገብሮ ዘኽእለና እኳ እንተኾነ ፡ ነፍሲ ወከፍ መርበብ ሓበሬታ ዝህበና :valid/ pseudo-elements ክንጥቀም ንመርጽ።:invalid

ዩቲሊቲታት

ዩቲሊቲ ክፍልታት-ናይ ቀደም ሓገዝቲ ኣብ ቡትስትራፕ 3-ኣብ ምቅላስ CSS bloatን ድኹም ኣፈጻጽማ ገጽን ሓያል መሓዛ እዮም። ሓደ ዩቲሊቲ ክፍሊ ብተለምዶ ከም ክፍሊ ዝግለጽ ሓደ፡ ዘይልወጥ ንብረት-ዋጋ ምጽምባር እዩ (ንኣብነት .d-block፡ ይውክል display: block;)። ቀንዲ ስሕበት ዘለዎም ድማ HTML ኣብ እትጽሕፈሉ እዋን ቅልጣፈ ኣጠቓቕማን ክትጽሕፎ ዘለካ ብሕታዊ CSS ምድራትን እዩ።

ብፍላይ ብሕታዊ CSS ብዝምልከት፡ ዩቲሊቲታት ነቲ ዝበዝሕ ግዜ ዝድገም ጽምዲ ንብረት-ዋጋኻ ናብ ሓደ ክፍልታት ብምንካይ ንዝውስኽ ዓቐን ፋይል ንምምካት ክሕግዙ ይኽእሉ። እዚ ኣብ ፕሮጀክትታትካ ብመጠኑ ድራማዊ ጽልዋ ክህልዎ ይኽእል እዩ።

ተዓጻጻፊ ኤችቲኤምኤል

ኩሉ ግዜ ዝከኣል እኳ እንተዘይኮነ፡ ኣብቲ ንኣካላት ዝምልከት HTML ጠለባትና ካብ መጠን ንላዕሊ ዶግማቲክ ከይንኸውን ንጽዕር። በዚ ኸምዚ፡ ኣብ CSS መምረጺታትና ኣብ ንጽል ክፍልታት ነተኩርን ቅጽበታዊ መምረጺ ህጻናት ( >). እዚ ኣብ ኣተገባብራኻ ዝያዳ ተዓጻጻፍነት ይህበካን CSSና ቀሊልን ውሑድ ፍሉይን ንኽኸውን ይሕግዘካን።

ናይ ኮድ ውዕላት

Code Guide (ካብ Bootstrap co-creator, @mdo) ኣብ ምሉእ Bootstrap ከመይ ጌርና HTMLን CSSን ከም እንጽሕፍ ይስነድ። ንሓፈሻዊ ቅርጺ፡ ናይ ልቦና ነባሪ፡ ናይ ንብረትን ባህርያትን ትእዛዛትን ካልእን ዝምልከት መምርሒታት ይገልጽ።

ነዞም ደረጃታትን ካልእን ኣብ Sass/CSS ናትና ንምትግባር Stylelint ንጥቀም ። ናትና ብሕታዊ Stylelint config ክፉት ምንጪ ኮይኑ ካልኦት ንኽጥቀሙሉን ንኽዝርግሕዎን ዝቐርብ እዩ።

ንመደበኛን ትርጉማውን ኤችቲኤምኤል ንምትግባር፣ ከምኡ’ውን ልሙዳት ጌጋታት ንምፍላጥ vnu-jar ንጥቀም ።