സമീപിക്കുക

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

ശരിയല്ലെന്ന് തോന്നുന്ന എന്തെങ്കിലും കണ്ടോ, അല്ലെങ്കിൽ ഒരുപക്ഷേ നന്നായി ചെയ്യാനാകുമോ? ഒരു പ്രശ്നം തുറക്കുക - നിങ്ങളുമായി അത് ചർച്ച ചെയ്യാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു.

സംഗ്രഹം

ഞങ്ങൾ ഇവയിൽ ഓരോന്നിലും കൂടുതൽ മുഴുകും, എന്നാൽ ഉയർന്ന തലത്തിൽ, ഞങ്ങളുടെ സമീപനത്തെ നയിക്കുന്നത് ഇതാ.

• ഘടകങ്ങൾ പ്രതികരിക്കുന്നതും മൊബൈൽ ആദ്യം ഉപയോഗിക്കുന്നതുമായിരിക്കണം
• ഘടകങ്ങൾ അടിസ്ഥാന ക്ലാസ് ഉപയോഗിച്ച് നിർമ്മിക്കുകയും മോഡിഫയർ ക്ലാസുകൾ വഴി വിപുലീകരിക്കുകയും വേണം
• ഘടക സംസ്ഥാനങ്ങൾ ഒരു പൊതു z-ഇൻഡക്സ് സ്കെയിൽ അനുസരിക്കണം
• സാധ്യമാകുമ്പോഴെല്ലാം, JavaScript-നേക്കാൾ HTML, CSS നടപ്പിലാക്കൽ തിരഞ്ഞെടുക്കുക
• സാധ്യമാകുമ്പോഴെല്ലാം, ഇഷ്‌ടാനുസൃത ശൈലികളിൽ യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക
• സാധ്യമാകുമ്പോഴെല്ലാം, കർശനമായ HTML ആവശ്യകതകൾ (കുട്ടികൾ തിരഞ്ഞെടുക്കുന്നവർ) നടപ്പിലാക്കുന്നത് ഒഴിവാക്കുക

പ്രതികരണശേഷിയുള്ള

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

ബൂട്ട്‌സ്‌ട്രാപ്പിലുടനീളം, ഞങ്ങളുടെ മീഡിയ അന്വേഷണങ്ങളിൽ നിങ്ങൾ ഇത് വളരെ വ്യക്തമായി കാണും. മിക്ക കേസുകളിലും, ഞങ്ങൾ min-widthഒരു പ്രത്യേക ബ്രേക്ക്‌പോയിന്റിൽ പ്രയോഗിക്കാൻ തുടങ്ങുന്ന അന്വേഷണങ്ങൾ ഉപയോഗിക്കുന്നു, ഉയർന്ന ബ്രേക്ക്‌പോയിന്റുകളിലൂടെ മുന്നോട്ട് കൊണ്ടുപോകുന്നു. ഉദാഹരണത്തിന്, a എന്നത് അനന്തതയിലേക്ക് .d-noneപ്രയോഗിക്കുന്നു min-width: 0. മറുവശത്ത്, ഒരു .d-md-noneഇടത്തരം ബ്രേക്ക്‌പോയിന്റിൽ നിന്നും മുകളിലേക്കും ബാധകമാണ്.

max-widthചില സമയങ്ങളിൽ ഒരു ഘടകത്തിന്റെ അന്തർലീനമായ സങ്കീർണ്ണത ആവശ്യമുള്ളപ്പോൾ ഞങ്ങൾ ഉപയോഗിക്കും . ചില സമയങ്ങളിൽ, ഈ അസാധുവാക്കലുകൾ ഞങ്ങളുടെ ഘടകങ്ങളിൽ നിന്ന് കോർ ഫങ്ഷണാലിറ്റി മാറ്റിയെഴുതുന്നതിനേക്കാൾ പ്രവർത്തനപരമായും മാനസികമായും വ്യക്തമാണ്. ഈ സമീപനം പരിമിതപ്പെടുത്താൻ ഞങ്ങൾ ശ്രമിക്കുന്നു, എന്നാൽ കാലാകാലങ്ങളിൽ ഇത് ഉപയോഗിക്കും.

ക്ലാസുകൾ

