እንደ Bootstrap አካል የቀረበው ነባሪ የፍርግርግ ስርዓት 940 ፒክስል ስፋት ያለው ባለ 12-አምድ ፍርግርግ ነው።

እንዲሁም ለተለያዩ መሳሪያዎች እና ጥራቶች አራት ምላሽ ሰጭ ልዩነቶች አሉት እነሱም ስልክ ፣ የጡባዊ ፎቶግራፍ ፣ የጠረጴዛ ገጽታ እና ትናንሽ ዴስክቶፖች እና ትልቅ ሰፊ ስክሪን ዴስክቶፖች።

<div class = "ረድፍ" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

እዚህ ላይ እንደሚታየው መሰረታዊ አቀማመጥ በሁለት "አምዶች" ሊፈጠር ይችላል, እያንዳንዳቸው እንደ የፍርግርግ ስርዓታችን አካል ከገለጽናቸው 12 የመሠረት ዓምዶች መካከል በርካታ ናቸው.

በ Bootstrap ውስጥ ባለው የማይንቀሳቀስ (ፈሳሽ ያልሆነ) ፍርግርግ ስርዓት፣ መክተቻ ቀላል ነው። ይዘትዎን ለመክተት፣ አሁን ባለው አምድ ውስጥ አዲስ እና የአምዶች .rowስብስብ ያክሉ።.span*.span*

ለምሳሌ

የጎጆ ረድፎች የአምዶች ስብስብ ማካተት አለባቸው ይህም የወላጅ ዓምዶች ብዛት ይጨምራል። ለምሳሌ፣ ሁለት የተዘጉ .span3ዓምዶች በ ውስጥ መቀመጥ አለባቸው .span6።

<div class = "ረድፍ" > 
  <div class = "span12" > 
    የአምድ 1 ደረጃ
    <div class = "ረድፍ" > 
      <div class = "span6" > ደረጃ 2 </div> 
      <div class = "span6" > ደረጃ 2 </div> 
    </div>
  </div>
</div>

በመቶዎች እንጂ ፒክስሎች አይደሉም

የፈሳሽ ፍርግርግ ስርዓት ከቋሚ ፒክሰሎች ይልቅ ለዓምድ ስፋቶች በመቶዎች ይጠቀማል። እንዲሁም ለቁልፍ ስክሪን ጥራቶች እና መሳሪያዎች ተገቢውን መጠን በማረጋገጥ ልክ እንደ ቋሚ ፍርግርግ ስርዓታችን ተመሳሳይ ምላሽ ሰጪ ልዩነቶች አሉት።

ፈሳሽ ረድፎች

.rowወደ በመቀየር በቀላሉ ማንኛውንም ረድፍ ፈሳሽ ያድርጉ .row-fluid። ዓምዶቹ ልክ እንደነበሩ ይቆያሉ፣ ይህም በቋሚ እና በፈሳሽ አቀማመጦች መካከል ለመገልበጥ እጅግ በጣም ቀላል ያደርገዋል።

ምልክት ማድረጊያ

<div class = "ረድፍ-ፈሳሽ" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

በፈሳሽ ፍርግርግ መክተት ትንሽ የተለየ ነው፡ የተሸከሙት የአምዶች ብዛት ከወላጅ ጋር መመሳሰል አያስፈልጋቸውም። በምትኩ፣ እያንዳንዱ ረድፍ የወላጅ አምድ 100% ስለሚወስድ የእርስዎ አምዶች በእያንዳንዱ ደረጃ ዳግም ይጀመራሉ።

<div class = "ረድፍ-ፈሳሽ" > 
  <div class = "span12" > 
    የአምድ 1 ደረጃ
    <div class = "ረድፍ-ፈሳሽ" > 
      <div class = "span6" > ደረጃ 2 </div> 
      <div class = "span6" > ደረጃ 2 </div> 
    </div>
  </div>
</div>

በLESS ውስጥ ያሉ ተለዋዋጮች

በ Bootstrap ውስጥ የተገነቡት ከላይ በሰነድ የተቀመጠውን ነባሪ የ940 ፒክስል ፍርግርግ ስርዓት ለማበጀት በጣት የሚቆጠሩ ተለዋዋጮች ናቸው። ሁሉም የፍርግርግ ተለዋዋጮች በተለዋዋጭ ተቀምጠዋል።

እንዴት ማበጀት እንደሚቻል

ፍርግርግ ማስተካከል ማለት ሶስቱን ተለዋዋጮች መለወጥ @grid*እና ቡትስትራፕን እንደገና ማጠናቀር ማለት ነው። የፍርግርግ ተለዋዋጮችን በተለዋዋጭ ይለውጡ። ያነሰ እና እንደገና ለመሰብሰብ ከተመዘገቡት አራት መንገዶች አንዱን ይጠቀሙ ። ተጨማሪ አምዶችን እያከሉ ከሆነ፣ በgrid.less ውስጥ ላሉ CSS ማከልዎን ያረጋግጡ።

