ቡትስትራፕ

ስካፎልድ ምግባር

ቡትስትራፕ ኣብ ምላሽ ዝህቡ 12 ዓምድታት ዘለዎም ሽቦታት፣ ኣቀማምጣታትን ኣካላትን ዝተሃንጸ እዩ።

ዓለማዊ ምድላዋት

HTML5 doctype የድልዮ

ቡትስትራፕ ዝተወሰኑ ናይ HTML ባእታታትን ናይ CSS ባህርያትን ዝጥቀም ኮይኑ ናይ HTML5 doctype ምጥቃም ዘድልዮም እዩ። ኣብ መጀመርታ ኩሉ ፕሮጀክትታትካ ኣካትትዎ።

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

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

ቡትስትራፕ መሰረታዊ ዓለማዊ ምርኢት፣ ታይፖግራፊን ቅዲታት ምትእስሳርን የቐምጥ። ብፍላይ ድማ ንሕና፤

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

እዞም ቅዲታት ኣብ ውሽጢ ስካፎልድ ክትረኽቦም ትኽእል ኢኻ ።less .

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

ምስ Bootstrap 2፡ እቲ ናይ ቀደም ዳግመ-ምትዕርራይ ብሎክ ን Normalize.css ፡ ብኒኮላስ ጋላገርን ጆናታን ኒልን ዝተሰርሐ ፕሮጀክት ኮይኑ ን HTML5 Boilerplate ውን ሓይሊ ዝህብ ኮይኑ ተደርብዩ ኣሎ። ኣብ ውሽጢ reset.less ናትና መብዛሕትኡ Normalize ክንጥቀም ከለና፡ ገለ ባእታታት ብፍሉይ ን Bootstrap ኣውጺእናዮም ኣለና።

ነባሪ ስርዓት ሽቦ

ቀጥታዊ ሽቦ ኣብነት

እቲ ነባሪ Bootstrap grid system 12 columns utilizes , ን940px ስፍሓት ዘለዎ መትሓዚ ብዘይ ምላሽ ዝህቡ ባህርያት ዘንቀሳቕሱ ይገብር ። እቲ ምላሽ ዝህብ CSS ፋይል ምስ ተወሰኸ፡ እቲ ሽቦ ከከም ቪውፖርትካ 724pxን 1170pxን ስፍሓት ክኸውን ይላመድ። ኣብ ትሕቲ 767px ቪውፖርትስ፡ እቶም ዓምድታት ፈሳሲ ኮይኖም ብቐጥታ ይድምር።

1.
1.
1.
1.
1.
1.
1.
1.
1.
2.
3.
4.
4.
5.
9.

መሰረታዊ ሽቦ ኤችቲኤምኤል

ንቐሊል ናይ ክልተ ዓምድታት ኣቀማምጣ፡ a ፍጠር .rowእሞ ዝግባእ ቁጽሪ .span*ዓምድታት ወስኸሉ። እዚ 12 ዓምድታት ዘለዎ ሽቦ ስለ ዝኾነ፡ ነፍሲ ወከፎም .span*ንቑጽሪ ካብቶም 12 ዓምድታት ዝሽፍኑ ኮይኖም፡ ኩሉ ግዜ ንነፍሲ ​​ወከፍ መስርዕ (ወይ ቁጽሪ ዓምድታት ኣብቲ ወላዲ) ክሳብ 12 ክድምር ኣለዎ።

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

ነዚ ኣብነት ኣብ ግምት ብምእታው .span4፡ and .span8, ኣለና ን12 ጠቕላላ ዓምድታትን ምሉእ መስርዕን ምግባር።

ምትዕርራይ ዓምድታት

.offset*ክፍልታት ተጠቒምካ ዓምድታት ናብ የማን ኣንቀሳቕሶም ። ነፍሲ ወከፍ ክፍሊ ንጸጋማይ ወሰን ናይ ሓደ ዓምዲ ብሙሉእ ዓምዲ ይውስኾ። ንኣብነት ኣብ ልዕሊ ኣርባዕተ ዓምድታት .offset4ይንቀሳቐስ ።.span4

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

ዓምድታት ምድቃል

ትሕዝቶኻ ምስቲ ነባሪ ሽቦ ንምስፋር፡ ኣብ ውሽጢ ሓደ ዝጸንሐ ዓምዲ ሓድሽን .rowስብስብን ዓምድታት ወስኸሉ ። ዝተሰፍሩ መስመራት ንብዝሒ ዓምድታት ወላዲኡ ዝድመር ስብስብ ዓምድታት ከጠቓልሉ ይግባእ።.span*.span*

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