ഞങ്ങളുടെ റീബൂട്ട്, ക്രോസ്-ബ്രൗസർ നോർമലൈസേഷൻ സ്റ്റൈൽഷീറ്റ് മാറ്റിനിർത്തിയാൽ, ഞങ്ങളുടെ എല്ലാ ശൈലികളും ക്ലാസുകൾ സെലക്ടറുകളായി ഉപയോഗിക്കാൻ ലക്ഷ്യമിടുന്നു. ശൈലികളെ എളുപ്പത്തിൽ മറികടക്കാൻ കഴിയാത്തവിധം പ്രത്യേകമാക്കുന്ന തരത്തിലുള്ള സെലക്ടറുകളും (ഉദാ, input[type="text"]) ബാഹ്യ പാരന്റ് ക്ലാസുകളും (ഉദാ, ) ഒഴിവാക്കുക എന്നാണ് ഇതിനർത്ഥം..parent .child

അതുപോലെ, പൊതുവായതും അസാധുവാക്കപ്പെടാത്തതുമായ പ്രോപ്പർട്ടി-മൂല്യ ജോഡികൾ ഉൾക്കൊള്ളുന്ന അടിസ്ഥാന ക്ലാസ് ഉപയോഗിച്ചാണ് ഘടകങ്ങൾ നിർമ്മിക്കേണ്ടത്. ഉദാഹരണത്തിന്, .btnഒപ്പം .btn-primary. ഞങ്ങൾ .btnഎല്ലാ പൊതുവായ ശൈലികൾക്കും ഉപയോഗിക്കുന്നു display, padding, കൂടാതെ border-width. .btn-primaryനിറം, പശ്ചാത്തല നിറം, ബോർഡർ നിറം മുതലായവ ചേർക്കാൻ ഞങ്ങൾ മോഡിഫയറുകൾ ഉപയോഗിക്കുന്നു .

ഒന്നിലധികം വകഭേദങ്ങളിൽ ഒന്നിലധികം പ്രോപ്പർട്ടികൾ അല്ലെങ്കിൽ മൂല്യങ്ങൾ മാറ്റേണ്ടിവരുമ്പോൾ മാത്രമേ മോഡിഫയർ ക്ലാസുകൾ ഉപയോഗിക്കാവൂ. മോഡിഫയറുകൾ എല്ലായ്‌പ്പോഴും ആവശ്യമില്ല, അതിനാൽ നിങ്ങൾ യഥാർത്ഥത്തിൽ കോഡിന്റെ ലൈനുകൾ സംരക്ഷിക്കുന്നുവെന്നും അവ സൃഷ്ടിക്കുമ്പോൾ അനാവശ്യമായ ഓവർറൈഡുകൾ തടയുന്നുവെന്നും ഉറപ്പാക്കുക. മോഡിഫയറുകളുടെ നല്ല ഉദാഹരണങ്ങൾ ഞങ്ങളുടെ തീം വർണ്ണ ക്ലാസുകളും വലുപ്പ വേരിയന്റുകളുമാണ്.

z-ഇൻഡക്സ് സ്കെയിലുകൾ

ബൂട്ട്സ്ട്രാപ്പിൽ രണ്ട് z-indexസ്കെയിലുകളുണ്ട് - ഒരു ഘടകത്തിനുള്ളിലെ ഘടകങ്ങളും ഓവർലേ ഘടകങ്ങളും.

ഘടക ഘടകങ്ങൾ

