Bootstrap හි කොටසක් ලෙස සපයන ලද පෙරනිමි ජාල පද්ධතිය 940px-පළල, 12-තීරු ජාලයකි .

එය විවිධ උපාංග සහ විභේදන සඳහා ප්‍රතිචාරාත්මක වෙනස්කම් හතරක් ද ඇත: දුරකථනය, ටැබ්ලට් පෝට්රේට්, මේස භූ දර්ශනය සහ කුඩා ඩෙස්ක්ටොප්, සහ විශාල පුළුල් තිර ඩෙස්ක්ටොප්.

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

මෙහි පෙන්වා ඇති පරිදි, මූලික පිරිසැලසුමක් "තීරු" දෙකකින් නිර්මාණය කළ හැකි අතර, ඒ සෑම එකක්ම අපගේ ජාල පද්ධතියේ කොටසක් ලෙස අර්ථ දක්වා ඇති පදනම් තීරු 12 කින් සමන්විත වේ.

බූට්ස්ට්‍රැප් හි ස්ථිතික (ද්‍රව නොවන) ජාල පද්ධතිය සමඟින්, කූඩු කිරීම පහසුය. ඔබේ අන්තර්ගතය කැදවා ගැනීමට, පවතින තීරුවක් තුළ නව .rowසහ තීරු කට්ටලයක් එක් කරන්න ..span*.span*

උදාහරණයක්

කැදලි පේළිවල එහි මාපිය තීරු ගණනට එකතු වන තීරු කට්ටලයක් ඇතුළත් විය යුතුය. උදාහරණයක් ලෙස, කූඩු .span3තීරු දෙකක් තුළ තැබිය යුතුය .span6.

<div class = "row" > 
  <div class = "span12" > 
    තීරුවේ 1 මට්ටම
    <div class = "row" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span6" > Level 2 </div> 
    </div>
  </div>
</div>

ප්‍රතිශත, පික්සල නොවේ

ද්රව ජාල පද්ධතිය ස්ථාවර පික්සල වෙනුවට තීරු පළල සඳහා සියයට භාවිතා කරයි. එය අපගේ ස්ථාවර ජාල පද්ධතියට සමාන ප්‍රතිචාරාත්මක විචලනයන් ද ඇත, ප්‍රධාන තිර විභේදන සහ උපාංග සඳහා නිසි අනුපාත සහතික කරයි.

දියර පේළි

.rowවෙත වෙනස් කිරීමෙන් ඕනෑම පේළි තරලයක් සාදන්න .row-fluid. තීරු හරියටම පවතිනු ඇත, ස්ථාවර සහ තරල පිරිසැලසුම් අතර පෙරලීම ඉතා සරල කරයි.

සලකුණු කිරීම

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

ද්‍රව ජාලක සමඟ කූඩු කිරීම තරමක් වෙනස් ය: කූඩු කළ තීරු ගණන මාපියන්ට ගැළපීමට අවශ්‍ය නොවේ. ඒ වෙනුවට, එක් එක් පේළිය මව් තීරුවෙන් 100%ක් ගන්නා බැවින් ඔබේ තීරු එක් එක් මට්ටමින් යළි පිහිටුවනු ලැබේ.

<div class = "row-fluid" > 
  <div class = "span12" > 
    තීරුවේ 1 මට්ටම
    <div class = "row-fluid" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span6" > Level 2 </div> 
    </div>
  </div>
</div>

විචල්‍යයන් අඩුවෙන්

Bootstrap තුළට ගොඩනගා ඇත්තේ ඉහත ලේඛනගත කර ඇති පෙරනිමි 940px ජාල පද්ධතිය අභිරුචිකරණය කිරීම සඳහා අතලොස්සක් වන විචල්‍යයන්ය. ජාලකය සඳහා වන සියලුම විචල්‍යයන් විචල්‍ය ලෙස ගබඩා කර ඇත.less.

අභිරුචිකරණය කරන්නේ කෙසේද

