സ്കാർഫോൾഡിംഗ്

പ്രതികരിക്കുന്ന 12-കോളം ഗ്രിഡിലാണ് ബൂട്ട്‌സ്‌ട്രാപ്പ് നിർമ്മിച്ചിരിക്കുന്നത്. ആ സിസ്റ്റത്തെ അടിസ്ഥാനമാക്കിയുള്ള ഫിക്സഡ്, ഫ്ലൂയിഡ്-വീഡ്ത്ത് ലേഔട്ടുകളും ഞങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.

HTML5 ഡോക്‌ടൈപ്പ് ആവശ്യമാണ്

ബൂട്ട്‌സ്‌ട്രാപ്പ് HTML ഘടകങ്ങളും HTML5 ഡോക്‌ടൈപ്പിന്റെ ഉപയോഗം ആവശ്യമായ CSS പ്രോപ്പർട്ടികളും ഉപയോഗിക്കുന്നു. നിങ്ങളുടെ പ്രോജക്‌റ്റിലെ എല്ലാ ബൂട്ട്‌സ്‌ട്രാപ്പ് ചെയ്‌ത പേജിന്റെയും തുടക്കത്തിൽ ഇത് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

ടൈപ്പോഗ്രാഫിയും ലിങ്കുകളും

scaffolding.less ഫയലിൽ, ഞങ്ങൾ അടിസ്ഥാന ആഗോള ഡിസ്പ്ലേ, ടൈപ്പോഗ്രാഫി, ലിങ്ക് ശൈലികൾ എന്നിവ സജ്ജമാക്കുന്നു . പ്രത്യേകമായി, ഞങ്ങൾ:

ശരീരത്തിലെ മാർജിൻ നീക്കം ചെയ്യുക
background-color: white;ന് സജ്ജമാക്കുകbody
@baseFontFamilyഞങ്ങളുടെ ടൈപ്പോഗ്രാഫിക് അടിസ്ഥാനമായി , @baseFontSize, @baseLineHeightആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുക
വഴി ആഗോള ലിങ്ക് വർണ്ണം സജ്ജീകരിക്കുക, @linkColorലിങ്ക് അടിവരയിടുക എന്നതിൽ മാത്രം പ്രയോഗിക്കുക:hover

നോർമലൈസ് വഴി റീസെറ്റ് ചെയ്യുക

ബൂട്ട്‌സ്‌ട്രാപ്പ് 2-ലെ കണക്കനുസരിച്ച്, HTML5 ബോയിലർപ്ലേറ്റിനെ ശക്തിപ്പെടുത്തുന്ന Nicolas Gallagher- ന്റെ പ്രൊജക്റ്റായ Normalize.css- ൽ നിന്നുള്ള ഘടകങ്ങൾ ഉപയോഗിക്കുന്നതിന് പരമ്പരാഗത CSS റീസെറ്റ് വികസിപ്പിച്ചെടുത്തിട്ടുണ്ട് .

പുതിയ റീസെറ്റ് ഇപ്പോഴും reset.less എന്നതിൽ കാണാവുന്നതാണ് , എന്നാൽ സംക്ഷിപ്തതയ്ക്കും കൃത്യതയ്ക്കും വേണ്ടി നിരവധി ഘടകങ്ങൾ നീക്കംചെയ്‌തു.

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

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

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

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

നിരകൾ ഓഫ്‌സെറ്റ് ചെയ്യുന്നു

4 ഓഫ്സെറ്റ് 4

3 ഓഫ്സെറ്റ് 3

8 ഓഫ്സെറ്റ് 4

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

നെസ്റ്റിംഗ് നിരകൾ

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

ഉദാഹരണം

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

നിരയുടെ ലെവൽ 1

ലെവൽ 2

<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% എടുക്കുന്നതിനാൽ ഓരോ ലെവലിലും നിങ്ങളുടെ നിരകൾ പുനഃസജ്ജമാക്കുന്നു.

ദ്രാവകം 12

ദ്രാവകം 6

<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>

വേരിയബിൾ	സ്ഥിര മൂല്യം	വിവരണം
`@gridColumns`	12	നിരകളുടെ എണ്ണം
`@gridColumnWidth`	60px	ഓരോ നിരയുടെയും വീതി
`@gridGutterWidth`	20px	നിരകൾക്കിടയിലുള്ള നെഗറ്റീവ് സ്പേസ്
`@siteWidth`	എല്ലാ നിരകളുടെയും ഗട്ടറുകളുടെയും കണക്കാക്കിയ തുക	`.container-fixed()`മിക്‌സിൻ വീതി സജ്ജീകരിക്കാൻ നിരകളുടെയും ഗട്ടറുകളുടെയും എണ്ണം കണക്കാക്കുന്നു

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

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ബിൽറ്റ് ചെയ്‌തിരിക്കുന്നത്, മുകളിൽ രേഖപ്പെടുത്തിയിരിക്കുന്ന സ്ഥിരസ്ഥിതി 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.

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

മീഡിയ അന്വേഷണങ്ങൾ ഉത്തരവാദിത്തത്തോടെയും നിങ്ങളുടെ മൊബൈൽ പ്രേക്ഷകർക്കുള്ള തുടക്കമായി മാത്രം ഉപയോഗിക്കുക. വലിയ പ്രോജക്റ്റുകൾക്കായി, സമർപ്പിത കോഡ് ബേസുകൾ പരിഗണിക്കുക, മീഡിയ അന്വേഷണങ്ങളുടെ പാളികളല്ല.

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

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