• ബൂട്ട്‌സ്‌ട്രാപ്പിലെ ചില ഘടകങ്ങൾ borderപ്രോപ്പർട്ടി പരിഷ്‌ക്കരിക്കാതെ ഇരട്ട ബോർഡറുകൾ തടയുന്നതിന് ഓവർലാപ്പുചെയ്യുന്ന ഘടകങ്ങൾ ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്. ഉദാഹരണത്തിന്, ബട്ടൺ ഗ്രൂപ്പുകൾ, ഇൻപുട്ട് ഗ്രൂപ്പുകൾ, പേജിനേഷൻ.
• ഈ ഘടകങ്ങൾ ഒരു സ്റ്റാൻഡേർഡ് z-indexസ്കെയിൽ പങ്കിടുന്നു 0.3
• 0സ്ഥിരസ്ഥിതിയാണ് (പ്രാരംഭം), ആണ് 1, :hoverആണ് 2/ :active, .activeഒപ്പം 3.:focus
• ഈ സമീപനം ഉയർന്ന ഉപയോക്തൃ മുൻഗണനയെക്കുറിച്ചുള്ള ഞങ്ങളുടെ പ്രതീക്ഷകളുമായി പൊരുത്തപ്പെടുന്നു. ഒരു ഘടകം ഫോക്കസ് ചെയ്തിട്ടുണ്ടെങ്കിൽ, അത് കാഴ്ചയിലും ഉപയോക്താവിന്റെ ശ്രദ്ധയിലും ആയിരിക്കും. സജീവ ഘടകങ്ങൾ രണ്ടാമത്തേതാണ്, കാരണം അവ അവസ്ഥയെ സൂചിപ്പിക്കുന്നു. ഹോവർ മൂന്നാം സ്ഥാനത്താണ്, കാരണം ഇത് ഉപയോക്തൃ ഉദ്ദേശ്യത്തെ സൂചിപ്പിക്കുന്നു, എന്നാൽ ഏതാണ്ട് എന്തും ഹോവർ ചെയ്യാൻ കഴിയും.

ഓവർലേ ഘടകങ്ങൾ

ബൂട്ട്സ്ട്രാപ്പിൽ ഏതെങ്കിലും തരത്തിലുള്ള ഓവർലേ ആയി പ്രവർത്തിക്കുന്ന നിരവധി ഘടകങ്ങൾ ഉൾപ്പെടുന്നു. ഇതിൽ ഏറ്റവും ഉയർന്ന z-indexഡ്രോപ്പ്ഡൗണുകൾ, ഫിക്സഡ്, സ്റ്റിക്കി നാവ്ബാറുകൾ, മോഡലുകൾ, ടൂൾടിപ്പുകൾ, പോപോവറുകൾ എന്നിവ ഉൾപ്പെടുന്നു. ഈ ഘടകങ്ങൾക്ക് അവരുടേതായ z-indexസ്കെയിൽ ഉണ്ട്, അത് ആരംഭിക്കുന്നു 1000. ഈ ആരംഭ നമ്പർ ഏകപക്ഷീയമായി തിരഞ്ഞെടുത്തു, ഇത് ഞങ്ങളുടെ ശൈലികൾക്കും നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ ഇഷ്‌ടാനുസൃത ശൈലികൾക്കും ഇടയിലുള്ള ഒരു ചെറിയ ബഫറായി വർത്തിക്കുന്നു.

ഓരോ ഓവർലേ ഘടകഭാഗവും അതിന്റെ z-indexമൂല്യം ചെറുതായി വർദ്ധിപ്പിക്കുന്നു, അങ്ങനെ സാധാരണ യുഐ തത്വങ്ങൾ ഉപയോക്താവിനെ ഫോക്കസ് ചെയ്‌തതോ ഹോവർ ചെയ്‌തതോ ആയ ഘടകങ്ങളെ എല്ലായ്‌പ്പോഴും കാഴ്ചയിൽ തുടരാൻ അനുവദിക്കും. ഉദാഹരണത്തിന്, ഒരു മോഡൽ ഡോക്യുമെന്റ് ബ്ലോക്കിംഗ് ആണ് (ഉദാ, മോഡലിന്റെ പ്രവർത്തനത്തിന് വേണ്ടി നിങ്ങൾക്ക് മറ്റൊരു നടപടിയും എടുക്കാൻ കഴിയില്ല), അതിനാൽ ഞങ്ങൾ അത് ഞങ്ങളുടെ navbar- ന് മുകളിൽ വയ്ക്കുന്നു.

z-indexഞങ്ങളുടെ ലേഔട്ട് പേജിൽ ഇതിനെക്കുറിച്ച് കൂടുതലറിയുക .

എച്ച്ടിഎംഎൽ, സിഎസ്എസ് എന്നിവയിൽ ജെഎസ്

