രചയിതാവിൽ നിന്ന്: ഞാൻ നിങ്ങളെ അഭിവാദ്യം ചെയ്യുന്നു. മുൻ ലേഖനങ്ങളിൽ, ബൂട്ട്‌സ്‌ട്രാപ്പ് ചട്ടക്കൂടിന്റെ കണക്ഷനും ഘടകങ്ങളും അതിന്റെ ഗ്രിഡും ഞങ്ങൾ പരിശോധിച്ചു. ഞങ്ങളുടെ അറിവ് സംഗ്രഹിക്കാനും കുറച്ച് ലളിതമായ വെബ്‌സൈറ്റ് സൃഷ്‌ടിക്കാനുമുള്ള സമയമാണിത്. അതനുസരിച്ച്, ബൂട്ട്‌സ്‌ട്രാപ്പിൽ വെബ്‌സൈറ്റ് ലേഔട്ട് എങ്ങനെയുണ്ടെന്ന് ഇന്ന് നിങ്ങൾ കാണും, സ്കീമാറ്റിക് ആയിട്ടാണെങ്കിലും, PSD ലേഔട്ടിൽ നിന്നല്ല. എന്നാൽ ആദ്യം, CSS ഉപയോഗിക്കുന്ന സ്റ്റാൻഡേർഡ് ലേഔട്ടിൽ നിന്ന് ബൂട്ട്സ്ട്രാപ്പിലെ ലേഔട്ട് എങ്ങനെ വ്യത്യാസപ്പെട്ടിരിക്കുന്നുവെന്ന് ഒരിക്കൽ കൂടി ആവർത്തിക്കാം.

ഒരു ചട്ടക്കൂട് ഉപയോഗിച്ചുള്ള ലേഔട്ട്: ഗുണങ്ങൾ

ബൂട്ട്സ്ട്രാപ്പ്, മറ്റേതൊരു ചട്ടക്കൂട് പോലെ, വെബ് പേജുകൾ രൂപകൽപ്പന ചെയ്യുന്ന പ്രക്രിയയെ വളരെ ലളിതമാക്കുന്നു. ഇതൊരു css, js ചട്ടക്കൂടാണ്, അതായത് രണ്ടും ഉണ്ട് റെഡിമെയ്ഡ് ശൈലികൾ, വെബ് സ്ക്രിപ്റ്റുകൾ എന്നിവയും. ഇവ റെഡിമെയ്ഡ് ഘടകങ്ങൾലേഔട്ട് 3-10 മടങ്ങ് വേഗത്തിലാക്കുക, കാരണം ഈ ശൈലികളും സ്ക്രിപ്റ്റുകളും സജീവമാക്കുന്നതിന് ആവശ്യമായ ക്ലാസുകളും ഡാറ്റ ആട്രിബ്യൂട്ടുകളും നിങ്ങൾ പ്രായോഗികമായി എഴുതേണ്ടതുണ്ട്.

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

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

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

സ്ഥിരസ്ഥിതിയായി നിങ്ങൾ ഡൗൺലോഡ് ചെയ്യുക പൂർണ്ണ പതിപ്പ്ഫ്രെയിംവർക്ക് - bootstrap.css, bootstrap.js ഫയലുകൾ, അതുപോലെ ഒരു ഐക്കൺ ഫോണ്ട്. എന്നാൽ നിങ്ങളുടെ സ്വന്തം ബിൽഡിൽ ഏതൊക്കെ ഫ്രെയിംവർക്ക് ഘടകങ്ങൾ ഉൾപ്പെടുത്തണമെന്നും അല്ലാത്തത് തിരഞ്ഞെടുക്കുന്നതിൽ നിന്ന് ആരും നിങ്ങളെ തടയുന്നില്ല. നിങ്ങൾക്ക് എല്ലാ ഘടകങ്ങളും പൂർണ്ണമായും പ്രവർത്തനരഹിതമാക്കാനും ഉപേക്ഷിക്കാനും കഴിയും, ഉദാഹരണത്തിന്, ഗ്രിഡ്, ടാബുകൾ, കറൗസൽ എന്നിവ മാത്രം. തുടർന്ന് നിങ്ങൾ ഫയലുകളുടെ വലുപ്പം ഗണ്യമായി കുറയ്ക്കുകയും അതിൽ ഉപയോഗിക്കുന്നവ മാത്രം പ്രോജക്റ്റിലേക്ക് ബന്ധിപ്പിക്കുകയും ചെയ്യുന്നു.

ഇതൊരു പ്രൊഫഷണൽ സമീപനമാണ് ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിച്ച്. വാസ്തവത്തിൽ, അതിൽ വിവരിച്ചിരിക്കുന്ന മിക്ക CSS ശൈലികളും നിങ്ങൾക്ക് ആവശ്യമില്ലായിരിക്കാം. ഉദാഹരണത്തിന്, ബട്ടണുകൾ, പട്ടികകൾ, ചിത്രങ്ങൾ മുതലായവയ്ക്ക്. നിങ്ങൾക്ക് ചില ശൈലികൾ സ്വയം വിവരിക്കാം. അടിസ്ഥാനപരമായി, ബൂട്ട്സ്ട്രാപ്പ് ചട്ടക്കൂടിലെ യഥാർത്ഥ മൂല്യം ഗ്രിഡും ചില ജാവാസ്ക്രിപ്റ്റ് ഘടകങ്ങളുമാണ്.

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് ഒരു ലളിതമായ സ്‌കെച്ചി വെബ്‌സൈറ്റ് എങ്ങനെ സൃഷ്‌ടിക്കാം

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

ആദ്യം നിങ്ങൾ സൈറ്റ് കണ്ടെയ്നർ ഉണ്ടോ എന്ന് തീരുമാനിക്കേണ്ടതുണ്ട് നിശ്ചിത വലുപ്പങ്ങൾ, അല്ലെങ്കിൽ അത് പൂർണ്ണമായും റബ്ബർ ആയിരിക്കും. നിങ്ങൾ പൊതു കണ്ടെയ്‌നറിലേക്ക് കണ്ടെയ്‌നർ ക്ലാസ് അസൈൻ ചെയ്‌താൽ, അതിന്റെ പരമാവധി വീതി 1170 പിക്‌സലുകളായി പരിമിതപ്പെടുത്തും. നിങ്ങൾ കണ്ടെയ്നർ-ഫ്ലൂയിഡ് വ്യക്തമാക്കുകയാണെങ്കിൽ, ഒന്നും സൈറ്റിന്റെ വീതി പരിമിതപ്പെടുത്തില്ല. ഉദാഹരണത്തിന്, 1920 പിക്സൽ വീതിയുള്ള മോണിറ്ററുകളിൽ, അതിന്റെ വീതി തുല്യമായിരിക്കും - വിൻഡോയുടെ 100%.

അതനുസരിച്ച്, പിക്സലുകളുമായി ഏതെങ്കിലും തരത്തിലുള്ള ബൈൻഡിംഗ് ആവശ്യമുണ്ടോ ഇല്ലയോ എന്ന് മനസിലാക്കാൻ സൈറ്റ് ഡിസൈൻ ഘട്ടത്തിൽ നിങ്ങൾ ഈ പോയിന്റ് തീരുമാനിക്കണം.

കൊള്ളാം, ഞങ്ങളുടെ ടെംപ്ലേറ്റിൽ മൂന്ന് വരികൾ ഉണ്ടായിരിക്കും - തലക്കെട്ട്, ഉള്ളടക്കം + സൈഡ്ബാർ, അടിക്കുറിപ്പ്. പൊതുവേ, ഇത് സാധാരണ കാഴ്ചലളിതമായ രണ്ട് നിര സൈറ്റുകൾ. മാർക്ക്അപ്പ് നോക്കാം:

ഒരു തൊപ്പി

< div class = "container-fluid" > < div class = "row" > < div class = "col-md-12" > < h1 >ഒരു തൊപ്പി< / h1 > < / div > < / div >

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

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

പൊതു ഫോർമുലസൈഡ്‌ബാർ ഇടത്തേക്ക് നീക്കുന്നത് വളരെ ലളിതമാണ്: ഉള്ളടക്കത്തിന്റെ വീതിയാൽ സൈഡ്‌ബാർ തന്നെ ഇടത്തോട്ടും സൈഡ്‌ബാറിന്റെ വീതി ഉപയോഗിച്ച് ഉള്ളടക്കം വലത്തോട്ടും നീക്കുക. എന്നാൽ ആദ്യം ഈ വീതി എന്തായിരിക്കുമെന്ന് നിങ്ങൾ സ്വാഭാവികമായും തീരുമാനിക്കേണ്ടതുണ്ട്. ഞങ്ങളുടെ പ്രധാന ബ്ലോക്ക് വീതിയുടെ 75%, സൈഡ് കോളം 25% എന്നിവ ഉൾക്കൊള്ളട്ടെ. അപ്പോൾ നമുക്ക് ഈ കോഡ് ആവശ്യമാണ്:

< div class = "col-md-9 col-md-push-3" > < / div > < div class = "col-md-3 col-md-pull-9" > < / div >

സ്വാഭാവികമായും, ഒരു വരിയിൽ വയ്ക്കുക.

ഒരു സൈഡ്ബാർ സൃഷ്ടിക്കുന്നു

സൈഡ് കോളത്തിൽ ഞങ്ങൾ ഒരു ലംബ മെനു സ്ഥാപിക്കും. ഇത് ചെയ്യുന്നതിന്, സ്‌റ്റൈലിംഗ് ലിസ്റ്റുകൾക്ക് ഏതൊക്കെ ക്ലാസുകളുണ്ടെന്ന് കാണാൻ ഡോക്യുമെന്റേഷനിൽ നിങ്ങൾക്ക് നോക്കാം. "ഘടകങ്ങൾ" - "ലിസ്റ്റ് ഗ്രൂപ്പുകൾ" ക്ലിക്ക് ചെയ്യുക.

സൈഡ്‌ബാർ

• കാർ ഷോറൂമുകൾ 19
• ഓട്ടോ റിപ്പയർ ഷോപ്പുകൾ 178
• നന്നാക്കുക
• പരസ്യങ്ങൾ

< div class = "col-md-3 col-md-pull-9" > < h2 >സൈഡ്‌ബാർ< / h2 > < ul class = "list-group" > < li class = "list-group-item" >കാർ ഷോറൂമുകൾ < span class = "badge" > 19 < / span > < / li > < li class = "list-group-item" >ഓട്ടോ റിപ്പയർ ഷോപ്പുകൾ < span class = "badge" > 178 < / span > < / li > < li class = "list-group-item" >നന്നാക്കുക < / li > < li class = "list-group-item" >പരസ്യങ്ങൾ < / li > < / ul > < / div >

ഐക്കണുകളുള്ള മെനു ഇങ്ങനെയാണ്:

തീർച്ചയായും, ഇത് കൂടുതൽ മനോഹരമാക്കാം, പക്ഷേ ഞങ്ങൾ ഒരു ഉദാഹരണത്തിനായി ഒരു ടെംപ്ലേറ്റ് നിർമ്മിക്കുന്നു. അതെ, എനിക്ക് ലിങ്കുകളില്ലാതെ മെനു ലഭിച്ചു, പക്ഷേ ലിങ്ക് ചെയ്യാൻ ഇപ്പോഴും ഒന്നുമില്ല, അതിനാൽ നമുക്ക് ഈ പോയിന്റ് ഒഴിവാക്കാം.

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

ഒരു ഉള്ളടക്ക ബ്ലോക്ക് സൃഷ്ടിക്കുന്നു

ഉള്ളടക്കം, ഞങ്ങൾ ഓർക്കുന്നതുപോലെ, ഞങ്ങളുടെ കാര്യത്തിൽ മാർക്ക്അപ്പിൽ ഉയർന്നതായിരിക്കണം, അതിനാൽ സൈഡ്ബാറിന് മുകളിൽ ഇനിപ്പറയുന്ന കോഡ് ഒട്ടിക്കുക. ഈ രണ്ട് ബ്ലോക്കുകളും ഒരു വരിയിൽ സ്ഥാപിച്ചിരിക്കുന്നു. എന്റെ ഉള്ളടക്കത്തിൽ ഇതുവരെ ചേർത്തിട്ടുള്ള കോഡ് ഇതാണ്:

ഉള്ളടക്ക തലക്കെട്ട്

Lorem ipsum doloret yuio ffghgf fdfgfhf ttyuytg gjgfj gfgjgf ghgfjgf gfgugf ghjkghkhg gfjgj utytiytik fdhbfbvcv fdhfdhfh gngnggfdhfdhfdhfdhfdhfdhfdhfd fdhfd hdfhfdh fdhf hfdhfd fdhfdhfdhdf

