Source

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

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

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

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

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

മൂന്ന് കോളങ്ങളിൽ ഒന്ന്

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

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

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

നിങ്ങളുടെ സൈറ്റിന്റെ ഉള്ളടക്കങ്ങൾ കേന്ദ്രീകരിക്കാനും തിരശ്ചീനമായി പാഡ് ചെയ്യാനും കണ്ടെയ്‌നറുകൾ ഒരു മാർഗം നൽകുന്നു. .containerഒരു റെസ്‌പോൺസീവ് പിക്‌സൽ വീതിയ്‌ക്കോ .container-fluidഎല്ലാ width: 100%വ്യൂപോർട്ട്, ഉപകരണ വലുപ്പങ്ങൾക്കോ ഉപയോഗിക്കുക .
നിരകൾ നിരകൾക്കുള്ള റാപ്പറുകളാണ്. ഓരോ നിരയ്ക്കും paddingഅവയ്ക്കിടയിലുള്ള ഇടം നിയന്ത്രിക്കുന്നതിന് തിരശ്ചീനമായി (ഗട്ടർ എന്ന് വിളിക്കപ്പെടുന്നു) ഉണ്ട്. ഇത് paddingപിന്നീട് നെഗറ്റീവ് മാർജിനുകളുള്ള വരികളിൽ എതിർക്കുന്നു. ഈ രീതിയിൽ, നിങ്ങളുടെ നിരകളിലെ എല്ലാ ഉള്ളടക്കവും ഇടതുവശത്ത് ദൃശ്യപരമായി വിന്യസിച്ചിരിക്കുന്നു.
ഒരു ഗ്രിഡ് ലേഔട്ടിൽ, നിരകൾക്കുള്ളിൽ ഉള്ളടക്കം സ്ഥാപിക്കണം, മാത്രമല്ല നിരകൾ മാത്രമേ വരികളുടെ ഉടനടി കുട്ടികൾ ആയിരിക്കൂ.
ഫ്ലെക്‌സ്‌ബോക്‌സിന് നന്ദി, വ്യക്തമാക്കിയിട്ടില്ലാത്ത ഗ്രിഡ് നിരകൾ widthതുല്യ വീതിയുള്ള നിരകളായി സ്വയമേവ ലേഔട്ട് ചെയ്യും. ഉദാഹരണത്തിന്, .col-smചെറിയ ബ്രേക്ക്‌പോയിന്റിൽ നിന്നും മുകളിലേക്കും നാല് സന്ദർഭങ്ങളും സ്വയമേവ 25% വീതിയുള്ളതായിരിക്കും. കൂടുതൽ ഉദാഹരണങ്ങൾക്കായി ഓട്ടോ-ലേഔട്ട് കോളങ്ങളുടെ വിഭാഗം കാണുക .
ഓരോ വരിയിലും സാധ്യമായ 12 കോളങ്ങളിൽ നിങ്ങൾ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന നിരകളുടെ എണ്ണം നിര ക്ലാസുകൾ സൂചിപ്പിക്കുന്നു. അതിനാൽ, നിങ്ങൾക്ക് കുറുകെ മൂന്ന് തുല്യ വീതിയുള്ള നിരകൾ വേണമെങ്കിൽ, നിങ്ങൾക്ക് ഉപയോഗിക്കാം .col-4.
നിരകൾ widthശതമാനത്തിൽ സജ്ജീകരിച്ചിരിക്കുന്നു, അതിനാൽ അവ എല്ലായ്പ്പോഴും ദ്രാവകവും അവയുടെ മാതൃ ഘടകവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ വലുപ്പമുള്ളതുമാണ്.
paddingവ്യക്തിഗത നിരകൾക്കിടയിൽ ഗട്ടറുകൾ സൃഷ്ടിക്കാൻ നിരകൾക്ക് തിരശ്ചീനമുണ്ട് , എന്നിരുന്നാലും, നിങ്ങൾക്ക് marginവരികളിൽ paddingനിന്നും നിരകളിൽ നിന്നും നീക്കം .no-guttersചെയ്യാം .row.
ഗ്രിഡ് റെസ്‌പോൺസീവ് ആക്കുന്നതിന്, അഞ്ച് ഗ്രിഡ് ബ്രേക്ക്‌പോയിന്റുകളുണ്ട്, ഓരോ ബ്രേക്ക്‌പോയിന്റിനും ഒന്ന് : എല്ലാ ബ്രേക്ക്‌പോയിന്റുകളും (അധിക ചെറുത്), ചെറുതും ഇടത്തരവും വലുതും വലുതും.
ഗ്രിഡ് ബ്രേക്ക്‌പോയിന്റുകൾ മിനിമം വീതിയുള്ള മീഡിയ അന്വേഷണങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്, അതായത് അവ ആ ഒരു ബ്രേക്ക്‌പോയിന്റിനും അതിനു മുകളിലുള്ള എല്ലാത്തിനും ബാധകമാണ് (ഉദാ, .col-sm-4ചെറുതും ഇടത്തരവും വലുതും അധികവും വലിയ ഉപകരണങ്ങൾക്ക് ബാധകമാണ്, എന്നാൽ ആദ്യത്തെ xsബ്രേക്ക്‌പോയിന്റ് അല്ല).
കൂടുതൽ സെമാന്റിക് മാർക്ക്അപ്പിനായി നിങ്ങൾക്ക് മുൻകൂട്ടി നിശ്ചയിച്ച ഗ്രിഡ് ക്ലാസുകൾ (ഇത് പോലെ .col-4) അല്ലെങ്കിൽ Sass mixins ഉപയോഗിക്കാം.

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

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

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