ስርዓት ሽቦ ፈሳሲ

ቀጥታዊ ፈሳሲ ሽቦ ኣብነት

እቲ ፈሳሲ ሽቦ ስርዓት ኣብ ክንዲ ፒክሰል ንዓምዲ ስፍሓት ሚእታዊት ይጥቀም። ከምቲ ናይ ጽኑዕ ሽቦ ስርዓትና ናይ ምላሽ ዓቕሚ ዘለዎ ኮይኑ፡ ንቁልፊ ስክሪን ርዝነትን መሳርሕታትን ግቡእ ምምጥጣን የረጋግጽ።

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

መሰረታዊ ፈሳሲ ሽቦ HTML

.rowዝኾነ መስርዕ ናብ ብምቕያር "ፈሳሲ" ግበሮ .row-fluid። እቶም ናይ ዓምዲ ክፍልታት ልክዕ ከም ሓደ ኮይኖም ይጸንሑ፣ እዚ ድማ ኣብ መንጎ ጽኑዕን ፈሳስን ሽቦታት ብቐሊሉ ክትግልበጥ ይገብሮ።

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

ፈሳሲ ምትዕርራይ

ብተመሳሳሊ መንገዲ ከምቲ ናይ ጽኑዕ ሽቦ ስርዓት ምትዕርራይ ይሰርሕ: .offset*ኣብ ዝኾነ ዓምዲ ምውሳኽ ብኽንድኡ ዝኣክል ዓምድታት ምትዕርራይ።

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

ፈሳሲ ምድቃል

ፈሳሲ ሽቦታት ምድቃል ብዝተፈላለየ መንገዲ ይጥቀሙ: ነፍሲ ወከፍ ዝተሰፈረ ደረጃ ዓምድታት ክሳብ 12 ዓምድታት ክውስኽ ኣለዎ። እዚ ዝኾነሉ ምኽንያት ድማ እቲ ፈሳሲ ሽቦ ንመቐመጢ ስፍሓት ፒክሰል ዘይኮነስ ሚእታዊት ስለ ዝጥቀም እዩ።

ፈሳሲ 12
ፈሳሲ 6.
ፈሳሲ 6.
ፈሳሲ 6.
ፈሳሲ 6. 
  1. <div class = "መስመር-ፈሳሲ" > 
  2.   <div ክፍሊ = "span12" > ዝብል ጽሑፍ ኣሎ። 
  3.     ፈሳሲ 12
  4.     <div class = "መስመር-ፈሳሲ" > 
  5.       <div ክፍሊ = "span6" > ዝብል ጽሑፍ ኣሎ። 
  6.         ፈሳሲ 6.
  7.         <div class = "መስመር-ፈሳሲ" > 
  8.           <div class = "span6" > ፈሳሲ 6 </div> ዝብል ጽሑፍ ኣሎ። 
  9.           <div class = "span6" > ፈሳሲ 6 </div> ዝብል ጽሑፍ ኣሎ። 
  10.         </div> ዝብል ጽሑፍ ኣሎ።
  11.       </div> ዝብል ጽሑፍ ኣሎ።
  12.       <div class = "span6" > ፈሳሲ 6 </div> ዝብል ጽሑፍ ኣሎ። 
  13.     </div> ዝብል ጽሑፍ ኣሎ።
  14.   </div> ዝብል ጽሑፍ ኣሎ።
  15. </div> ዝብል ጽሑፍ ኣሎ።

ኣቀማምጣታት

ጽኑዕ ኣቀማምጣ

ናይ ሓባር ጽኑዕ-ስፍሓት (ከምኡ’ውን ብኣማራጺ ምላሽ ዝህብ) ኣቀማምጣ ምስ <div class="container">ዘድሊ ጥራይ ይህብ።

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

ፈሳሲ ኣቀማምጣ

ፈሳሲ፣ ክልተ ዓምዲ ዘለዎ ገጽ ምስ <div class="container-fluid">—ንመተግበሪታትን ሰነዳትን ብሉጽ እዩ።

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

ምላሽ ዝህብ ዲዛይን

ምላሽ ዝህቡ ባህርያት ምኽኣል

