ቡትስትራፕ

ስካፎልድ ምግባር

ቡትስትራፕ ኣብ ምላሽ ዝህብ 12 ዓምድታት ዘለዎ ሽቦ ዝተሃንጸ እዩ። ኣብቲ ስርዓት ዝተመርኮሰ ጽኑዕን ፈሳስን ስፍሓት ዘለዎም ኣቀማምጣታት እውን ኣካቲትናዮም ኣለና።

ዓለምለኻዊ ቅዲታት ንCSS ዳግመ-ምትዕርራይ፣ ታይፖግራፊን መላግቦታትን

HTML5 doctype የድልዮ

ቡትስትራፕ HTML5 doctype ምጥቃም ዘድልዮም ናይ HTML ባእታታትን ናይ CSS ባህርያትን ይጥቀም። ኣብ መጀመርታ ናይ ነፍሲ ወከፍ Bootstrapped ገጽ ኣብ ፕሮጀክትካ ምእታውካ ኣረጋግጽ።

  1. <!DOCTYPE html> ዝብል ጽሑፍ ኣሎ።
  2. <html lang = "en" > ዝብል ጽሑፍ ኣሎ። 
  3.   ...
  4. </html> ዝብል ጽሑፍ ኣሎ።

ታይፕግራፊን ሊንክታትን

ኣብ ውሽጢ እቲ scaffolding.less ዝብል ፋይል፡ መሰረታዊ ዓለማዊ ምርኢት፡ ታይፕግራፊን ቅዲታት ምትእስሳርን ነቐምጥ። ብፍላይ ድማ ንሕና፤

  • ኣብ ኣካላትና ዘሎ ወሰን ኣውጽእዎ።
  • ኣብ background-color: white;ልዕሊ እቲ...body
  • ነቲ @baseFontFamily, @baseFontSize, ከምኡውን @baseLineHeightባህርያት ከም መሰረት ታይፕግራፊና ንጥቀመሉ
  • ነቲ ዓለማዊ ሕብሪ መላግቦ ብመንገዲ @linkColorኣቐምጦን ኣብ ስርዝ ድልዝ ጥራይ ኣተግብርን።:hover

ብመንገዲ Normalize ዳግማይ ምትካል

ካብ Bootstrap 2 ጀሚሩ፡ እቲ ባህላዊ CSS reset ካብ Normalize.css ዝመጹ ባእታታት ንምጥቃም ምዕባለ ኣርእዩ እዩ ፡ እዚ ፕሮጀክት ብኒኮላስ ጋላገር ዝተሰርሐ ኮይኑ ን HTML5 Boilerplate እውን ሓይሊ ይህብ ።

እቲ ሓድሽ ዳግመ-ምትዕርራይ ጌና ኣብ reset.less ክትረኽቦ ትኽእል ኢኻ ፣ ግን ንሓጺርነትን ልክዕነትን ብዙሓት ባእታታት ተኣልዮም።

ነባሪ ስርዓተ ሽቦ 12 ዓምድታት ምስ ምላሽ ዝህብ ምጥምዛዝ

1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
4.
4.
4.
4.
8.
6.
6.
12.

ኣብ ቡትስትራፕ ዝቐረበ ነባሪ ስርዓተ ሽቦ 12 ዓምድታት ዝጥቀም ኮይኑ ብስፍሓት 724px፣ 940px (ነባሪ ብዘይ ምላሽ ዝህብ CSS ሓዊሱ)፣ ከምኡውን 1170px ዝገልጹ እዮም። ኣብ ትሕቲ 767px ቪውፖርትስ፡ እቶም ዓምድታት ፈሳሲ ኮይኖም ብቐጥታ ይድምር።

  1. <div ክፍሊ = "መስመር" > 
  2.   <div ክፍሊ = "span4" > ... </div> ዝብል ጽሑፍ ኣሎ። 
  3.   <div ክፍሊ = "span8" > ... </div> ዝብል ጽሑፍ ኣሎ። 
  4. </div> ዝብል ጽሑፍ ኣሎ።

ከምቲ ኣብዚ ንርእዮ ዘለና፡ መሰረታዊ ኣቀማምጣ ብኽልተ "ዓምድታት" ክፍጠር ይኽእል፡ ነፍሲ ወከፎም ንብዙሓት ካብቶም ከም ኣካል ስርዓተ ሽቦና ዝገለጽናዮም 12 መሰረታውያን ዓምድታት ዝሽፍኑ እዮም።


ምትዕርራይ ዓምድታት