< div class = "col-md-9 col-md-push-3" > < h2 >ഉള്ളടക്കം< / h2 > < div class = "row" > < div class = "col-sm-4" > < div class = "panel" > < h4 >തലക്കെട്ട്< / h4 > < img src = "auto1.jpg" class = "img-responsive" > < p >Lorem ipsum doloret yuio ffghgf fdfgfhf ttyuytg gjgfj gfgjgf ghgfjgf gfgugf ghjkghkhg gfjgj utytiytik fdhbfbvcv fdhfdhfh gngnggfdhfdhfdhfdhfdhfdhfdhfd fdhfd hdfhfdh fdhf hfdhfd fdhfdhfdhdf< / p > < / div > < / div >

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഞങ്ങൾ ഇവിടെ ഒരു നെസ്റ്റഡ് ഗ്രിഡ് സിസ്റ്റം ഉപയോഗിക്കുന്നു. ആസൂത്രണം ചെയ്തതുപോലെ, ഉള്ളടക്കത്തിൽ തുടർച്ചയായി 3 ലേഖന അറിയിപ്പുകൾ ഉണ്ടായിരിക്കണം. ഇത് എളുപ്പത്തിൽ നേടുന്നതിന്, ഗ്രിഡിന്റെ കണ്ടെയ്‌നറായി ഞങ്ങൾ col-md-9 col-md-push-3 ബ്ലോക്ക് എടുക്കും, അതായത് ഉള്ളടക്ക ബ്ലോക്ക്. ഈ സാഹചര്യത്തിൽ, ഞങ്ങൾ അതിൽ ഒരു വരി സൃഷ്ടിക്കുന്നു, അവിടെ, 12-കോളം ഗ്രിഡ് വീണ്ടും ഞങ്ങൾക്ക് ലഭ്യമാകും. ക്ലാസ് col-sm-4 ഉപയോഗിച്ച് ഞങ്ങൾ ഒരു ലേഖന പ്രഖ്യാപനത്തിന് കൃത്യമായി 33.33% വീതി നൽകുന്നു. അതിനാൽ, 3 പ്രഖ്യാപനങ്ങൾ ഉള്ളടക്കത്തിന്റെ ഒരു വരിയിലേക്ക് അനുയോജ്യമാകും. അവ എങ്ങനെ ദൃശ്യമാകുമെന്ന് പരിശോധിക്കാൻ ഈ ബ്ലോക്ക് 2 തവണ കൂടി പകർത്തി ഒട്ടിക്കുക.

ലേഖന അറിയിപ്പുകളുള്ള ഞങ്ങളുടെ ബ്ലോക്കുകൾ ഇങ്ങനെയാണ് പ്രദർശിപ്പിക്കുന്നത്:

തികച്ചും നേരായ. ഒട്ടും ചോദ്യങ്ങളില്ലാതെ. ഏറ്റവും ചെറിയവ ഒഴികെയുള്ള എല്ലാ ഉപകരണങ്ങളിലും 3 നിരകളിലായി അറിയിപ്പുകൾ സ്ഥാപിക്കും, അവിടെ എല്ലാം ഒരു കോളത്തിലായിരിക്കും.

ഈ ഉദാഹരണം നിങ്ങൾക്ക് വ്യക്തമാണെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു. ഇപ്പോൾ കുറച്ചുകൂടി നിലവാരമില്ലാത്ത ഒരു ഉദാഹരണം നോക്കാൻ ഞാൻ നിർദ്ദേശിക്കുന്നു. ഉള്ളടക്കത്തിൽ മറ്റൊരു വരി സൃഷ്ടിക്കാം. ഇത്തവണ ഒരു ലേഖനവും ഒരു സ്ലൈഡറും അവയ്ക്കിടയിൽ ഒരു ചെറിയ ഇൻഡന്റ് ഉപയോഗിച്ച് തുടർച്ചയായി പ്രദർശിപ്പിക്കുക എന്നതാണ് ആശയം. ലേഖനം ഇടതുവശത്തും സ്ലൈഡർ വലതുവശത്തും ആണെന്ന് പറയാം. അവയ്ക്കിടയിൽ ഒരു ചെറിയ വിടവ് ഉണ്ട് + ഇതെല്ലാം തീർച്ചയായും അഡാപ്റ്റീവ് ആയിരിക്കണം.

നിങ്ങൾക്ക് ഞങ്ങളുടെ പുതിയ വരിയിലേക്ക് ലേഖന അറിയിപ്പ് കോഡ് പകർത്തി ഒട്ടിക്കാം. നമ്മൾ ചെയ്യേണ്ടത് ഒരു സ്ലൈഡർ ഉണ്ടാക്കുക എന്നതാണ്. യഥാർത്ഥത്തിൽ, ഞാൻ അതിന്റെ കോഡ് ഇവിടെ നൽകില്ല, കാരണം ഇത് വളരെ ബുദ്ധിമുട്ടാണ്. ഔദ്യോഗിക ബൂട്ട്‌സ്‌ട്രാപ്പ് വെബ്‌സൈറ്റിലേക്കോ റഷ്യൻ പതിപ്പിലേക്കോ പോകുക, ജാവാസ്ക്രിപ്റ്റ് വിഭാഗത്തിലേക്ക് പോയി അവിടെ കറൗസൽ തിരയുക.

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

സ്ലൈഡർ എങ്ങനെ നിർമ്മിക്കാം എന്നതല്ല പ്രധാന കാര്യം - ഈ വിവരങ്ങൾ ഡോക്യുമെന്റേഷനിൽ എളുപ്പത്തിൽ കണ്ടെത്താനാകും. സ്ലൈഡർ ഏത് വലുപ്പത്തിലുള്ള ബ്ലോക്കിലാണ് പൊതിയേണ്ടതെന്ന് മനസിലാക്കുക എന്നതാണ് ഇപ്പോൾ ഞങ്ങളുടെ ചുമതല. വരിയിൽ ഞങ്ങൾക്ക് 8 സ്വതന്ത്ര സെല്ലുകൾ കൂടിയുണ്ട്, എന്നാൽ ലേഖന പ്രഖ്യാപനത്തിനും സ്ലൈഡറിനും ഇടയിൽ ഒരു ചെറിയ ഇൻഡന്റ് ഉണ്ടായിരിക്കേണ്ടതിനാൽ, ഞാൻ ഈ ബ്ലോക്കിൽ സ്ലൈഡർ പൊതിയുന്നതാണ്:

ഇപ്പോൾ ഞങ്ങൾക്ക് ഒരു ലേഖന പ്രഖ്യാപനവും ഒരു വരിയിൽ ഒരു സ്ലൈഡറും ഉണ്ട്, ചുവടെ 3 അറിയിപ്പുകൾ കൂടി ഉണ്ട്, ഇതെല്ലാം ഉള്ളടക്ക ബ്ലോക്കിലാണ് സ്ഥിതി ചെയ്യുന്നത്.

അതിനാൽ, ഞാൻ ഒരുപക്ഷേ ഒരു അടിക്കുറിപ്പ് സൃഷ്ടിക്കില്ല, കാരണം അത് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് നിങ്ങൾക്ക് ഇപ്പോൾ മനസ്സിലാക്കാൻ കഴിയും. തൊപ്പിയുടെ അതേ തത്വത്തിൽ. ഇന്ന് ഈ ഘടകങ്ങളിൽ ഞങ്ങൾക്ക് പ്രത്യേക താൽപ്പര്യമില്ല, കാരണം ഞങ്ങൾ സൈഡ് കോളത്തിലും പ്രത്യേകിച്ച് പ്രധാന ബ്ലോക്കിലും പ്രവർത്തിച്ചിരുന്നു.

എനിക്ക് ശേഷം നിങ്ങൾ എല്ലാം ആവർത്തിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ സ്വന്തം ചിത്രങ്ങൾ മാത്രം ഉപയോഗിച്ച്, ഞങ്ങൾക്ക് വളരെ സുഗമമായ ലേഔട്ട് ഉണ്ടെന്ന് സമ്മതിക്കാൻ നിങ്ങൾ നിർബന്ധിതരാകും (നിങ്ങൾ ഭയാനകമായത് കണക്കിലെടുക്കുന്നില്ലെങ്കിൽ രൂപംബ്ലോക്കുകൾ, പക്ഷേ അവ പരിഹരിക്കാൻ ഞങ്ങൾക്ക് ഇപ്പോൾ സമയമില്ല). മുഴുവൻ സൈറ്റും "ഫോട്ടോഗ്രാഫ്" ചെയ്യാൻ ഞാൻ ശ്രമിക്കും:

തിരശ്ചീനമായ സ്ക്രോളുകളൊന്നുമില്ല, ഏത് സ്‌ക്രീൻ റെസല്യൂഷനിലും സൈറ്റ് കാണാൻ എളുപ്പമാണ്, ഒന്നും സ്ലൈഡുചെയ്യുന്നില്ല, ഒന്നും വീഴുന്നില്ല, മുതലായവ.

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

നിങ്ങൾ തയാറാണോ?

ശരി, ബൂട്ട്‌സ്‌ട്രാപ്പ് 3-ൽ എങ്ങനെയുള്ള ലേഔട്ട് ആണെന്ന് ഞങ്ങൾ നോക്കി. ഇപ്പോൾ ഒന്ന് പറയൂ ലളിതമായ കാര്യം? അടുത്ത 5-10 ദിവസത്തിനുള്ളിൽ ഒരു പ്രൊഫഷണൽ തലത്തിൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് ചട്ടക്കൂട് പഠിക്കാനും സങ്കീർണ്ണതയുടെ ഏത് തലത്തിലുള്ള പ്രതികരണ ഫലകങ്ങൾ സൃഷ്‌ടിക്കാൻ തുടങ്ങാനും നിങ്ങൾ ആഗ്രഹിക്കുന്നുണ്ടോ?

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

ചുരുക്കത്തിൽ, ഞങ്ങളുടെ ഫസ്റ്റ് ക്ലാസ് പരിശീലനത്തിന് ഞാൻ നിങ്ങളെ ക്ഷണിക്കുന്നു ബൂട്ട്സ്ട്രാപ്പ് ചട്ടക്കൂട്ആദ്യം മുതൽ. അതെ, അതെ, ഈ ലേഖനത്തിൽ നിന്ന് നിങ്ങൾക്ക് ഒന്നും മനസ്സിലായില്ലെങ്കിലും. RuNet-ലെ ബൂട്ട്‌സ്‌ട്രാപ്പിൽ മറ്റ് കോഴ്‌സുകളൊന്നും ഞാൻ കണ്ടിട്ടില്ല, അവ നിലവിലുണ്ടെങ്കിൽ പോലും, അവയിൽ 2 ടെംപ്ലേറ്റുകൾ അടങ്ങിയിട്ടില്ല. പ്രൊഫഷണൽ തലം+ ബോണസായി ലാൻഡിംഗ് പേജ്.

ശരി, ഇതിലൂടെ ഞാൻ നിങ്ങളെ ചിന്തിക്കാൻ വിടുന്നു, ബൂട്ട്‌സ്‌ട്രാപ്പ് മാസ്റ്റർ ചെയ്യാനുള്ള നിങ്ങളുടെ അവസരം നിങ്ങൾ നഷ്‌ടപ്പെടുത്തില്ലെന്നും സമീപഭാവിയിൽ കോഴ്‌സിന്റെ വില പൂർണ്ണമായും വീണ്ടെടുക്കുമെന്നും ഞാൻ പ്രതീക്ഷിക്കുന്നു, കാരണം ഈ ചട്ടക്കൂട് ഉപയോഗിച്ച് നിങ്ങൾക്ക് 2-3 മടങ്ങ് കൂടുതൽ സൈറ്റുകൾ നിർമ്മിക്കാൻ കഴിയും അതേ സമയം, അതായത് പണം സമ്പാദിക്കുക കൂടുതൽ പണം. നിങ്ങൾ ഈ വീക്ഷണം ഇഷ്ടപ്പെട്ടുവെന്ന് ഞാൻ കരുതുന്നു.

ഇന്ന് ഞങ്ങൾ ഒരു സ്കീമാറ്റിക് ലേഔട്ട് ഉണ്ടാക്കി, എന്നിരുന്നാലും, അതിന്റെ ഘടനയിൽ ഏറ്റവും ലളിതമല്ല. നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ബൂട്ട്സ്ട്രാപ്പ് ഞങ്ങളുടെ ചുമതല വളരെ ലളിതമാക്കിയിരിക്കുന്നു. ഞാൻ നിങ്ങളോട് വിട പറയുന്നു, കഴിയുന്നത്ര വേഗത്തിലും ലളിതമായും വെബ്സൈറ്റുകൾ വികസിപ്പിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു. അതെ, അഡാപ്റ്റീവ് കൂടിയാണ്.

ലേഖനത്തിന്റെ രണ്ടാം പകുതി ഇതിനകം കൂടുതൽ ലളിതമായി മനസ്സിലാക്കിയിട്ടുണ്ട്, സ്ക്രീൻഷോട്ടുകളുള്ള കൂടുതൽ ഉദാഹരണങ്ങളുണ്ട്.

ബൂട്ട്സ്ട്രാപ്പ് - അതെന്താണ്?

അതിനാൽ നമുക്ക് ഒരു പ്രധാന ചോദ്യത്തിൽ നിന്ന് ആരംഭിക്കാം. ബൂട്ട്സ്ട്രാപ്പ് ഒരു CSS, JS ചട്ടക്കൂടാണ്, പ്രധാനമായും റെഡിമെയ്ഡ് രേഖാമൂലമുള്ള ഒരു കൂട്ടം ഫയലുകൾ. ഏതൊരു ചട്ടക്കൂടിന്റെയും ഡെവലപ്പർമാരുടെ ലക്ഷ്യം തങ്ങൾക്കും ടൂളിലേക്ക് ആക്‌സസ് ഉള്ള മറ്റുള്ളവർക്കുമായി വെബ്‌സൈറ്റ് വികസനം ലളിതമാക്കുക എന്നതാണ്. ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ കാര്യത്തിൽ, ഇത് പൂർണ്ണമായും സൌജന്യമാണ്, അതിനാൽ നിങ്ങൾക്ക് ഇത് ഏത് വിധത്തിലും ഉപയോഗിക്കാനും സോഴ്സ് കോഡ് എഡിറ്റ് ചെയ്യാനും നിങ്ങൾക്ക് ഇഷ്ടമുള്ള രീതിയിൽ ചട്ടക്കൂട് ഇഷ്ടാനുസൃതമാക്കാനും കഴിയും. അത് തികഞ്ഞതാണ്.

