in English

ഗ്രിഡ് സിസ്റ്റം

ഒരു പന്ത്രണ്ട് കോളം സിസ്റ്റം, ആറ് ഡിഫോൾട്ട് റെസ്‌പോൺസീവ് ടയറുകൾ, സാസ് വേരിയബിളുകൾ, മിക്സിനുകൾ, കൂടാതെ ഡസൻ കണക്കിന് മുൻ‌നിർവ്വചിച്ച ക്ലാസുകൾ എന്നിവയ്ക്ക് നന്ദി പറഞ്ഞ് എല്ലാ ആകൃതിയിലും വലുപ്പത്തിലുമുള്ള ലേഔട്ടുകൾ നിർമ്മിക്കാൻ ഞങ്ങളുടെ ശക്തമായ മൊബൈൽ ഫസ്റ്റ് ഫ്ലെക്സ്ബോക്സ് ഗ്രിഡ് ഉപയോഗിക്കുക.

ഈ പേജിൽ

ഉദാഹരണം

ഉള്ളടക്കം ലേഔട്ട് ചെയ്യുന്നതിനും വിന്യസിക്കുന്നതിനും ബൂട്ട്സ്ട്രാപ്പിന്റെ ഗ്രിഡ് സിസ്റ്റം കണ്ടെയ്നറുകൾ, വരികൾ, നിരകൾ എന്നിവയുടെ ഒരു പരമ്പര ഉപയോഗിക്കുന്നു. ഇത് ഫ്‌ലെക്‌സ്‌ബോക്‌സ് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത് , പൂർണ്ണമായും പ്രതികരിക്കുന്നതാണ്. ഗ്രിഡ് സിസ്റ്റം എങ്ങനെ ഒരുമിച്ച് വരുന്നു എന്നതിന്റെ ഒരു ഉദാഹരണവും ആഴത്തിലുള്ള വിശദീകരണവും ചുവടെയുണ്ട്.

ഫ്ലെക്സ്ബോക്സിൽ പുതിയതോ പരിചയമില്ലാത്തതോ? പശ്ചാത്തലം, പദാവലി, മാർഗ്ഗനിർദ്ദേശങ്ങൾ, കോഡ് സ്‌നിപ്പെറ്റുകൾ എന്നിവയ്‌ക്കായി ഈ CSS തന്ത്രങ്ങൾ ഫ്ലെക്‌സ്‌ബോക്‌സ് ഗൈഡ് വായിക്കുക .

കോളം

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

മുകളിലെ ഉദാഹരണം, ഞങ്ങളുടെ മുൻനിശ്ചയിച്ച ഗ്രിഡ് ക്ലാസുകൾ ഉപയോഗിച്ച് എല്ലാ ഉപകരണങ്ങളിലും വ്യൂപോർട്ടുകളിലും തുല്യ വീതിയുള്ള മൂന്ന് നിരകൾ സൃഷ്ടിക്കുന്നു. ആ കോളങ്ങൾ രക്ഷിതാവിനൊപ്പം പേജിൽ കേന്ദ്രീകരിച്ചിരിക്കുന്നു .container.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഇത് തകർക്കുന്നു, ഗ്രിഡ് സിസ്റ്റം എങ്ങനെ ഒത്തുചേരുന്നു എന്നത് ഇതാ:

ഞങ്ങളുടെ ഗ്രിഡ് ആറ് പ്രതികരിക്കുന്ന ബ്രേക്ക്‌പോയിന്റുകൾ പിന്തുണയ്ക്കുന്നു . ബ്രേക്ക്‌പോയിന്റുകൾ മീഡിയ അന്വേഷണങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ളതാണ് min-width, അതായത് ബ്രേക്ക്‌പോയിന്റിനെയും അതിന് മുകളിലുള്ള എല്ലാവരെയും ബാധിക്കുന്നു (ഉദാഹരണത്തിന്, .col-sm-4, sm, md, lg, xlകൂടാതെ xxl). ഓരോ ബ്രേക്ക്‌പോയിന്റിലൂടെയും നിങ്ങൾക്ക് കണ്ടെയ്‌നറിന്റെയും കോളത്തിന്റെയും വലുപ്പവും പെരുമാറ്റവും നിയന്ത്രിക്കാൻ കഴിയുമെന്നാണ് ഇതിനർത്ഥം.
കണ്ടെയ്‌നറുകൾ കേന്ദ്രീകരിച്ച് നിങ്ങളുടെ ഉള്ളടക്കം തിരശ്ചീനമായി പാഡ് ചെയ്യുക. .containerഒരു റെസ്‌പോൺസീവ് പിക്‌സൽ വീതിയ്‌ക്കായി, .container-fluidഎല്ലാ വ്യൂപോർട്ടുകളിലും width: 100%ഉപകരണങ്ങളിലും, അല്ലെങ്കിൽ .container-mdദ്രാവകത്തിന്റെയും പിക്‌സൽ വീതിയുടെയും സംയോജനത്തിനായി ഒരു റെസ്‌പോൺസീവ് കണ്ടെയ്‌നറിനായി (ഉദാ, ) ഉപയോഗിക്കുക.
നിരകൾ നിരകൾക്കുള്ള റാപ്പറുകളാണ്. ഓരോ നിരയ്ക്കും paddingഅവയ്ക്കിടയിലുള്ള ഇടം നിയന്ത്രിക്കുന്നതിന് തിരശ്ചീനമായി (ഗട്ടർ എന്ന് വിളിക്കപ്പെടുന്നു) ഉണ്ട്. paddingനിങ്ങളുടെ നിരകളിലെ ഉള്ളടക്കം ഇടതുവശത്ത് ദൃശ്യപരമായി വിന്യസിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കാൻ നെഗറ്റീവ് മാർജിനുകളുള്ള വരികളിൽ ഇത് എതിർക്കുന്നു . നിങ്ങളുടെ ഉള്ളടക്കത്തിന്റെ സ്‌പെയ്‌സിംഗ് മാറ്റുന്നതിന് കോളം വലുപ്പവും ഗട്ടർ ക്ലാസുകളും ഒരേപോലെ പ്രയോഗിക്കുന്നതിന് വരികൾ മോഡിഫയർ ക്ലാസുകളെ പിന്തുണയ്‌ക്കുന്നു .
നിരകൾ അവിശ്വസനീയമാംവിധം വഴക്കമുള്ളതാണ്. ഓരോ വരിയിലും 12 ടെംപ്ലേറ്റ് കോളങ്ങൾ ലഭ്യമാണ്, ഏത് നിരയിലും വ്യാപിക്കുന്ന ഘടകങ്ങളുടെ വ്യത്യസ്ത കോമ്പിനേഷനുകൾ സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. നിര ക്ലാസുകൾ സ്‌പാൻ ചെയ്യേണ്ട ടെംപ്ലേറ്റ് കോളങ്ങളുടെ എണ്ണം സൂചിപ്പിക്കുന്നു (ഉദാ, col-4നാല് സ്പാൻസ്). widthകൾ ശതമാനത്തിൽ സജ്ജീകരിച്ചിരിക്കുന്നതിനാൽ നിങ്ങൾക്ക് എല്ലായ്പ്പോഴും ഒരേ ആപേക്ഷിക വലുപ്പം ഉണ്ടായിരിക്കും.
ഗട്ടറുകൾ പ്രതികരിക്കുന്നതും ഇഷ്ടാനുസൃതമാക്കാവുന്നതുമാണ്. ഗട്ടർ ക്ലാസുകൾ എല്ലാ ബ്രേക്ക്‌പോയിന്റുകളിലും ലഭ്യമാണ്, ഞങ്ങളുടെ മാർജിനും പാഡിംഗ് സ്‌പെയ്‌സിംഗും തുല്യമായ വലുപ്പത്തിൽ . .gx-*ക്ലാസുകളുള്ള തിരശ്ചീന ഗട്ടറുകൾ , ഉള്ള ലംബ ഗട്ടറുകൾ .gy-*അല്ലെങ്കിൽ ക്ലാസുകളുള്ള എല്ലാ ഗട്ടറുകളും മാറ്റുക .g-*. .g-0ഗട്ടറുകൾ നീക്കം ചെയ്യാനും ലഭ്യമാണ്.
സാസ് വേരിയബിളുകൾ, മാപ്പുകൾ, മിക്സിനുകൾ എന്നിവ ഗ്രിഡിന് ശക്തി നൽകുന്നു. ബൂട്ട്‌സ്‌ട്രാപ്പിൽ മുൻകൂട്ടി നിശ്ചയിച്ച ഗ്രിഡ് ക്ലാസുകൾ ഉപയോഗിക്കാൻ നിങ്ങൾക്ക് താൽപ്പര്യമില്ലെങ്കിൽ, കൂടുതൽ സെമാന്റിക് മാർക്ക്അപ്പ് ഉപയോഗിച്ച് നിങ്ങളുടേത് സൃഷ്‌ടിക്കാൻ ഞങ്ങളുടെ ഗ്രിഡിന്റെ ഉറവിടമായ സാസ് ഉപയോഗിക്കാം. ഈ സാസ് വേരിയബിളുകൾ ഉപയോഗിക്കുന്നതിന് ഞങ്ങൾ ചില CSS ഇഷ്‌ടാനുസൃത പ്രോപ്പർട്ടികൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.