ഹാൻഡി ടേബിൾ ഉള്ള ഒന്നിലധികം ഉപകരണങ്ങളിൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഗ്രിഡ് സിസ്റ്റത്തിന്റെ വശങ്ങൾ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് കാണുക.

	അധിക ചെറുത് <576px	ചെറുത് ≥576px	ഇടത്തരം ≥768px	വലുത് ≥992px	വളരെ വലുത് ≥1200px
കണ്ടെയ്നറിന്റെ പരമാവധി വീതി	ഒന്നുമില്ല (ഓട്ടോ)	540px	720px	960px	1140px
ക്ലാസ് പ്രിഫിക്സ്	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# നിരകൾ	12
ഗട്ടർ വീതി	30px (ഒരു നിരയുടെ ഓരോ വശത്തും 15px)
നെസ്റ്റബിൾ	അതെ
നിര ക്രമപ്പെടുത്തൽ	അതെ

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

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

തുല്യ-വീതി

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

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>

തുല്യ-വീതിയുള്ള നിരകൾ ഒന്നിലധികം വരികളായി വിഭജിക്കാം, എന്നാൽ ഒരു സഫാരി ഫ്ലെക്സ്ബോക്സ് ബഗ് ഉണ്ടായിരുന്നു, അത് വ്യക്തമായതോ flex-basisഅല്ലെങ്കിൽ border. പഴയ ബ്രൗസർ പതിപ്പുകൾക്ക് പരിഹാരങ്ങളുണ്ട്, എന്നാൽ നിങ്ങൾ കാലികമാണെങ്കിൽ അവ ആവശ്യമില്ല.

കോളം

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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>

തുല്യ വീതിയുള്ള മൾട്ടി-വരി

.w-100ഒരു പുതിയ വരിയിലേക്ക് നിരകൾ തകർക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നിടത്ത് തിരുകിക്കൊണ്ട് ഒന്നിലധികം വരികൾ പരന്നുകിടക്കുന്ന തുല്യ വീതിയുള്ള നിരകൾ സൃഷ്ടിക്കുക . .w-100ചില റെസ്‌പോൺസീവ് ഡിസ്‌പ്ലേ യൂട്ടിലിറ്റികളുമായി ഇടകലർത്തി ബ്രേക്കുകൾ റെസ്‌പോൺസീവ് ആക്കുക .

കേണൽ

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

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

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

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

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

കേണൽ

കോൾ-8

കോൾ-4

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

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

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

col-sm-8

കോൾ-എസ്എം-4

col-sm

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

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

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

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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 class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

മൂന്ന് കോളങ്ങളിൽ ഒന്ന്

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

തിരശ്ചീന വിന്യാസം

രണ്ട് നിരകളിൽ ഒന്ന്

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ഗട്ടറുകളില്ല

ഞങ്ങളുടെ മുൻ‌നിർവ്വചിച്ച ഗ്രിഡ് ക്ലാസുകളിലെ നിരകൾക്കിടയിലുള്ള ഗട്ടറുകൾ ഉപയോഗിച്ച് നീക്കം ചെയ്യാൻ കഴിയും .no-gutters. ഇത് എല്ലാ ഉടനടി ചിൽഡ്രൻ കോളങ്ങളിൽ നിന്നും marginനെഗറ്റീവുകളും തിരശ്ചീനവും നീക്കംചെയ്യുന്നു .row.padding