ബൂട്ട്സ്ട്രാപ്പ് ഇൻസ്റ്റാൾ ചെയ്യുന്നു

നിങ്ങൾക്ക് ഫ്രെയിംവർക്ക് ഫയലുകൾ ഒരു HTML ഡോക്യുമെന്റിലേക്ക് കണക്റ്റുചെയ്യണമെങ്കിൽ (ഉദാഹരണത്തിന്, പരിശീലനത്തിനായി), ഔദ്യോഗിക വെബ്സൈറ്റായ getbootstrap.com-ൽ നിന്ന് ഫ്രെയിംവർക്ക് ഡൗൺലോഡ് ചെയ്യുക, അതിന്റെ ഫയലുകൾ പ്രോജക്റ്റിലേക്ക് പകർത്തി നിങ്ങൾക്ക് ആവശ്യമുള്ളവ ബന്ധിപ്പിക്കുക. ഞാൻ ഇത് ചെയ്യും ചെറിയ അവലോകനംഈ ഫയലുകൾ:

bootstrap.css, bootstrap.min.css - ഫ്രെയിംവർക്കിന്റെ CSS കോഡിന്റെ കംപ്രസ് ചെയ്യാത്തതും കംപ്രസ് ചെയ്തതുമായ പതിപ്പുകൾ. വർക്കിംഗ് പ്രോജക്റ്റിലേക്ക് ബന്ധിപ്പിക്കാൻ ശുപാർശ ചെയ്യുന്നു കംപ്രസ് ചെയ്ത ഫയൽ, ഇതുവഴി നിങ്ങളുടെ ഡൗൺലോഡ് വേഗത ചെറുതായി മെച്ചപ്പെടുത്തും. എന്നാൽ നിങ്ങൾ ഒരു ഫയലിൽ കോഡ് കാണാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, കംപ്രസ് ചെയ്യാത്ത പതിപ്പ് ബന്ധിപ്പിക്കുക.

bootstrap.js, bootstrap.min.js - സ്ക്രിപ്റ്റുകളുള്ള ഫയൽ

ഫോണ്ട് ഫോൾഡറും അതിലെ ഗ്ലിഫിക്കോൺ ഫയലുകളും ബൂട്ട്സ്ട്രാപ്പ് ഐക്കൺ ഫോണ്ട് ആണ്. ഇതിന് ഏകദേശം 200 ഐക്കണുകൾ ഉണ്ട്. മിക്ക കേസുകളിലും നിങ്ങൾക്ക് അവ മതിയാകും, ചിലപ്പോൾ നിങ്ങൾ മറ്റുള്ളവരെ ബന്ധിപ്പിക്കേണ്ടതുണ്ട്. ഐക്കൺ ഫോണ്ടിനെക്കുറിച്ച് നമുക്ക് പിന്നീട് സംസാരിക്കാം.

ഈ സ്റ്റാൻഡേർഡ് സെറ്റ്ചട്ടക്കൂട്. വാസ്തവത്തിൽ, നിങ്ങൾക്ക് ഇത് എളുപ്പത്തിൽ ഇച്ഛാനുസൃതമാക്കാനും നിങ്ങൾക്ക് അനുയോജ്യമായ രീതിയിൽ മാറ്റാനും കഴിയും. ഉദാഹരണത്തിന്, സ്ക്രിപ്റ്റുകൾ ഉപയോഗിക്കാതിരിക്കുകയോ ഒരു ഗ്രിഡ് മാത്രം ബന്ധിപ്പിക്കുകയോ ചെയ്യരുത്. പൊതുവേ, ഞങ്ങൾ ഇതിനെക്കുറിച്ച് സംസാരിക്കും.

റഷ്യൻ ബൂട്ട്സ്ട്രാപ്പ് ഡോക്യുമെന്റേഷൻ

നിങ്ങൾ getbootstrap സന്ദർശിക്കുമ്പോൾ, ഇവിടെയുള്ളതെല്ലാം ഇംഗ്ലീഷിൽ ആണെന്ന് നിങ്ങൾ ശ്രദ്ധിച്ചിരിക്കാം. ചട്ടക്കൂടിൽ ഞങ്ങൾക്ക് റഷ്യൻ സഹായം ഉപയോഗിക്കാം. ഇത് കണ്ടെത്താൻ എളുപ്പമാണ്. ഇത് ചെയ്യുന്നതിന്, പ്രധാന പേജിൽ നിന്ന് ആരംഭിക്കുന്ന വിഭാഗത്തിലേക്ക് പോകുക. ഏറ്റവും താഴേക്ക് സ്ക്രോൾ ചെയ്യുക, വിവർത്തനങ്ങളിലേക്ക് ഒരു ലിങ്ക് ഉണ്ടാകും. അവിടെ റഷ്യൻ നോക്കി അതിൽ ക്ലിക്ക് ചെയ്യുക. അത്രയേയുള്ളൂ, ഇപ്പോൾ നിങ്ങൾ സൈറ്റിന്റെ റഷ്യൻ പതിപ്പിലാണ്. ശരിയാണ്, എല്ലാം ഇവിടെ വിവർത്തനം ചെയ്തിട്ടില്ല, എന്നാൽ എവിടെയോ 70-80% കൃത്യമാണ്, അതിനാൽ നിങ്ങൾക്ക് എല്ലാം മനസ്സിലാകും.

ബൂട്ട്സ്ട്രാപ്പ് ഗ്രിഡ്

ഒരാൾ എന്ത് പറഞ്ഞാലും, ഏറ്റവും പ്രധാനമായി ബൂട്ട്സ്ട്രാപ്പ് ഘടകംഒരു അഡാപ്റ്റീവ് മെഷ് ആണ്. പൊതുവേ, ഇത് കൂടാതെ, ചട്ടക്കൂട് അതിന്റെ എല്ലാ മൂല്യവും നഷ്ടപ്പെടും, കാരണം ഗ്രിഡിന് നന്ദി നിങ്ങൾക്ക് വേഗത്തിൽ അഡാപ്റ്റീവ് ടെംപ്ലേറ്റുകൾ സൃഷ്ടിക്കാൻ കഴിയും. അതേ സമയം, നിങ്ങൾക്ക് മീഡിയ അന്വേഷണങ്ങൾ പരിചിതമായിരിക്കില്ല; നിങ്ങൾക്ക് അവ ആവശ്യമില്ല, കാരണം ചട്ടക്കൂട് പൊരുത്തപ്പെടുത്തൽ നടപ്പിലാക്കുന്നതിൽ ശ്രദ്ധിക്കുന്നു; നിങ്ങൾ ബ്ലോക്കുകളിലേക്ക് ശരിയായ ക്ലാസുകൾ നൽകേണ്ടതുണ്ട്.

എന്താണ് ഈ ക്ലാസുകൾ? നമുക്ക് ഡോക്യുമെന്റേഷനിലേക്ക് പോകാം, ഇത് ഞങ്ങളെ വളരെയധികം സഹായിക്കും. CSS - ഗ്രിഡ് സിസ്റ്റം വിഭാഗത്തിലേക്ക് പോകുക. പൊതു നിയമങ്ങൾഒരു ഗ്രിഡിനൊപ്പം പ്രവർത്തിക്കുന്നത് ലളിതമാണ്, ഞാൻ അവ ഇപ്പോൾ പട്ടികപ്പെടുത്തും.

ഒരു ഗ്രിഡ് ഉപയോഗിച്ച് എങ്ങനെ പ്രവർത്തിക്കാം?

ഇതൊരു html ടേബിളായി കരുതുക. നിങ്ങൾ എപ്പോഴെങ്കിലും പട്ടികകൾക്കായി HTML കോഡ് എഴുതിയിട്ടുണ്ടെങ്കിൽ, എല്ലാ ഉള്ളടക്കവും ടേബിൾ ടാഗിൽ സ്ഥാപിച്ചിട്ടുണ്ടെന്നും ഒരു വരി tr ടാഗിൽ സ്ഥാപിച്ചിട്ടുണ്ടെന്നും സെല്ലുകൾ അതിൽ സ്ഥാപിച്ചിട്ടുണ്ടെന്നും നിങ്ങൾക്കറിയാം - td .

അതിനാൽ, ഗ്രിഡിൽ എല്ലാം സമാനമാണ്. കണ്ടെയ്നർ ക്ലാസ് ഗ്രിഡിനുള്ള ഒരു പൊതു കണ്ടെയ്നറായി പ്രവർത്തിക്കുന്നു. ബൂട്ട്സ്ട്രാപ്പ് ഗ്രിഡിന് 2 ഓപ്ഷനുകൾ ഉണ്ട് - പൂർണ്ണമായും റബ്ബർ, ഇപ്പോഴും പരിമിതമായ പരമാവധി വീതിയുണ്ട്. അതിനാൽ, ചുമതല നൽകുമ്പോൾ പൊതു ബ്ലോക്ക്ക്ലാസ് കണ്ടെയ്നർ, സൈറ്റിന് പരമാവധി 1170 പിക്സൽ വീതി ഉണ്ടായിരിക്കും. ഇത് കൂടുതൽ വികസിപ്പിക്കില്ല. സ്വാഭാവികമായും, ഉള്ളടക്കം കേന്ദ്രീകൃതമായിരിക്കും.

നിങ്ങൾ കണ്ടെയ്നർ-ഫ്ലൂയിഡ് ക്ലാസ് സജ്ജമാക്കുകയാണെങ്കിൽ, മെഷ് പൂർണ്ണമായും റബ്ബർ ആയിരിക്കും, അതായത്, വലുപ്പ നിയന്ത്രണങ്ങൾ ഉണ്ടാകില്ല. ഉദാഹരണത്തിന്, ഒരാൾ 1920 പിക്സൽ വൈഡ് മോണിറ്ററിൽ ഒരു വെബ്സൈറ്റ് തുറക്കുകയാണെങ്കിൽ, അയാൾ അത് മുഴുവൻ വീതിയിൽ കാണും.

അതനുസരിച്ച്, ഒരു വെബ്‌സൈറ്റ് വികസിപ്പിക്കുമ്പോൾ ആദ്യം ചെയ്യേണ്ടത് ടെംപ്ലേറ്റ് എങ്ങനെയായിരിക്കുമെന്ന് തീരുമാനിക്കുക എന്നതാണ് - പൂർണ്ണമായും റബ്ബർ, അല്ലെങ്കിൽ അതിന്റെ വീതി ഇപ്പോഴും പരിമിതപ്പെടുത്തേണ്ടതുണ്ട്.

കൊള്ളാം, കണ്ടെയ്നർ ബ്ലോക്കിൽ ഗ്രിഡിന്റെ ഒരു നിര അടങ്ങിയിരിക്കണം. ഒരു വരിയിൽ ഉള്ള എല്ലാ ബ്ലോക്കുകളും നിങ്ങൾ അതിൽ സ്ഥാപിക്കേണ്ടതുണ്ട്. അതായത്, ഞങ്ങൾ ഏറ്റവും സാധാരണമായ ടെംപ്ലേറ്റ് എടുക്കുകയാണെങ്കിൽ: തലക്കെട്ട്, പ്രധാന ഭാഗം, വലത് കോളം, അടിക്കുറിപ്പ്, പിന്നെ 3 നിരകൾ ഉണ്ട്. ആദ്യത്തേതിന് തലക്കെട്ട് മാത്രമായിരിക്കും, രണ്ടാമത്തേതിന് ഉള്ളടക്കവും സൈഡ്‌ബാറും ഉണ്ടായിരിക്കും, അവസാനത്തേതിന് അടിക്കുറിപ്പും ഉണ്ടായിരിക്കും. അത്തരമൊരു സൈറ്റിന്റെ മാർക്ക്അപ്പ് ഇതുപോലെയായിരിക്കും:

ഒരു തൊപ്പി
ഉള്ളടക്കം... ഒപ്പം സൈഡ്‌ബാറും
അടിക്കുറിപ്പ്

എന്നാൽ ഇപ്പോൾ ഇത് തെറ്റായ മാർക്ക്അപ്പ്, പോരാത്തതിന്... എന്ത്? അത് ശരിയാണ്, സെല്ലുകൾ! ബൂട്ട്സ്ട്രാപ്പിന്റെ കാര്യത്തിൽ, അവയെ കോളങ്ങൾ എന്നും വിളിക്കുന്നു. ബൂട്ട്സ്ട്രാപ്പ് ഗ്രിഡ് 12 നിരകൾ ഉൾക്കൊള്ളുന്നു. ഏത് വീതിയിലും, കുറഞ്ഞത് 1200 പിക്സലുകൾ, കുറഞ്ഞത് 100, ഏത് ബ്ലോക്കിലും ഇത് എംബഡ് ചെയ്യാവുന്നതാണ്. നിരകളുടെ വീതി പിക്സലുകളിലല്ല, ശതമാനത്തിലാണ് വ്യക്തമാക്കിയിരിക്കുന്നതിനാലാണ് ഇതെല്ലാം.

ഈ 12 കോളം സിസ്റ്റം എങ്ങനെയാണ് പ്രവർത്തിക്കുന്നത്?

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

