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

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

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

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

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

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

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

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

.col-md-4

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

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

.col-md-3

.col-md-6

.col-md-3

രണ്ട് നിരകൾ

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

.col-md-8

.col-md-4

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

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

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

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

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

.col-md-8

.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-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

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

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

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

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

രണ്ട് നിരകൾ

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

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

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

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

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