സാധ്യമാകുമ്പോഴെല്ലാം, JavaScript-ൽ HTML, CSS എന്നിവ എഴുതാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു. പൊതുവേ, HTML ഉം CSS ഉം കൂടുതൽ സമൃദ്ധവും എല്ലാ വ്യത്യസ്ത അനുഭവ തലങ്ങളിലുള്ള കൂടുതൽ ആളുകൾക്ക് ആക്‌സസ് ചെയ്യാവുന്നതുമാണ്. HTML, CSS എന്നിവയും നിങ്ങളുടെ ബ്രൗസറിൽ ജാവാസ്ക്രിപ്റ്റിനേക്കാൾ വേഗതയുള്ളതാണ്, കൂടാതെ നിങ്ങളുടെ ബ്രൗസർ സാധാരണയായി നിങ്ങൾക്കായി ഒരു വലിയ പ്രവർത്തനക്ഷമത നൽകുന്നു.

dataആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്ന ഞങ്ങളുടെ ഫസ്റ്റ് ക്ലാസ് JavaScript API ആണ് ഈ തത്വം . ഞങ്ങളുടെ JavaScript പ്ലഗിനുകൾ ഉപയോഗിക്കുന്നതിന് നിങ്ങൾ മിക്കവാറും JavaScript ഒന്നും എഴുതേണ്ടതില്ല; പകരം, HTML എഴുതുക. ഞങ്ങളുടെ JavaScript അവലോകന പേജിൽ ഇതിനെക്കുറിച്ച് കൂടുതൽ വായിക്കുക .

അവസാനമായി, ഞങ്ങളുടെ ശൈലികൾ പൊതുവായ വെബ് ഘടകങ്ങളുടെ അടിസ്ഥാന സ്വഭാവങ്ങളെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. സാധ്യമാകുമ്പോഴെല്ലാം, ബ്രൗസർ നൽകുന്നത് ഉപയോഗിക്കാൻ ഞങ്ങൾ താൽപ്പര്യപ്പെടുന്നു. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് .btnഏതാണ്ട് ഏത് ഘടകത്തിലും ഒരു ക്ലാസ് നൽകാം, എന്നാൽ മിക്ക ഘടകങ്ങളും സെമാന്റിക് മൂല്യമോ ബ്രൗസർ പ്രവർത്തനമോ നൽകുന്നില്ല. അതിനാൽ പകരം, ഞങ്ങൾ <button>s ഉം <a>s ഉം ഉപയോഗിക്കുന്നു.

കൂടുതൽ സങ്കീർണ്ണമായ ഘടകങ്ങൾക്കും ഇത് ബാധകമാണ്. ഒരു ഇൻപുട്ടിന്റെ അവസ്ഥയെ അടിസ്ഥാനമാക്കി ഒരു പാരന്റ് എലമെന്റിലേക്ക് ക്ലാസുകൾ ചേർക്കുന്നതിന് ഞങ്ങളുടെ സ്വന്തം ഫോം മൂല്യനിർണ്ണയ പ്ലഗിൻ എഴുതാം, അതുവഴി ചുവപ്പ് എന്ന് പറയുന്ന ടെക്സ്റ്റ് സ്റ്റൈൽ ചെയ്യാൻ ഞങ്ങളെ അനുവദിക്കുന്നു, ഓരോ ബ്രൗസറും:valid ഞങ്ങൾക്ക് നൽകുന്ന / :invalidവ്യാജ ഘടകങ്ങൾ ഉപയോഗിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു.

യൂട്ടിലിറ്റികൾ

യൂട്ടിലിറ്റി ക്ലാസുകൾ—മുമ്പ് ബൂട്ട്സ്ട്രാപ്പ് 3-ലെ സഹായികൾ—സിഎസ്എസ് ബ്ലോട്ടിനെയും മോശം പേജ് പ്രകടനത്തെയും ചെറുക്കുന്നതിൽ ശക്തമായ ഒരു സഖ്യകക്ഷിയാണ്. ഒരു യൂട്ടിലിറ്റി ക്ലാസ് എന്നത് ഒരു ക്ലാസായി പ്രകടിപ്പിക്കുന്ന, മാറ്റമില്ലാത്ത പ്രോപ്പർട്ടി-വാല്യൂ ജോടിയാക്കലാണ് (ഉദാ, .d-blockപ്രതിനിധീകരിക്കുന്നത് display: block;). HTML എഴുതുമ്പോൾ ഉപയോഗിക്കാനുള്ള വേഗതയും നിങ്ങൾ എഴുതേണ്ട ഇഷ്‌ടാനുസൃത CSS ന്റെ അളവ് പരിമിതപ്പെടുത്തുന്നതുമാണ് അവരുടെ പ്രാഥമിക ആകർഷണം.