ഇത് ചെയ്യുന്നതിന്, ചുവടെയുള്ള ഡോക്യുമെന്റേഷനിലൂടെ സ്ക്രോൾ ചെയ്യുക, അവിടെ പ്രധാനപ്പെട്ട ഗ്രിഡ് പ്രോപ്പർട്ടികൾ അടങ്ങിയിരിക്കുന്ന ഒരു പട്ടിക നിങ്ങൾ കണ്ടെത്തും.

വഴിയിൽ, കോളങ്ങൾ തന്നെ ബൂട്ട്‌സ്‌ട്രാപ്പിൽ കോൾ-ക്ലാസ് ഉപയോഗിച്ച് അടയാളപ്പെടുത്തിയിരിക്കുന്നു, പക്ഷേ ഇതൊരു സംയോജിത ക്ലാസാണ്, അതിനാൽ അവ ഒരിക്കലും കോൾ- എന്ന് എഴുതുന്നില്ല. ബൂട്ട്‌സ്‌ട്രാപ്പിന് 4 പ്രത്യേക ക്ലാസുകളുണ്ട്, അവ ബ്ലോക്ക് വലുപ്പങ്ങൾ നിയന്ത്രിക്കാൻ രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു വ്യത്യസ്ത വീതികൾ, അവ ഇതാ:

ld - വലിയ സ്ക്രീനുകൾക്ക്, 1200 പിക്സലിൽ കൂടുതൽ വീതിയുള്ള (ഡെസ്ക്ടോപ്പ് കമ്പ്യൂട്ടറുകൾ);

md - ഇടത്തരം സ്ക്രീനുകൾക്ക്, വീതി 992 മുതൽ 1199 വരെ (കമ്പ്യൂട്ടറുകൾ, നെറ്റ്ബുക്കുകൾ);

sm - ചെറിയ സ്ക്രീനുകൾക്ക്, വീതി 768 മുതൽ 991 വരെ പിക്സലുകൾ (ടാബ്ലെറ്റുകൾ);

xs - അധിക-ചെറിയ സ്‌ക്രീനുകൾ, വീതി 768px-ൽ താഴെ.

ഇവയാണ് 4 ക്ലാസുകൾ, എന്നാൽ മൂലകങ്ങളുടെ വലുപ്പം നിയന്ത്രിക്കുന്നതിന്, 1 മുതൽ 12 വരെയുള്ള സംഖ്യകൾ ഉപയോഗിക്കുന്നു, കാരണം, നിങ്ങൾ ഓർക്കുന്നതുപോലെ, ഗ്രിഡിൽ കൃത്യമായി 12 നിരകൾ ഉണ്ട്.

ഒരു തൊപ്പി

ഉള്ളടക്കം
സൈഡ് കോളം

അടിക്കുറിപ്പ്

മനസ്സിലാക്കാൻ വളരെ എളുപ്പമാണ്. ഒന്നാമതായി, ഞങ്ങൾ ഒരു തലക്കെട്ട് സൃഷ്ടിക്കുന്നു; അത് ഗ്രിഡിൽ സ്ഥാപിക്കേണ്ടതില്ല, കാരണം അത് ഏത് സാഹചര്യത്തിലും വീതിയുടെ 100% (സാധാരണയായി) ഉൾക്കൊള്ളും. എന്നാൽ ഞങ്ങൾ അത് എങ്ങനെയും ഇടും. എന്താണ് ഈ ക്ലാസ് col-md-12? ഞാൻ ഇതിനകം നിങ്ങളോട് പറഞ്ഞതുപോലെ, ആരും ലളിതമായി കോൾ- എഴുതുന്നില്ല, ഈ ക്ലാസ് ഉപയോഗിച്ച് ഞങ്ങൾ പ്രധാനമായും ബ്രൗസറിനോട് പറയുന്നു:
ഇതൊരു കോശമാണ് | കോളം
ഇടത്തരം ഉപകരണങ്ങളിൽ (md class), അതിന്റെ വീതി 12-ൽ 12 നിരകൾ ആയിരിക്കണം, അതായത് വരി വീതിയുടെ 100%.
എന്നാൽ മറ്റ് ഉപകരണങ്ങളിലെ വീതിയുടെ കാര്യമോ? വലിയ (lg) സ്ക്രീനുകളിൽ ഇത് 100% ആയിരിക്കും, കാരണം വലിയ സ്ക്രീനുകൾക്കുള്ള മൂല്യങ്ങൾ പാരമ്പര്യമായി ലഭിക്കുന്നു, എന്നാൽ ചെറിയവയ്ക്ക് അവ അങ്ങനെയല്ല. ഇത് ലളിതമാണ്: നിങ്ങൾ col-xs-4 എന്ന് എഴുതിയാൽ, എല്ലാ ഉപകരണങ്ങളിലും കോളം വീതി 33% ആയിരിക്കും, കൂടാതെ col-lg-4 ആണെങ്കിൽ, വലിയവയിൽ മാത്രം. ഇതാണ് സവിശേഷത, ഓർക്കുക.

ശരി, വീതി മൂല്യം ചെറിയ സ്ക്രീനുകളിൽ സംരക്ഷിച്ചില്ലെങ്കിൽ, പിന്നെ എന്ത് സംഭവിക്കും? ഇത് പുനഃസജ്ജമാക്കുന്നു. ഇത് എങ്ങനെ സംഭവിക്കുന്നു എന്നത് ഇതാ:
col-sm-4 - ചെറിയ സ്‌ക്രീനുകളിൽ ബ്ലോക്ക് വീതിയുടെ 33% ഉൾക്കൊള്ളും, ഇത് md, lg സ്‌ക്രീനുകളിൽ സമാനമായിരിക്കും, എന്നാൽ xs-ൽ, അതായത് ഏറ്റവും ചെറിയവയിൽ, വീതി 100% ആയി പുനഃസജ്ജമാക്കും. അതിനാൽ, ഒരു ലളിതമായ നിയമം കൂടി ഓർക്കുക: ചെറിയ സ്ക്രീനുകൾക്കായി ഒന്നും വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, അവയിൽ ബ്ലോക്ക് 100% വീതിയിൽ പ്രദർശിപ്പിക്കും.

ഉള്ളടക്കം
സൈഡ് കോളം

അടിസ്ഥാനപരമായി ഞങ്ങൾ ബ്രൗസറിനോട് പറയുന്നു:
ഉള്ളടക്ക ബ്ലോക്ക് 12 കോളങ്ങളിൽ 8 വീതിയുള്ളതായിരിക്കട്ടെ, ഈ സാഹചര്യം ചെറുതും ഇടത്തരവും ആയിരിക്കും വലിയ സ്ക്രീനുകൾ(ചെറിയ സ്ക്രീനുകൾക്കായി വ്യക്തമാക്കിയാൽ മതി; വലിയ സ്ക്രീനുകൾക്ക്, നിങ്ങൾ ഓർക്കുന്നതുപോലെ, മൂല്യം പാരമ്പര്യമായി ലഭിക്കുന്നു). എന്നാൽ ഏറ്റവും ചെറിയ സ്ക്രീനുകളിൽ ബ്ലോക്ക് 100% അധിനിവേശമായിരിക്കും. ഇത് ശരിയാണ്; സാധാരണയായി, മൊബൈൽ ഉപകരണങ്ങളിൽ, സൈറ്റുകൾ 1 കോളത്തിൽ ദൃശ്യമാകും.
ഒരേ ചെറുതും ഇടത്തരവും വലുതുമായ സ്‌ക്രീനുകളിൽ സൈഡ് കോളം വരിയുടെ വീതിയുടെ മൂന്നിലൊന്ന് ആയിരിക്കട്ടെ. ശരി, ഏറ്റവും ചെറിയവയിൽ, നിങ്ങൾ ഇതിനകം മനസ്സിലാക്കിയതുപോലെ, അതിന്റെ വീതിയും 100% ആയി പുനഃസജ്ജമാക്കിയിരിക്കുന്നു. അത് വളരെ ലളിതമാണ്.

ശരി, അടിക്കുറിപ്പ് കൈകാര്യം ചെയ്യാൻ ഒന്നുമില്ല. നന്നായി, അടിസ്ഥാന തത്വങ്ങൾഞങ്ങൾ ഗ്രിഡിന്റെ പ്രവർത്തനരീതികൾ ക്രമീകരിച്ചു, പക്ഷേ അത് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് നമുക്ക് കാണേണ്ടതുണ്ട്...

ബൂട്ട്സ്ട്രാപ്പ് നെസ്റ്റഡ് ഗ്രിഡ്

ഇപ്പോൾ ഞങ്ങൾ ടെംപ്ലേറ്റ് പ്രധാന ബ്ലോക്കുകളായി വിഭജിച്ചു എന്നതാണ് വസ്തുത, എന്നാൽ ഉള്ളിൽ അവ നിരകളായി വിഭജിക്കാം. ഉദാഹരണത്തിന്, ഉള്ളടക്കം നിരവധി നിരകളിൽ ഉൽപ്പന്നങ്ങൾ പ്രദർശിപ്പിച്ചേക്കാം. ഞാൻ എന്ത് ചെയ്യണം? ഇത് വളരെ ലളിതമാണ് - ഞങ്ങൾ അകത്ത് ഒരേ ഗ്രിഡ് സൃഷ്ടിക്കുന്നു. ഇത് നെസ്റ്റ് ചെയ്യും, മാത്രമല്ല 12 കോളങ്ങളും അടങ്ങിയിരിക്കുന്നു. ഇതെല്ലാം സംഗ്രഹിച്ചാൽ, ഞങ്ങൾ ഈ നിഗമനത്തിലെത്തുന്നു:
ഏത് ബ്ലോക്കിലും പരിധിയില്ലാത്ത ഗ്രിഡുകൾ ഉണ്ടാകാം. ഉദാഹരണത്തിന്, ഉൽപ്പന്നങ്ങളുള്ള ഒരു ബ്ലോക്കിൽ ഉൽപ്പന്നങ്ങൾ വേർതിരിക്കുന്നതിന് ഒരു ഗ്രിഡ് ഉണ്ട്; ഒരു ഉൽപ്പന്നമുള്ള ബ്ലോക്കിൽ തന്നെ, നിങ്ങൾക്ക് മറ്റൊരു ഗ്രിഡ് സൃഷ്ടിക്കാൻ കഴിയും, ഉദാഹരണത്തിന്, വിലകൾ, ലഭ്യത വിവരങ്ങൾ, അധിക വിവരങ്ങൾ എന്നിവ വേർതിരിക്കാൻ. വിവരങ്ങൾ.

3 നിരകളിലായി ഉൽപ്പന്നങ്ങൾ ക്രമീകരിക്കുന്നതിന് ഞങ്ങൾ ഇപ്പോൾ ഉള്ളടക്ക ബ്ലോക്കിനുള്ളിൽ മറ്റൊരു ഗ്രിഡ് നിർമ്മിക്കാൻ ശ്രമിക്കും. അതിനാൽ, നമുക്ക് ഉള്ളടക്കമുള്ള ബ്ലോക്ക് എടുക്കാം:

ഉള്ളടക്കം

ഞങ്ങൾ അതിൽ എഴുതുന്നു:

കാറ്റലോഗ്:


ഉത്പന്നത്തിന്റെ പേര്

ഉൽപ്പന്ന വിവരണം

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഞങ്ങൾ ഉള്ളടക്കത്തിനുള്ളിൽ ഒരു പുതിയ ഗ്രിഡ് സൃഷ്ടിച്ചു - ഞങ്ങൾ അകത്ത് ഒരു വരി ഇട്ടു, വരിയിൽ ഇതിനകം ഉൽപ്പന്നങ്ങളുള്ള 3 ബ്ലോക്കുകൾ ഉണ്ടാകും. ഉൽപ്പന്ന കാർഡ് ഉപയോഗിച്ച് col-sm-4 ബ്ലോക്ക് പകർത്തി 2 തവണ കൂടി ഒട്ടിക്കുക, ഇതാണ് നിങ്ങൾക്ക് ലഭിക്കുന്നത് (നിങ്ങൾക്ക് ഏത് ഉൽപ്പന്ന ചിത്രവും എടുക്കാം, ഞാൻ ഒരു വലിയ ചിത്രമെടുത്തു):

മറ്റൊന്ന് നഷ്ടമായി പ്രധാനപ്പെട്ട പോയിന്റ്ഇമേജുകൾ അവ സ്ഥിതിചെയ്യുന്ന ബ്ലോക്കുകളുമായി പൊരുത്തപ്പെടുന്നതിന്, അവയിൽ ഓരോന്നിനും img-റെസ്പോൺസീവ് ക്ലാസ് നൽകേണ്ടതുണ്ട്. എന്നെപ്പോലെ നിങ്ങൾക്കും ഇത് ചെയ്യുന്നത് അസൗകര്യമാണെന്ന് തോന്നുന്നുവെങ്കിൽ, നിങ്ങളുടെ സ്വന്തം ശൈലിയിൽ.css ഇതുപോലെ എഴുതുക:

Img (പരമാവധി വീതി: 100%; ഉയരം: ഓട്ടോ; ഡിസ്പ്ലേ: ബ്ലോക്ക്; )

അത്രയേയുള്ളൂ, ഈ കോഡ് സംരക്ഷിച്ച് നിങ്ങളുടെ css ഫയൽ പ്രോജക്റ്റിലേക്ക് ബന്ധിപ്പിക്കുക. ഇപ്പോൾ ചിത്രങ്ങൾ ഡിഫോൾട്ടായി അഡാപ്റ്റീവ് ആയിരിക്കും.

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

