നവബാറുകൾ ഡിഫോൾട്ടായി പ്രതികരിക്കുന്നതാണ്, എന്നാൽ അത് മാറ്റാൻ നിങ്ങൾക്ക് അവ എളുപ്പത്തിൽ പരിഷ്കരിക്കാനാകും. പ്രതികരണ സ്വഭാവം ഞങ്ങളുടെ JavaScript പ്ലഗിൻ ചുരുക്കുക എന്നതിനെ ആശ്രയിച്ചിരിക്കുന്നു.
അച്ചടിക്കുമ്പോൾ നവബാറുകൾ ഡിഫോൾട്ടായി മറച്ചിരിക്കുന്നു. എന്നതിലേക്ക് ചേർത്ത് അച്ചടിക്കാൻ .d-printനിർബന്ധിക്കുക .navbar. ഡിസ്പ്ലേ യൂട്ടിലിറ്റി ക്ലാസ് കാണുക .
ഒരു ഘടകം ഉപയോഗിച്ച് പ്രവേശനക്ഷമത ഉറപ്പാക്കുക <nav>അല്ലെങ്കിൽ ഒരു പോലെയുള്ള കൂടുതൽ പൊതുവായ ഘടകം ഉപയോഗിക്കുകയാണെങ്കിൽ, സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്കുള്ള ഒരു ലാൻഡ്മാർക്ക് പ്രദേശമായി അതിനെ വ്യക്തമായി തിരിച്ചറിയുന്നതിന് എല്ലാ നാവ്ബാറിലേക്കും <div>a ചേർക്കുക .role="navigation"
.navbar-textവാചകത്തിന്റെ ലംബമായി കേന്ദ്രീകൃതമായ സ്ട്രിംഗുകൾ ചേർക്കുന്നതിന്.
.collapse.navbar-collapseഒരു പാരന്റ് ബ്രേക്ക്പോയിന്റ് ഉപയോഗിച്ച് navbar ഉള്ളടക്കങ്ങൾ ഗ്രൂപ്പുചെയ്യുന്നതിനും മറയ്ക്കുന്നതിനും.
lg(വലിയ) ബ്രേക്ക്പോയിന്റിൽ സ്വയമേവ തകരുന്ന ഒരു റെസ്പോൺസീവ് ലൈറ്റ്-തീം നാവ്ബാറിൽ ഉൾപ്പെടുത്തിയിരിക്കുന്ന എല്ലാ ഉപഘടകങ്ങളുടെയും ഒരു ഉദാഹരണം ഇതാ .
ഈ ഉദാഹരണം വർണ്ണവും ( bg-light) സ്പേസിംഗ് ( my-2, my-lg-0, mr-sm-0) my-sm-0യൂട്ടിലിറ്റി ക്ലാസുകളും ഉപയോഗിക്കുന്നു.
ബ്രാൻഡ്
മിക്ക .navbar-brandഘടകങ്ങളിലും ഇത് പ്രയോഗിക്കാൻ കഴിയും, എന്നാൽ ചില ഘടകങ്ങൾക്ക് യൂട്ടിലിറ്റി ക്ലാസുകളോ ഇഷ്ടാനുസൃത ശൈലികളോ ആവശ്യമായി വരുമെന്നതിനാൽ ഒരു ആങ്കർ മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു.
ഇതിലേക്ക് ഇമേജുകൾ ചേർക്കുന്നത് .navbar-brandഎല്ലായ്പ്പോഴും ഇഷ്ടാനുസൃത ശൈലികളോ യൂട്ടിലിറ്റികളോ ശരിയായ വലുപ്പത്തിന് ആവശ്യമായി വരും. തെളിയിക്കാനുള്ള ചില ഉദാഹരണങ്ങൾ ഇതാ.
നവ്
Navbar നാവിഗേഷൻ ലിങ്കുകൾ അവരുടെ സ്വന്തം മോഡിഫയർ ക്ലാസ് ഉപയോഗിച്ച് ഞങ്ങളുടെ ഓപ്ഷനുകളിൽ നിർമ്മിക്കുകയും ശരിയായ പ്രതികരണ ശൈലിക്ക് ടോഗ്ലർ ക്ലാസുകളുടെ.nav ഉപയോഗം ആവശ്യമാണ് . നിങ്ങളുടെ navbar ഉള്ളടക്കങ്ങൾ സുരക്ഷിതമായി വിന്യസിക്കാൻ കഴിയുന്നത്ര തിരശ്ചീനമായ ഇടം ഉൾക്കൊള്ളാൻ നവബാറുകളിലെ നാവിഗേഷൻ വളരും .
നിലവിലെ പേജ് സൂചിപ്പിക്കാൻ, സജീവമായ അവസ്ഥകൾ - കൂടെ - കൾക്കോ അവരുടെ അടുത്ത രക്ഷിതാവിനോ .activeനേരിട്ട് പ്രയോഗിക്കാവുന്നതാണ് ..nav-link.nav-item
ഞങ്ങളുടെ നാവുകൾക്കായി ഞങ്ങൾ ക്ലാസുകൾ ഉപയോഗിക്കുന്നതിനാൽ, നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ ലിസ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ള സമീപനം പൂർണ്ണമായും ഒഴിവാക്കാനാകും.
നിങ്ങളുടെ navbar nav-ലും നിങ്ങൾക്ക് ഡ്രോപ്പ്ഡൌണുകൾ ഉപയോഗിക്കാം. ഡ്രോപ്പ്ഡൗൺ മെനുകൾക്ക് പൊസിഷനിംഗിനായി ഒരു റാപ്പിംഗ് എലമെന്റ് ആവശ്യമാണ്, അതിനാൽ താഴെ കാണിച്ചിരിക്കുന്നതുപോലെ പ്രത്യേകവും നെസ്റ്റഡ് എലമെന്റുകളും ഉപയോഗിക്കുന്നത് ഉറപ്പാക്കുക .nav-item..nav-link
ഫോമുകൾ
ഒരു നവബാറിനുള്ളിൽ വിവിധ ഫോം നിയന്ത്രണങ്ങളും ഘടകങ്ങളും സ്ഥാപിക്കുക .form-inline.
.navbarഫ്ലെക്സ് ലേഔട്ടിലുള്ള ഉടനടി കുട്ടികളുടെ ഘടകങ്ങൾ justify-content: space-between. ഈ സ്വഭാവം ക്രമീകരിക്കുന്നതിന് ആവശ്യമായ അധിക ഫ്ലെക്സ് യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക.
ഇൻപുട്ട് ഗ്രൂപ്പുകളും പ്രവർത്തിക്കുന്നു:
ഈ നാവ്ബാർ ഫോമുകളുടെ ഭാഗമായി വിവിധ ബട്ടണുകളും പിന്തുണയ്ക്കുന്നു. വ്യത്യസ്ത വലിപ്പത്തിലുള്ള മൂലകങ്ങളെ വിന്യസിക്കാൻ ലംബ വിന്യാസ യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കാമെന്നുള്ള ഒരു മികച്ച ഓർമ്മപ്പെടുത്തൽ കൂടിയാണിത്.
വാചകം
Navbar-ന്റെ സഹായത്തോടെ ടെക്സ്റ്റിന്റെ ബിറ്റുകൾ അടങ്ങിയിരിക്കാം .navbar-text. ഈ ക്ലാസ് ടെക്സ്റ്റിന്റെ സ്ട്രിംഗുകൾക്കായി ലംബ വിന്യാസവും തിരശ്ചീന സ്പെയ്സിംഗും ക്രമീകരിക്കുന്നു.
ആവശ്യാനുസരണം മറ്റ് ഘടകങ്ങളുമായും യൂട്ടിലിറ്റികളുമായും മിക്സ് ചെയ്ത് പൊരുത്തപ്പെടുത്തുക.
വർണ്ണ സ്കീമുകൾ
background-colorതീമിംഗ് ക്ലാസുകളുടെയും യൂട്ടിലിറ്റികളുടെയും സംയോജനത്തിന് നന്ദി, നവബാറിന്റെ തീമിംഗ് ഒരിക്കലും എളുപ്പമായിരുന്നില്ല . .navbar-lightഇളം പശ്ചാത്തല വർണ്ണങ്ങൾ ഉപയോഗിച്ചോ .navbar-darkഇരുണ്ട പശ്ചാത്തല വർണ്ണങ്ങൾക്കായോ തിരഞ്ഞെടുക്കുക . .bg-*തുടർന്ന്, യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് ഇഷ്ടാനുസൃതമാക്കുക .
കണ്ടെയ്നറുകൾ
ഇത് ആവശ്യമില്ലെങ്കിലും, .containerഒരു പേജിൽ കേന്ദ്രീകരിക്കാൻ നിങ്ങൾക്ക് ഒരു navbar പൊതിയാം അല്ലെങ്കിൽ ഒരു ഫിക്സഡ് അല്ലെങ്കിൽ സ്റ്റാറ്റിക് ടോപ്പ് നാവ്ബാറിന്റെ ഉള്ളടക്കങ്ങൾ മാത്രം കേന്ദ്രീകരിക്കുന്നതിന് ഉള്ളിൽ ഒന്ന് ചേർക്കുക .
കണ്ടെയ്നർ നിങ്ങളുടെ നവബാറിനുള്ളിലായിരിക്കുമ്പോൾ, അതിന്റെ തിരശ്ചീന പാഡിംഗ് നിങ്ങളുടെ നിർദ്ദിഷ്ട ക്ലാസിനേക്കാൾ താഴ്ന്ന ബ്രേക്ക്പോയിന്റുകളിൽ നീക്കംചെയ്യപ്പെടും .navbar-expand{-sm|-md|-lg|-xl}. നിങ്ങളുടെ നവബാർ പൊളിഞ്ഞിരിക്കുമ്പോൾ, താഴ്ന്ന വ്യൂപോർട്ടുകളിൽ ഞങ്ങൾ അനാവശ്യമായി പാഡിംഗ് ഇരട്ടിപ്പിക്കുന്നില്ലെന്ന് ഇത് ഉറപ്പാക്കുന്നു.
പ്ലേസ്മെന്റ്
നോൺ-സ്റ്റാറ്റിക് സ്ഥാനങ്ങളിൽ നവബാറുകൾ സ്ഥാപിക്കാൻ ഞങ്ങളുടെ പൊസിഷൻ യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക. മുകളിലേക്ക് ഫിക്സഡ്, താഴോട്ട് ഫിക്സ്ഡ്, അല്ലെങ്കിൽ മുകളിലേക്ക് ഒട്ടിപ്പിടിച്ചത് എന്നിവ തിരഞ്ഞെടുക്കുക (പേജ് മുകളിലെത്തുന്നതുവരെ സ്ക്രോൾ ചെയ്യുന്നു, തുടർന്ന് അവിടെ തുടരും). ഫിക്സഡ് നാവ്ബാറുകൾ ഉപയോഗിക്കുന്നു position: fixed, അതായത് അവ DOM-ന്റെ സാധാരണ ഫ്ലോയിൽ നിന്ന് പിൻവലിച്ചിരിക്കുന്നു, മറ്റ് ഘടകങ്ങളുമായി ഓവർലാപ്പ് ചെയ്യുന്നത് തടയാൻ ഇഷ്ടാനുസൃത CSS (ഉദാഹരണത്തിന്, padding-topൽ ) ആവശ്യമായി വന്നേക്കാം.<body>
ഒരു ബട്ടണിന് പിന്നിൽ ഉള്ളടക്കം തകരുമ്പോൾ മാറ്റാൻ Navbar-ന് .navbar-toggler, .navbar-collapse, ക്ലാസുകൾ എന്നിവ ഉപയോഗിക്കാനാകും. .navbar-expand{-sm|-md|-lg|-xl}മറ്റ് യൂട്ടിലിറ്റികളുമായി സംയോജിച്ച്, പ്രത്യേക ഘടകങ്ങൾ എപ്പോൾ കാണിക്കണം അല്ലെങ്കിൽ മറയ്ക്കണം എന്ന് നിങ്ങൾക്ക് എളുപ്പത്തിൽ തിരഞ്ഞെടുക്കാനാകും.
ഒരിക്കലും തകരാത്ത നവബാറുകൾക്കായി, നവബാറിലെ .navbar-expandക്ലാസ് ചേർക്കുക. എപ്പോഴും തകരുന്ന നവബാറുകൾക്ക്, ക്ലാസുകളൊന്നും ചേർക്കരുത് .navbar-expand.
ടോഗ്ലർ
Navbar ടോഗിളുകൾ ഡിഫോൾട്ടായി ഇടത് വിന്യസിച്ചിരിക്കുന്നു, എന്നാൽ അവർ ഒരു സഹോദര ഘടകത്തെ പിന്തുടരുകയാണെങ്കിൽ .navbar-brand, അവ സ്വയമേവ വലതുവശത്തേക്ക് വിന്യസിക്കും. നിങ്ങളുടെ മാർക്ക്അപ്പ് വിപരീതമാക്കുന്നത് ടോഗ്ലറിന്റെ പ്ലെയ്സ്മെന്റിനെ വിപരീതമാക്കും. വ്യത്യസ്ത ടോഗിൾ ശൈലികളുടെ ഉദാഹരണങ്ങൾ ചുവടെയുണ്ട്.
.navbar-brandഏറ്റവും കുറഞ്ഞ ബ്രേക്ക്പോയിന്റിൽ കാണിക്കാത്തത് :
ഇടതുവശത്ത് കാണിച്ചിരിക്കുന്ന ബ്രാൻഡ് നാമവും വലതുവശത്ത് ടോഗ്ലറും:
ഇടതുവശത്ത് ഒരു ടോഗ്ലറും വലതുവശത്ത് ബ്രാൻഡ് നാമവും:
ബാഹ്യ ഉള്ളടക്കം
പേജിൽ മറ്റെവിടെയെങ്കിലും മറഞ്ഞിരിക്കുന്ന ഉള്ളടക്കം പ്രവർത്തനക്ഷമമാക്കാൻ ചിലപ്പോൾ നിങ്ങൾ കംപ്ലഗിൻ ഉപയോഗിക്കാൻ താൽപ്പര്യപ്പെടുന്നു. ഞങ്ങളുടെ പ്ലഗിൻ പ്രവർത്തിക്കുന്നതും പൊരുത്തപ്പെടുന്നതും ആയതിനാൽ, അത് എളുപ്പത്തിൽ ചെയ്യാനാകും id!data-target