ምላሽ ሰጪ ሆኖ መቆየት

የፍርግርግ ማበጀት የሚሠራው በነባሪ ደረጃ፣ በ940 ፒክስል ፍርግርግ ነው። የBootstrapን ምላሽ ሰጪ ገጽታዎች ለመጠበቅ፣ ግሪዶቹን በምላሽ ምላሽ ማበጀት ይኖርብዎታል።

ቋሚ አቀማመጥ

በነጠላ የቀረበ ለማንኛውም ድረ-ገጽ ወይም ገጽ ነባሪው እና ቀላል ባለ 940 ፒክስል ስፋት <div class="container">።

<ሰውነት>
  <div class = "መያዣ" > 
    ...
  </div>
</ body>

ፈሳሽ አቀማመጥ

<div class="container-fluid">ተጣጣፊ የገጽ መዋቅር፣ ደቂቃ- እና ከፍተኛ-ስፋት፣ እና የግራ-እጅ የጎን አሞሌ ይሰጣል። ለመተግበሪያዎች እና ሰነዶች ምርጥ ነው።

<div class = "container-fluid" > 
  <div class = "ረድፍ-ፈሳሽ" > 
    <div class = "span2" > 
      <!--የጎን አሞሌ ይዘት-->
    </div>
    <div class = "span10" > 
      <!--የሰውነት ይዘት-->
    </div>
  </div>
</div>

የሚደገፉ መሳሪያዎች

Bootstrap ፕሮጀክቶችዎን በተለያዩ መሳሪያዎች እና የስክሪን ጥራቶች ላይ ይበልጥ ተገቢ እንዲሆኑ ለማገዝ በአንድ ፋይል ውስጥ ያሉ ጥቂት የሚዲያ መጠይቆችን ይደግፋል። የተካተተውን እነሆ፡-

ሜታ መለያ ያስፈልገዋል

መሣሪያዎች ምላሽ ሰጪ ገጾችን በትክክል ማሣየታቸውን ለማረጋገጥ የእይታ ፖርት ሜታ መለያውን ያካትቱ።

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  

ምን ያደርጋሉ

የሚዲያ መጠይቆች በብዙ ሁኔታዎች ላይ ተመስርተው ብጁ CSSን ይፈቅዳሉ - ሬሾዎች ፣ ስፋቶች ፣ የማሳያ ዓይነት ፣ ወዘተ - ግን ብዙውን ጊዜ ዙሪያ min-widthእና max-width.

• በእኛ ፍርግርግ ውስጥ የአምዱን ስፋት ያስተካክሉ
• አስፈላጊ በሆነ ቦታ ላይ ከመንሳፈፍ ይልቅ ንጥረ ነገሮችን ቁልል
• ለመሣሪያዎች ይበልጥ ተገቢ እንዲሆን የርእሶችን እና የጽሑፍ መጠንን ቀይር

Bootstrap እነዚህን የሚዲያ ጥያቄዎች በራስ ሰር አያካትትም ነገር ግን እነሱን መረዳት እና ማከል በጣም ቀላል እና አነስተኛ ማዋቀርን ይጠይቃል። የBootstrapን ምላሽ ሰጪ ባህሪያት ለማካተት ጥቂት አማራጮች አሉዎት፡-

1. የተጠናቀረውን ምላሽ ሰጪ ስሪት፣ bootstrap-responsive.css ይጠቀሙ
2. @import "responsive.less" ያክሉ እና Bootstrapን እንደገና ያጠናቅቁ
3. ምላሽ ሰጪን እንደ የተለየ ፋይል ያሻሽሉ እና እንደገና ያጠናቅቁ

ለምን ዝም ብለህ አታካተትም? እውነቱን ለመናገር, ሁሉም ነገር ምላሽ ሰጪ መሆን የለበትም. ገንቢዎች ይህን ባህሪ እንዲያስወግዱት ከማበረታታት ይልቅ እሱን ማንቃት የተሻለ እንደሆነ እናስባለን።

  // የመሬት ገጽታ ስልኮች እና ታች
  @ሚዲያ ( ከፍተኛ - ስፋት : 480 ፒክስል ) { ... }     
 
  // የመሬት ገጽታ ስልክ ወደ የቁም ታብሌት
  @ሚዲያ ( ከፍተኛ - ስፋት : 768 ፒክስል ) { ... }     
 
  // የቁም ጡባዊ ወደ የመሬት ገጽታ እና ዴስክቶፕ
  @ሚዲያ ( ደቂቃ - ስፋት : 768 ፒክስል ) እና ( ከፍተኛ - ስፋት : 980 ፒክስል ) { ... }        
 
  // ትልቅ ዴስክቶፕ
  @ሚዲያ ( ደቂቃ - ስፋት : 1200 ፒክስል ) { .. }