ከም ኣካል ቡትስትራፕ ዝቐረበ ነባሪ ስርዓተ ሽቦ 940px ስፍሓት ዘለዎ፣ 12 ዓምዲ ዘለዎ ሽቦ እዩ።

ብተወሳኺ ንዝተፈላለዩ መሳርሕታትን ርዝነትን ኣርባዕተ ምላሽ ዝህቡ ፍልልያት ኣለዉዎ፡ ስልኪ፡ ስእሊ ጣብላ፡ መልክዓ ምድሪ ጠረጴዛን ንኣሽቱ ዴስክቶፕን፡ ከምኡ’ውን ዓበይቲ ገፊሕ ስክሪን ዘለዎም ዴስክቶፕ።

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

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

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

ኣብነት

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

<div ክፍሊ = "መስመር" > 
  <div ክፍሊ = "span12" > ዝብል ጽሑፍ ኣሎ። 
    ደረጃ 1 ናይ ዓምዲ
    <div ክፍሊ = "መስመር" > 
      <div class = "span6" > ደረጃ 2 </div> ዝብል ጽሑፍ ኣሎ። 
      <div class = "span6" > ደረጃ 2 </div> ዝብል ጽሑፍ ኣሎ። 
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

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

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

ፈሳሲ መስመራት።

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

ምልክት ምግባር

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

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

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

ተለዋዋጢ ኣብ LESS

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

ከመይ ጌርና ንሰርሕ

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

ምላሽ ምሃብ

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

ጽኑዕ ኣቀማምጣ

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

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

ፈሳሲ ኣቀማምጣ

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

<div class = "መትሓዚ-ፈሳሲ" > 
  <div class = "መስመር-ፈሳሲ" > 
    <div ክፍሊ = "span2" > ዝብል ጽሑፍ ኣሎ። 
      <!--ትሕዝቶ ጎድናዊ መስመር-->
    </div> ዝብል ጽሑፍ ኣሎ።
    <div ክፍሊ = "span10" > ዝብል ጽሑፍ ኣሎ። 
      <!--ትሕዝቶ ኣካላት-->
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ዝድገፉ መሳርሒታት

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

ሜታ ታግ የድልዮ

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

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

እንታይ ይገብርዎ።

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

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

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

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

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

  // ላንድስኬፕ ስልክታትን ንታሕቲን።
  @media ( ዝለዓለ - ስፍሓት : 480px ) { ... }     
 
  // ላንድስኬፕ ስልኪ ናብ ስእሊ ጣብላ
  @media ( ዝለዓለ - ስፍሓት : 768px ) { ... }     
 
  // ስእሊ ጣብላ ናብ ላንድስኬፕን ዴስክቶፕን።
  @media ( min - ስፍሓት : 768px ) ከምኡውን ( ዝለዓለ ስፍሓት : 980px ) { ... } .        
 
  // ዓቢ ዴስክቶፕ
  @media ( ደቒቕ - ስፍሓት : 1200px ) { .. } .