ഈ ശൈലികൾ സൃഷ്ടിക്കുന്നതിനുള്ള സോഴ്സ് കോഡ് ഇതാ. കോളം അസാധുവാക്കലുകൾ ആദ്യ ചിൽഡ്രൻ കോളങ്ങളിലേക്ക് മാത്രം സ്‌കോപ്പ് ചെയ്‌തിരിക്കുന്നതും ആട്രിബ്യൂട്ട് സെലക്‌ടർ വഴി ടാർഗെറ്റുചെയ്യപ്പെടുന്നതും ശ്രദ്ധിക്കുക . ഇത് കൂടുതൽ നിർദ്ദിഷ്ട സെലക്‌ടർ സൃഷ്‌ടിക്കുമ്പോൾ, സ്‌പെയ്‌സിംഗ് യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് കോളം പാഡിംഗ് കൂടുതൽ ഇഷ്‌ടാനുസൃതമാക്കാനാകും .

എഡ്ജ് ടു എഡ്ജ് ഡിസൈൻ വേണോ? മാതാപിതാക്കളെ ഉപേക്ഷിക്കുക .containerഅല്ലെങ്കിൽ .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

പ്രായോഗികമായി, ഇത് എങ്ങനെ കാണപ്പെടുന്നുവെന്ന് ഇതാ. മറ്റെല്ലാ മുൻനിശ്ചയിച്ച ഗ്രിഡ് ക്ലാസുകളിലും (കോളം വീതികൾ, പ്രതികരിക്കുന്ന ശ്രേണികൾ, പുനഃക്രമീകരിക്കലുകൾ എന്നിവയും അതിലേറെയും ഉൾപ്പെടെ) നിങ്ങൾക്ക് ഇത് ഉപയോഗിക്കുന്നത് തുടരാനാകുമെന്ന് ശ്രദ്ധിക്കുക.

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

കോളം പൊതിയൽ

ഒരു വരിയിൽ 12-ലധികം നിരകൾ സ്ഥാപിച്ചിട്ടുണ്ടെങ്കിൽ, അധിക നിരകളുടെ ഓരോ ഗ്രൂപ്പും ഒരു യൂണിറ്റായി, ഒരു പുതിയ വരിയിൽ പൊതിയുന്നു.

.col-9

.col-4
9 + 4 = 13 > 12 മുതൽ, ഈ 4-കോളം വീതിയുള്ള ഡിവി ഒരു പുതിയ ലൈനിൽ ഒരു തുടർച്ചയായ യൂണിറ്റായി പൊതിഞ്ഞിരിക്കുന്നു.

.col-6
പുതിയ വരിയിൽ തുടർന്നുള്ള നിരകൾ തുടരുന്നു.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

കോളം പൊട്ടുന്നു

ഫ്ലെക്സ്ബോക്സിലെ ഒരു പുതിയ ലൈനിലേക്ക് നിരകൾ തകർക്കുന്നതിന് ഒരു ചെറിയ ഹാക്ക് ആവശ്യമാണ്: width: 100%നിങ്ങളുടെ കോളങ്ങൾ ഒരു പുതിയ വരിയിലേക്ക് പൊതിയാൻ ആഗ്രഹിക്കുന്നിടത്തെല്ലാം ഒരു ഘടകം ചേർക്കുക. സാധാരണയായി ഇത് ഒന്നിലധികം സെഷനുകൾ ഉപയോഗിച്ചാണ് പൂർത്തിയാക്കുന്നത് .row, എന്നാൽ എല്ലാ നടപ്പാക്കൽ രീതികൾക്കും ഇത് കണക്കാക്കാനാവില്ല.

.col-6 .col-sm-3

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

ഞങ്ങളുടെ റെസ്‌പോൺസീവ് ഡിസ്‌പ്ലേ യൂട്ടിലിറ്റികൾക്കൊപ്പം പ്രത്യേക ബ്രേക്ക്‌പോയിന്റുകളിലും നിങ്ങൾക്ക് ഈ ഇടവേള പ്രയോഗിക്കാവുന്നതാണ് .

.col-6 .col-sm-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

പുനഃക്രമീകരിക്കുന്നു

ക്ലാസുകൾ ഓർഡർ ചെയ്യുക