ഫ്ലെക്‌സ് ബോക്‌സിന് ചുറ്റുമുള്ള പരിമിതികളും ബഗുകളും , ചില HTML ഘടകങ്ങൾ ഫ്ലെക്‌സ് കണ്ടെയ്‌നറുകളായി ഉപയോഗിക്കാനുള്ള കഴിവില്ലായ്മ എന്നിവയെക്കുറിച്ച് അറിഞ്ഞിരിക്കുക .

ഗ്രിഡ് ഓപ്ഷനുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഗ്രിഡ് സിസ്റ്റത്തിന് ആറ് ഡിഫോൾട്ട് ബ്രേക്ക്‌പോയിന്റുകളിലേക്കും നിങ്ങൾ ഇഷ്‌ടാനുസൃതമാക്കുന്ന ഏത് ബ്രേക്ക്‌പോയിന്റുകളിലേക്കും പൊരുത്തപ്പെടാൻ കഴിയും. ആറ് ഡിഫോൾട്ട് ഗ്രിഡ് ടയറുകൾ ഇനിപ്പറയുന്നവയാണ്:

അധിക ചെറുത് (xs)
ചെറുത് (sm)
ഇടത്തരം (md)
വലിയ (lg)
വളരെ വലുത് (xl)
അധിക വലിയ (xxl)

മുകളിൽ സൂചിപ്പിച്ചതുപോലെ, ഈ ബ്രേക്ക്‌പോയിന്റുകൾ ഓരോന്നിനും അതിന്റേതായ കണ്ടെയ്‌നർ, അദ്വിതീയ ക്ലാസ് പ്രിഫിക്‌സ്, മോഡിഫയറുകൾ എന്നിവയുണ്ട്. ഈ ബ്രേക്ക്‌പോയിന്റുകളിലുടനീളം ഗ്രിഡ് മാറുന്നത് എങ്ങനെയെന്ന് ഇതാ:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
കണ്ടെയ്നർ`max-width`	ഒന്നുമില്ല (ഓട്ടോ)	540px	720px	960px	1140px	1320px
ക്ലാസ് പ്രിഫിക്സ്	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# നിരകൾ	12
ഗട്ടർ വീതി	1.5 റെം (.75 റെം ഇടത്തും വലത്തും)
ഇഷ്ടാനുസൃത ഗട്ടറുകൾ	അതെ
നെസ്റ്റബിൾ	അതെ
നിര ക്രമപ്പെടുത്തൽ	അതെ

യാന്ത്രിക ലേഔട്ട് നിരകൾ

പോലുള്ള വ്യക്തമായ അക്കമിട്ട ക്ലാസ് ഇല്ലാതെ എളുപ്പത്തിൽ കോളം സൈസിംഗിനായി ബ്രേക്ക്‌പോയിന്റ്-നിർദ്ദിഷ്ട കോളം ക്ലാസുകൾ ഉപയോഗിക്കുക .col-sm-6.

തുല്യ-വീതി

xsഉദാഹരണത്തിന്, മുതൽ വരെയുള്ള എല്ലാ ഉപകരണത്തിനും വ്യൂപോർട്ടിനും ബാധകമാകുന്ന രണ്ട് ഗ്രിഡ് ലേഔട്ടുകൾ ഇതാ xxl. നിങ്ങൾക്ക് ആവശ്യമുള്ള ഓരോ ബ്രേക്ക്‌പോയിന്റിനും യൂണിറ്റ്-ലെസ് ക്ലാസുകൾ ചേർക്കുക, ഓരോ നിരയും ഒരേ വീതിയായിരിക്കും.

2-ൽ 1

2-ൽ 2

3-ൽ 1

2-ൽ 3

3-ൽ 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ഒരു നിരയുടെ വീതി ക്രമീകരിക്കുന്നു