4.
4 ኦፍሴት 4
3 ኦፍሴት 3
3 ኦፍሴት 3
8 ኦፍሴት 4 
  1. <div ክፍሊ = "መስመር" > 
  2.   <div ክፍሊ = "span4" > ... </div> ዝብል ጽሑፍ ኣሎ። 
  3.   <div class = "span4 ኦፍሴት4" > ... </div> ዝብል ጽሑፍ ኣሎ። 
  4. </div> ዝብል ጽሑፍ ኣሎ።

ዓምድታት ምድቃል

ምስቲ ኣብ ቡትስትራፕ ዘሎ ስታትቲክ (ዘይፈሳሲ) ስርዓተ ሽቦ፡ ምድቃል ቀሊል እዩ። ትሕዝቶኻ ንምስፋር፡ ኣብ ውሽጢ ሓደ ዝጸንሐ ዓምዲ ሓድሽን .rowስብስብን ዓምድታት ጥራይ ምውሳኽ ።.span*.span*

ኣብነት

ዝተሰፍሩ መስመራት ስብስብ ዓምድታት ከጠቓልሉ ኣለዎም እዚኦም ድማ ናብ ቁጽሪ ዓምድታት ናይ ወላዲኡ ዝድመር እዩ። ንኣብነት ክልተ ዝተሰፍሩ .span3ዓምድታት ኣብ ውሽጢ ሓደ .span6.

ደረጃ 1 ናይ ዓምዲ
ደረጃ 2
ደረጃ 2 
  1. <div ክፍሊ = "መስመር" > 
  2.   <div ክፍሊ = "span6" > ዝብል ጽሑፍ ኣሎ። 
  3.     ደረጃ 1 ዓምዲ
  4.     <div ክፍሊ = "መስመር" > 
  5.       <div class = "span3" > ደረጃ 2 </div> ዝብል ጽሑፍ ኣሎ። 
  6.       <div class = "span3" > ደረጃ 2 </div> ዝብል ጽሑፍ ኣሎ። 
  7.     </div> ዝብል ጽሑፍ ኣሎ።
  8.   </div> ዝብል ጽሑፍ ኣሎ።
  9. </div> ዝብል ጽሑፍ ኣሎ።

ስርዓት ሽቦ ፈሳሲ 12 ምላሽ ዝህቡ፣ ሚእታዊት መሰረት ዝገበሩ ዓምድታት

ፈሳሲ ዓምድታት

1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
4.
4.
4.
4.
8.
6.
6.
12.

ሚእታዊት እምበር ፒክሰል ኣይኮነን።

እቲ ፈሳሲ ሽቦ ስርዓት ኣብ ክንዲ ንቐዋሚ ፒክሰላት ንዓምዲ ስፍሓት ሚእታዊት ይጥቀም። ብተወሳኺ ከምቲ ናይ ጽኑዕ ሽቦ ስርዓትና ተመሳሳሊ ምላሽ ዝህብ ፍልልያት ኣለዎ፣ ንቁልፊ ስክሪን ርዝነትን መሳርሕታትን ግቡእ ምምጥጣን የረጋግጽ።

ፈሳሲ መስመራት።

ዝኾነ መስርዕ ፈሳሲ ግበር ብቐሊሉ .rowናብ .row-fluid. እቶም ዓምድታት ልክዕ ከም ቀደሞም ይጸንሑ፣ ኣብ መንጎ ጽኑዕን ፈሳስን ኣቀማምጣታት ክትግልበጥ ልዕሊ ዓቐን ትኽ ዝበለ ይገብሮ።

ምልክት ምግባር

  1. <div class = "መስመር-ፈሳሲ" > 
  2.   <div ክፍሊ = "span4" > ... </div> ዝብል ጽሑፍ ኣሎ። 
  3.   <div ክፍሊ = "span8" > ... </div> ዝብል ጽሑፍ ኣሎ። 
  4. </div> ዝብል ጽሑፍ ኣሎ።

ፈሳሲ ምድቃል

ብፈሳሲ ሽቦታት ምድቃል ቁሩብ ዝተፈልየ እዩ: ብዝሒ ናይ ዝተሰቕሉ ዓምድታት ምስቲ ወላዲ ክሰማማዕ ኣየድልዮን እዩ። ኣብ ክንድኡስ፡ ነፍሲ ወከፍ መስርዕ 100% ናይቲ ወላዲ ዓምዲ ስለ ዝወስድ፡ ዓምድታትካ ኣብ ነፍሲ ወከፍ ደረጃ ዳግማይ ይስራዕ።