അതിനാൽ, ഏത് ബ്ലോക്കിലും നിങ്ങൾക്ക് ഇഷ്ടമുള്ളത്ര കോളങ്ങൾ സൃഷ്ടിക്കാനും ഏത് സങ്കീർണ്ണതയുടെ ഒരു ടെംപ്ലേറ്റ് ഉണ്ടാക്കാനും കഴിയും. ബൂട്ട്‌സ്‌ട്രാപ്പ് ഇല്ലാത്തതിനേക്കാൾ വേഗമേറിയതാണ് ഇതെല്ലാം, കാരണം നിങ്ങൾ ആദ്യം മുതൽ എല്ലാ css-ഉം എഴുതേണ്ടതുണ്ട്.

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

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ മറ്റൊരു മികച്ച സവിശേഷതയാണിത്. നിങ്ങൾക്ക് ആവശ്യമുള്ള വീതിയിൽ ഏതെങ്കിലും ബ്ലോക്കുകൾ മറയ്ക്കാനോ ദൃശ്യമാക്കാനോ കഴിയും എന്ന വസ്തുത ഇതിൽ അടങ്ങിയിരിക്കുന്നു. ഉദാഹരണത്തിന്, ഇടുങ്ങിയ സ്ക്രീനുകളിൽ സൈഡ് കോളം പൂർണ്ണമായും മറയ്ക്കുക, മൊബൈൽ ഉപകരണങ്ങളിൽ ചില പുതിയ ഘടകങ്ങൾ ചേർക്കുക, ഒരു കോളം ചേർക്കുക വിശാലമായ സ്ക്രീനുകൾതുടങ്ങിയവ.

ധാരാളം ആപ്ലിക്കേഷൻ ഓപ്ഷനുകൾ ഉണ്ട്, എന്നാൽ ഏറ്റവും പ്രധാനപ്പെട്ട കാര്യത്തെക്കുറിച്ച് ഞാൻ നിങ്ങളോട് പറഞ്ഞില്ല: ഈ യൂട്ടിലിറ്റികൾ എങ്ങനെ ഉപയോഗിക്കാം? ഇത് ചെയ്യുന്നതിന്, ക്ലാസുകൾ ചേർക്കുക ആവശ്യമുള്ള ബ്ലോക്ക്. നിങ്ങൾക്ക് ഇത് മറയ്ക്കണമെങ്കിൽ, ഇനിപ്പറയുന്ന ക്ലാസ് വ്യക്തമാക്കുക:

അടിക്കുറിപ്പ്

എന്തിൽ ഈ സാഹചര്യത്തിൽക്ലാസ് ഹിഡൻ-xs ആക്കുമോ? അധിക ചെറിയ ഉപകരണങ്ങളിൽ ഇത് അടിക്കുറിപ്പ് മറയ്ക്കും. മറ്റുള്ളവയിൽ ബ്ലോക്ക് ദൃശ്യമാകും.

നേരെമറിച്ച്, നിങ്ങൾ അത് ഏറ്റവും ചെറിയ സ്ക്രീനുകളിൽ മാത്രം കാണിക്കണമെങ്കിൽ, നിങ്ങൾ ദൃശ്യമായ-xs-ബ്ലോക്ക് ക്ലാസ് ഉപയോഗിക്കേണ്ടതുണ്ട്. ഈ സാഹചര്യത്തിൽ, ഇടുങ്ങിയ സ്ക്രീനുകൾ ഒഴികെ മറ്റെല്ലായിടത്തും ബ്ലോക്ക് മറയ്ക്കപ്പെടും. അതിനാൽ, അഡാപ്റ്റീവ് യൂട്ടിലിറ്റി ക്ലാസുകൾ ഇതുപോലെ എഴുതിയിരിക്കുന്നു:

നിങ്ങൾക്ക് ആവശ്യമുള്ളതിനെ ആശ്രയിച്ച്, മറഞ്ഞിരിക്കുന്നതോ ദൃശ്യമായതോ ആയ വാക്ക്

xs, sm, md അല്ലെങ്കിൽ lg എന്ന ചുരുക്കെഴുത്ത് ഏത് സ്‌ക്രീനിലാണ് ബ്ലോക്ക് മറയ്‌ക്കേണ്ടത് അല്ലെങ്കിൽ കാണിക്കേണ്ടത് എന്ന് സൂചിപ്പിക്കുന്നത്.

ദൃശ്യമാകുന്നതിന് നിങ്ങൾ മൂന്ന് മൂല്യങ്ങളിൽ ഒന്ന് കൂടി ചേർക്കേണ്ടതുണ്ട്: ബ്ലോക്ക് - ഘടകം ഒരു ബ്ലോക്ക് ഘടകമായി പ്രദർശിപ്പിക്കുക, ഇൻലൈൻ-ബ്ലോക്ക് - ഒരു ഇൻലൈൻ-ബ്ലോക്ക് ഘടകമായി, ഇൻലൈൻ - ഇൻലൈൻ.

ശരി, ഇത് വ്യക്തമാക്കുന്നതിന് കുറച്ച് ഉദാഹരണങ്ങൾ:

Hidden-xs hidden-lg - ഏറ്റവും ചെറുതും വലുതുമായ സ്ക്രീനുകളിൽ ഘടകം മറയ്ക്കും. നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഒരു സ്‌പെയ്‌സ് കൊണ്ട് വേർതിരിച്ചിരിക്കുന്ന ഒന്നിലധികം ക്ലാസുകൾ നിങ്ങൾക്ക് വ്യക്തമാക്കാം.

ദൃശ്യ-xs-inline visual-md-block - ചെറുതും വലുതുമായ സ്‌ക്രീനുകളിൽ ഈ ഘടകം ദൃശ്യമാകില്ല. അധിക-ചെറിയവയിൽ ഇത് ചെറിയക്ഷരമായിരിക്കും, ഇടത്തരം ഉള്ളവയിൽ ഇത് ഒരു ബ്ലോക്കായിരിക്കും.

ദൃശ്യ-lg-ബ്ലോക്ക് - ഏറ്റവും വലിയ സ്‌ക്രീനുകളിൽ മാത്രമേ ഘടകം ദൃശ്യമാകൂ, മറ്റുള്ളവയിൽ അത് മറയ്‌ക്കും

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

ടാസ്‌ക്: ചെറിയ സ്‌ക്രീനുകളിൽ സൈഡ് കോളം അപ്രത്യക്ഷമാക്കുന്നതിനും ഏറ്റവും ചെറിയ സ്‌ക്രീനുകളിൽ ഒരു ഉൽപ്പന്നത്തിനും. അതിനാൽ xs ഉപകരണങ്ങളിൽ ഉൽപ്പന്നങ്ങൾ ഇതിനകം 2 നിരകളിലാണ്, 3 അല്ല.

html കോഡ് മാത്രം എഡിറ്റ് ചെയ്ത് അത് സ്വയം ചെയ്യാൻ ശ്രമിക്കുക. എന്താണ് ചെയ്യേണ്ടത്? ആദ്യം, നമുക്ക് കോളം നോക്കാം, അത് sm സ്‌ക്രീനുകളിൽ മറയ്‌ക്കാൻ, നിങ്ങൾ അതിൽ മറഞ്ഞിരിക്കുന്ന-sm ക്ലാസ് ചേർക്കേണ്ടതുണ്ട്.

കൊള്ളാം, ഇപ്പോൾ മൂന്നാമത്തെ ഉൽപ്പന്നത്തിന് മറഞ്ഞിരിക്കുന്ന-xs ക്ലാസ് ചേർക്കേണ്ടതുണ്ട്, അത് ഏറ്റവും ചെറിയ സ്ക്രീനുകളിൽ അപ്രത്യക്ഷമാകും. ശരി, ശേഷിക്കുന്ന രണ്ട് സാധനങ്ങളുടെ ക്ലാസുകൾ ഇപ്രകാരമായിരിക്കും:

അതായത്, ഇടത്തരം ഉപകരണങ്ങളിൽ ബ്ലോക്ക് 12-ൽ 4 നിരകൾ ഉൾക്കൊള്ളും, അത് വീതിയുടെ 33.33% ആയി വിവർത്തനം ചെയ്യാൻ കഴിയും, കൂടാതെ അധിക-ചെറിയ ഉപകരണങ്ങളിൽ - 50%. ഒരു ഉൽപ്പന്നമുള്ള ഒരു ബ്ലോക്ക് ഈ വീതിയിൽ അപ്രത്യക്ഷമാകുന്നതിനാൽ, ഉൽപ്പന്നങ്ങളുള്ള രണ്ട് ബ്ലോക്കുകളും 1 വരിയിൽ ഭംഗിയായി ക്രമീകരിക്കും, ഇതുപോലെ:


കൊള്ളാം! ഇത് മനസിലാക്കിയ ശേഷം, നിങ്ങൾക്ക് താൽപ്പര്യമുള്ള ഏത് വിധത്തിലും വെബ് പേജിലെ ബ്ലോക്കുകൾ കൈകാര്യം ചെയ്യാൻ കഴിയും. നിങ്ങൾക്കായി ചുമതലകൾ കൊണ്ടുവരാനും അവ നടപ്പിലാക്കാനും ശ്രമിക്കുക.

എന്നെ എല്ലാ വഴിക്കും നീക്കുക

അടുത്തതായി ഞാൻ നിങ്ങൾക്ക് മറ്റൊരു മികച്ച ട്രിക്ക് കാണിക്കും - ഒരു ബ്ലോക്ക് വലത്തോട്ടോ ഇടത്തോട്ടോ നീക്കാനുള്ള കഴിവ്. നമുക്ക് ഒരു നിരയിൽ 3 ഉൽപ്പന്നങ്ങൾ ഇല്ലെന്ന് പറയാം, എന്നാൽ 1. അത് മുഴുവൻ വീതിയും ഉൾക്കൊള്ളുന്നില്ല. നിങ്ങളുടെ ചുമതല അതിനെ മധ്യഭാഗത്ത് വിന്യസിക്കുക എന്നതാണ്. നിങ്ങൾ 12-കോളം സംവിധാനത്തിലാണ് പ്രവർത്തിക്കുന്നതെന്ന് മനസ്സിൽ വെച്ചാൽ ഇത് ചെയ്യാൻ എളുപ്പമാണ്.

ഉൽപ്പന്നത്തിനൊപ്പം ഒരു ബ്ലോക്ക് വിടാം:

ഉൽപ്പാദിപ്പിച്ചാൽ മതി ലളിതമായ കണക്കുകൂട്ടലുകൾ, ബ്ലോക്ക് കേന്ദ്രത്തിലേക്ക് എത്രത്തോളം നീക്കണമെന്ന് മനസിലാക്കാൻ. ഇടത്തരം, വലിയ സ്‌ക്രീനുകളിൽ 4 നിരകൾ ഇടത്തോട്ടും ചെറിയവയിൽ 3 നിരകളും നീക്കേണ്ടതുണ്ട്. ഇത് ഇതുപോലെ കാണപ്പെടുന്നു:

ക്ലാസ് col-md-offset-4 പറയുന്നു: ഇടത്തരം, വലിയ സ്‌ക്രീനുകളിൽ, പാരന്റ് കണ്ടെയ്‌നറിന്റെ വീതിയുടെ 33% ഇടത്തേക്ക് ബ്ലോക്ക് ഓഫ്‌സെറ്റ് ചെയ്യുക (1/3 ഇടത് ഓഫ്‌സെറ്റ്, 1/3 ബ്ലോക്ക് വീതി, ⅓ വലത് ഓഫ്‌സെറ്റ്, കേന്ദ്രീകരണത്തിന് കാരണമാകുന്നു).
ക്ലാസ് col-xs-offset-6: അധിക-ചെറുതും ചെറുതുമായ സ്‌ക്രീനുകളിൽ, ഇടത്തേക്ക് 25% മാറ്റുക (¼ പാഡിംഗ് ഇടത്തേക്ക്, ½ ബ്ലോക്ക് വീതി, ¼ പാഡിംഗ് വലത്തേക്ക്).

നിങ്ങൾ സാരാംശം മനസ്സിലാക്കുകയും ആവശ്യമെങ്കിൽ ഈ ക്ലാസുകൾ ഉപയോഗിക്കുകയും ചെയ്യുമെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു.

ബൂട്ട്സ്ട്രാപ്പ് ഘടകങ്ങളും അവയുടെ ഉപയോഗത്തിന്റെ ഉദാഹരണങ്ങളും

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

ഫാസ്റ്റ് ഫ്ലോട്ടുകളും റാപ് ക്യാൻസലേഷനും

പുൾ-ലെഫ്റ്റ്, പുൾ-റൈറ്റ് ക്ലാസുകൾ ഇടത്തോട്ടോ വലത്തോട്ടോ അയച്ചുകൊണ്ട് ഏത് ബ്ലോക്ക് ഫ്ലോട്ടും വേഗത്തിൽ ഉണ്ടാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഒഴുക്ക് റദ്ദാക്കുന്നതിനെക്കുറിച്ച് മറക്കരുത്. ഇതിനായി നിങ്ങൾക്ക് ക്ലിയർഫിക്സ് ക്ലാസ് ഉപയോഗിക്കാം.

ബൂട്ട്സ്ട്രാപ്പ്: തിരശ്ചീനമായി പ്രതികരിക്കുന്ന (മൊബൈൽ) മെനു

ഞങ്ങൾ ഇനിപ്പറയുന്ന ഘടകങ്ങൾ നേരിട്ട് ടെംപ്ലേറ്റിലേക്ക് ചേർക്കും, അതിനാൽ നിങ്ങൾക്ക് കോഡ് ഉപയോഗിച്ച് പ്രവർത്തിക്കാനും വായിക്കാനും താൽപ്പര്യമുണ്ടെങ്കിൽ, എനിക്ക് ശേഷമുള്ള എല്ലാ ഘട്ടങ്ങളും പിന്തുടരുക.

