ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഭാഗമായി നൽകിയിരിക്കുന്ന ഡിഫോൾട്ട് ഗ്രിഡ് സിസ്റ്റം 940px വീതിയുള്ള 12 കോളം ഗ്രിഡാണ് .

വിവിധ ഉപകരണങ്ങൾക്കും റെസല്യൂഷനുകൾക്കുമായി ഇതിന് നാല് റെസ്‌പോൺസീവ് വേരിയേഷനുകളും ഉണ്ട്: ഫോൺ, ടാബ്‌ലെറ്റ് പോർട്രെയ്‌റ്റ്, ടേബിൾ ലാൻഡ്‌സ്‌കേപ്പ്, ചെറിയ ഡെസ്‌ക്‌ടോപ്പുകൾ, വലിയ വൈഡ് സ്‌ക്രീൻ ഡെസ്‌ക്‌ടോപ്പുകൾ.

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

ഇവിടെ കാണിച്ചിരിക്കുന്നതുപോലെ, ഞങ്ങളുടെ ഗ്രിഡ് സിസ്റ്റത്തിന്റെ ഭാഗമായി ഞങ്ങൾ നിർവചിച്ചിരിക്കുന്ന 12 അടിസ്ഥാന നിരകളുടെ എണ്ണം ഉൾക്കൊള്ളുന്ന രണ്ട് "നിരകൾ" ഉപയോഗിച്ച് ഒരു അടിസ്ഥാന ലേഔട്ട് സൃഷ്ടിക്കാൻ കഴിയും.

ബൂട്ട്‌സ്‌ട്രാപ്പിലെ സ്റ്റാറ്റിക് (നോൺ-ഫ്ലൂയിഡ്) ഗ്രിഡ് സിസ്റ്റം ഉപയോഗിച്ച്, കൂടുകെട്ടൽ എളുപ്പമാണ്. നിങ്ങളുടെ ഉള്ളടക്കം നെസ്റ്റ് ചെയ്യാൻ, നിലവിലുള്ള കോളത്തിനുള്ളിൽ പുതിയതും ഒരു .rowകൂട്ടം നിരകളും ചേർക്കുക..span*.span*

ഉദാഹരണം

നെസ്‌റ്റ് ചെയ്‌ത വരികളിൽ അതിന്റെ പേരന്റ് കോളങ്ങളുടെ എണ്ണം വരെ ചേർക്കുന്ന ഒരു കൂട്ടം നിരകൾ ഉൾപ്പെടുത്തണം. ഉദാഹരണത്തിന്, രണ്ട് നെസ്റ്റഡ് .span3കോളങ്ങൾ a ഉള്ളിൽ സ്ഥാപിക്കണം .span6.

<div class = "row" > 
  <div class = "span12" > 
    നിരയുടെ ലെവൽ 1
    <div class = "row" > 
      <div class = "span6" > ലെവൽ 2 </div> 
      <div class = "span6" > ലെവൽ 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" > ലെവൽ 2 </div> 
      <div class = "span6" > ലെവൽ 2 </div> 
    </div>
  </div>
</div>

വേരിയബിളുകൾ കുറവ്

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ബിൽറ്റ് ചെയ്‌തിരിക്കുന്നത്, മുകളിൽ രേഖപ്പെടുത്തിയിരിക്കുന്ന സ്ഥിരസ്ഥിതി 940px ഗ്രിഡ് സിസ്റ്റം ഇഷ്‌ടാനുസൃതമാക്കുന്നതിനുള്ള ഒരുപിടി വേരിയബിളുകളാണ്. ഗ്രിഡിനുള്ള എല്ലാ വേരിയബിളുകളും വേരിയബിളുകളിൽ സംഭരിച്ചിരിക്കുന്നു.less.

എങ്ങനെ ഇഷ്ടാനുസൃതമാക്കാം

ഗ്രിഡ് പരിഷ്‌ക്കരിക്കുക എന്നതിനർത്ഥം മൂന്ന് @grid*വേരിയബിളുകൾ മാറ്റി ബൂട്ട്‌സ്‌ട്രാപ്പ് വീണ്ടും കംപൈൽ ചെയ്യുക എന്നാണ്. ഗ്രിഡ് വേരിയബിളുകൾ variables.less എന്നതിൽ മാറ്റുക, വീണ്ടും കംപൈൽ ചെയ്യാൻ ഡോക്യുമെന്റ് ചെയ്തിരിക്കുന്ന നാല് വഴികളിൽ ഒന്ന് ഉപയോഗിക്കുക . നിങ്ങൾ കൂടുതൽ നിരകൾ ചേർക്കുകയാണെങ്കിൽ, grid.less-ൽ ഉള്ളവർക്കായി CSS ചേർക്കുന്നത് ഉറപ്പാക്കുക.

പ്രതികരണശേഷി നിലനിർത്തുന്നു

ഗ്രിഡിന്റെ ഇഷ്‌ടാനുസൃതമാക്കൽ സ്ഥിരസ്ഥിതി തലത്തിൽ, 940px ഗ്രിഡിൽ മാത്രമേ പ്രവർത്തിക്കൂ. ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പ്രതികരണാത്മക വശങ്ങൾ നിലനിർത്തുന്നതിന്, നിങ്ങൾ responsive.less-ൽ ഗ്രിഡുകൾ ഇച്ഛാനുസൃതമാക്കേണ്ടതുണ്ട്.

നിശ്ചിത ലേഔട്ട്

ഡിഫോൾട്ടും ലളിതവുമായ 940px-വൈഡ്, കേന്ദ്രീകൃതമായ ലേഔട്ട് ഏതെങ്കിലും വെബ്‌സൈറ്റിനോ പേജിനോ ഒരു ഒറ്റത്തവണ നൽകുന്നു <div class="container">.