ፈሳሲ 12
ፈሳሲ 6.
ፈሳሲ 6. 
  1. <div class = "መስመር-ፈሳሲ" > 
  2.   <div ክፍሊ = "span12" > ዝብል ጽሑፍ ኣሎ። 
  3.     ደረጃ 1 ናይ ዓምዲ
  4.     <div class = "መስመር-ፈሳሲ" > 
  5.       <div class = "span6" > ደረጃ 2 </div> ዝብል ጽሑፍ ኣሎ። 
  6.       <div class = "span6" > ደረጃ 2 </div> ዝብል ጽሑፍ ኣሎ። 
  7.     </div> ዝብል ጽሑፍ ኣሎ።
  8.   </div> ዝብል ጽሑፍ ኣሎ።
  9. </div> ዝብል ጽሑፍ ኣሎ።

ሽቦ ምምዕርራይ ምግባር

ተለዋዋጢ ዝኾነ ነባሪ ዋጋ መግለፂ
@gridColumns 12. ብዝሒ ዓምድታት
@gridColumnWidth 60px ዝብል እዩ። ስፍሓት ነፍሲ ወከፍ ዓምዲ
@gridGutterWidth 20px ዝብል እዩ። ኣብ መንጎ ዓምድታት ኣሉታዊ ቦታ

ተለዋዋጢ ኣብ LESS

ኣብ ቡትስትራፕ ዝተሃንጹ ንኣጻብዕ ዝቑጸሩ ተለዋዋጢ ረቛሒታት ኮይኖም ነቲ ነባሪ 940px ስርዓተ ሽቦ ንምምዕርራይ ዝሕግዙ እዮም፣ ኣብ ላዕሊ ዝተሰነዱ እዮም። ኩሎም ተለዋዋጢ ንሽቦ ኣብ ተለዋዋጢ ይኽዘኑ።less.

ከመይ ጌርና ንገብሮ

ነቲ ሽቦ ምቕያር ማለት ነቶም ሰለስተ @grid*ተለዋዋጢ ረቛሒታት ምቕያርን Bootstrap ዳግማይ ምጥርናፍን ማለት እዩ። ናይ ሽቦ ተለዋዋጢ ኣብ variables.less ቀይርካ ዳግማይ ንምጥርናፍ ካብ ዝተሰነዱ ኣርባዕተ መንገድታት ሓደ ተጠቐም ። ተወሳኺ ዓምድታት ትውስኽ እንተኾንካ፡ ነቶም ኣብ grid.less ዘለዉ CSS ምውሳኽካ ኣረጋግጽ።

ምላሽ ምሃብ

ምምዕርራይ ናይቲ ሽቦ ኣብቲ ነባሪ ደረጃ ጥራይ እዩ ዝሰርሕ፣ 940px ሽቦ። ናይ Bootstrap ምላሽ ዝህብ መዳያት ንምዕቃብ፡ ነቶም grids ኣብ responsive.less ውን ክትቅይሮም ክትግደድ ኢኻ።

ኣቀማምጣታት መሰረታዊ ቅጥዕታት ንገጻት መርበብ ሓበሬታ ንምፍጣር

ጽኑዕ ኣቀማምጣ

እቲ ነባሪን ቀሊልን 940px-ስፍሓት ዘለዎ፣ ማእከል ዝገበረ ኣቀማምጣ ዳርጋ ንዝኾነ መርበብ ሓበሬታ ወይ ገጽ ብሓደ ዝቐረበ <div class="container">.

  1. <ኣካል> ዝብል እዩ።
  2.   <div class = "መትሓዚ" > 
  3.     ...
  4.   </div> ዝብል ጽሑፍ ኣሎ።
  5. </body> ዝብል ጽሑፍ ኣሎ።

ፈሳሲ ኣቀማምጣ

<div class="container-fluid">ተዓጻጻፊ ኣቃውማ ገጽ፡ min- and max-widths፡ ከምኡ’ውን ጸጋማይ ኢድ ጎድናዊ መስመር ይህብ። ንኣፕስን ዶክስን ብሉጽ እዩ።

  1. <div class = "መትሓዚ-ፈሳሲ" > 
  2.   <div class = "መስመር-ፈሳሲ" > 
  3.     <div ክፍሊ = "span2" > ዝብል ጽሑፍ ኣሎ። 
  4.       <!--ትሕዝቶ ጎድናዊ መስመር-->
  5.     </div> ዝብል ጽሑፍ ኣሎ።
  6.     <div ክፍሊ = "span10" > ዝብል ጽሑፍ ኣሎ። 
  7.       <!--ትሕዝቶ ኣካላት-->
  8.     </div> ዝብል ጽሑፍ ኣሎ።
  9.   </div> ዝብል ጽሑፍ ኣሎ።
  10. </div> ዝብል ጽሑፍ ኣሎ።