യഥാർത്ഥത്തിൽ, ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് ഇത് ചെയ്യാൻ വളരെ എളുപ്പമാണ് പ്രതികരിക്കുന്ന മെനു, കൂടാതെ മൊബൈൽ എന്ന് വിളിക്കപ്പെടുന്ന ഒന്ന്, ചെറിയ സ്ക്രീനുകളിൽ പൂർണ്ണമായും ചെറുതാക്കി ഒരു ബട്ടണിന് കീഴിൽ മറയ്ക്കുന്നു. ഈ വിദ്യ പലരിലും കാണാൻ കഴിയും അഡാപ്റ്റീവ് ടെംപ്ലേറ്റുകൾഇത് യഥാർത്ഥത്തിൽ നടപ്പിലാക്കാൻ വളരെ എളുപ്പമാണ്. ഉദാഹരണ കോഡ് മൊബൈൽ മെനുഡോക്യുമെന്റേഷനിൽ ഉണ്ട്, ഞാൻ അത് അവിടെ നിന്ന് എടുത്ത് കുറച്ച് വീണ്ടും ചെയ്യാം.

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

സ്വിച്ച് ബട്ടൺ




ലോഗോ/പേര്

• സൈക്ലിംഗ്


• മോട്ടോർസ്പോർട്സ്


• 
  വ്യായാമ ഉപകരണങ്ങൾ
  
  
  
  • ചവിട്ടുപടികൾ
  
  
  • എലിപ്റ്റിക്കൽ പരിശീലകർ
  
  
  • ബെഞ്ചുകൾ
  
  
  
  

തിരയുക

ധാരാളം കോഡുകൾ ഉണ്ടെന്ന വസ്തുതയിൽ പരിഭ്രാന്തരാകരുത്. സൈറ്റ് ഇപ്പോൾ ഇങ്ങനെയാണ് കാണപ്പെടുന്നത്:


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

അതായത്, നിങ്ങൾക്ക് വീതി പരിമിതപ്പെടുത്താനും മധ്യഭാഗത്ത് നൽകാനും കഴിയും. അല്ലെങ്കിൽ ആദ്യം കണ്ടെയ്നർ-ഫ്ലൂയിഡിനെ കണ്ടെയ്നർ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുക.


നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഞങ്ങൾ മെനുവിലേക്ക് ഒരു ലോഗോ, രണ്ട് ലളിതമായ ഇനങ്ങൾ, ഒരു ഡ്രോപ്പ്-ഡൗൺ ഇനം, ഒരു തിരയൽ ഫോം എന്നിവ ചേർത്തു. അതായത്, പല ഘടകങ്ങളും ഉണ്ടായിരുന്നു. നിങ്ങളുടെ സ്വന്തം ക്ലാസുകൾ ചേർത്തുകൊണ്ട് നിങ്ങൾക്ക് മെനു എളുപ്പത്തിൽ ഇഷ്ടാനുസൃതമാക്കാനാകും. എന്നാൽ ഇപ്പോൾ എന്റെ ലക്ഷ്യം ഈ ഘടകം നിങ്ങളെ കാണിക്കുക എന്നതാണ്.

768 പിക്സലിൽ താഴെയുള്ള സ്ക്രീൻ വീതിയുള്ള ഉപകരണങ്ങളിൽ മെനു ഇങ്ങനെയാണ് കാണപ്പെടുന്നത്:


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

ഡ്രോപ്പ് ഡൗൺ മെനു

അതേ സമയം, ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ഒരു ഡ്രോപ്പ്-ഡൗൺ മെനു ഇനം സൃഷ്‌ടിക്കുന്നത് എങ്ങനെയെന്ന് മുകളിലെ ഉദാഹരണത്തിൽ നിന്ന് നിങ്ങൾക്ക് മനസ്സിലാക്കാം; കൂടുതൽ കാര്യങ്ങൾക്കായി നമുക്ക് ഈ കോഡ് എക്‌സ്‌ട്രാക്‌റ്റ് ചെയ്യാം വിശദമായ പരിഗണന:

വ്യായാമ ഉപകരണങ്ങൾ

• ചവിട്ടുപടികൾ


• എലിപ്റ്റിക്കൽ പരിശീലകർ


• ബെഞ്ചുകൾ

അതിനാൽ, ഒരു ഡ്രോപ്പ്-ഡൗൺ ഇനത്തിനായുള്ള കണ്ടെയ്നർ ഡ്രോപ്പ്ഡൗൺ ക്ലാസുള്ള ഒരു സാധാരണ ലിസ്റ്റ് ഇനമാണ്. അതിനുള്ളിൽ പ്രധാന ലിങ്ക് ഉണ്ട്, അതിൽ ക്ലിക്കുചെയ്യുന്നത് ഒരു ഡ്രോപ്പ്-ഡൗൺ മെനു തുറക്കുന്നു. കോഡിൽ നിങ്ങൾ കാണുന്ന ഒരു ഡാറ്റ ആട്രിബ്യൂട്ട് നൽകേണ്ടത് വളരെ പ്രധാനമാണ്; അതില്ലാതെ, ഒന്നും പ്രവർത്തിക്കില്ല. bootstrap.js ഫയൽ വെബ് പേജുകളുമായി ബന്ധിപ്പിച്ചിട്ടുണ്ടെന്നും നിങ്ങൾ ഉറപ്പാക്കണം.

കാരറ്റ് ക്ലാസുള്ള ഒരു സ്പാൻ ഒരു അമ്പടയാളമല്ലാതെ മറ്റൊന്നുമല്ല, ഇനം ഒരു ഡ്രോപ്പ്-ഡൗൺ ഇനമാണെന്ന് നിങ്ങൾക്ക് മനസിലാക്കാൻ കഴിയും, കൂടാതെ മെനുവിന് താഴെ തന്നെ സ്റ്റാൻഡേർഡ് ഉപയോഗിച്ച് രൂപം കൊള്ളുന്നു. ബുള്ളറ്റഡ് ലിസ്റ്റ്. അത്രയേയുള്ളൂ, എല്ലാം വളരെ ലളിതമാണ്, ഡ്രോപ്പ്-ഡൗൺ ഇനങ്ങൾ നടപ്പിലാക്കാൻ നിങ്ങൾക്ക് ഈ കോഡ് ഉപയോഗിക്കാം.

ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിച്ച് ബ്രെഡ്ക്രംബ്സ് (ബ്രെഡ്ക്രംബ്സ്) ചേർക്കുന്നു

പല സ്റ്റോറുകളിലും നിങ്ങൾക്ക് ബ്ലോക്ക് എന്ന് വിളിക്കപ്പെടുന്നവ കണ്ടെത്താം അപ്പം നുറുക്കുകൾ, ഇതിൽ അടങ്ങിയിരിക്കുന്നു മുഴുവൻ പാതലേക്ക് നിലവിലെ പേജ്. ചട്ടക്കൂട് ഉപയോഗിച്ച് ഇത് ചെയ്യാൻ എളുപ്പമാണ്, കോഡ് കാണുക:

വീട്

കാറ്റലോഗ്

സാധനങ്ങൾ

വാസ്തവത്തിൽ, ഒരു അക്കമിട്ട ലിസ്റ്റിനായി ബ്രെഡ്ക്രംബ് ക്ലാസ് വ്യക്തമാക്കിയാൽ മതി, അതിൽ സാധാരണ ലിസ്റ്റ് ഇനങ്ങൾ നൽകുക. വഴിയിൽ, ഞാൻ ടെംപ്ലേറ്റിലെ രണ്ടാം ലെവൽ തലക്കെട്ടുകൾ കേന്ദ്രീകരിക്കും (ഇത് css-ൽ എഴുതേണ്ടതുണ്ട്):

H2(ടെക്‌സ്റ്റ് അലൈൻ: സെന്റർ;)

ബ്രെഡ്ക്രംബ്സിന്റെ രൂപം എങ്ങനെയെങ്കിലും മാറ്റണമെങ്കിൽ, CSS-ൽ .breadcrumb സെലക്ടർ ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, ഈ രീതിയിൽ നിങ്ങൾക്ക് നീക്കംചെയ്യാം പശ്ചാത്തല നിറം:

ബ്രെഡ്ക്രംബ് (പശ്ചാത്തലം: സുതാര്യം;)

സൈറ്റ് ഇപ്പോൾ ഇങ്ങനെയാണ് കാണപ്പെടുന്നത്:

ബൂട്ട്സ്ട്രാപ്പ് പട്ടികകൾ

സ്ഥിരസ്ഥിതിയായി, ടേബിൾ മുഴുവൻ വിൻഡോയിലും നീട്ടും, അതിനാൽ അളവുകൾ പരിമിതപ്പെടുത്തുന്നതിന് പരിമിതമായ വീതിയുള്ള ഒരു ബോക്സിൽ പൊതിയുക. സ്ഥിരസ്ഥിതിയായി ഇത് ഭയങ്കരമായി തോന്നുന്നു, പക്ഷേ നിങ്ങൾ ടേബിൾ ടാഗിലേക്ക് ടേബിൾ ക്ലാസ് ചേർക്കുകയാണെങ്കിൽ, എല്ലാം വളരെ മികച്ചതായിരിക്കും:

ഈ പതിപ്പിൽ, സെല്ലുകൾക്ക് അടിയിൽ മാത്രമേ വ്യക്തമായ ബോർഡറുകൾ ഉള്ളൂ എന്നത് ശ്രദ്ധിക്കുക; നിങ്ങൾക്ക് നാല് വശങ്ങളിലും ബോർഡറുകൾ വേണമെങ്കിൽ, നിങ്ങൾ മറ്റൊരു ക്ലാസ് ചേർക്കേണ്ടതുണ്ട്:

നിങ്ങൾക്ക് പട്ടിക വരയുള്ളതാക്കണമെങ്കിൽ, അതായത്, വരികൾക്ക് ഒന്നിടവിട്ട പശ്ചാത്തല വർണ്ണം ലഭിക്കുന്നതിന്, പട്ടിക വരയുള്ള ക്ലാസ് ചേർക്കുക. നിങ്ങൾ ഒരു ടേബിൾ വരിയിൽ ഹോവർ ചെയ്യുമ്പോൾ മറ്റൊരു നിറം ഹൈലൈറ്റ് ചെയ്യാൻ, ടേബിൾ-ഹോവർ ക്ലാസ് ഉപയോഗിക്കുക.

തത്വത്തിൽ, ഇവയെല്ലാം പട്ടികകളുടെ സാധ്യതകളാണ്. ഒരു അഡാപ്റ്റീവ് ടേബിൾ എങ്ങനെ നിർമ്മിക്കാം എന്നതിനെക്കുറിച്ച് ഞാൻ ഇതിനകം ഒരു പ്രത്യേക ലേഖനം എഴുതി, അതിനാൽ ഞാൻ അത് ആവർത്തിക്കില്ല. വിവരങ്ങൾ, വിജയം, മുന്നറിയിപ്പ് തുടങ്ങിയ ക്ലാസുകളും പട്ടികയുടെ വരികളിലേക്കും സെല്ലുകളിലേക്കും ആവശ്യമുള്ള നിറത്തിൽ വരയ്ക്കാൻ നിങ്ങൾക്ക് കഴിയും എന്നതാണ് ഏക കാര്യം.

സ്വാഭാവികമായും, നിങ്ങൾക്ക് നിങ്ങളുടെ സ്വന്തം ക്ലാസുകൾ style.css-ൽ എളുപ്പത്തിൽ എഴുതാനും അവ ഉപയോഗിക്കാനും കഴിയും. ഇവിടെയാണ് ഞങ്ങൾ പട്ടികകൾ പൂർത്തിയാക്കുന്നത്.

പി.എസ്. ലേഖനം കൂട്ടിച്ചേർക്കുകയും അനുബന്ധമായി നൽകുകയും ചെയ്യും...

താഴത്തെ വരി

ലേഖനം ഉപയോഗപ്രദമായിരുന്നുവെന്നും നിങ്ങൾക്ക് ഏറ്റവും പ്രധാനപ്പെട്ട കാര്യങ്ങൾ മനസ്സിലാക്കാൻ കഴിഞ്ഞുവെന്നും ഞാൻ പ്രതീക്ഷിക്കുന്നു. അഭിപ്രായങ്ങൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് എന്തെങ്കിലും ചോദ്യങ്ങൾ ചോദിക്കാം.

2 വോട്ടുകൾ

ആരംഭ-ഭാഗ്യം ബ്ലോഗിന്റെ പേജുകളിലേക്ക് സ്വാഗതം. ഭാഗ്യം ഇവിടെ തുടങ്ങുന്നു. നിങ്ങൾ കഴിയുന്നത്ര എളുപ്പത്തിൽ നല്ലതും യോഗ്യതയുള്ളതുമായ ഒരു വെബ്‌സൈറ്റ് സൃഷ്‌ടിക്കാൻ ശ്രമിക്കുകയാണെങ്കിലും പ്രോഗ്രാമുകളും എല്ലാ നിബന്ധനകളും കോഡുകളും ഇതുവരെ പൂർണ്ണമായി മനസ്സിലാക്കിയിട്ടില്ലെങ്കിൽ, ഈ ലേഖനം നിങ്ങൾക്കുള്ളതാണ്.

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