<ശരീരം>
  <div class = "container" > 
    ...
  </div>
</body>

ദ്രാവക ലേഔട്ട്

<div class="container-fluid">ഫ്ലെക്സിബിൾ പേജ് ഘടന, മിനിമം, പരമാവധി വീതി, ഇടത് സൈഡ്ബാർ എന്നിവ നൽകുന്നു. ആപ്പുകൾക്കും ഡോക്‌സിനും ഇത് മികച്ചതാണ്.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--സൈഡ്‌ബാർ ഉള്ളടക്കം-->
    </div>
    <div class = "span10" > 
      <!--ബോഡി ഉള്ളടക്കം-->
    </div>
  </div>
</div>

പിന്തുണയ്ക്കുന്ന ഉപകരണങ്ങൾ

വ്യത്യസ്‌ത ഉപകരണങ്ങളിലും സ്‌ക്രീൻ റെസല്യൂഷനുകളിലും നിങ്ങളുടെ പ്രോജക്‌റ്റുകൾ കൂടുതൽ ഉചിതമാക്കാൻ സഹായിക്കുന്നതിന് ഒരൊറ്റ ഫയലിലെ ഒരുപിടി മീഡിയ അന്വേഷണങ്ങളെ ബൂട്ട്‌സ്‌ട്രാപ്പ് പിന്തുണയ്‌ക്കുന്നു. ഉൾപ്പെടുത്തിയിരിക്കുന്നത് ഇതാ:

മെറ്റാ ടാഗ് ആവശ്യമാണ്

ഉപകരണങ്ങൾ പ്രതികരിക്കുന്ന പേജുകൾ ശരിയായി പ്രദർശിപ്പിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ, വ്യൂപോർട്ട് മെറ്റാ ടാഗ് ഉൾപ്പെടുത്തുക.

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

അവർ എന്തു ചെയ്യുന്നു

മീഡിയ അന്വേഷണങ്ങൾ നിരവധി വ്യവസ്ഥകൾ-അനുപാതങ്ങൾ, വീതികൾ, ഡിസ്പ്ലേ തരം മുതലായവയെ അടിസ്ഥാനമാക്കി ഇഷ്‌ടാനുസൃത CSS-നെ അനുവദിക്കുന്നു, എന്നാൽ സാധാരണയായി ചുറ്റും ഫോക്കസ് min-widthചെയ്യുന്നു max-width.

• ഞങ്ങളുടെ ഗ്രിഡിലെ നിരയുടെ വീതി പരിഷ്കരിക്കുക
• ആവശ്യമുള്ളിടത്ത് ഫ്ലോട്ടിന് പകരം ഘടകങ്ങൾ അടുക്കുക
• ഉപകരണങ്ങൾക്ക് കൂടുതൽ അനുയോജ്യമാകുന്ന തരത്തിൽ തലക്കെട്ടുകളുടെയും വാചകങ്ങളുടെയും വലുപ്പം മാറ്റുക

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ഈ മീഡിയ അന്വേഷണങ്ങൾ സ്വയമേവ ഉൾപ്പെടുന്നില്ല, എന്നാൽ അവ മനസ്സിലാക്കുന്നതും ചേർക്കുന്നതും വളരെ എളുപ്പമാണ് കൂടാതെ കുറഞ്ഞ സജ്ജീകരണം ആവശ്യമാണ്. ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പ്രതികരണ സവിശേഷതകൾ ഉൾപ്പെടുത്തുന്നതിന് നിങ്ങൾക്ക് കുറച്ച് ഓപ്ഷനുകൾ ഉണ്ട്:

1. കംപൈൽ ചെയ്ത പ്രതികരണ പതിപ്പ് ഉപയോഗിക്കുക, bootstrap-responsive.css
2. @import "responsive.less" ചേർത്ത് ബൂട്ട്സ്ട്രാപ്പ് വീണ്ടും കംപൈൽ ചെയ്യുക
3. responsive.less ഒരു പ്രത്യേക ഫയലായി പരിഷ്കരിച്ച് വീണ്ടും കംപൈൽ ചെയ്യുക

എന്തുകൊണ്ടാണ് അത് ഉൾപ്പെടുത്താത്തത്? സത്യം പറഞ്ഞാൽ, എല്ലാം പ്രതികരിക്കണമെന്നില്ല. ഈ ഫീച്ചർ നീക്കം ചെയ്യാൻ ഡവലപ്പർമാരെ പ്രോത്സാഹിപ്പിക്കുന്നതിനുപകരം, ഇത് പ്രവർത്തനക്ഷമമാക്കുന്നതാണ് നല്ലത്.

  // ലാൻഡ്‌സ്‌കേപ്പ് ഫോണുകളും താഴേക്കും
  @media ( പരമാവധി - വീതി : 480px ) { ... }     
 
  // പോർട്രെയ്റ്റ് ടാബ്‌ലെറ്റിലേക്കുള്ള ലാൻഡ്‌സ്‌കേപ്പ് ഫോൺ
  @media ( പരമാവധി - വീതി : 768px ) { ... }     
 
  // ലാൻഡ്‌സ്‌കേപ്പിലേക്കും ഡെസ്‌ക്‌ടോപ്പിലേക്കും പോർട്രെയ്‌റ്റ് ടാബ്‌ലെറ്റ്
  @media ( മിനിറ്റ് - വീതി : 768px ) കൂടാതെ ( പരമാവധി - വീതി : 980px ) { ... }        
 
  // വലിയ പണിയിടം
  @ മീഡിയ ( മിനിറ്റ് - വീതി : 1200px ) { .. }