ምላሽ ዝህብ ዲዛይን ንዝተፈላለዩ መሳርሕታትን ውሳነታትን ዝምልከት ሕቶታት ሚድያ

ምላሽ ዝህቡ መሳርሒታት

እንታይ ይገብርዎ።

ናይ ሚድያ ሕቶታት ኣብ ብርክት ዝበሉ ኩነታት ዝተመርኮሰ ብሕታዊ CSS የፍቅዱ-መጠን፣ ስፍሓት፣ ዓይነት ምርኢት ወዘተ-ግን መብዛሕትኡ ግዜ ኣብ min-widthዙርያን max-width.

  • ኣብ ሽቦና ስፍሓት ዓምዲ ምቕያር
  • ኣብ ክንዲ ኣብ ኣድላዪ ቦታ ተንሳፋፊ ባእታታት ምድማር
  • ንመሳርሒታት ዝያዳ ዝምጥን ንኽኸውን ኣርእስታትን ጽሑፋትን ዓቐን ምቕያር

ንናይ ሚድያ ሕቶታት ብሓላፍነትን ከም መጀመርታ ንሞባይል ተዓዘብትኻ ጥራይን ተጠቐመሎም። ንዓበይቲ ፕሮጀክትታት፡ ውፉያት ኮድ መሰረታት እምበር ንብርክታት ናይ ሚድያ ሕቶታት ኣብ ግምት ኣእትዉ።

ዝድገፉ መሳርሒታት

ቡትስትራፕ ንፕሮጀክትታትካ ኣብ ዝተፈላለዩ መሳርሕታትን ርዝነት ስክሪንን ዝያዳ ዝምጥን ንምግባር ዝሕግዝ ብኣጻብዕ ዝቑጸሩ ናይ ሚድያ ሕቶታት ኣብ ሓደ ፋይል ይድግፍ። እንታይ ተኻቲቱ ዘሎ ኣብዚ ኣሎ፤

መፍለዪ ስፍሓት ኣቀማምጣ ስፍሓት ዓምዲ ስፍሓት ጐዳጉዲ
ስማርትፎናት 480pxን ትሕቲኡን ይኸውን ፈሳሲ ዓምድታት፣ ውሱን ስፍሓት የብሉን።
ስማርትፎናት ናብ ጣብላታት 767pxን ትሕቲኡን ይኸውን ፈሳሲ ዓምድታት፣ ውሱን ስፍሓት የብሉን።
ስእሊ ጽላት 768pxን ልዕሊኡን ይኸውን 42px ዝብል እዩ። 20px ዝብል እዩ።
ትሑዝ 980pxን ልዕሊኡን ይኸውን 60px ዝብል እዩ። 20px ዝብል እዩ።
ዓቢ ድስፕለይ 1200pxን ልዕሊኡን ይኸውን 70px ዝብል እዩ። 30px ዝብል እዩ።

ሜታ ታግ የድልዮ

መሳርሒታት ምላሽ ዝህቡ ገጻት ብግቡእ ከም ዘርእዩ ንምርግጋጽ፡ ነቲ viewport meta tag ኣካትት።

  1. <meta name = "viewport" content = "ስፍሓት=ስፍሓት-መሳርሒ፣ መጀመርታ-መጠን=1.0" >

ናይ ሚድያ ሕቶታት ምጥቃም

ቡትስትራፕ ነዞም ናይ ሚድያ ሕቶታት ብኣውቶማቲክ ኣየጠቓልሎምን እዩ፡ ምርዳእን ምውሳኽን ግን ኣዝዩ ቀሊልን ውሑድ ምድላው ዝሓትትን እዩ። ናይ ቡትስትራፕ ምላሽ ዝህቡ ባህርያት ንምሕዋስ ውሑዳት ኣማራጺታት ኣለዉኻ፤

  1. ነቲ ዝተጠርነፈ ምላሽ ዝህብ ስሪት bootstrap-responsive.css ተጠቐም
  2. @import "responsive.less" ወሲኽና Bootstrap ዳግማይ ኣጠቓልል
  3. responsive.less ከም ፍሉይ ፋይል ምቕያርን ዳግማይ ምጥርናፍን