ഫ്ലെക്‌സ്‌ബോക്‌സ് ഗ്രിഡ് നിരകൾക്കായുള്ള സ്വയമേവ ലേഔട്ട് എന്നതിനർത്ഥം നിങ്ങൾക്ക് ഒരു നിരയുടെ വീതി സജ്ജമാക്കാനും അതിന് ചുറ്റുമുള്ള സഹോദര നിരകൾ സ്വയമേവ വലുപ്പം മാറ്റാനും കഴിയും എന്നാണ്. നിങ്ങൾക്ക് മുൻകൂട്ടി നിശ്ചയിച്ച ഗ്രിഡ് ക്ലാസുകൾ (ചുവടെ കാണിച്ചിരിക്കുന്നത് പോലെ), ഗ്രിഡ് മിക്സിനുകൾ അല്ലെങ്കിൽ ഇൻലൈൻ വീതികൾ ഉപയോഗിക്കാം. മധ്യ നിരയുടെ വീതി എന്തായാലും മറ്റ് നിരകൾ വലുപ്പം മാറ്റുമെന്നത് ശ്രദ്ധിക്കുക.

3-ൽ 1

2 / 3 (വിശാലം)

3-ൽ 3

3-ൽ 1

2 / 3 (വിശാലം)

3-ൽ 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

വേരിയബിൾ വീതി ഉള്ളടക്കം

col-{breakpoint}-autoഅവയുടെ ഉള്ളടക്കത്തിന്റെ സ്വാഭാവിക വീതിയെ അടിസ്ഥാനമാക്കി നിരകളുടെ വലുപ്പത്തിന് ക്ലാസുകൾ ഉപയോഗിക്കുക .

3-ൽ 1

വേരിയബിൾ വീതി ഉള്ളടക്കം

3-ൽ 3

3-ൽ 1

വേരിയബിൾ വീതി ഉള്ളടക്കം

3-ൽ 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

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

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഗ്രിഡിൽ സങ്കീർണ്ണമായ റെസ്‌പോൺസീവ് ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിന് മുൻകൂട്ടി നിശ്ചയിച്ച ക്ലാസുകളുടെ ആറ് ടയറുകൾ ഉൾപ്പെടുന്നു. കൂടുതൽ ചെറുതോ ചെറുതോ ഇടത്തരമോ വലുതോ വലുതോ ആയ ഉപകരണങ്ങളിൽ നിങ്ങളുടെ നിരകളുടെ വലുപ്പം ഇഷ്ടാനുസൃതമാക്കുക.

എല്ലാ ബ്രേക്ക് പോയിന്റുകളും

ഏറ്റവും ചെറിയ ഉപകരണങ്ങൾ മുതൽ ഏറ്റവും വലുത് വരെയുള്ള ഗ്രിഡുകൾക്ക് .col, .col-*ക്ലാസുകൾ ഉപയോഗിക്കുക. നിങ്ങൾക്ക് ഒരു പ്രത്യേക വലിപ്പത്തിലുള്ള കോളം ആവശ്യമുള്ളപ്പോൾ ഒരു അക്കമിട്ട ക്ലാസ് വ്യക്തമാക്കുക; അല്ലെങ്കിൽ, മടിക്കേണ്ടതില്ല .col.

കേണൽ

കോൾ-8

കോൾ-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

തിരശ്ചീനമായി അടുക്കിയിരിക്കുന്നു

ഒരൊറ്റ സെറ്റ് .col-sm-*ക്ലാസുകൾ ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഒരു അടിസ്ഥാന ഗ്രിഡ് സിസ്റ്റം സൃഷ്ടിക്കാൻ കഴിയും, അത് അടുക്കിവെച്ച് ആരംഭിക്കുകയും ചെറിയ ബ്രേക്ക് പോയിന്റിൽ ( sm) തിരശ്ചീനമായി മാറുകയും ചെയ്യും.

col-sm-8

കോൾ-എസ്എം-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

മിക്സ് ആൻഡ് മാച്ച്

നിങ്ങളുടെ നിരകൾ ചില ഗ്രിഡ് ടയറുകളിൽ അടുക്കാൻ ആഗ്രഹിക്കുന്നില്ലേ? ആവശ്യാനുസരണം ഓരോ ടയറിനും വ്യത്യസ്ത ക്ലാസുകളുടെ സംയോജനം ഉപയോഗിക്കുക. ഇതെല്ലാം എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിനെക്കുറിച്ചുള്ള മികച്ച ആശയത്തിന് ചുവടെയുള്ള ഉദാഹരണം കാണുക.

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

വരി നിരകൾ

