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

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

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

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

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

ለምሳሌ

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

ምን ያደርጋሉ

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

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

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

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

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

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