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

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

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

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

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

ഉദാഹരണം

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

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

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

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

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

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

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

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

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

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