പ്രത്യേകമായി ഇഷ്‌ടാനുസൃത CSS നെ സംബന്ധിച്ച്, നിങ്ങളുടെ ഏറ്റവും സാധാരണമായി ആവർത്തിക്കുന്ന പ്രോപ്പർട്ടി-വാല്യൂ ജോഡികളെ ഒറ്റ ക്ലാസുകളായി ചുരുക്കിക്കൊണ്ട് വർദ്ധിച്ചുവരുന്ന ഫയൽ വലുപ്പത്തെ ചെറുക്കാൻ യൂട്ടിലിറ്റികൾക്ക് കഴിയും. ഇത് നിങ്ങളുടെ പ്രോജക്റ്റുകളിൽ സ്കെയിലിൽ നാടകീയമായ സ്വാധീനം ചെലുത്തും.

ഫ്ലെക്സിബിൾ HTML

എല്ലായ്പ്പോഴും സാധ്യമല്ലെങ്കിലും, ഘടകങ്ങൾക്കായുള്ള ഞങ്ങളുടെ HTML ആവശ്യകതകളിൽ അമിതമായ പിടിവാശി ഒഴിവാക്കാൻ ഞങ്ങൾ ശ്രമിക്കുന്നു. >അതിനാൽ, ഞങ്ങളുടെ CSS സെലക്‌ടറുകളിലെ ഒറ്റ ക്ലാസുകളിൽ ഞങ്ങൾ ശ്രദ്ധ കേന്ദ്രീകരിക്കുകയും ഉടൻ തന്നെ കുട്ടികളുടെ സെലക്ടർമാരെ ( ) ഒഴിവാക്കാൻ ശ്രമിക്കുകയും ചെയ്യുന്നു . ഇത് നിങ്ങളുടെ നിർവ്വഹണത്തിൽ നിങ്ങൾക്ക് കൂടുതൽ വഴക്കം നൽകുകയും ഞങ്ങളുടെ CSS ലളിതവും കൂടുതൽ വ്യക്തതയില്ലാത്തതുമാക്കി നിലനിർത്താൻ സഹായിക്കുകയും ചെയ്യുന്നു.

കോഡ് കൺവെൻഷനുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിലുടനീളം ഞങ്ങളുടെ HTML, CSS എന്നിവ എങ്ങനെ എഴുതുന്നുവെന്ന് കോഡ് ഗൈഡ് (Bootstrap co-creator, @mdo-ൽ നിന്ന്) രേഖപ്പെടുത്തുന്നു. പൊതുവായ ഫോർമാറ്റിംഗ്, കോമൺസെൻസ് ഡിഫോൾട്ടുകൾ, പ്രോപ്പർട്ടി, ആട്രിബ്യൂട്ട് ഓർഡറുകൾ എന്നിവയ്‌ക്കും അതിലേറെ കാര്യങ്ങൾക്കുമുള്ള മാർഗ്ഗനിർദ്ദേശങ്ങൾ ഇത് വ്യക്തമാക്കുന്നു.

ഞങ്ങളുടെ Sass /CSS-ൽ ഈ മാനദണ്ഡങ്ങളും മറ്റും നടപ്പിലാക്കാൻ ഞങ്ങൾ Stylelint ഉപയോഗിക്കുന്നു . ഞങ്ങളുടെ ഇഷ്‌ടാനുസൃത സ്‌റ്റൈലിന്റ് കോൺഫിഗേഷൻ ഓപ്പൺ സോഴ്‌സ് ആണ്, മറ്റുള്ളവർക്ക് ഉപയോഗിക്കാനും വിപുലീകരിക്കാനും ലഭ്യമാണ്.

സ്റ്റാൻഡേർഡ്, സെമാന്റിക് HTML എന്നിവ നടപ്പിലാക്കുന്നതിനും സാധാരണ പിശകുകൾ കണ്ടെത്തുന്നതിനും ഞങ്ങൾ vnu-jar ഉപയോഗിക്കുന്നു.