ስለምንታይ ጥራይ ዘይሕወሶ? ሓቂ ንምዝራብ ኩሉ ነገር ምላሽ ዝህብ ክኸውን ኣየድልዮን እዩ። ኣብ ክንዲ ንደቨሎፐራት ነዚ ባህሪ ከወግድዎ ምትብባዕ፡ ንዕኡ ምኽኣል ዝበለጸ ምዃኑ ንሕሰብ።

  1.   /* ላንድስኬፕ ስልክታትን ንታሕቲን */
  2.   @media ( ዝለዓለ - ስፍሓት : 480px ) { ... }     
  3.  
  4.   /* ላንድስኬፕ ስልኪ ናብ ስእሊ ጣብላ */
  5.   @media ( ዝለዓለ - ስፍሓት : 767px ) { ... }     
  6.  
  7.   /* ስእሊ ጣብላ ናብ ላንድስኬፕን ዴስክቶፕን */
  8.   @media ( min - ስፍሓት : 768px ) ከምኡውን ( ዝለዓለ ስፍሓት : 979px ) { ... } .        
  9.  
  10.   /* ዓቢ ዴስክቶፕ */
  11.   @media ( ደቒቕ - ስፍሓት : 1200px ) { ... }

ምላሽ ዝህቡ ናይ ዩቲሊቲ ክፍልታት

እንታይ እዮም

ንዝቐልጠፈ ንሞባይል ዝምችእ ምዕባለ፡ ነዞም መሰረታዊ ናይ ዩቲሊቲ ክፍልታት ንመሳርሒ ትሕዝቶ ንምርኣይን ንምሕባእን ተጠቐሙ።

መዓስ ክትጥቀመሉ ኣለካ

ብውሱን መሰረት ተጠቐም እሞ ምሉእ ብምሉእ ዝተፈላለየ ስሪት ናይ ሓደ መርበብ ሓበሬታ ካብ ምፍጣር ተቖጠብ። ኣብ ክንድኡስ፡ ንኣቀራርባ ነፍሲ ወከፍ መሳርሒ ንምምላእ ተጠቐመሎም።

ንኣብነት <select>፡ ኣብ ሞባይል ኣቀማምጣ ንnav ዝኸውን ባእታ ከተርኢ ትኽእል ኢኻ፡ ኣብ ጣብላታት ወይ ዴስክቶፕ ግን ኣይኮነን።

ናይ ምድጋፍ ክፍልታት

ኣብዚ ተገሊጹ ዘሎ ሰሌዳ ናይቶም እንድግፎም ክፍልታትን ኣብ ዝተዋህበ ናይ ሚድያ ሕቶ ኣቀማምጣ (ብመሳርሒ ዝተሰየመ) ዘለዎም ጽልዋን እዩ። ኣብ responsive.less.

ክፍሊ ስልክታት480pxን ትሕቲኡን ይኸውን ጽላት767pxን ትሕቲኡን ይኸውን ናይ ዴስክቶፕ768pxን ልዕሊኡን ይኸውን
.visible-phone ዝርአ እዩ።
.visible-tablet ዝርአ እዩ።
.visible-desktop ዝርአ እዩ።
.hidden-phone ዝርአ እዩ። ዝርአ እዩ።
.hidden-tablet ዝርአ እዩ። ዝርአ እዩ።
.hidden-desktop ዝርአ እዩ። ዝርአ እዩ።

ናይ ፈተነ ጉዳይ

ነዞም ኣብ ላዕሊ ዝተጠቕሱ ክፍልታት ንምፍታን ንዓቐን መርበብ ሓበሬታኻ ምቕያር ወይ ኣብ ዝተፈላለዩ መሳርሒታት ምጽዓን።

ኣብ...

ቀጠልያ ምልክት ምልክት ኣብቲ ሕጂ ዘለኻዮ ርእይቶ ክፍሊ ከም ዝረአ የመልክቱ።

  • ስልኪ✔ ስልኪ
  • ጣብላ✔ ጣብላ
  • ዴስክቶፕ✔ ዴስክቶፕ

ኣብ ልዕሊ...

ኣብዚ፡ ቀጠልያ ምልክት ምልክት ኣብቲ ሕጂ ዘለኻዮ ቪውፖርት ክፍሊ ተሓቢኡ ከምዘሎ የመልክቱ።

  • ስልኪ✔ ስልኪ
  • ጣብላ✔ ጣብላ
  • ዴስክቶፕ✔ ዴስክቶፕ