<head>ኣብ ውሽጢ እቲ ናይ ሰነድካ ግቡእ ሜታ መለለዪን ተወሳኺ ቅዲ ጽሑፍን ብምሕዋስ ኣብ ፕሮጀክትካ ምላሽ ዝህብ CSS ወልዕ ። Bootstrap ካብቲ Customize ዝብል ገጽ ኣዋዲድካዮ እንተኾንካ፡ ነቲ meta tag ጥራይ ኢኻ ከተካትቶ ዘለካ።

  1. <meta name = "viewport" content = "ስፍሓት=ስፍሓት-መሳርሒ፣ መጀመርታ-መጠን=1.0" >  
  2. <link href = "ንብረት/css/bootstrap-responsive.css" rel = "ቅዲ ጽሑፍ" >

ርእሲ ንላዕሊ!ኩሉ ነገር ምላሽ ዝህብ ክኸውን ስለዘይብሉ ቡትስትራፕ ኣብዚ እዋን ብነባሪ መልክዑ ምላሽ ዝህቡ ባህርያት ኣየጠቓልልን እዩ። ንደቨሎፐራት ነዚ ባህሪ እዚ ከወግድዎ ኣብ ክንዲ ምትብባዕ፡ ከም ኣድላይነቱ ከነኽእሎ ዝበለጸ ምዃኑ ንሕሰብ።

ብዛዕባ ምላሽ ዝህብ ቡትስትራፕ

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

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

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

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

ዝድገፉ መሳርሒታት

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

መፍለዪ ስፍሓት ኣቀማምጣ ስፍሓት ዓምዲ ስፍሓት ጐዳጉዲ
ዓቢ ድስፕለይ 1200pxን ልዕሊኡን ይኸውን 70px ዝብል እዩ። 30px ዝብል እዩ።
ትሑዝ 980pxን ልዕሊኡን ይኸውን 60px ዝብል እዩ። 20px ዝብል እዩ።
ስእሊ ጽላት 768pxን ልዕሊኡን ይኸውን 42px ዝብል እዩ። 20px ዝብል እዩ።
ስልክታት ናብ ጣብላታት 767pxን ትሕቲኡን ይኸውን ፈሳሲ ዓምድታት፣ ውሱን ስፍሓት የብሉን።
ስልክታት 480pxን ትሕቲኡን ይኸውን ፈሳሲ ዓምድታት፣ ውሱን ስፍሓት የብሉን። 
  1. /* ዓቢ ዴስክቶፕ */
  2. @media ( ደቒቕ - ስፍሓት : 1200px ) { ... }     
  3.  
  4. /* ስእሊ ጣብላ ናብ ላንድስኬፕን ዴስክቶፕን */
  5. @media ( min - ስፍሓት : 768px ) ከምኡውን ( ዝለዓለ ስፍሓት : 979px ) { ... } .        
  6.  
  7. /* ላንድስኬፕ ስልኪ ናብ ስእሊ ጣብላ */
  8. @media ( ዝለዓለ - ስፍሓት : 767px ) { ... }     
  9.  
  10. /* ላንድስኬፕ ስልክታትን ንታሕቲን */
  11. @media ( ዝለዓለ - ስፍሓት : 480px ) { ... }

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

ንዝቐልጠፈ ንሞባይል ዝምችእ ምዕባለ፡ ነዞም ትሕዝቶ ብመሳርሒ ንምርኣይን ንምሕባእን ዝሕግዙ ናይ ዩቲሊቲ ክፍልታት ተጠቐሙ። ኣብ ታሕቲ ሰሌዳ ናይቶም ዝርከቡ ክፍልታትን ኣብ ዝተዋህበ ናይ ሚድያ ሕቶ ኣቀማምጣ (ብመሳርሒ ዝተሰየመ) ዘለዎም ጽልዋን ኣሎ። ኣብ responsive.less.

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

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

ብውሱን መሰረት ተጠቐም እሞ ምሉእ ብምሉእ ዝተፈላለየ ስሪት ናይ ሓደ መርበብ ሓበሬታ ካብ ምፍጣር ተቖጠብ። ኣብ ክንድኡስ፡ ንኣቀራርባ ነፍሲ ወከፍ መሳርሒ ንምምላእ ተጠቐመሎም። ምላሽ ዝህቡ ዩቲሊቲታት ምስ ሰደቓታት ክጥቀሙ የብሎምን፣ ከምኡ ስለዝኾኑ ድማ ኣይድገፉን እዮም።

ምላሽ ዝህብ ናይ ዩቲሊቲታት ፈተነ ጉዳይ

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

ኣብ...

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

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

ኣብ ልዕሊ...

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

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