ബൂട്ട്സ്ട്രാപ്പിനെക്കുറിച്ച് കുറച്ച്

ഒരു ചട്ടക്കൂട് എന്താണെന്ന് എന്റെ എല്ലാ വായനക്കാർക്കും നന്നായി മനസ്സിലായിട്ടില്ലെന്നും അത് സ്വന്തമായി ഡൗൺലോഡ് ചെയ്യാനും കണ്ടുപിടിക്കാനും ഇതിനകം കഴിഞ്ഞുവെന്ന് ഞാൻ അനുമാനിക്കുന്നു. അവർക്കായി പ്രത്യേകം വിവരങ്ങളോടെ ഞാൻ ആരംഭിക്കും. അടുത്തിടെ ഞാൻ അഡാപ്റ്റീവ് ലേഔട്ടിനെക്കുറിച്ച് എഴുതുകയും ബൂട്ട്സ്ട്രാപ്പിനെ ഒരു പ്രോഗ്രാം എന്ന് വിളിക്കുകയും ചെയ്തു. ചട്ടക്കൂട് അങ്ങനെയല്ലെങ്കിലും, ധാരണ ലളിതമാക്കാനാണ് ഞാൻ ഇത് ചെയ്തത്.

ഇത് ഒരു കൂട്ടം ആപ്ലിക്കേഷനുകൾ, സ്ക്രിപ്റ്റുകൾ അല്ലെങ്കിൽ പ്ലഗിന്നുകൾ, സൈറ്റിൽ പ്രത്യേക ഫോമുകൾ സൃഷ്ടിക്കുന്നത് എളുപ്പമാക്കുന്നു, ചിത്രങ്ങളുള്ള കറൗസലുകൾ, മൊബൈൽ ഉപകരണങ്ങളിൽ സൈറ്റ് കാണിക്കുക അല്ലെങ്കിൽ ഇത് ചെയ്യാതിരിക്കുക തുടങ്ങിയവ.

നിങ്ങൾക്ക് ഇതിനകം അറിയാവുന്നതുപോലെ, ഈ ഓരോ പ്രവർത്തനത്തിനും പ്രോഗ്രാമർ കോഡ് തയ്യാറാക്കുകയും എഴുതുകയും വേണം. നിങ്ങൾ ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിക്കുകയാണെങ്കിൽ, നിങ്ങൾ ഇത് ചെയ്യേണ്ടതില്ല. നിങ്ങൾ ഒരു റെഡിമെയ്ഡ് ടെംപ്ലേറ്റ് എടുത്ത് നിങ്ങൾ ആഗ്രഹിക്കുന്നതുപോലെ മാറ്റുക. തൽഫലമായി, ജോലി സമയം ഗണ്യമായി കുറയുന്നു.

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

സാധ്യതകൾ

css, JavaScript, ഘടകങ്ങൾ എന്നീ വിഭാഗങ്ങളിൽ റഷ്യൻ ഡോക്യുമെന്റേഷൻ ഉള്ള വെബ്‌സൈറ്റിൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് 3-ന്റെ കഴിവ് എന്താണെന്ന് നിങ്ങൾക്ക് കാണാൻ കഴിയും. ആവശ്യമുള്ള ടാബിൽ ക്ലിക്കുചെയ്തതിനുശേഷം, വലതുവശത്ത് വളരെ സൗകര്യപ്രദമായ ഒരു മെനു ദൃശ്യമാകുന്നു, അത് പ്രമാണത്തിൽ ആവശ്യമുള്ള സ്ഥലത്തേക്ക് പോകാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

ഇവിടെയുള്ള നിർദ്ദിഷ്ട ഉദാഹരണങ്ങൾ ഒരു പ്രത്യേക പ്രവർത്തനത്തിന് ഉത്തരവാദിയായ കോഡിന്റെ ഭാഗവും ഫലവും എങ്ങനെയാണെന്നും കാണിക്കുന്നു. ഏത് മൊബൈൽ ഉപകരണങ്ങൾക്കും നിങ്ങൾക്ക് ഉള്ളടക്ക ദൃശ്യപരത സജ്ജമാക്കാൻ കഴിയും. അനുമതികളും മറ്റ് ക്രമീകരണങ്ങളും ഇതിനകം പൂർത്തിയായി.

കോഴ്സ് തന്നെ A മുതൽ Z വരെ പരിശീലിക്കുക"ഏകദേശം 17 മണിക്കൂർ നീണ്ടുനിൽക്കും. ഈ സമയത്ത്, നിങ്ങൾ പ്രധാനപ്പെട്ട സൈദ്ധാന്തിക അറിവ് നേടുന്നു, തുടർന്ന് ചില ഘടകങ്ങൾ എങ്ങനെ ശരിയായി ഉപയോഗിക്കാമെന്ന് പരിശീലിക്കുക: കോഡിൽ നിന്ന് ഏതൊക്കെ ഘടകങ്ങൾ നീക്കംചെയ്യണം, സൈറ്റ് വേഗത്തിലാക്കാൻ എന്താണ് വേണ്ടത്, അത് എന്താണെന്നും അതിലേറെയും.

ശരി, ഒരു ബോണസ് കോഴ്‌സ് കൂടി, ചട്ടക്കൂട് കൂടുതൽ കാര്യക്ഷമമായി പ്രവർത്തിക്കാൻ സഹായിക്കുന്ന ബൂട്ട്‌സ്‌ട്രാപ്പിനായുള്ള TOP 4 ആഡ്-ഓണുകൾ.

ശരി, അത് എല്ലാം ആണെന്ന് തോന്നുന്നു. വാർത്താക്കുറിപ്പ് സബ്‌സ്‌ക്രൈബുചെയ്‌ത് ഇതിനെക്കുറിച്ച് കൂടുതലറിയുക ലളിതമായ പരിഹാരങ്ങൾസങ്കീർണ്ണമായ ജോലികളും ശരിയായ ഉൽപ്പന്നങ്ങളില്ലാതെ പ്രവർത്തിക്കുമ്പോൾ ശരിയായ സമീപനവും.

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

പേരിട്ടിരിക്കുന്ന മെക്കാനിസം ഉപയോഗിക്കുന്നതിന്റെ ഗുണങ്ങളെയും ദോഷങ്ങളെയും കുറിച്ച് ഞാൻ നിങ്ങളോട് വിശദമായി പറയും, ചട്ടക്കൂടിനൊപ്പം പ്രവർത്തിക്കാനുള്ള ഓപ്ഷനുകൾ വിവരിക്കുക, പട്ടികപ്പെടുത്തുക അടിസ്ഥാന ഉപകരണങ്ങൾ, കൂടാതെ കൊടുക്കുക നിർദ്ദിഷ്ട ഉദാഹരണം പ്രോഗ്രാം കോഡ്. ശരി, നമുക്ക് പഠിക്കാൻ തുടങ്ങാം!

നമുക്ക് ഗുണദോഷങ്ങൾ തൂക്കിനോക്കാം

ഞാൻ ഇതിനകം നിരവധി തവണ പോസിറ്റീവ് വിവരിച്ചിട്ടുണ്ട് നെഗറ്റീവ് വശങ്ങൾചട്ടക്കൂടും അതിന്റെ വ്യക്തിഗത ഘടകങ്ങളും. ഇനി ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിക്കുന്നതിന്റെ ഗുണവും ദോഷവും നോക്കാം. നമുക്ക് നേട്ടങ്ങളിൽ നിന്ന് ആരംഭിക്കാം:

• സമയമാണ് ധനം! ചട്ടക്കൂട് ഉപയോഗിക്കുന്നത് എഴുത്ത് സമയം ഗണ്യമായി കുറയ്ക്കുന്നു. എല്ലാം കാരണം നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് ഏറ്റവും അനുയോജ്യമായ ഒരു റെഡിമെയ്ഡ് ടെംപ്ലേറ്റ് നിങ്ങൾ തിരഞ്ഞെടുക്കുകയും അത് പ്രോജക്റ്റിൽ നടപ്പിലാക്കുകയും ചെയ്യുന്നു. അതിനാൽ, എല്ലാ കോഡുകളും ആദ്യം മുതൽ സ്വയം എഴുതുന്നതിനേക്കാൾ വേഗത്തിലാണ് അന്തിമ ഉൽപ്പന്നം ലഭിക്കുന്നത്. കൂടാതെ, വേർഡ്പ്രസ്സ് പോലെയുള്ള നിരവധി എഞ്ചിനുകളിൽ ബൂട്ട്സ്ട്രാപ്പ് ഇതിനകം തന്നെ നടപ്പിലാക്കിയിട്ടുണ്ട്;
• നിരവധി ചെറിയ വിശദാംശങ്ങൾ! അതെ. തീർച്ചയായും, ഒരു വെബ്‌സൈറ്റ് വികസിപ്പിക്കുമ്പോൾ, നിങ്ങൾ നിരവധി അപകടങ്ങൾ, ചെറിയ വിശദാംശങ്ങൾ മുതലായവ കണക്കിലെടുക്കേണ്ടതുണ്ട്. പൊരുത്തപ്പെടുത്തൽ, വസ്തുക്കളുടെ സ്ഥാനത്തിന്റെ ചില സവിശേഷതകൾ, ചില ഘടകങ്ങളുടെ പിന്തുണയെക്കുറിച്ചുള്ള അറിവ് തുടങ്ങിയവ ഇതിൽ ഉൾപ്പെടുന്നു. വികസിപ്പിച്ച ക്ലാസുകളിൽ ആവശ്യമായ കോഡ് ഇതിനകം എഴുതിയിരിക്കുന്നതിനാൽ ബൂട്ട്സ്ട്രാപ്പ് നിങ്ങൾക്കായി ഇതെല്ലാം പരിഹരിക്കുന്നു;
• നടപ്പാക്കുന്നതിനെക്കുറിച്ച്? വ്യക്തിഗത ഉപകരണങ്ങൾ? നിങ്ങൾ എല്ലായ്പ്പോഴും ഉപയോഗിക്കേണ്ടതില്ല റെഡിമെയ്ഡ് ലേഔട്ടുകൾവെബ് സേവന പേജുകൾക്കായി. നിങ്ങൾക്ക് ചേർക്കേണ്ടിവരുമ്പോൾ ചിലപ്പോൾ സാഹചര്യങ്ങൾ ഉണ്ടാകാം, ഉദാഹരണത്തിന്, ഒരു നല്ല മെനു, ഒരു കറൗസൽ സ്ലൈഡർ അല്ലെങ്കിൽ മറ്റ് വസ്തുക്കൾ. ഈ സാഹചര്യത്തിൽ, ബൂട്ട്സ്ട്രാപ്പ് വീണ്ടും രക്ഷാപ്രവർത്തനത്തിലേക്ക് വരുന്നു;
• ഐടി ഡോക്ടർമാരില്ല! ഒരു ഡോക്ടറുടെ കൈയക്ഷരം വായിക്കാൻ പറ്റാത്തതും വായിക്കാൻ പറ്റാത്തതുമാണെന്ന ഒരു ക്ലീഷേ എല്ലാവർക്കും പണ്ടേ ഉണ്ടായിരുന്നു. എന്നാൽ ഇത് പേരുള്ള തൊഴിലിന്റെ ഒരു പ്രതിനിധിക്ക് മാത്രമല്ല സംഭവിക്കുന്നത്. ഡെവലപ്പറുടെ കോഡും മനസ്സിലാക്കാൻ കഴിയാത്തതാണ്. എന്നാൽ ചട്ടക്കൂട് ഉപയോഗിക്കുമ്പോൾ, മറ്റ് ഡെവലപ്പർമാർക്ക് പ്രോഗ്രാം ടെക്സ്റ്റുമായി പ്രവർത്തിക്കാൻ കഴിയും.

എന്നാൽ രാത്രിയില്ലാതെ പകലുമില്ല. അതിനാൽ, ഗുണങ്ങൾക്ക് ശേഷം, ദോഷങ്ങൾ പട്ടികപ്പെടുത്തുന്നത് മൂല്യവത്താണ്:

• ഇത്രയധികം കോഡ് എവിടെ നിന്ന് വരുന്നു? പ്രധാന പ്രശ്നങ്ങളിലൊന്ന് അനാവശ്യ കോഡാണ്. നിങ്ങളുടെ നടപ്പാക്കലിനൊപ്പം ഏതെങ്കിലും ക്ലാസുകൾ ബന്ധിപ്പിക്കുമ്പോൾ, മുഴുവൻ പ്രോജക്‌റ്റിലും ഉപയോഗിക്കാത്ത കൂടുതൽ സോഫ്റ്റ്‌വെയർ പ്രവർത്തനങ്ങൾ, പ്രോപ്പർട്ടികൾ മുതലായവ ഉണ്ട്;
• ക്ലോണുകൾ, ക്ലോണുകൾ... എല്ലാ വൈവിധ്യങ്ങളുണ്ടായിട്ടും നിലവിലുള്ള ടെംപ്ലേറ്റുകൾഇൻറർനെറ്റിൽ, പഠിക്കുന്ന ചട്ടക്കൂട് ഉപയോഗിച്ച് എഴുതിയത്, നിങ്ങൾ സൂക്ഷ്മമായി നോക്കിയാൽ, അവയെല്ലാം പരസ്പരം ചെറുതായി സമാനമാണെന്ന് നിങ്ങൾക്ക് കാണാൻ കഴിയും. അതിനാൽ, നിങ്ങൾ സൈറ്റിന്റെ രൂപം എങ്ങനെ മാറ്റിയാലും, അത് ഇപ്പോഴും ബൂട്ട്സ്ട്രാപ്പ് പോലെ "ഗന്ധം" ആയിരിക്കും;
• ഈ ഡിസൈനിൽ എന്താണ് തെറ്റ്? തീർച്ചയായും, ഒരു റെഡിമെയ്ഡ് ടെംപ്ലേറ്റ് ഉപയോഗിക്കുന്നത് വളരെ സൗകര്യപ്രദമാണ്. എന്നാൽ നിങ്ങളുടെ വെബ് റിസോഴ്സിന് ഒരു പ്രത്യേക ഡിസൈൻ ഉള്ളപ്പോൾ അല്ല. ഫ്രെയിംവർക്ക് ലേഔട്ടുകൾ ഇച്ഛാനുസൃതമാക്കുക ഒരു പുതിയ ശൈലിരജിസ്ട്രേഷൻ വളരെ ബുദ്ധിമുട്ടാണ്. ചിലപ്പോൾ എല്ലാം സ്വയം ചെയ്യുന്നത് വളരെ എളുപ്പമാണ്.