നിങ്ങളുടെ ഉള്ളടക്കത്തിന്റെ ദൃശ്യ ക്രമം.order- നിയന്ത്രിക്കുന്നതിന് ക്ലാസുകൾ ഉപയോഗിക്കുക . ഈ ക്ലാസുകൾ പ്രതികരിക്കുന്നവയാണ്, അതിനാൽ നിങ്ങൾക്ക് ബ്രേക്ക്‌പോയിന്റ് ഉപയോഗിച്ച് സജ്ജമാക്കാൻ കഴിയും (ഉദാ, ). അഞ്ച് ഗ്രിഡ് ടയറുകളിലുടനീളം പിന്തുണ ഉൾപ്പെടുന്നു .order.order-1.order-md-2112

ആദ്യം, എന്നാൽ ക്രമമില്ലാത്തത്

രണ്ടാമത്തേത്, പക്ഷേ അവസാനത്തേത്

മൂന്നാമത്, പക്ഷേ ആദ്യം

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

യഥാക്രമം ( ) എന്നിവ പ്രയോഗിക്കുന്നതിലൂടെ ഒരു മൂലകത്തെ മാറ്റുന്ന പ്രതികരണവും ക്ലാസുകളും .order-firstഉണ്ട് . ഈ ക്ലാസുകൾ ആവശ്യാനുസരണം അക്കമിട്ട ക്ലാസുകളുമായി ഇടകലരുകയും ചെയ്യാം..order-lastorderorder: -1order: 13order: $columns + 1.order-*

ആദ്യം, പക്ഷേ അവസാനം

രണ്ടാമത്, എന്നാൽ ക്രമമില്ലാത്തത്

മൂന്നാമത്, പക്ഷേ ആദ്യം

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

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

നിങ്ങൾക്ക് രണ്ട് തരത്തിൽ ഗ്രിഡ് നിരകൾ ഓഫ്‌സെറ്റ് ചെയ്യാം: ഞങ്ങളുടെ റെസ്‌പോൺസീവ് .offset-ഗ്രിഡ് ക്ലാസുകളും ഞങ്ങളുടെ മാർജിൻ യൂട്ടിലിറ്റികളും . ഓഫ്‌സെറ്റിന്റെ വീതി വേരിയബിൾ ആയ ദ്രുത ലേഔട്ടുകൾക്ക് മാർജിനുകൾ കൂടുതൽ ഉപയോഗപ്രദമാകുമ്പോൾ ഗ്രിഡ് ക്ലാസുകൾ നിരകളുമായി പൊരുത്തപ്പെടുന്ന വലുപ്പത്തിലാണ്.

ഓഫ്സെറ്റ് ക്ലാസുകൾ

.offset-md-*ക്ലാസുകൾ ഉപയോഗിച്ച് നിരകൾ വലത്തേക്ക് നീക്കുക . ഈ ക്ലാസുകൾ ഒരു നിരയുടെ ഇടത് മാർജിൻ *നിരകൾ കൊണ്ട് വർദ്ധിപ്പിക്കുന്നു. ഉദാഹരണത്തിന്, നാല് നിരകളിലൂടെ .offset-md-4നീങ്ങുന്നു .col-md-4.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

റെസ്‌പോൺസീവ് ബ്രേക്ക്‌പോയിന്റുകളിൽ കോളം ക്ലിയറിംഗ് കൂടാതെ, നിങ്ങൾ ഓഫ്‌സെറ്റുകൾ പുനഃസജ്ജമാക്കേണ്ടതായി വന്നേക്കാം. ഗ്രിഡ് ഉദാഹരണത്തിൽ ഇത് പ്രവർത്തനക്ഷമമായി കാണുക .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

മാർജിൻ യൂട്ടിലിറ്റികൾ

v4-ലെ ഫ്ലെക്‌സ്‌ബോക്‌സിലേക്കുള്ള നീക്കത്തിലൂടെ, .mr-autoസഹോദരങ്ങളുടെ നിരകൾ പരസ്പരം അകറ്റാൻ നിങ്ങൾക്ക് മാർജിൻ യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കാം.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

നെസ്റ്റിംഗ്

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

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

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

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

<div class="row">
  <div class="col-sm-9">
    Level 1: .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>

സാസ് മിക്സിനുകൾ

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

വേരിയബിളുകൾ

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

മിക്സിൻസ്

വ്യക്തിഗത ഗ്രിഡ് നിരകൾക്കായി സെമാന്റിക് 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();
@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 {
  width: 800px;
  @include make-container();
}

.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: 30px !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അല്ലെങ്കിൽ %) എന്നതിൽ സജ്ജീകരിക്കുന്നത് ഉറപ്പാക്കുക .