.row-cols-*നിങ്ങളുടെ ഉള്ളടക്കവും ലേഔട്ടും മികച്ച രീതിയിൽ റെൻഡർ ചെയ്യുന്ന നിരകളുടെ എണ്ണം വേഗത്തിൽ സജ്ജീകരിക്കാൻ പ്രതികരിക്കുന്ന ക്ലാസുകൾ ഉപയോഗിക്കുക. വ്യക്തിഗത നിരകൾക്ക് സാധാരണ .col-*ക്ലാസുകൾ ബാധകമാകുമ്പോൾ (ഉദാ, ), വരി നിരകളുടെ ക്ലാസുകൾ അടങ്ങിയിരിക്കുന്ന നിരകൾക്കായി ഒരു സ്ഥിരസ്ഥിതിയായി .col-md-4മാതാപിതാക്കളിൽ സജ്ജീകരിച്ചിരിക്കുന്നു . നിങ്ങൾക്ക് നിരകൾക്ക് അവയുടെ സ്വാഭാവിക വീതി നൽകാൻ കഴിയും .row..row-cols-auto

അടിസ്ഥാന ഗ്രിഡ് ലേഔട്ടുകൾ വേഗത്തിൽ സൃഷ്‌ടിക്കുന്നതിനും നിങ്ങളുടെ കാർഡ് ലേഔട്ടുകൾ നിയന്ത്രിക്കുന്നതിനും കോളം തലത്തിൽ ആവശ്യമുള്ളപ്പോൾ അസാധുവാക്കുന്നതിനും ഈ വരി നിരകളുടെ ക്ലാസുകൾ ഉപയോഗിക്കുക.

കോളം

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

കോളം

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

കോളം

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

കോളം

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

കോളം

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

കോളം

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

കോളം

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

നിങ്ങൾക്ക് ഇതോടൊപ്പമുള്ള സാസ് മിക്‌സിനും ഉപയോഗിക്കാം row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

നെസ്റ്റിംഗ്

ഡിഫോൾട്ട് ഗ്രിഡിനൊപ്പം നിങ്ങളുടെ ഉള്ളടക്കം നെസ്റ്റ് ചെയ്യാൻ, നിലവിലുള്ള കോളത്തിനുള്ളിൽ പുതിയതും ഒരു .rowകൂട്ടം നിരകളും ചേർക്കുക. നെസ്റ്റഡ് വരികൾ 12 അല്ലെങ്കിൽ അതിൽ താഴെ വരെ ചേർക്കുന്ന ഒരു കൂട്ടം നിരകൾ ഉൾപ്പെടുത്തണം (ലഭ്യമായ 12 കോളങ്ങളും നിങ്ങൾ ഉപയോഗിക്കേണ്ട ആവശ്യമില്ല)..col-sm-*.col-sm-*

ലെവൽ 1: .col-sm-3

ലെവൽ 2: .col-8 .col-sm-6

ലെവൽ 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

സാസ്

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ സോഴ്‌സ് Sass ഫയലുകൾ ഉപയോഗിക്കുമ്പോൾ, ഇഷ്‌ടാനുസൃതവും അർത്ഥപരവും പ്രതികരിക്കുന്നതുമായ പേജ് ലേഔട്ടുകൾ സൃഷ്‌ടിക്കാൻ Sass വേരിയബിളുകളും മിക്സിനുകളും ഉപയോഗിക്കുന്നതിനുള്ള ഓപ്ഷൻ നിങ്ങൾക്കുണ്ട്. വേഗത്തിലുള്ള റെസ്‌പോൺസീവ് ലേഔട്ടുകൾക്കായി ഉപയോഗിക്കുന്നതിന് തയ്യാറായ ക്ലാസുകളുടെ മുഴുവൻ സ്യൂട്ട് നൽകുന്നതിന് ഞങ്ങളുടെ മുൻ‌നിർവ്വചിച്ച ഗ്രിഡ് ക്ലാസുകളും ഇതേ വേരിയബിളുകളും മിക്സിനുകളും ഉപയോഗിക്കുന്നു.

വേരിയബിളുകൾ