ബൂട്ട്സ്ട്രാപ്പിനൊപ്പം പ്രവർത്തിക്കുന്നതിനുള്ള തത്വങ്ങൾ

ഇന്ന്, നിങ്ങൾക്ക് ഫ്രെയിംവർക്കുമായി പല തരത്തിൽ പ്രവർത്തിക്കാൻ കഴിയും: ബിൽറ്റ്-ഇൻ ബൂട്ട്സ്ട്രാപ്പ് ടൂളുകൾ ഉപയോഗിച്ച് കുറച്ച് ഉപയോഗിക്കാതെയും കുറവ് ഉപയോഗിക്കുകയും ചെയ്യുന്നു. ആദ്യ ഓപ്ഷൻ തുടക്കക്കാർക്ക് അനുയോജ്യമാണ്, രണ്ടാമത്തേത് വിപുലമായ ഐടി സ്പെഷ്യലിസ്റ്റുകൾക്കായി രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതാണ്. ഞാൻ ഒരു ലളിതമായ രീതി ഉപയോഗിച്ച് തുടങ്ങും.

വാസ്തവത്തിൽ, നിങ്ങൾ എന്റെ മുൻ പാഠങ്ങൾ എടുത്തിട്ടുണ്ടെങ്കിൽ, നിങ്ങൾ ഇതിനകം ഈ സമീപനം ഉപയോഗിച്ചു. നിങ്ങളുടെ പ്രോജക്റ്റിലേക്ക് ചട്ടക്കൂട് (ഒരുപക്ഷേ CDN വഴി) ഡൗൺലോഡ് ചെയ്ത് ബന്ധിപ്പിക്കുന്നത് ഇതിൽ ഉൾപ്പെടുന്നു.

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

ഇവിടെ ഒന്നുണ്ട് നെഗറ്റീവ് പോയിന്റ്: നിങ്ങൾക്ക് ധാരാളം ശൈലി നിയമങ്ങൾ മാറ്റണമെങ്കിൽ, ആവശ്യമായ പ്രോപ്പർട്ടികൾ കണ്ടെത്തുന്നതിന് വളരെയധികം സമയമെടുക്കും. ഒരർത്ഥത്തിൽ ഈ പ്രശ്നം പരിഹരിച്ചു പ്രത്യേക ഉപകരണംഇഷ്ടാനുസൃതമാക്കുക.

അത് കൊണ്ട് നിങ്ങൾക്ക് മാറാം അടിസ്ഥാന ക്രമീകരണങ്ങൾനിങ്ങൾക്ക് ആവശ്യമുള്ള മൂല്യങ്ങളിലേക്ക് അവ സമാഹരിക്കുക. എന്നിരുന്നാലും, ആവർത്തിച്ചുള്ള മാറ്റങ്ങൾ വരുത്തുന്നതിന്, പാരാമീറ്ററുകൾ വീണ്ടും മാറ്റേണ്ടിവരും.

വിവരിച്ച ഉപകരണം ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നതിനുള്ള രണ്ടാമത്തെ ഓപ്ഷനിലേക്ക് പോകാം. എല്ലാ ഫ്രെയിംവർക്ക് വേരിയബിളുകളും സംഭരിച്ചിരിക്കുന്ന വസ്തുതയെ അടിസ്ഥാനമാക്കിയുള്ളതാണ് ഇത് പ്രത്യേക ഫയലുകൾവിപുലീകരണത്തോടെ .കുറവ്. ഒരു നൂതന ഡെവലപ്പർ ഈ ഫയലുകൾ ഡൗൺലോഡ് ചെയ്യുന്നു, പരാമീറ്ററുകൾ സ്വമേധയാ മാറ്റുന്നു (അല്ലെങ്കിൽ അവ css കോഡിലേക്ക് കംപൈൽ ചെയ്യുന്നു) അവ മാറ്റുന്നു, തുടർന്ന് പരിഷ്കരിച്ച css ഫയലിൽ പ്രവർത്തിക്കുന്നു.

എന്നാൽ എന്റെ പരിശീലന ലേഖനങ്ങൾ തുടക്കക്കാർക്കായി രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നതിനാൽ, ആദ്യ സമീപനത്തിൽ ചുവടെ ചേർത്തിരിക്കുന്ന ഉദാഹരണം ഞങ്ങൾ പരിഗണിക്കും.

ടെസ്റ്റ് കേസ് നടപ്പിലാക്കൽ

ഇവിടെ നമ്മൾ ഏറ്റവും രസകരമായ ഭാഗത്തേക്ക് വരുന്നു. ഈ അധ്യായത്തിൽ, എങ്ങനെ മേക്കപ്പ് ചെയ്യാമെന്ന് ഞാൻ നിങ്ങളോട് പറയും റെഡിമെയ്ഡ് ടെംപ്ലേറ്റ്ബൂട്ട്സ്ട്രാപ്പ് ഒരു മാന്യമായ സൈറ്റാണ്. ഒരു ഉദാഹരണമായി, ഞാൻ ഒരു നിർമ്മാണ കമ്പനിക്കായി ഒരു വെബ്സൈറ്റ് സൃഷ്ടിച്ചു. കോഡ് ആശയം അനുസരിച്ച് പ്രതികരിക്കുന്ന ലേഔട്ട് നൽകുന്നു മൊബൈൽ ഉപകരണങ്ങൾആദ്യം (മൊബൈൽ-ആദ്യം).

ഓൺ ഹോം പേജ്ഒരു നാവിഗേഷൻ ബാർ (നവ്ബാർ), ഒരു ഹാംബർഗർ മെനു (നവ്ബാർ-ടോഗിൾ), ഒരു കറൗസൽ സ്ലൈഡർ (കറൗസൽ സ്ലൈഡ്) എന്നിവയും ഉണ്ടാകും ടെക്സ്റ്റ് ഫീൽഡുകൾ, കിണർ ക്ലാസ്സിൽ അലങ്കരിച്ചിരിക്കുന്നു.

മുഴുവൻ സൈറ്റ് പേജും ഫ്ലോട്ടിംഗ് ഗ്രിഡുകൾ ഉപയോഗിച്ചാണ് എഴുതിയിരിക്കുന്നത് എന്നത് ശ്രദ്ധിക്കുക. എന്നിരുന്നാലും, ടെക്സ്റ്റ് ഫീൽഡുകളും നിലവിലെ പ്രോജക്റ്റിനെക്കുറിച്ചുള്ള വിവരങ്ങളും ഒരു സ്റ്റാറ്റിക് ഗ്രിഡിലാണ്. നമുക്ക് കോഡിലേക്ക് പോകാം.

ആരംഭിക്കുന്നതിന്, ലിങ്ക് തുറക്കുക. എല്ലാത്തരം ടെംപ്ലേറ്റുകളും ഇവിടെയുണ്ട്. ഞാൻ "മാർക്കറ്റിംഗ്" തിരഞ്ഞെടുത്തു. "സ്വയം ശ്രമിക്കുക" ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക. 2-കോളം പട്ടികയുമായി താരതമ്യം ചെയ്യാവുന്ന ഒരു ഡയലോഗ് ബോക്സ് തുറക്കും.

താഴെ അറ്റാച്ച് ചെയ്‌തിരിക്കുന്ന കോഡ് ആദ്യ നിരയിലേക്ക് തിരുകുക, “റൺ” ക്ലിക്കുചെയ്യുക, രണ്ടാമത്തെ കോളത്തിൽ നിങ്ങൾ പ്രോഗ്രാമിന്റെ ഫലം കാണും.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131

ബൂട്ട്സ്ട്രാപ്പ് ഉദാഹരണം വീട് ഞങ്ങളേക്കുറിച്ച് പദ്ധതികൾ മെറ്റീരിയലുകൾ ബന്ധങ്ങൾ സൈൻ അപ്പ് ചെയ്യുക അകത്തേക്ക് വരാൻ മുമ്പത്തെ അടുത്തത് ഞങ്ങളുടെ പ്രവർത്തനങ്ങൾ പുതിയ പദ്ധതികൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉദാഹരണം .ലോഗോ (വീതി:55px; ) .navbar (മാർജിൻ-ബോട്ടം: 0; ബോർഡർ-റേഡിയസ്: 0; ) അടിക്കുറിപ്പ് (പശ്ചാത്തലം-നിറം: #f2f2f2; പാഡിംഗ്: 25px; ) .carousel-inner img (മിനി-ഉയരം: 200px; വീതി: 100%; മാർജിൻ: ഓട്ടോ; ) @ മീഡിയ (പരമാവധി വീതി: 600px) ( .carousel-caption ( display: none; ) ) /*സൃഷ്ടിക്കുന്നു നാവിഗേഷൻ ബാർ, ഏത് ചെറിയ വലിപ്പംസ്‌ക്രീൻ ഒരു ഹാംബർഗർ മെനു പ്രദർശിപ്പിക്കും (മൂന്ന് ബാറുകളുള്ള ഒരു ബട്ടൺ) */

• വീട്
• ഞങ്ങളേക്കുറിച്ച്
• പദ്ധതികൾ
• മെറ്റീരിയലുകൾ
• ബന്ധങ്ങൾ

• സൈൻ അപ്പ് ചെയ്യുക
• അകത്തേക്ക് വരാൻ

/*ഞാൻ ഒരു യാന്ത്രിക സ്ക്രോളിംഗ് ഗാലറി സൃഷ്ടിക്കുന്നു */ /*ഫോട്ടോകൾക്കിടയിൽ മാറുന്നതിന് 3 സൂചകങ്ങൾ ചിത്രത്തിന്റെ ചുവടെ ഉണ്ടായിരിക്കണമെന്ന് ഞാൻ ഇവിടെ സൂചിപ്പിക്കുന്നു*/ /*ഞാൻ ചിത്രങ്ങൾ സ്വയം തിരുകുകയും ആദ്യത്തേത് സജീവമാക്കുകയും ചെയ്യുന്നു*/ 8 മുറികളുള്ള സുഖപ്രദമായ ഇരുനില വീട് 4 മുറികളുള്ള ആധുനിക സുഖപ്രദമായ വീട് 7 മുറികളുള്ള വിശാലമായ പഴയ ശൈലിയിലുള്ള വീട് /*ചിത്രത്തിലെ ഇടത്തോട്ടും വലത്തോട്ടും ഉള്ള ബട്ടണുകൾ ഉപയോഗിച്ച് ഞാൻ ഇടത്തോട്ടും വലത്തോട്ടും ഫ്രെയിം സ്വിച്ചിംഗ് സൃഷ്ടിക്കുന്നു*/ മുമ്പത്തെ അടുത്തത് /*പ്രധാന ഉള്ളടക്കത്തിനായി ഞാൻ ഒരു പ്രത്യേക സ്റ്റാറ്റിക് കണ്ടെയ്‌നർ സൃഷ്ടിക്കുന്നു*/ ഞങ്ങളുടെ പ്രവർത്തനങ്ങൾ

ആധുനിക സുഖപ്രദമായ സ്വകാര്യ വീടുകൾ, മാളികകൾ, ഓഫീസ് കെട്ടിടങ്ങൾ, ഷോപ്പിംഗ് സെന്ററുകൾ, മറ്റ് തരത്തിലുള്ള കെട്ടിടങ്ങൾ എന്നിവയുടെ നിർമ്മാണത്തിൽ ഞങ്ങളുടെ കമ്പനി ഏർപ്പെട്ടിരിക്കുന്നു.

ഞങ്ങളുടെ പൂർത്തിയായ പ്രോജക്റ്റുകൾ എല്ലായ്പ്പോഴും മറ്റ് കമ്പനികൾക്കിടയിൽ വേറിട്ടുനിൽക്കുന്നു, കാരണം ഞങ്ങൾ അതുല്യവും ചിന്തനീയവുമായ കെട്ടിടങ്ങൾ സൃഷ്ടിക്കുന്നു, അത് അവരുടെ താമസക്കാർക്കും സന്ദർശകർക്കും പരമാവധി സൗകര്യങ്ങൾ പ്രദാനം ചെയ്യും.

പുതിയ പദ്ധതികൾ

ഇന്ന് ഞങ്ങൾ ഒരു ബഹുനില ഓഫീസ് കെട്ടിടത്തിന്റെ നിർമ്മാണത്തിൽ ഏർപ്പെട്ടിരിക്കുകയാണ്.

/*ഒരു ഫ്ലോട്ടിംഗ് പേജ് അടിക്കുറിപ്പ് സൃഷ്ടിക്കുന്നു*/