ലേബൽ	ലേഔട്ട് വീതി	നിരയുടെ വീതി	ഗട്ടർ വീതി
സ്മാർട്ട്ഫോണുകൾ	480px ഉം അതിൽ താഴെയും	ദ്രാവക നിരകൾ, നിശ്ചിത വീതിയില്ല
സ്മാർട്ട്‌ഫോണുകൾ മുതൽ ടാബ്‌ലെറ്റുകൾ വരെ	767px ഉം അതിൽ താഴെയും	ദ്രാവക നിരകൾ, നിശ്ചിത വീതിയില്ല
പോർട്രെയ്റ്റ് ഗുളികകൾ	768px ഉം അതിനുമുകളിലും	42px	20px
സ്ഥിരസ്ഥിതി	980px ഉം അതിനുമുകളിലും	60px	20px
വലിയ ഡിസ്പ്ലേ	1200px ഉം അതിനുമുകളിലും	70px	30px

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

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

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

മാധ്യമങ്ങളുടെ ചോദ്യങ്ങൾ ഉപയോഗിക്കുന്നു

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

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

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

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

പ്രതികരിക്കുന്ന യൂട്ടിലിറ്റി ക്ലാസുകൾ

അവർ എന്താകുന്നു

വേഗത്തിലുള്ള മൊബൈൽ-സൗഹൃദ വികസനത്തിന്, ഉപകരണം ഉപയോഗിച്ച് ഉള്ളടക്കം കാണിക്കുന്നതിനും മറയ്ക്കുന്നതിനും ഈ അടിസ്ഥാന യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിക്കുക.

എപ്പോൾ ഉപയോഗിക്കണം

പരിമിതമായ അടിസ്ഥാനത്തിൽ ഉപയോഗിക്കുക, ഒരേ സൈറ്റിന്റെ തികച്ചും വ്യത്യസ്തമായ പതിപ്പുകൾ സൃഷ്ടിക്കുന്നത് ഒഴിവാക്കുക. പകരം, ഓരോ ഉപകരണത്തിന്റെയും അവതരണത്തിന് അനുബന്ധമായി അവ ഉപയോഗിക്കുക.

ഉദാഹരണത്തിന്, നിങ്ങൾ <select>മൊബൈൽ ലേഔട്ടുകളിൽ nav-നുള്ള ഒരു ഘടകം കാണിച്ചേക്കാം, എന്നാൽ ടാബ്‌ലെറ്റുകളിലോ ഡെസ്‌ക്‌ടോപ്പുകളിലോ അല്ല.

പിന്തുണ ക്ലാസുകൾ

ഞങ്ങൾ പിന്തുണയ്‌ക്കുന്ന ക്ലാസുകളുടെ ഒരു പട്ടികയും തന്നിരിക്കുന്ന മീഡിയ അന്വേഷണ ലേഔട്ടിൽ (ഉപകരണം പ്രകാരം ലേബൽ ചെയ്‌തത്) അവയുടെ സ്വാധീനവും ഇവിടെ കാണിച്ചിരിക്കുന്നു. അവയിൽ കണ്ടെത്താനാകും responsive.less.

ക്ലാസ്	ഫോണുകൾ480px ഉം അതിൽ താഴെയും	ഗുളികകൾ767px ഉം അതിൽ താഴെയും	ഡെസ്ക്ടോപ്പുകൾ768px ഉം അതിനുമുകളിലും
`.visible-phone`	ദൃശ്യമാണ്	മറച്ചിരിക്കുന്നു	മറച്ചിരിക്കുന്നു
`.visible-tablet`	മറച്ചിരിക്കുന്നു	ദൃശ്യമാണ്	മറച്ചിരിക്കുന്നു
`.visible-desktop`	മറച്ചിരിക്കുന്നു	മറച്ചിരിക്കുന്നു	ദൃശ്യമാണ്
`.hidden-phone`	മറച്ചിരിക്കുന്നു	ദൃശ്യമാണ്	ദൃശ്യമാണ്
`.hidden-tablet`	ദൃശ്യമാണ്	മറച്ചിരിക്കുന്നു	ദൃശ്യമാണ്
`.hidden-desktop`	ദൃശ്യമാണ്	ദൃശ്യമാണ്	മറച്ചിരിക്കുന്നു

ടെസ്റ്റ് കേസ്

മുകളിലെ ക്ലാസുകൾ പരിശോധിക്കുന്നതിന് നിങ്ങളുടെ ബ്രൗസറിന്റെ വലുപ്പം മാറ്റുക അല്ലെങ്കിൽ വ്യത്യസ്ത ഉപകരണങ്ങളിൽ ലോഡ് ചെയ്യുക.

ഇതിൽ ദൃശ്യമാണ്...

ഫോൺ✔ ഫോൺ
ടാബ്ലെറ്റ്✔ ടാബ്ലെറ്റ്
ഡെസ്ക്ടോപ്പ്✔ ഡെസ്ക്ടോപ്പ്

മറഞ്ഞിരിക്കുന്നു...

ഫോൺ✔ ഫോൺ
ടാബ്ലെറ്റ്✔ ടാബ്ലെറ്റ്
ഡെസ്ക്ടോപ്പ്✔ ഡെസ്ക്ടോപ്പ്