വേരിയബിളുകളും മാപ്പുകളും നിരകളുടെ എണ്ണം, ഗട്ടറിന്റെ വീതി, ഫ്ലോട്ടിംഗ് കോളങ്ങൾ ആരംഭിക്കുന്ന മീഡിയ അന്വേഷണ പോയിന്റ് എന്നിവ നിർണ്ണയിക്കുന്നു. മുകളിൽ ഡോക്യുമെന്റ് ചെയ്‌തിരിക്കുന്ന മുൻ‌നിർവ്വചിച്ച ഗ്രിഡ് ക്ലാസുകൾ സൃഷ്‌ടിക്കുന്നതിനും ചുവടെ ലിസ്‌റ്റ് ചെയ്‌തിരിക്കുന്ന ഇഷ്‌ടാനുസൃത മിക്സിനുകൾക്കും ഞങ്ങൾ ഇവ ഉപയോഗിക്കുന്നു.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

മിക്സിൻസ്

വ്യക്തിഗത ഗ്രിഡ് നിരകൾക്കായി സെമാന്റിക് CSS സൃഷ്ടിക്കുന്നതിന് ഗ്രിഡ് വേരിയബിളുകളുമായി സംയോജിച്ച് മിക്സിനുകൾ ഉപയോഗിക്കുന്നു.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

ഉദാഹരണ ഉപയോഗം

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

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

പ്രധാന ഉള്ളടക്കം

ദ്വിതീയ ഉള്ളടക്കം

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ഗ്രിഡ് ഇഷ്‌ടാനുസൃതമാക്കുന്നു

ഞങ്ങളുടെ ബിൽറ്റ്-ഇൻ ഗ്രിഡ് സാസ് വേരിയബിളുകളും മാപ്പുകളും ഉപയോഗിച്ച്, മുൻകൂട്ടി നിശ്ചയിച്ച ഗ്രിഡ് ക്ലാസുകൾ പൂർണ്ണമായും ഇച്ഛാനുസൃതമാക്കാൻ സാധിക്കും. ടയറുകളുടെ എണ്ണം, മീഡിയ അന്വേഷണ അളവുകൾ, കണ്ടെയ്നർ വീതി എന്നിവ മാറ്റുക - തുടർന്ന് വീണ്ടും കംപൈൽ ചെയ്യുക.

നിരകളും ഗട്ടറുകളും

ഗ്രിഡ് നിരകളുടെ എണ്ണം Sass വേരിയബിളുകൾ വഴി പരിഷ്കരിക്കാനാകും. കോളം ഗട്ടറുകൾക്ക് വീതി സജ്ജമാക്കുമ്പോൾ $grid-columnsഓരോ നിരയുടെയും വീതി (ശതമാനത്തിൽ) സൃഷ്ടിക്കാൻ ഉപയോഗിക്കുന്നു .$grid-gutter-width

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

ഗ്രിഡ് നിരകൾ

നിരകൾക്കപ്പുറത്തേക്ക് നീങ്ങുമ്പോൾ, നിങ്ങൾക്ക് ഗ്രിഡ് ടയറുകളുടെ എണ്ണം ഇഷ്ടാനുസൃതമാക്കാം. $grid-breakpointsനിങ്ങൾക്ക് വെറും നാല് ഗ്രിഡ് ടയറുകൾ വേണമെങ്കിൽ , നിങ്ങൾ $container-max-widthsഇതുപോലുള്ള ഒന്നിലേക്ക് അപ്‌ഡേറ്റ് ചെയ്യും:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass വേരിയബിളുകളിലോ മാപ്പുകളിലോ എന്തെങ്കിലും മാറ്റങ്ങൾ വരുത്തുമ്പോൾ, നിങ്ങളുടെ മാറ്റങ്ങൾ സംരക്ഷിച്ച് വീണ്ടും കംപൈൽ ചെയ്യേണ്ടതുണ്ട്. അങ്ങനെ ചെയ്യുന്നത് നിരയുടെ വീതി, ഓഫ്‌സെറ്റുകൾ, ഓർഡറുകൾ എന്നിവയ്‌ക്കായി ഒരു പുതിയ സെറ്റ് മുൻകൂട്ടി നിശ്ചയിച്ച ഗ്രിഡ് ക്ലാസുകൾ ഔട്ട്‌പുട്ട് ചെയ്യും. ഇഷ്‌ടാനുസൃത ബ്രേക്ക് പോയിന്റുകൾ ഉപയോഗിക്കുന്നതിന് പ്രതികരിക്കുന്ന ദൃശ്യപരത യൂട്ടിലിറ്റികളും അപ്‌ഡേറ്റ് ചെയ്യും. pxഗ്രിഡ് മൂല്യങ്ങൾ (അല്ല rem, emഅല്ലെങ്കിൽ %) എന്നതിൽ സജ്ജീകരിക്കുന്നത് ഉറപ്പാക്കുക .