ቡትስትራፕ

ስካፎልድ ምግባር

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

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

ነባሪ 940px ሽቦ

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

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

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

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

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


ምትዕርራይ ዓምድታት

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

ዓምድታት ምድቃል

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

ኣብነት

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

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

ተለዋዋጢ ዝኾነ ነባሪ ዋጋ መግለፂ
@gridColumns 12. ብዝሒ ዓምድታት
@gridColumnWidth 60px ዝብል እዩ። ስፍሓት ነፍሲ ወከፍ ዓምዲ
@gridGutterWidth 20px ዝብል እዩ። ኣብ መንጎ ዓምድታት ኣሉታዊ ቦታ
@siteWidth ዝተሓሰበ ድምር ናይ ኩሎም ዓምድታትን ጐዳጉዲን። ስፍሓት ናይቲ .container-fixed()ሚክሲን ንምቕማጥ ቁጽሪ ዓምድታትን ጐዳጉዲን ይቖጽር

ተለዋዋጢ ኣብ 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 class="span2"> ዝብል ጽሑፍ ኣሎ።
      <!--ትሕዝቶ ጎድናዊ መስመር-->
    </div> ዝብል ጽሑፍ ኣሎ።
    <div class="span10"> ዝብል ጽሑፍ ኣሎ።
      <!--ትሕዝቶ ኣካላት-->
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

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

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

ዝድገፉ መሳርሒታት

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

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

እንታይ ይገብርዎ።

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

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

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

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

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

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

  // ላንድስኬፕ ስልክታትን ንታሕቲን።
  @media (ዝለዓለ ስፍሓት: 480px) { ... }

  // ላንድስኬፕ ስልኪ ናብ ስእሊ ጣብላ
  @media (ዝለዓለ ስፍሓት: 768px) { ... }

  // ስእሊ ጣብላ ናብ ላንድስኬፕን ዴስክቶፕን።
  @media (min-width: 768px) ከምኡውን (ዝለዓለ-ስፍሓት: 940px) { ... }

  // ዓቢ ዴስክቶፕ
  @ሚድያ (ደቒቕ ስፍሓት: 1200px) { .. }