ബൂട്ട്സ്ട്രാപ്പ് ഗ്രിഡ് ഉദാഹരണങ്ങൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഗ്രിഡ് സിസ്റ്റത്തിനുള്ളിൽ നിർമ്മിക്കുന്നത് നിങ്ങളെ പരിചയപ്പെടുത്തുന്നതിനുള്ള അടിസ്ഥാന ഗ്രിഡ് ലേഔട്ടുകൾ.

ഈ ഉദാഹരണങ്ങളിൽ .themed-grid-colചില തീമിംഗ് ചേർക്കാൻ നിരകളിലേക്ക് ക്ലാസ് ചേർത്തിരിക്കുന്നു. ഇത് സ്ഥിരസ്ഥിതിയായി ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ലഭ്യമായ ഒരു ക്ലാസല്ല.

അഞ്ച് ഗ്രിഡ് നിരകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഗ്രിഡ് സിസ്റ്റത്തിന് അഞ്ച് ശ്രേണികളുണ്ട്, ഞങ്ങൾ പിന്തുണയ്‌ക്കുന്ന ഓരോ ഉപകരണത്തിനും ഒന്ന്. ഓരോ ടയറും കുറഞ്ഞ വ്യൂപോർട്ട് വലുപ്പത്തിൽ ആരംഭിക്കുകയും അസാധുവാക്കാത്ത പക്ഷം വലിയ ഉപകരണങ്ങൾക്ക് സ്വയമേവ ബാധകമാവുകയും ചെയ്യും.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

മൂന്ന് തുല്യ നിരകൾ

ഡെസ്‌ക്‌ടോപ്പുകളിൽ ആരംഭിച്ച് വലിയ ഡെസ്‌ക്‌ടോപ്പുകളിലേക്ക് സ്‌കെയിലിംഗ് ചെയ്യുന്ന മൂന്ന് തുല്യ വീതിയുള്ള നിരകൾ നേടുക . മൊബൈൽ ഉപകരണങ്ങളിലും ടാബ്‌ലെറ്റുകളിലും താഴെയും കോളങ്ങൾ സ്വയമേവ അടുക്കും.

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

മൂന്ന് തുല്യ നിരകൾ ബദൽ

ക്ലാസുകൾ ഉപയോഗിക്കുന്നതിലൂടെ .row-cols-*, നിങ്ങൾക്ക് തുല്യ നിരകളുള്ള ഒരു ഗ്രിഡ് എളുപ്പത്തിൽ സൃഷ്ടിക്കാൻ കഴിയും.

.colഎന്ന കുട്ടി .row-cols-md-3
.colഎന്ന കുട്ടി .row-cols-md-3
.colഎന്ന കുട്ടി .row-cols-md-3

മൂന്ന് അസമമായ നിരകൾ

ഡെസ്‌ക്‌ടോപ്പുകളിൽ തുടങ്ങി വിവിധ വീതികളുള്ള വലിയ ഡെസ്‌ക്‌ടോപ്പുകളിലേക്ക് സ്‌കെയിലിംഗ് ചെയ്യുന്ന മൂന്ന് നിരകൾ നേടുക . ഒരു തിരശ്ചീന ബ്ലോക്കിനായി ഗ്രിഡ് നിരകൾ പന്ത്രണ്ട് വരെ ചേർക്കണമെന്ന് ഓർമ്മിക്കുക. അതിലുപരിയായി, വ്യൂപോർട്ട് പരിഗണിക്കാതെ നിരകൾ അടുക്കാൻ തുടങ്ങുന്നു.

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

രണ്ട് നിരകൾ

ഡെസ്‌ക്‌ടോപ്പുകളിൽ ആരംഭിച്ച് വലിയ ഡെസ്‌ക്‌ടോപ്പുകളിലേക്ക് സ്‌കെയിലിംഗ് ചെയ്യുന്ന രണ്ട് കോളങ്ങൾ നേടുക .

.col-md-8
.col-md-4

പൂർണ്ണ വീതി, ഒറ്റ നിര

പൂർണ്ണ വീതിയുള്ള ഘടകങ്ങൾക്ക് ഗ്രിഡ് ക്ലാസുകളൊന്നും ആവശ്യമില്ല.

രണ്ട് നെസ്റ്റഡ് കോളങ്ങളുള്ള രണ്ട് കോളങ്ങൾ

