ቅረብ
ብዛዕባ ቡትስትራፕ ንምህናጽን ምሕላውን ዝጥቀሙሉ መምርሒ መትከላት፡ ስትራተጂታትን ሜላታትን ተማሃር ምእንቲ ባዕልኻ ብቐሊሉ ክትጥዕሞን ከተናውሖን ትኽእል።
እቶም ናይ ምጅማር ገጻት ናይቲ ፕሮጀክትን እንታይ ከም ዘቕርብን መእተዊ ዑደት ክህቡ እንከለዉ፡ እዚ ሰነድ ግን ስለምንታይ ኣብ ቡትስትራፕ እንገብሮ ነገራት ከም እንገብር ዘተኮረ እዩ። ካልኦት ካባና ክመሃሩ፡ ምሳና ኣበርክቶ ክገብሩ፡ ንኽመሓየሹ ክሕግዙና ኣብ መርበብ ሓበሬታ ምህናጽ ዝብል ፍልስፍናና ይገልጽ።
ቅኑዕ ዘይመስል ነገር ርኢኻ ወይ ምናልባት ካብዚ ዝሓሸ ክግበር ዝኽእል? ሓደ ጉዳይ ክፈት —ምሳኻትኩም ክንዘራረበሉ ንፈቱ።
ኣብ ነፍሲ ወከፍ ካብዚኦም ዝያዳ ኣብ ምሉእ ክንጥሕል ኢና፡ ብዝለዓለ ደረጃ ግን፡ ንኣቀራርባና ዝመርሕ እንሆ።
- ኣካላት ምላሽ ዝህቡን ተንቀሳቓሲ-ቀዳምነት ዝህቡን ክኾኑ ይግባእ
- ኣካላት ብመሰረታዊ ክፍሊ ክህነጹን ብመንገዲ መቐየሪ ክፍልታት ክዝርግሑን ይግባእ
- ኣካላት ግዝኣታት ንሓባራዊ 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ሚዛናት ኣለዉ-ኣብ ውሽጢ ሓደ ኣካል ዝርከቡ ባእታታትን ንባእታታት ምድብላቕን።
- ገለ ኣካላት ኣብ ቡትስትራፕ ነቲ
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ን ክንጽሕፍ ንመርጽ። ብሓፈሻ ኤችቲኤምኤልን ሲኤስኤስን ዝያዳ ፍርያምን ንኹሉ ዝተፈላለየ ደረጃ ተመኩሮ ዘለዎም ዝያዳ ሰባት ዝበጽሕን እዩ። HTMLን CSSን እውን ኣብ መርበብ ሓበሬታኻ ካብ ጃቫስክሪፕት ዝቐልጠፉ እዮም፣ ሓፈሻዊ መርበብ ሓበሬታኻ ድማ ዓቢ ተግባር ይህበካ።
እዚ መትከል እዚ ናትና ቀዳማይ ደረጃ ጃቫስክሪፕት ኤፒኣይ is dataattributes እዩ። ንናይ ጃቫስክሪፕት ፕላጊናትና ንምጥቃም ዳርጋ ዝኾነ ጃቫስክሪፕት ምጽሓፍ ኣየድልየካን እዩ፤ ኣብ ክንድኡስ ኤችቲኤምኤል ጽሓፍ። ብዛዕባ እዚ ዝያዳ ኣብ ገጽ ሓፈሻዊ ትዕዝብቲ ጃቫስክሪፕትና ኣንብብ ።
ኣብ መወዳእታ፡ ቅዲታትና ኣብ መሰረታዊ ባህርያት ናይ ሓባራዊ መርበብ ባእታታት ዝሃንጽ እዩ። ብዝተኻእለ መጠን፡ እቲ መርበብ ሓበሬታ ዝህቦ ክንጥቀም ንመርጽ። ንኣብነት .btnዳርጋ ኣብ ዝኾነ ባእታ ክፍሊ ከተቐምጥ ትኽእል ኢኻ፡ መብዛሕትኦም ባእታታት ግን ዝኾነ ትርጉማዊ ዋጋ ወይ ናይ መርበብ ሓበሬታ ተግባር ኣይህቡን እዮም። <button>ስለዚ ኣብ ክንድኡ ስን ስን ንጥቀም <a>።
ንዝያዳ ዝተሓላለኹ ባእታታት እውን ከምኡ። ኣብ ሓደ ምእታው ኩነታት ተመርኲስና ናብ ወላዲ ባእታ ክፍልታት ንምውሳኽ ናይ ገዛእ ርእስና ቅጥዒ ምጽራይ ፕላግ-ኢን ክንጽሕፍ ንኽእል እኳ እንተኾንና፡ በዚ ድማ ነቲ ጽሑፍ ቀይሕ ክንብል ቅዲ ክንገብሮ ዘኽእለና እኳ እንተኾነ ፡ ነፍሲ ወከፍ መርበብ ሓበሬታ ዝህበና :valid/ pseudo-elements ክንጥቀም ንመርጽ።:invalid
ዩቲሊቲ ክፍልታት-ናይ ቀደም ሓገዝቲ ኣብ ቡትስትራፕ 3-ኣብ ምቅላስ CSS bloatን ድኹም ኣፈጻጽማ ገጽን ሓያል መሓዛ እዮም። ሓደ ዩቲሊቲ ክፍሊ ብተለምዶ ከም ክፍሊ ዝግለጽ ሓደ፡ ዘይልወጥ ንብረት-ዋጋ ምጽምባር እዩ (ንኣብነት .d-block፡ ይውክል display: block;)። ቀንዲ ስሕበት ዘለዎም ድማ HTML ኣብ እትጽሕፈሉ እዋን ቅልጣፈ ኣጠቓቕማን ክትጽሕፎ ዘለካ ብሕታዊ CSS ምድራትን እዩ።
ብፍላይ ብሕታዊ CSS ብዝምልከት፡ ዩቲሊቲታት ነቲ ዝበዝሕ ግዜ ዝድገም ጽምዲ ንብረት-ዋጋኻ ናብ ሓደ ክፍልታት ብምንካይ ንዝውስኽ ዓቐን ፋይል ንምምካት ክሕግዙ ይኽእሉ። እዚ ኣብ ፕሮጀክትታትካ ብመጠኑ ድራማዊ ጽልዋ ክህልዎ ይኽእል እዩ።
ኩሉ ግዜ ዝከኣል እኳ እንተዘይኮነ፡ ኣብቲ ንኣካላት ዝምልከት HTML ጠለባትና ካብ መጠን ንላዕሊ ዶግማቲክ ከይንኸውን ንጽዕር። በዚ ኸምዚ፡ ኣብ CSS መምረጺታትና ኣብ ንጽል ክፍልታት ነተኩርን ቅጽበታዊ መምረጺ ህጻናት ( ~). እዚ ኣብ ኣተገባብራኻ ዝያዳ ተዓጻጻፍነት ይህበካን CSSና ቀሊልን ውሑድ ፍሉይን ንኽኸውን ይሕግዘካን።