ජාලකය වෙනස් කිරීම යනු @grid*විචල්‍ය තුන වෙනස් කිරීම සහ බූට්ස්ට්‍රැප් නැවත සම්පාදනය කිරීමයි. ග්‍රිඩ් විචල්‍යයන් variables.less ලෙස වෙනස් කර නැවත සම්පාදනය කිරීමට ලේඛනගත කර ඇති ක්‍රම හතරෙන් එකක් භාවිතා කරන්න . ඔබ තවත් තීරු එකතු කරන්නේ නම්, grid.less හි ඇති අය සඳහා CSS එක් කිරීමට වග බලා ගන්න.

ප්‍රතිචාරාත්මකව සිටීම

ජාලක අභිරුචිකරණය ක්‍රියාත්මක වන්නේ පෙරනිමි මට්ටමේ, 940px ජාලකයේ පමණි. Bootstrap හි ප්‍රතිචාරාත්මක අංගයන් පවත්වා ගැනීමට, ඔබට responsive.less හි ජාලක අභිරුචිකරණය කිරීමටද සිදුවේ.

ස්ථාවර පිරිසැලසුම

පෙරනිමි සහ සරල 940px-පුළුල්, ඕනෑම වෙබ් අඩවියක් හෝ පිටුවක් සඳහා කේන්ද්‍රගත පිරිසැලසුම තනි <div class="container">.

<ශරීරය>
  <div class = "බහාලකය" > 
    ...
  </div>
</body>

දියර පිරිසැලසුම

<div class="container-fluid">නම්‍යශීලී පිටු ව්‍යුහය, අවම සහ උපරිම පළල සහ වම් පැත්තේ පැති තීරුවක් ලබා දෙයි. එය යෙදුම් සහ ලේඛන සඳහා විශිෂ්ටයි.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--පැති තීරු අන්තර්ගතය-->
    </div>
    <div class = "span10" > 
      <!--ශරීරයේ අන්තර්ගතය-->
    </div>
  </div>
</div>

සහාය දක්වන උපාංග

Bootstrap විවිධ උපාංග සහ තිර විභේදන මත ඔබේ ව්‍යාපෘති වඩාත් යෝග්‍ය කිරීමට උදවු කිරීමට තනි ගොනුවක් තුළ මාධ්‍ය විමසුම් අතලොස්සකට සහය දක්වයි. මෙහි ඇතුළත් දේ:

මෙටා ටැග් අවශ්‍යයි

උපාංග නිසි ලෙස ප්‍රතිචාර දක්වන පිටු සංදර්ශනය කිරීම සහතික කිරීම සඳහා, viewport meta tag එක ඇතුළත් කරන්න.

<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. responsive.less වෙනම ගොනුවක් ලෙස වෙනස් කර නැවත සම්පාදනය කරන්න

එය පමණක් ඇතුළත් නොකරන්නේ ඇයි? ඇත්තම කිව්වොත් හැමදේටම ප්‍රතිචාර දැක්වීම අවශ්‍ය නැහැ. මෙම විශේෂාංගය ඉවත් කිරීමට සංවර්ධකයින් දිරිමත් කරනවා වෙනුවට, එය සක්‍රීය කිරීම වඩාත් සුදුසු යැයි අපි සලකමු.

  // භූ දර්ශන දුරකථන සහ පහළ
  @media ( උපරිම - පළල : 480px ) { ... }     
 
  // පෝට්රේට් ටැබ්ලටයට භූ දර්ශන දුරකථනය
  @media ( උපරිම - පළල : 768px ) { ... }     
 
  // පෝට්රේට් ටැබ්ලටය භූ දර්ශනයට සහ ඩෙස්ක්ටොප් එකට
  @මාධ්‍ය ( මිනි - පළල : 768px ) සහ ( උපරිම - පළල : 980px ) { ... }        
 
  // විශාල ඩෙස්ක්ටොප්
  @මාධ්‍ය ( විනාඩි - පළල : 1200px ) { .. }