ഡോക്യുമെന്റേഷൻ അനുസരിച്ച്, നെസ്റ്റിംഗ് എളുപ്പമാണ്-നിലവിലുള്ള കോളത്തിനുള്ളിൽ നിരകളുടെ ഒരു നിര ഇടുക. ഇത് നിങ്ങൾക്ക് ഡെസ്‌ക്‌ടോപ്പുകളിൽ നിന്ന് ആരംഭിച്ച് വലിയ ഡെസ്‌ക്‌ടോപ്പുകളിലേക്ക് സ്‌കെയിലിംഗ് രണ്ട് നിരകൾ നൽകുന്നു , വലിയ കോളത്തിനുള്ളിൽ രണ്ട് (തുല്യ വീതികൾ) കൂടി.

മൊബൈൽ ഉപകരണ വലുപ്പത്തിലും ടാബ്‌ലെറ്റുകളിലും താഴോട്ടും, ഈ നിരകളും അവയുടെ നെസ്റ്റഡ് കോളങ്ങളും അടുക്കും.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

മിക്സഡ്: മൊബൈലും ഡെസ്ക്ടോപ്പും

ബൂട്ട്‌സ്‌ട്രാപ്പ് v4 ഗ്രിഡ് സിസ്റ്റത്തിന് അഞ്ച് ടയർ ക്ലാസുകളുണ്ട്: xs (അധിക ചെറുത്, ഈ ക്ലാസ് ഇൻഫിക്സ് ഉപയോഗിക്കുന്നില്ല), sm (ചെറുത്), md (ഇടത്തരം), lg (വലുത്), xl (അധിക വലുത്). കൂടുതൽ ചലനാത്മകവും വഴക്കമുള്ളതുമായ ലേഔട്ടുകൾ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് ഈ ക്ലാസുകളുടെ ഏതാണ്ട് ഏത് കോമ്പിനേഷനും ഉപയോഗിക്കാം.

ക്ലാസുകളുടെ ഓരോ നിരയും സ്കെയിൽ അപ്പ് ചെയ്യുന്നു, അതായത് md, lg, xl എന്നിവയ്‌ക്കായി ഒരേ വീതികൾ സജ്ജീകരിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നിങ്ങൾ md മാത്രം വ്യക്തമാക്കിയാൽ മതിയാകും.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

മിക്സഡ്: മൊബൈൽ, ടാബ്ലെറ്റ്, ഡെസ്ക്ടോപ്പ്

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

ഗട്ടറുകൾ

ക്ലാസുകൾ ഉപയോഗിച്ച് .gx-*, തിരശ്ചീന ഗട്ടറുകൾ ക്രമീകരിക്കാൻ കഴിയും.

.col.gx-4ഗട്ടറുകൾ കൊണ്ട്
.col.gx-4ഗട്ടറുകൾ കൊണ്ട്
.col.gx-4ഗട്ടറുകൾ കൊണ്ട്
.col.gx-4ഗട്ടറുകൾ കൊണ്ട്
.col.gx-4ഗട്ടറുകൾ കൊണ്ട്
.col.gx-4ഗട്ടറുകൾ കൊണ്ട്

.gy-*ലംബ ഗട്ടറുകൾ നിയന്ത്രിക്കാൻ ക്ലാസുകൾ ഉപയോഗിക്കുക .

.col.gy-4ഗട്ടറുകൾ കൊണ്ട്
.col.gy-4ഗട്ടറുകൾ കൊണ്ട്
.col.gy-4ഗട്ടറുകൾ കൊണ്ട്
.col.gy-4ഗട്ടറുകൾ കൊണ്ട്
.col.gy-4ഗട്ടറുകൾ കൊണ്ട്
.col.gy-4ഗട്ടറുകൾ കൊണ്ട്

ക്ലാസുകൾ ഉപയോഗിച്ച് .g-*, രണ്ട് ദിശകളിലുമുള്ള ഗട്ടറുകൾ ക്രമീകരിക്കാൻ കഴിയും.

.col.g-3ഗട്ടറുകൾ കൊണ്ട്
.col.g-3ഗട്ടറുകൾ കൊണ്ട്
.col.g-3ഗട്ടറുകൾ കൊണ്ട്
.col.g-3ഗട്ടറുകൾ കൊണ്ട്
.col.g-3ഗട്ടറുകൾ കൊണ്ട്
.col.g-3ഗട്ടറുകൾ കൊണ്ട്

കണ്ടെയ്നറുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് v4.4-ൽ ചേർത്തിട്ടുള്ള അധിക ക്ലാസുകൾ ഒരു പ്രത്യേക ബ്രേക്ക്‌പോയിന്റ് വരെ 100% വീതിയുള്ള കണ്ടെയ്‌നറുകൾ അനുവദിക്കുന്നു. v5 ഒരു പുതിയ xxlബ്രേക്ക്‌പോയിന്റ് ചേർക്കുന്നു.

.കണ്ടെയ്നർ
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.കണ്ടെയ്നർ-ദ്രാവകം