ഐക്കണോഗ്രഫി, ഡ്രോപ്പ്ഡൗണുകൾ, ഇൻപുട്ട് ഗ്രൂപ്പുകൾ, നാവിഗേഷൻ, അലേർട്ടുകൾ എന്നിവയും അതിലേറെയും നൽകുന്നതിനായി നിർമ്മിച്ച ഒരു ഡസനിലധികം വീണ്ടും ഉപയോഗിക്കാവുന്ന ഘടകങ്ങൾ.
പ്രകടന കാരണങ്ങളാൽ, എല്ലാ ഐക്കണുകൾക്കും അടിസ്ഥാന ക്ലാസും വ്യക്തിഗത ഐക്കൺ ക്ലാസും ആവശ്യമാണ്. ഉപയോഗിക്കുന്നതിന്, ഇനിപ്പറയുന്ന കോഡ് എവിടെയും സ്ഥാപിക്കുക. ശരിയായ പാഡിംഗിനായി ഐക്കണിനും വാചകത്തിനും ഇടയിൽ ഒരു ഇടം നൽകുന്നത് ഉറപ്പാക്കുക.
മറ്റ് ഘടകങ്ങളുമായി കലർത്തരുത്
ഐക്കൺ ക്ലാസുകൾ മറ്റ് ഘടകങ്ങളുമായി നേരിട്ട് സംയോജിപ്പിക്കാൻ കഴിയില്ല. ഒരേ ഘടകത്തിൽ മറ്റ് ക്ലാസുകൾക്കൊപ്പം അവ ഉപയോഗിക്കാൻ പാടില്ല. പകരം, ഒരു നെസ്റ്റഡ് ചേർക്കുകയും <span>ഐക്കൺ ക്ലാസുകൾ എന്നതിലേക്ക് പ്രയോഗിക്കുകയും ചെയ്യുക <span>.
ശൂന്യമായ ഘടകങ്ങളിൽ മാത്രം ഉപയോഗിക്കുന്നതിന്
ടെക്സ്റ്റ് ഉള്ളടക്കം ഇല്ലാത്തതും ചൈൽഡ് എലമെന്റുകൾ ഇല്ലാത്തതുമായ ഘടകങ്ങളിൽ മാത്രമേ ഐക്കൺ ക്ലാസുകൾ ഉപയോഗിക്കാവൂ.
ഐക്കൺ ഫോണ്ട് ലൊക്കേഷൻ മാറ്റുന്നു
../fonts/കംപൈൽ ചെയ്ത CSS ഫയലുകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ, ഐക്കൺ ഫോണ്ട് ഫയലുകൾ ഡയറക്ടറിയിൽ സ്ഥിതിചെയ്യുമെന്ന് ബൂട്ട്സ്ട്രാപ്പ് അനുമാനിക്കുന്നു . ആ ഫോണ്ട് ഫയലുകൾ നീക്കുകയോ പുനർനാമകരണം ചെയ്യുകയോ ചെയ്യുക എന്നതിനർത്ഥം CSS മൂന്ന് വഴികളിൽ ഒന്ന് അപ്ഡേറ്റ് ചെയ്യുക എന്നാണ്:
ഉറവിടം കുറവ് ഫയലുകളിൽ @icon-font-pathകൂടാതെ/അല്ലെങ്കിൽ വേരിയബിളുകൾ മാറ്റുക .@icon-font-name
നിങ്ങളുടെ നിർദ്ദിഷ്ട വികസന സജ്ജീകരണത്തിന് ഏറ്റവും അനുയോജ്യമായ ഏത് ഓപ്ഷനും ഉപയോഗിക്കുക.
ആക്സസ് ചെയ്യാവുന്ന ഐക്കണുകൾ
അസിസ്റ്റീവ് ടെക്നോളജികളുടെ ആധുനിക പതിപ്പുകൾ CSS സൃഷ്ടിച്ച ഉള്ളടക്കവും പ്രത്യേക യൂണികോഡ് പ്രതീകങ്ങളും പ്രഖ്യാപിക്കും. സ്ക്രീൻ റീഡറുകളിൽ (പ്രത്യേകിച്ച് ഐക്കണുകൾ പൂർണ്ണമായും അലങ്കാരത്തിനായി ഉപയോഗിക്കുമ്പോൾ) ഉദ്ദേശിക്കാത്തതും ആശയക്കുഴപ്പമുണ്ടാക്കുന്നതുമായ ഔട്ട്പുട്ട് ഒഴിവാക്കാൻ, ഞങ്ങൾ അവയെ aria-hidden="true"ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് മറയ്ക്കുന്നു.
നിങ്ങൾ അർത്ഥം അറിയിക്കാൻ ഒരു ഐക്കൺ ഉപയോഗിക്കുകയാണെങ്കിൽ (അലങ്കാര ഘടകമെന്ന നിലയിൽ മാത്രമല്ല), ഈ അർത്ഥം സഹായ സാങ്കേതികവിദ്യകളിലേക്കും എത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുക - ഉദാഹരണത്തിന്, .sr-onlyക്ലാസിനൊപ്പം ദൃശ്യപരമായി മറച്ചിരിക്കുന്ന അധിക ഉള്ളടക്കം ഉൾപ്പെടുത്തുക.
മറ്റ് ടെക്സ്റ്റ് ഇല്ലാതെയാണ് നിങ്ങൾ നിയന്ത്രണങ്ങൾ സൃഷ്ടിക്കുന്നതെങ്കിൽ ( <button>ഒരു ഐക്കൺ മാത്രം അടങ്ങിയിരിക്കുന്നതുപോലെ), നിയന്ത്രണത്തിന്റെ ഉദ്ദേശ്യം തിരിച്ചറിയാൻ നിങ്ങൾ എല്ലായ്പ്പോഴും ഇതര ഉള്ളടക്കം നൽകണം, അതുവഴി സഹായകമായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് ഇത് അർത്ഥമാക്കും. ഈ സാഹചര്യത്തിൽ, നിങ്ങൾക്ക് aria-labelനിയന്ത്രണത്തിൽ തന്നെ ഒരു ആട്രിബ്യൂട്ട് ചേർക്കാം.
ഉദാഹരണങ്ങൾ
ഒരു ടൂൾബാർ, നാവിഗേഷൻ അല്ലെങ്കിൽ മുൻകൂട്ടി തയ്യാറാക്കിയ ഫോം ഇൻപുട്ടുകൾക്കായി ബട്ടണുകൾ, ബട്ടൺ ഗ്രൂപ്പുകൾ എന്നിവയിൽ അവ ഉപയോഗിക്കുക.
ഇത് ഒരു പിശക് സന്ദേശമാണെന്ന് അറിയിക്കാൻ ഒരു അലേർട്ടിൽ ഉപയോഗിച്ചിരിക്കുന്ന ഒരു ഐക്കൺ .sr-only, സഹായ സാങ്കേതിക വിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് ഈ സൂചന നൽകുന്നതിനുള്ള അധിക വാചകം.
ഡ്രോപ്പ്ഡൗണിന്റെ ട്രിഗറും ഡ്രോപ്പ്ഡൗൺ മെനുവും .dropdownഅല്ലെങ്കിൽ പ്രഖ്യാപിക്കുന്ന മറ്റൊരു ഘടകം പൊതിയുക position: relative;. തുടർന്ന് മെനുവിന്റെ HTML ചേർക്കുക.
ഡിഫോൾട്ടായി, ഒരു ഡ്രോപ്പ്ഡൗൺ മെനു സ്വയമേവ 100% അതിന്റെ രക്ഷിതാവിന്റെ മുകളിൽ നിന്നും ഇടത് വശത്തും സ്ഥാനം പിടിക്കുന്നു. ഡ്രോപ്പ്ഡൗൺ മെനു വലത്തേക്ക് വിന്യസിക്കുന്നതിന് .dropdown-menu-righta ലേക്ക് ചേർക്കുക ..dropdown-menu
അധിക പൊസിഷനിംഗ് ആവശ്യമായി വന്നേക്കാം
ഡോക്യുമെന്റിന്റെ സാധാരണ ഒഴുക്കിനുള്ളിൽ CSS വഴി ഡ്രോപ്പ്ഡൗണുകൾ സ്വയമേവ സ്ഥാനം പിടിക്കുന്നു. ഇതിനർത്ഥം, ചില overflowപ്രോപ്പർട്ടികൾ ഉള്ള രക്ഷിതാക്കൾ ഡ്രോപ്പ്ഡൗണുകൾ ക്രോപ്പ് ചെയ്തേക്കാം അല്ലെങ്കിൽ വ്യൂപോർട്ടിന്റെ പരിധിക്ക് പുറത്ത് ദൃശ്യമാകാം. ഈ പ്രശ്നങ്ങൾ ഉണ്ടാകുമ്പോൾ അവ സ്വയം പരിഹരിക്കുക.
ഒഴിവാക്കിയ .pull-rightവിന്യാസം
.pull-rightv3.1.0 മുതൽ, ഡ്രോപ്പ്ഡൗൺ മെനുകളിൽ ഞങ്ങൾ ഒഴിവാക്കിയിരിക്കുന്നു . ഒരു മെനു വലത് വിന്യസിക്കാൻ, ഉപയോഗിക്കുക .dropdown-menu-right. മെനു സ്വയമേവ വിന്യസിക്കാൻ navbar-ലെ വലത് വിന്യസിച്ച nav ഘടകങ്ങൾ ഈ ക്ലാസിന്റെ മിക്സിൻ പതിപ്പ് ഉപയോഗിക്കുന്നു. അതിനെ മറികടക്കാൻ, ഉപയോഗിക്കുക .dropdown-menu-left.
തലക്കെട്ടുകൾ
ഏതെങ്കിലും ഡ്രോപ്പ്ഡൗൺ മെനുവിലെ പ്രവർത്തനങ്ങളുടെ വിഭാഗങ്ങൾ ലേബൽ ചെയ്യുന്നതിന് ഒരു തലക്കെട്ട് ചേർക്കുക.
ബട്ടൺ ഗ്രൂപ്പിനൊപ്പം ഒരൊറ്റ വരിയിൽ ബട്ടണുകളുടെ ഒരു ശ്രേണി കൂട്ടുക. ഞങ്ങളുടെ ബട്ടണുകൾ പ്ലഗിൻ ഉപയോഗിച്ച് ഓപ്ഷണൽ JavaScript റേഡിയോയും ചെക്ക്ബോക്സ് ശൈലി പെരുമാറ്റവും ചേർക്കുക .
ബട്ടൺ ഗ്രൂപ്പുകളിലെ ടൂൾടിപ്പുകളും പോപോവറുകളും പ്രത്യേക ക്രമീകരണം ആവശ്യമാണ്
ഒരു എന്നതിനുള്ളിലെ ഘടകങ്ങളിൽ ടൂൾടിപ്പുകളോ പോപ്പോവറോ ഉപയോഗിക്കുമ്പോൾ , അനാവശ്യ പാർശ്വഫലങ്ങൾ ഒഴിവാക്കാനുള്ള .btn-groupഓപ്ഷൻ നിങ്ങൾ വ്യക്തമാക്കേണ്ടതുണ്ട് container: 'body'(ഉദാഹരണത്തിന്, മൂലകം വിശാലമാകുന്നത് കൂടാതെ/അല്ലെങ്കിൽ ടൂൾടിപ്പ് അല്ലെങ്കി��� പോപോവർ പ്രവർത്തനക്ഷമമാകുമ്പോൾ അതിന്റെ വൃത്താകൃതിയിലുള്ള മൂലകൾ നഷ്ടപ്പെടുന്നത് പോലെ).
ശരിയാണെന്ന് ഉറപ്പുവരുത്തി roleഒരു ലേബൽ നൽകുക
സ്ക്രീൻ റീഡറുകൾ പോലെയുള്ള സഹായ സാങ്കേതിക വിദ്യകൾക്ക്, ബട്ടണുകളുടെ ഒരു ശ്രേണി ഗ്രൂപ്പുചെയ്തിരിക്കുന്നുവെന്ന് അറിയിക്കുന്നതിന്, ഉചിതമായ ഒരു roleആട്രിബ്യൂട്ട് നൽകേണ്ടതുണ്ട്. ബട്ടൺ ഗ്രൂപ്പുകൾക്ക്, ഇത് role="group", ടൂൾബാറുകൾക്ക് ഒരു role="toolbar".
കൂടാതെ, ഗ്രൂപ്പുകൾക്കും ടൂൾബാറുകൾക്കും വ്യക്തമായ ഒരു ലേബൽ നൽകണം, കാരണം ശരിയായ roleആട്രിബ്യൂട്ട് ഉണ്ടായിരുന്നിട്ടും മിക്ക സഹായ സാങ്കേതിക വിദ്യകളും അവ പ്രഖ്യാപിക്കില്ല. ഇവിടെ നൽകിയിരിക്കുന്ന ഉദാഹരണങ്ങളിൽ, ഞങ്ങൾ ഉപയോഗിക്കുന്നു aria-label, എന്നാൽ ഇതരമാർഗങ്ങളും aria-labelledbyഉപയോഗിക്കാം.
അടിസ്ഥാന ഉദാഹരണം
.btnഇൻ ഉപയോഗിച്ച് ബട്ടണുകളുടെ ഒരു ശ്രേണി പൊതിയുക .btn-group.
ബട്ടൺ ടൂൾബാർ
കൂടുതൽ സങ്കീർണ്ണമായ ഘടകങ്ങൾക്കായി സെറ്റുകളെ സംയോജിപ്പിക്കുക <div class="btn-group">.<div class="btn-toolbar">
വലിപ്പം
ഒരു ഗ്രൂപ്പിലെ എല്ലാ ബട്ടണുകളിലേക്കും ബട്ടൺ സൈസിംഗ് ക്ലാസുകൾ പ്രയോഗിക്കുന്നതിനുപകരം, ഒന്നിലധികം ഗ്രൂപ്പുകളെ കൂടുകൂട്ടുമ്പോൾ ഉൾപ്പെടെ .btn-group-*ഓരോന്നിലേക്കും ചേർക്കുക..btn-group
നെസ്റ്റിംഗ്
ഡ്രോപ്പ്ഡൗൺ മെനുകൾ ഒരു കൂട്ടം ബട്ടണുകൾ ചേർത്ത് വേണമെങ്കിൽ .btn-groupമറ്റൊന്നിനുള്ളിൽ വയ്ക്കുക ..btn-group
ഒരു കൂട്ടം ബട്ടണുകൾ തിരശ്ചീനമായി അടുക്കുന്നതിനുപകരം ലംബമായി അടുക്കിയിരിക്കുന്നതായി ദൃശ്യമാക്കുക. സ്പ്ലിറ്റ് ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകൾ ഇവിടെ പിന്തുണയ്ക്കുന്നില്ല.
ഒരു കൂട്ടം ബട്ടണുകൾ അതിന്റെ രക്ഷകർത്താവിന്റെ മുഴുവൻ വീതിയിലും വ്യാപിക്കുന്നതിന് തുല്യ വലുപ്പത്തിൽ നീട്ടുക. ബട്ടൺ ഗ്രൂപ്പിനുള്ളിലെ ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകളിലും പ്രവർത്തിക്കുന്നു.
അതിർത്തികൾ കൈകാര്യം ചെയ്യുന്നു
ബട്ടണുകൾ (അതായത് ) ന്യായീകരിക്കാൻ ഉപയോഗിക്കുന്ന നിർദ്ദിഷ്ട HTML, CSS എന്നിവ കാരണം display: table-cellഅവയ്ക്കിടയിലുള്ള ബോർഡറുകൾ ഇരട്ടിയായി. സാധാരണ ബട്ടൺ ഗ്രൂപ്പുകളിൽ, margin-left: -1pxബോർഡറുകൾ നീക്കം ചെയ്യുന്നതിനുപകരം അടുക്കിവയ്ക്കാൻ ഉപയോഗിക്കുന്നു. എന്നിരുന്നാലും, marginകൂടെ പ്രവർത്തിക്കുന്നില്ല display: table-cell. തൽഫലമായി, ബൂട്ട്സ്ട്രാപ്പിലേക്കുള്ള നിങ്ങളുടെ ഇഷ്ടാനുസൃതമാക്കലുകളെ ആശ്രയിച്ച്, ബോർഡറുകൾ നീക്കംചെയ്യാനോ വീണ്ടും കളർ ചെയ്യാനോ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം.
IE8, അതിർത്തികൾ
ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 8, അത് ഓണായാലും ഘടകങ്ങളായാലും, ഒരു നീതീകരിക്കപ്പെട്ട ബട്ടൺ ഗ്രൂപ്പിലെ ബട്ടണുകളിൽ ബോർഡറുകൾ റെൻഡർ <a>ചെയ്യുന്നില്ല <button>. അതിനെ മറികടക്കാൻ, ഓരോ ബട്ടണും മറ്റൊന്നിൽ പൊതിയുക .btn-group.
<a>മൂലകങ്ങൾ ബട്ടണുകളായി പ്രവർത്തിക്കാൻ ഉപയോഗിക്കുന്നുവെങ്കിൽ - മറ്റൊരു പ്രമാണത്തിലേക്കോ നിലവിലെ പേജിലെ വിഭാഗത്തിലേക്കോ നാവിഗേറ്റ് ചെയ്യുന്നതിനുപകരം, ഇൻ-പേജ് പ്രവർത്തനം പ്രവർത്തനക്ഷമമാക്കുന്നു role="button".
<button>ഘടകങ്ങൾ ഉപയോഗിച്ച്
<button>ഘടകങ്ങൾക്കൊപ്പം നീതീകരിക്കപ്പെട്ട ബട്ടൺ ഗ്രൂപ്പുകൾ ഉപയോഗിക്കുന്നതിന് , നിങ്ങൾ ഓരോ ബട്ടണും ഒരു ബട്ടൺ ഗ്രൂപ്പിൽ പൊതിയണം . ഘടകങ്ങളുടെ ന്യായീകരണത്തിനായി മിക്ക ബ്രൗസറുകളും ഞങ്ങളുടെ CSS ശരിയായി പ്രയോഗിക്കുന്നില്ല <button>, പക്ഷേ ഞങ്ങൾ ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകളെ പിന്തുണയ്ക്കുന്നതിനാൽ, ഞങ്ങൾക്ക് അതിനായി പ്രവർത്തിക്കാനാകും.
ബട്ടൺ ഡ്രോപ്പ്ഡൗണുകൾ
ഒരു ഡ്രോപ്പ്ഡൗൺ മെനു പ്രവർത്തനക്ഷമമാക്കാൻ ഏതെങ്കിലും ബട്ടൺ ഉപയോഗിക്കുക, അത് എയിൽ സ്ഥാപിച്ച് .btn-groupശരിയായ മെനു മാർക്ക്അപ്പ് നൽകൂ.
ഏതെങ്കിലും ടെക്സ്റ്റ് അടിസ്ഥാനമാക്കിയുള്ളതിന് മുമ്പോ ശേഷമോ അല്ലെങ്കിൽ ഇരുവശങ്ങളിലോ ടെക്സ്റ്റോ ബട്ടണുകളോ ചേർത്ത് ഫോം നിയന്ത്രണങ്ങൾ വിപുലീകരിക്കുക <input>. .input-groupഒരു ഉപയോഗിച്ച് ഉപയോഗിക്കുക .input-group-addonഅല്ലെങ്കിൽ .input-group-btnഒരു സിംഗിളിലേക്ക് ഘടകങ്ങൾ മുൻനിറുത്തുകയോ കൂട്ടിച്ചേർക്കുകയോ ചെയ്യുക .form-control.
വാചകങ്ങൾ <input>മാത്രം
<select>WebKit ബ്രൗസറുകളിൽ പൂർണ്ണമായി സ്റ്റൈൽ ചെയ്യാൻ കഴിയാത്തതിനാൽ ഘടകങ്ങൾ ഇവിടെ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക .
ചില സന്ദർഭങ്ങളിൽ <textarea>അവയുടെ ആട്രിബ്യൂട്ട് മാനിക്കപ്പെടാത്തതിനാൽ ഇവിടെ ഘടകങ്ങൾ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക .rows
ഇൻപുട്ട് ഗ്രൂപ്പുകളിലെ ടൂൾടിപ്പുകളും പോപോവറുകളും പ്രത്യേക ക്രമീകരണം ആവശ്യമാണ്
ഒരു എന്നതിനുള്ളിലെ ഘടകങ്ങളിൽ ടൂൾടിപ്പുകളോ പോപോവറോ ഉപയോഗിക്കുമ്പോൾ , അനാവശ്യ പാർശ്വഫലങ്ങൾ ഒഴിവാക്കാനുള്ള .input-groupഓപ്ഷൻ നിങ്ങൾ വ്യക്തമാക്കേണ്ടതുണ്ട് container: 'body'(ഉദാഹരണത്തിന്, മൂലകം വിശാലമാകുന്നത് കൂടാതെ/അല്ലെങ്കിൽ ടൂൾടിപ്പ് അല്ലെങ്കിൽ പോപോവർ പ്രവർത്തനക്ഷമമാകുമ്പോൾ അതിന്റെ വൃത്താകൃതിയിലുള്ള മൂലകൾ നഷ്ടപ്പെടുന്നത് പോലെ).
മറ്റ് ഘടകങ്ങളുമായി കലർത്തരുത്
ഫോം ഗ്രൂപ്പുകളോ ഗ്രിഡ് കോളം ക്ലാസുകളോ ഇൻപുട്ട് ഗ്രൂപ്പുകളുമായി നേരിട്ട് മിക്സ് ചെയ്യരുത്. പകരം, ഫോം ഗ്രൂപ്പിന്റെയോ ഗ്രിഡുമായി ബന്ധപ്പെട്ട ഘടകത്തിന്റെയോ ഉള്ളിൽ ഇൻപുട്ട് ഗ്രൂപ്പ് നെസ്റ്റ് ചെയ്യുക.
എപ്പോഴും ലേബലുകൾ ചേർക്കുക
ഓരോ ഇൻപുട്ടിനും നിങ്ങൾ ഒരു ലേബൽ ഉൾപ്പെടുത്തിയില്ലെങ്കിൽ നിങ്ങളുടെ ഫോമുകളിൽ സ്ക്രീൻ റീഡർമാർക്ക് പ്രശ്നമുണ്ടാകും. ഈ ഇൻപുട്ട് ഗ്രൂപ്പുകൾക്കായി, ഏതെങ്കിലും അധിക ലേബലോ പ്രവർത്തനമോ സഹായ സാങ്കേതിക വിദ്യകളിലേക്ക് എത്തിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.
ഉപയോഗിക്കേണ്ട കൃത്യമായ സാങ്കേതികത (കാണാവുന്ന <label>ഘടകങ്ങൾ, ക്ലാസ് <label>ഉപയോഗിച്ച് മറച്ച ഘടകങ്ങൾ , അല്ലെങ്കിൽ , , അല്ലെങ്കിൽ ആട്രിബ്യൂട്ടിന്റെ ഉപയോഗം ) കൂടാതെ എന്ത് അധിക വിവരങ്ങളാണ് കൈമാറേണ്ടത്, നിങ്ങൾ നടപ്പിലാക്കുന്ന ഇന്റർഫേസ് വിജറ്റിന്റെ കൃത്യമായ തരം അനുസരിച്ച് വ്യത്യാസപ്പെടും. ഈ വിഭാഗത്തിലെ ഉദാഹരണങ്ങൾ കുറച്ച് നിർദ്ദേശിച്ച, കേസ്-നിർദ്ദിഷ്ട സമീപനങ്ങൾ നൽകുന്നു..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder
അടിസ്ഥാന ഉദാഹരണം
ഒരു ഇൻപുട്ടിന്റെ ഇരുവശത്തും ഒരു ആഡ്-ഓൺ അല്ലെങ്കിൽ ബട്ടൺ സ്ഥാപിക്കുക. നിങ്ങൾക്ക് ഒരു ഇൻപുട്ടിന്റെ ഇരുവശത്തും ഒരെണ്ണം സ്ഥാപിക്കാം.
ഒരു വശത്ത് ഒന്നിലധികം ആഡ്-ഓണുകൾ ( .input-group-addonഅല്ലെങ്കിൽ ) ഞങ്ങൾ പിന്തുണയ്ക്കുന്നില്ല ..input-group-btn
ഒരൊറ്റ ഇൻപുട്ട് ഗ്രൂപ്പിൽ ഒന്നിലധികം ഫോം-നിയന്ത്രണങ്ങളെ ഞങ്ങൾ പിന്തുണയ്ക്കുന്നില്ല.
വലിപ്പം
ആപേക്ഷിക ഫോം സൈസിംഗ് ക്ലാസുകൾ അതിലേക്ക് ചേർക്കുക, .input-groupഉള്ളിലുള്ള ഉള്ളടക്കങ്ങൾ സ്വയമേവ വലുപ്പം മാറ്റും-ഓരോ ഘടകത്തിലും ഫോം കൺട്രോൾ സൈസ് ക്ലാസുകൾ ആവർത്തിക്കേണ്ട ആവശ്യമില്ല.
ചെക്ക്ബോക്സുകളും റേഡിയോ ആഡ്ഓണുകളും
ടെക്സ്റ്റിന് പകരം ഇൻപുട്ട് ഗ്രൂപ്പിന്റെ ആഡ്ഓണിൽ ഏതെങ്കിലും ചെക്ക്ബോക്സോ റേഡിയോ ഓപ്ഷനോ സ്ഥാപിക്കുക.
ബട്ടൺ ആഡോണുകൾ
ഇൻപുട്ട് ഗ്രൂപ്പുകളിലെ ബട്ടണുകൾ അൽപ്പം വ്യത്യസ്തമാണ് കൂടാതെ ഒരു അധിക ലെവൽ നെസ്റ്റിംഗ് ആവശ്യമാണ്. എന്നതിനുപകരം, ബട്ടണുകൾ പൊതിയാൻ .input-group-addonനിങ്ങൾ ഉപയോഗിക്കേണ്ടതുണ്ട് . .input-group-btnഅസാധുവാക്കാൻ കഴിയാത്ത ഡിഫോൾട്ട് ബ്രൗസർ ശൈലികൾ കാരണം ഇത് ആവശ്യമാണ്.
ഡ്രോപ്പ്ഡൗൺ ഉള്ള ബട്ടണുകൾ
സെഗ്മെന്റഡ് ബട്ടണുകൾ
ഒന്നിലധികം ബട്ടണുകൾ
നിങ്ങൾക്ക് ഒരു വശത്ത് ഒരു ആഡ്-ഓൺ മാത്രമേ ഉണ്ടാകൂ എന്നിരിക്കെ, ഒറ്റയ്ക്കുള്ളിൽ നിങ്ങൾക്ക് ഒന്നിലധികം ബട്ടണുകൾ ഉണ്ടായിരിക്കാം .input-group-btn.
നവ്സ്
ബൂട്ട്സ്ട്രാപ്പിൽ ലഭ്യമായ Navs മാർക്ക്അപ്പ് പങ്കിട്ടു, അടിസ്ഥാന .navക്ലാസിൽ തുടങ്ങി, പങ്കിട്ട സ്റ്റേറ്റുകളും. ഓരോ ശൈലിയിലും മാറാൻ മോഡിഫയർ ക്ലാസുകൾ സ്വാപ്പ് ചെയ്യുക.
നാവിഗേഷനായി ഉപയോഗിക്കുന്ന navs ആക്സസ് ചെയ്യാവുന്നതാക്കുക
ഒരു നാവിഗേഷൻ ബാർ നൽകാൻ നിങ്ങൾ navs ഉപയോഗിക്കുകയാണെങ്കിൽ, role="navigation"ന്റെ ഏറ്റവും ലോജിക്കൽ പാരന്റ് കണ്ടെയ്നറിലേക്ക് a ചേർക്കുന്നത് ഉറപ്പാക്കുക, അല്ലെങ്കിൽ മുഴുവൻ നാവിഗേഷനും ചുറ്റും <ul>ഒരു ഘടകം പൊതിയുക . അസിസ്റ്റീവ് ടെക്നോളജികൾ വഴി ഒരു യഥാർത്ഥ പട്ടികയായി പ്രഖ്യാപിക്കുന്നതിൽ നിന്ന് ഇത് തടയുന്നതിനാൽ, <nav>റോൾ അതിൽ തന്നെ ചേർക്കരുത് .<ul>
ടാബുകൾ
ക്ലാസിന് അടിസ്ഥാന .nav-tabsക്ലാസ് ആവശ്യമാണെന്ന് ശ്രദ്ധിക്കുക ..nav
768px-ൽ കൂടുതൽ വീതിയുള്ള സ്ക്രീനുകളിൽ അവരുടെ രക്ഷിതാവിന്റെ തുല്യ വീതിയിൽ ടാബുകളോ ഗുളികകളോ എളുപ്പത്തിൽ നിർമ്മിക്കുക .nav-justified. ചെറിയ സ്ക്രീനുകളിൽ, നാവിക ലിങ്കുകൾ അടുക്കിയിരിക്കുന്നു.
ന്യായീകരിക്കപ്പെട്ട navbar nav ലിങ്കുകൾ നിലവിൽ പിന്തുണയ്ക്കുന്നില്ല.
സഫാരിയും പ്രതികരിക്കുന്ന ന്യായമായ നാവുകളും
v9.1.2 മുതൽ, Safari ഒരു ബഗ് പ്രദർശിപ്പിക്കുന്നു, അതിൽ നിങ്ങളുടെ ബ്രൗസർ തിരശ്ചീനമായി വലുപ്പം മാറ്റുന്നത് ന്യായീകരിക്കപ്പെട്ട nav-ൽ റെൻഡറിംഗ് പിശകുകൾക്ക് കാരണമാകുന്നു, അത് പുതുക്കുമ്പോൾ മായ്ക്കപ്പെടും. ഈ ബഗ് ന്യായീകരിക്കപ്പെട്ട nav ഉദാഹരണത്തിലും കാണിച്ചിരിക്കുന്നു .
നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെയോ സൈറ്റിന്റെയോ നാവിഗേഷൻ തലക്കെട്ടുകളായി പ്രവർത്തിക്കുന്ന റെസ്പോൺസീവ് മെറ്റാ ഘടകങ്ങളാണ് Navbars. മൊബൈൽ കാഴ്ചകളിൽ അവ തകരാൻ തുടങ്ങുന്നു (ടോഗിൾ ചെയ്യാവുന്നവയാണ്), ലഭ്യമായ വ്യൂപോർട്ട് വീതി കൂടുന്നതിനനുസരിച്ച് തിരശ്ചീനമായി മാറുന്നു.
ന്യായീകരിക്കപ്പെട്ട navbar nav ലിങ്കുകൾ നിലവിൽ പിന്തുണയ്ക്കുന്നില്ല.
കവിഞ്ഞൊഴുകുന്ന ഉള്ളടക്കം
നിങ്ങളുടെ നവബാറിലെ ഉള്ളടക്കത്തിന് എത്ര സ്ഥലം ആവശ്യമാണെന്ന് ബൂട്ട്സ്ട്രാപ്പിന് അറിയാത്തതിനാൽ, രണ്ടാമത്തെ വരിയിലേക്ക് ഉള്ളടക്കം പൊതിയുന്നതിൽ നിങ്ങൾക്ക് പ്രശ്നങ്ങൾ നേരിടാം. ഇത് പരിഹരിക്കാൻ, നിങ്ങൾക്ക് ഇവ ചെയ്യാനാകും:
ചുരുക്കിയ മോഡിനും തിരശ്ചീന മോഡിനുമിടയിൽ നിങ്ങളുടെ നാവ്ബാർ മാറുന്ന പോയിന്റ് മാറ്റുക. വേരിയബിൾ ഇഷ്ടാനുസൃതമാക്കുക @grid-float-breakpointഅല്ലെങ്കിൽ നിങ്ങളുടെ സ്വന്തം മീഡിയ അന്വേഷണം ചേർക്കുക.
JavaScript പ്ലഗിൻ ആവശ്യമാണ്
JavaScript അപ്രാപ്തമാക്കുകയും വ്യൂപോർട്ട് ഇടുങ്ങിയതാണെങ്കിൽ നവബാർ തകരുകയും ചെയ്താൽ, നവബാർ വിപുലീകരിക്കാനും ഉള്ളിലെ ഉള്ളടക്കം കാണാനും കഴിയില്ല .navbar-collapse.
വ്യൂപോർട്ട് എന്നതിനേക്കാൾ ഇടുങ്ങിയിരിക്കുമ്പോൾ നവബാർ അതിന്റെ ലംബമായ മൊബൈൽ കാഴ്ചയിലേക്ക് തകരുകയും @grid-float-breakpointവ്യൂപോർട്ട് കുറഞ്ഞത് @grid-float-breakpointവീതിയിലായിരിക്കുമ്പോൾ അതിന്റെ തിരശ്ചീനമായ നോൺ-മൊബൈൽ കാഴ്ചയിലേക്ക് വികസിക്കുകയും ചെയ്യുന്നു. നവബാർ തകരുമ്പോൾ/വികസിക്കുന്നത് നിയന്ത്രിക്കാൻ ഈ വേരിയബിൾ ലെസ് സോഴ്സിൽ ക്രമീകരിക്കുക. സ്ഥിര മൂല്യം 768px(ഏറ്റവും ചെറിയ "ചെറിയ" അല്ലെങ്കിൽ "ടാബ്ലെറ്റ്" സ്ക്രീൻ) ആണ്.
നവബാറുകൾ ആക്സസ് ചെയ്യാവുന്നതാക്കുക
ഒരു ഘടകം ഉപയോഗിക്കുന്നത് ഉറപ്പാക്കുക <nav>അല്ലെങ്കിൽ, ഒരു പോലെയുള്ള കൂടുതൽ പൊതുവായ ഘടകം ഉപയോഗിക്കുകയാണെങ്കിൽ, സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്കുള്ള ഒരു ലാൻഡ്മാർക്ക് പ്രദേശമായി അതിനെ വ്യക്തമായി തിരിച്ചറിയുന്നതിന് എല്ലാ നാവ്ബാറിലേക്കും <div>a ചേർക്കുക .role="navigation"
ബ്രാൻഡ് ചിത്രം
ഒരു എന്നതിനായുള്ള വാചകം മാറ്റി നിങ്ങളുടെ സ്വന്തം ഇമേജ് ഉപയോഗിച്ച് navbar ബ്രാൻഡ് മാറ്റിസ്ഥാപിക്കുക <img>. അതിന് .navbar-brandഅതിന്റേതായ പാഡിംഗും ഉയരവും ഉള്ളതിനാൽ, നിങ്ങളുടെ ഇമേജിനെ ആശ്രയിച്ച് കുറച്ച് CSS അസാധുവാക്കേണ്ടി വന്നേക്കാം.
ഫോമുകൾ
.navbar-formഇടുങ്ങിയ വ്യൂപോർട്ടുകളിൽ ശരിയായ ലംബ വിന്യാസത്തിനും പൊളിഞ്ഞ പെരുമാറ്റത്തിനും ഉള്ളിൽ ഫോം ഉള്ളടക്കം സ്ഥാപിക്കുക . navbar ഉള്ളടക്കത്തിനുള്ളിൽ അത് എവിടെയാണ് താമസിക്കുന്നതെന്ന് തീരുമാനിക്കാൻ വിന്യാസ ഓപ്ഷനുകൾ ഉപയോഗിക്കുക.
ഒരു മുന്നറിയിപ്പ് എന്ന നിലയിൽ .navbar-form, അതിന്റെ കോഡിന്റെ ഭൂരിഭാഗവും .form-inlineമിക്സിൻ വഴി പങ്കിടുന്നു. ഇൻപുട്ട് ഗ്രൂപ്പുകൾ പോലെയുള്ള ചില ഫോം നിയന്ത്രണങ്ങൾക്ക്, ഒരു നവബാറിനുള്ളിൽ നിശ്ചിത വീതികൾ ശരിയായി കാണിക്കേണ്ടത് ആവശ്യമായി വന്നേക്കാം.
ഓരോ ഇൻപുട്ടിനും നിങ്ങൾ ഒരു ലേബൽ ഉൾപ്പെടുത്തിയില്ലെങ്കിൽ നിങ്ങളുടെ ഫോമുകളിൽ സ്ക്രീൻ റീഡർമാർക്ക് പ്രശ്നമുണ്ടാകും. .sr-onlyഈ ഇൻലൈൻ ഫോമുകൾക്കായി, ക്ലാസ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ലേബലുകൾ മറയ്ക്കാം . aria-label, aria-labelledbyഅല്ലെങ്കിൽ titleആട്രിബ്യൂട്ട് പോലുള്ള സഹായ സാങ്കേതിക വിദ്യകൾക്കായി ഒരു ലേബൽ നൽകുന്നതിന് മറ്റ് ഇതര രീതികളുണ്ട് . ഇവയൊന്നും ഇല്ലെങ്കിൽ, സ്ക്രീൻ റീഡറുകൾ placeholderആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നതിന് അവലംബിച്ചേക്കാം, എന്നാൽ placeholderമറ്റ് ലേബലിംഗ് രീതികൾക്ക് പകരമായി ഉപയോഗിക്കുന്നത് ശുപാർശ ചെയ്യുന്നില്ല എന്നത് ശ്രദ്ധിക്കുക.
ബട്ടണുകൾ
navbar-ൽ ലംബമായി കേന്ദ്രീകരിക്കാൻ a-ൽ വസിക്കാത്ത ഘടകങ്ങളിലേക്ക് .navbar-btnക്ലാസ് ചേർക്കുക .<button><form>
സന്ദർഭ-നിർദ്ദിഷ്ട ഉപയോഗം
സ്റ്റാൻഡേർഡ് ബട്ടൺ ക്ലാസുകൾ പോലെ , എലമെന്റുകളിലും .navbar-btnഉപയോഗിക്കാനാകും <a>. <input>എന്നിരുന്നാലും, എന്നതിനുള്ളിലെ ഘടകങ്ങളിൽ .navbar-btnസ്റ്റാൻഡേർഡ് ബട്ടൺ ക്ലാസുകളോ ഉപയോഗിക്കാനോ പാടില്ല .<a>.navbar-nav
വാചകം
ഒരു മൂലകത്തിൽ ടെക്സ്റ്റിന്റെ സ്ട്രിംഗുകൾ പൊതിയുക .navbar-text, സാധാരണയായി <p>ശരിയായ ലീഡിനും വർണ്ണത്തിനുമായി ഒരു ടാഗിൽ.
നാവികമല്ലാത്ത ലിങ്കുകൾ
സാധാരണ navbar നാവിഗേഷൻ ഘടകത്തിൽ ഉൾപ്പെടാത്ത സാധാരണ ലിങ്കുകൾ ഉപയോഗിക്കുന്ന ആളുകൾക്ക് .navbar-link, ഡിഫോൾട്ടും വിപരീത navbar ഓപ്ഷനുകൾക്കും ശരിയായ നിറങ്ങൾ ചേർക്കാൻ ക്ലാസ് ഉപയോഗിക്കുക.
ഘടകം വിന്യാസം
.navbar-leftഅല്ലെങ്കിൽ .navbar-rightയൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് nav ലിങ്കുകൾ, ഫോമുകൾ, ബട്ടണുകൾ അല്ലെങ്കിൽ ടെക്സ്റ്റ് വിന്യസിക്കുക . രണ്ട് ക്ലാസുകളും നിർദ്ദിഷ്ട ദിശയിൽ ഒരു CSS ഫ്ലോട്ട് ചേർക്കും. ഉദാഹരണത്തിന്, nav ലിങ്കുകൾ വിന്യസിക്കാൻ, <ul>പ്രയോഗിച്ച അതാത് യൂട്ടിലിറ്റി ക്ലാസ് ഉപയോഗിച്ച് അവയെ പ്രത്യേകമായി ഇടുക.
ഈ ക്ലാസുകൾ എന്നിവയുടെ മിക്സിൻ-എഡ് പതിപ്പുകളാണ് .pull-left, .pull-rightഎന്നാൽ ഉപകരണ വലുപ്പത്തിലുടനീളം നവബാർ ഘടകങ്ങൾ എളുപ്പത്തിൽ കൈകാര്യം ചെയ്യുന്നതിനുള്ള മീഡിയ അന്വേഷണങ്ങളിലേക്ക് അവ സ്കോപ്പ് ചെയ്തിരിക്കുന്നു.
ഒന്നിലധികം ഘടകങ്ങൾ വലത് വിന്യസിക്കുന്നു
നവബാറുകൾക്ക് നിലവിൽ ഒന്നിലധികം .navbar-rightക്ലാസുകളുള്ള ഒരു പരിമിതിയുണ്ട്. ശരിയായ സ്പേസ് ഉള്ളടക്കത്തിന്, അവസാന .navbar-rightഘടകത്തിൽ ഞങ്ങൾ നെഗറ്റീവ് മാർജിൻ ഉപയോഗിക്കുന്നു. ആ ക്ലാസ് ഉപയോഗിക്കുന്ന ഒന്നിലധികം ഘടകങ്ങൾ ഉള്ളപ്പോൾ, ഈ മാർജിനുകൾ ഉദ്ദേശിച്ച രീതിയിൽ പ്രവർത്തിക്കില്ല.
ആ ഘടകം v4-ൽ വീണ്ടും എഴുതാൻ കഴിയുമ്പോൾ ഞങ്ങൾ ഇത് വീണ്ടും സന്ദർശിക്കും.
മുകളിൽ ഉറപ്പിച്ചു
.navbar-fixed-topഒരു .containerഅല്ലെങ്കിൽ .container-fluidകേന്ദ്രത്തിലേക്കും പാഡ് നവബാർ ഉള്ളടക്കത്തിലേക്കും ചേർക്കുകയും ഉൾപ്പെടുത്തുകയും ചെയ്യുക.
ബോഡി പാഡിംഗ് ആവശ്യമാണ്
ഫിക്സഡ് നാവ്ബാർ നിങ്ങളുടെ മറ്റ് ഉള്ളടക്കം ഓവർലേ ചെയ്യും, നിങ്ങൾ paddingഎന്നതിന്റെ മുകളിൽ ചേർക്കുന്നില്ലെങ്കിൽ <body>. നിങ്ങളുടെ സ്വന്തം മൂല്യങ്ങൾ പരീക്ഷിക്കുക അല്ലെങ്കിൽ ചുവടെയുള്ള ഞങ്ങളുടെ സ്നിപ്പറ്റ് ഉപയോഗിക്കുക. നുറുങ്ങ്: ഡിഫോൾട്ടായി, navbar 50px ഉയരത്തിലാണ്.
കോർ ബൂട്ട്സ്ട്രാപ്പ് CSS- ന് ശേഷം ഇത് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക .
അടിയിലേക്ക് ഉറപ്പിച്ചു
.navbar-fixed-bottomഒരു .containerഅല്ലെങ്കിൽ .container-fluidകേന്ദ്രത്തിലേക്കും പാഡ് നവബാർ ഉള്ളടക്കത്തിലേക്കും ചേർക്കുകയും ഉൾപ്പെടുത്തുകയും ചെയ്യുക.
ബോഡി പാഡിംഗ് ആവശ്യമാണ്
ഫിക്സഡ് നാവ്ബാർ നിങ്ങളുടെ മറ്റ് ഉള്ളടക്കം ഓവർലേ ചെയ്യും, നിങ്ങൾ paddingഎന്നതിന്റെ അടിയിലേക്ക് ചേർക്കുന്നില്ലെങ്കിൽ <body>. നിങ്ങളുടെ സ്വന്തം മൂല്യങ്ങൾ പരീക്ഷിക്കുക അല്ലെങ്കിൽ ചുവടെയുള്ള ഞങ്ങളുടെ സ്നിപ്പറ്റ് ഉപയോഗിക്കുക. നുറുങ്ങ്: ഡിഫോൾട്ടായി, navbar 50px ഉയരത്തിലാണ്.
കോർ ബൂട്ട്സ്ട്രാപ്പ് CSS- ന് ശേഷം ഇത് ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക .
സ്റ്റാറ്റിക് ടോപ്പ്
ഒരു പൂർണ്ണ വീതിയുള്ള നാവ്ബാർ സൃഷ്ടിക്കുക, അത് ഒരു അല്ലെങ്കിൽ കേന്ദ്രത്തിലേക്കും പാഡ് നാവ്ബാർ ഉള്ളടക്കം ചേർത്തും .navbar-static-topഉൾപ്പെടുത്തിയും പേജിനൊപ്പം സ്ക്രോൾ ചെയ്യുന്നു..container.container-fluid
ക്ലാസുകളിൽ നിന്ന് വ്യത്യസ്തമായി .navbar-fixed-*, നിങ്ങൾ ഒരു പാഡിംഗും മാറ്റേണ്ടതില്ല body.
വിപരീത നവബാർ
ചേർത്തുകൊണ്ട് നവബാറിന്റെ രൂപം പരിഷ്ക്കരിക്കുക .navbar-inverse.
ബ്രെഡ്ക്രംബ്സ്
ഒരു നാവിഗേഷൻ ശ്രേണിയിൽ നിലവിലെ പേജിന്റെ സ്ഥാനം സൂചിപ്പിക്കുക.
Rdio-ൽ നിന്ന് പ്രചോദനം ഉൾക്കൊണ്ട ലളിതമായ പേജിനേഷൻ, ആപ്പുകൾക്കും തിരയൽ ഫലങ്ങൾക്കും മികച്ചതാണ്. വലിയ ബ്ലോക്ക് നഷ്ടപ്പെടാൻ പ്രയാസമാണ്, എളുപ്പത്തിൽ അളക്കാവുന്നതും വലിയ ക്ലിക്ക് ഏരിയകളും നൽകുന്നു.
പേജിനേഷൻ ഘടകം ലേബൽ ചെയ്യുന്നു
<nav>സ്ക്രീൻ റീഡറുകളിലേക്കും മറ്റ് സഹായ സാങ്കേതികവിദ്യകളിലേക്കും ഒരു നാവിഗേഷൻ വിഭാഗമായി തിരിച്ചറിയാൻ പേജിനേഷൻ ഘടകം ഒരു ഘടകത്തിൽ പൊതിഞ്ഞിരിക്കണം . കൂടാതെ, ഒരു പേജിന് അത്തരത്തിലുള്ള ഒന്നിലധികം നാവിഗേഷൻ വിഭാഗങ്ങൾ (ഹെഡറിലെ പ്രാഥമിക നാവിഗേഷൻ അല്ലെങ്കിൽ ഒരു സൈഡ്ബാർ നാവിഗേഷൻ പോലുള്ളവ) ഉണ്ടായിരിക്കാൻ സാധ്യതയുള്ളതിനാൽ, അതിന്റെ ഉദ്ദേശ്യം പ്രതിഫലിപ്പിക്കുന്ന ഒരു വിവരണം aria-labelനൽകുന്നത് ഉചിതമാണ്. <nav>ഉദാഹരണത്തിന്, ഒരു കൂട്ടം തിരയൽ ഫലങ്ങൾക്കിടയിൽ നാവിഗേറ്റ് ചെയ്യാൻ പേജിനേഷൻ ഘടകം ഉപയോഗിക്കുന്നുവെങ്കിൽ, ഉചിതമായ ഒരു ലേബൽ aria-label="Search results pages".
അപ്രാപ്തവും സജീവവുമായ സംസ്ഥാനങ്ങൾ
വ്യത്യസ്ത സാഹചര്യങ്ങൾക്കനുസരിച്ച് ലിങ്കുകൾ ഇഷ്ടാനുസൃതമാക്കാവുന്നതാണ്. .disabledക്ലിക്ക് ചെയ്യാത്ത ലിങ്കുകൾക്കും .activeനിലവിലെ പേജ് സൂചിപ്പിക്കാനും ഉപയോഗിക്കുക .
എന്നതിനായുള്ള സജീവമായതോ പ്രവർത്തനരഹിതമായതോ ആയ ആങ്കറുകൾ സ്വാപ്പ് ചെയ്യാൻ ഞങ്ങൾ ശുപാർശചെയ്യുന്നു <span>, അല്ലെങ്കിൽ മുൻ/അടുത്ത അമ്പടയാളങ്ങളുടെ കാര്യത്തിൽ ആങ്കർ ഒഴിവാക്കുക, ഉദ്ദേശിച്ച ശൈലികൾ നിലനിർത്തിക്കൊണ്ട് ക്ലിക്ക് പ്രവർത്തനം നീക്കം ചെയ്യുക.
വലിപ്പം
വലുതോ ചെറുതോ ആയ പേജിനേഷൻ ഇഷ്ടമാണോ? അധിക വലുപ്പങ്ങൾ ചേർക്കുക .pagination-lgഅല്ലെങ്കിൽ ചേർക്കുക..pagination-sm
പേജർ
ലൈറ്റ് മാർക്ക്അപ്പും ശൈലികളും ഉള്ള ലളിതമായ പേജിനേഷൻ നടപ്പിലാക്കലുകൾക്കായി വേഗത്തിലുള്ള മുമ്പത്തേതും അടുത്തതുമായ ലിങ്കുകൾ. ബ്ലോഗുകൾ അല്ലെങ്കിൽ മാഗസിനുകൾ പോലുള്ള ലളിതമായ സൈറ്റുകൾക്ക് ഇത് മികച്ചതാണ്.
പകരമായി, നിങ്ങൾക്ക് ഓരോ ലിങ്കും വശങ്ങളിലേക്ക് വിന്യസിക്കാം:
ഓപ്ഷണൽ അപ്രാപ്തമാക്കിയ അവസ്ഥ
പേജർ ലിങ്കുകൾ പേജിനേഷനിൽ നിന്നുള്ള പൊതുവായ .disabledയൂട്ടിലിറ്റി ക്ലാസും ഉപയോഗിക്കുന്നു.
ലേബലുകൾ
ഉദാഹരണം
ഉദാഹരണ തലക്കെട്ട് പുതിയത്
ഉദാഹരണ തലക്കെട്ട് പുതിയത്
ഉദാഹരണ തലക്കെട്ട് പുതിയത്
ഉദാഹരണ തലക്കെട്ട് പുതിയത്
ഉദാഹരണ തലക്കെട്ട് പുതിയത്
ഉദാഹരണ തലക്കെട്ട് പുതിയത്
ലഭ്യമായ വ്യതിയാനങ്ങൾ
ഒരു ലേബലിന്റെ രൂപഭാവം മാറ്റാൻ ചുവടെ സൂചിപ്പിച്ചിരിക്കുന്ന ഏതെങ്കിലും മോഡിഫയർ ക്ലാസുകൾ ചേർക്കുക.
ഡിഫോൾട്ട് പ്രാഥമിക വിജയ വിവരം മുന്നറിയിപ്പ് അപകടം
ടൺ കണക്കിന് ലേബലുകൾ ഉണ്ടോ?
നിങ്ങൾക്ക് ഒരു ഇടുങ്ങിയ കണ്ടെയ്നറിനുള്ളിൽ ഡസൻ കണക്കിന് ഇൻലൈൻ ലേബലുകൾ ഉണ്ടെങ്കിൽ, ഓരോന്നിനും അതിന്റേതായ inline-blockഘടകങ്ങൾ (ഐക്കൺ പോലെ) ഉള്ളപ്പോൾ റെൻഡറിംഗ് പ്രശ്നങ്ങൾ ഉണ്ടാകാം. ഇതിനെ ചുറ്റിപ്പറ്റിയുള്ള വഴി ക്രമീകരണമാണ് display: inline-block;. സന്ദർഭത്തിനും ഉദാഹരണത്തിനും, #13219 കാണുക .
ബാഡ്ജുകൾ
<span class="badge">ലിങ്കുകൾ, ബൂട്ട്സ്ട്രാപ്പ് navs എന്നിവയും മറ്റും ചേർത്തുകൊണ്ട് പുതിയതോ വായിക്കാത്തതോ ആയ ഇനങ്ങൾ എളുപ്പത്തിൽ ഹൈലൈറ്റ് ചെയ്യുക.
നിങ്ങളുടെ സൈറ്റിലെ പ്രധാന ഉള്ളടക്കം പ്രദർശിപ്പിക്കുന്നതിന് മുഴുവൻ വ്യൂപോർട്ടും ഓപ്ഷണലായി നീട്ടാൻ കഴിയുന്ന ഭാരം കുറഞ്ഞതും വഴക്കമുള്ളതുമായ ഘടകം.
ഹലോ വേൾഡ്!
ഇതൊരു ലളിതമായ ഹീറോ യൂണിറ്റാണ്, ഫീച്ചർ ചെയ്ത ഉള്ളടക്കത്തിലേക്കോ വിവരങ്ങളിലേക്കോ കൂടുതൽ ശ്രദ്ധ ക്ഷണിക്കുന്നതിനുള്ള ലളിതമായ ജംബോട്രോൺ ശൈലിയിലുള്ള ഘടകമാണ്.
ജംബോട്രോൺ പൂർണ്ണ വീതിയും വൃത്താകൃതിയിലുള്ള കോണുകളുമില്ലാതെയാക്കാൻ, എല്ലാ .containers-ന്റെയും പുറത്ത് വയ്ക്കുക, പകരം .containerഅകത്ത് ചേർക്കുക.
പേജ് തലക്കെട്ട്
h1ഒരു പേജിലെ ഉള്ളടക്കത്തിന്റെ ഉചിതമായ ഇടം നൽകാനും സെഗ്മെന്റ് വിഭാഗങ്ങൾ നൽകാനുമുള്ള ലളിതമായ ഷെൽ . ഇതിന് h1ന്റെ ഡിഫോൾട്ട് smallഎലമെന്റും മറ്റ് മിക്ക ഘടകങ്ങളും (അധിക ശൈലികളോടെ) ഉപയോഗിക്കാനാകും.
ഉദാഹരണ പേജ് തലക്കെട്ട് തലക്കെട്ടിനുള്ള ഉപവാചകം
ലഘുചിത്രങ്ങൾ
ചിത്രങ്ങൾ, വീഡിയോകൾ, ടെക്സ്റ്റ് എന്നിവയുടെയും മറ്റും ഗ്രിഡുകൾ എളുപ്പത്തിൽ പ്രദർശിപ്പിക്കുന്നതിന് ലഘുചിത്ര ഘടകം ഉപയോഗിച്ച് ബൂട്ട്സ്ട്രാപ്പിന്റെ ഗ്രിഡ് സിസ്റ്റം വിപുലീകരിക്കുക.
വ്യത്യസ്ത ഉയരങ്ങളും കൂടാതെ/അല്ലെങ്കിൽ വീതിയും ഉള്ള ലഘുചിത്രങ്ങളുടെ Pinterest-പോലുള്ള അവതരണമാണ് നിങ്ങൾ തിരയുന്നതെങ്കിൽ, നിങ്ങൾ Masonry , Isotope , അല്ലെങ്കിൽ Salvattore പോലുള്ള ഒരു മൂന്നാം കക്ഷി പ്ലഗിൻ ഉപയോഗിക്കേണ്ടതുണ്ട് .
സ്ഥിര ഉദാഹരണം
ഡിഫോൾട്ടായി, ബൂട്ട്സ്ട്രാപ്പിന്റെ ലഘുചിത്രങ്ങൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് ഏറ്റവും കുറഞ്ഞ ആവശ്യമായ മാർക്ക്അപ്പ് ഉപയോഗിച്ച് ലിങ്ക് ചെയ്ത ചിത്രങ്ങൾ പ്രദർശിപ്പിക്കുന്നതിനാണ്.
ഇഷ്ടാനുസൃത ഉള്ളടക്കം
കുറച്ച് അധിക മാർക്ക്അപ്പ് ഉപയോഗിച്ച്, ലഘുചിത്രങ്ങളിലേക്ക് തലക്കെട്ടുകൾ, ഖണ്ഡികകൾ അല്ലെങ്കിൽ ബട്ടണുകൾ പോലുള്ള ഏത് തരത്തിലുള്ള HTML ഉള്ളടക്കവും ചേർക്കാൻ സാധിക്കും.
ലഘുചിത്ര ലേബൽ
ക്രാസ് ജസ്റ്റോ ഒഡിയോ, ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ, എഗെസ്റ്റാസ് എഗെറ്റ് ക്വാം. ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. Nullam id dolor id nibh ultricies വാഹനങ്ങൾ ut id elit.
ക്രാസ് ജസ്റ്റോ ഒഡിയോ, ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ, എഗെസ്റ്റാസ് എഗെറ്റ് ക്വാം. ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. Nullam id dolor id nibh ultricies വാഹനങ്ങൾ ut id elit.
ക്രാസ് ജസ്റ്റോ ഒഡിയോ, ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ, എഗെസ്റ്റാസ് എഗെറ്റ് ക്വാം. ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. Nullam id dolor id nibh ultricies വാഹനങ്ങൾ ut id elit.
ലഭ്യമായതും വഴക്കമുള്ളതുമായ ഒരുപിടി അലേർട്ട് സന്ദേശങ്ങൾക്കൊപ്പം സാധാരണ ഉപയോക്തൃ പ്രവർത്തനങ്ങൾക്കായി സന്ദർഭോചിതമായ ഫീഡ്ബാക്ക് സന്ദേശങ്ങൾ നൽകുക.
ഉദാഹരണങ്ങൾ
അടിസ്ഥാന അലേർട്ട് സന്ദേശങ്ങൾക്കായി ഏതെങ്കിലും ടെക്സ്റ്റും ഓപ്ഷണൽ ഡിസ്മിസ് ബട്ടണും .alertനാല് സന്ദർഭോചിത ക്ലാസുകളിലൊന്നിൽ (ഉദാ, ) പൊതിയുക..alert-success
ഡിഫോൾട്ട് ക്ലാസ് ഇല്ല
അലേർട്ടുകൾക്ക് ഡിഫോൾട്ട് ക്ലാസുകളില്ല, അടിസ്ഥാന, മോഡിഫയർ ക്ലാസുകൾ മാത്രം. ഒരു ഡിഫോൾട്ട് ഗ്രേ അലേർട്ട് വളരെയധികം അർത്ഥമാക്കുന്നില്ല, അതിനാൽ നിങ്ങൾ സന്ദർഭോചിത ക്ലാസ് വഴി ഒരു തരം വ്യക്തമാക്കേണ്ടതുണ്ട്. വിജയം, വിവരങ്ങൾ, മുന്നറിയിപ്പ്, അല്ലെങ്കിൽ അപകടം എന്നിവയിൽ നിന്ന് തിരഞ്ഞെടുക്കുക.
നന്നായി! ഈ പ്രധാനപ്പെട്ട മുന്നറിയിപ്പ് സന്ദേശം നിങ്ങൾ വിജയകരമായി വായിച്ചു.
ഹെഡ്സ് അപ്പുകൾ! ഈ അലേർട്ടിന് നിങ്ങളുടെ ശ്രദ്ധ ആവശ്യമാണ്, എന്നാൽ ഇത് വളരെ പ്രധാനമല്ല.
മുന്നറിയിപ്പ്! സ്വയം പരിശോധിക്കുന്നതാണ് നല്ലത്, നിങ്ങൾ അത്ര നല്ലവനല്ല.
ഓ സ്നാപ്പ്! കുറച്ച് കാര്യങ്ങൾ മാറ്റി വീണ്ടും സമർപ്പിക്കാൻ ശ്രമിക്കുക.
നിരസിക്കാവുന്ന അലേർട്ടുകൾ
.alert-dismissibleഒരു ഓപ്ഷണലും ക്ലോസ് ബട്ടണും ചേർത്ത് ഏത് അലേർട്ടിലും ബിൽഡ് ചെയ്യുക .
മുന്നറിയിപ്പ്! സ്വയം പരിശോധിക്കുന്നതാണ് നല്ലത്, നിങ്ങൾ
അത്ര നല്ലതല്ല .
ഓ സ്നാപ്പ്! കുറച്ച് കാര്യങ്ങൾ മാറ്റി വീണ്ടും സമർപ്പിക്കാൻ ശ്രമിക്കുക.
പുരോഗതി ബാറുകൾ
ലളിതവും എന്നാൽ വഴക്കമുള്ളതുമായ പ്രോഗ്രസ് ബാറുകൾ ഉപയോഗിച്ച് ഒരു വർക്ക്ഫ്ലോയുടെ പുരോഗതിയെക്കുറിച്ചോ പ്രവർത്തനത്തെക്കുറിച്ചോ കാലികമായ ഫീഡ്ബാക്ക് നൽകുക.
ക്രോസ് ബ്രൗസർ അനുയോജ്യത
പ്രോഗ്രസ് ബാറുകൾ അവയുടെ ചില ഇഫക്റ്റുകൾ നേടുന്നതിന് CSS3 സംക്രമണങ്ങളും ആനിമേഷനുകളും ഉപയോഗിക്കുന്നു. ഈ ഫീച്ചറുകൾ Internet Explorer 9-ലും അതിനു താഴെയുള്ള അല്ലെങ്കിൽ Firefox-ന്റെ പഴയ പതിപ്പുകളിലും പിന്തുണയ്ക്കുന്നില്ല. Opera 12 ആനിമേഷനുകളെ പിന്തുണയ്ക്കുന്നില്ല.
ഉള്ളടക്ക സുരക്ഷാ നയം (CSP) അനുയോജ്യത
നിങ്ങളുടെ വെബ്സൈറ്റിന് അനുവദനീയമല്ലാത്ത ഒരു ഉള്ളടക്ക സുരക്ഷാ നയം (CSP) ഉണ്ടെങ്കിൽ, ചുവടെയുള്ള ഞങ്ങളുടെ ഉദാഹരണങ്ങളിൽ കാണിച്ചിരിക്കുന്നതുപോലെ പുരോഗതി ബാർ വീതികൾ സജ്ജീകരിക്കുന്നതിന് style-src 'unsafe-inline'നിങ്ങൾക്ക് ഇൻലൈൻ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കാൻ കഴിയില്ല . styleകർശനമായ CSP-കൾക്ക് അനുയോജ്യമായ വീതികൾ സജ്ജീകരിക്കുന്നതിനുള്ള ഇതര രീതികളിൽ കുറച്ച് ഇഷ്ടാനുസൃത ജാവാസ്ക്രിപ്റ്റ് (അത് സെറ്റ് ചെയ്യുന്നു element.style.width) അല്ലെങ്കിൽ ഇഷ്ടാനുസൃത CSS ക്ലാസുകൾ ഉപയോഗിക്കുന്നത് ഉൾപ്പെടുന്നു.
അടിസ്ഥാന ഉദാഹരണം
ഡിഫോൾട്ട് പ്രോഗ്രസ് ബാർ.
60% പൂർത്തിയായി
ലേബൽ സഹിതം
ദൃശ്യമായ ശതമാനം കാണിക്കുന്നതിന് പുരോഗതി ബാറിനുള്ളിൽ നിന്ന് ക്ലാസ് ഉള്ളത് നീക്കം ചെയ്യുക <span>..sr-only
60%
കുറഞ്ഞ ശതമാനത്തിൽ പോലും ലേബൽ ടെക്സ്റ്റ് വ്യക്തമാണെന്ന് ഉറപ്പാക്കാൻ, min-widthപ്രോഗ്രസ് ബാറിലേക്ക് ഒരു ചേർക്കുന്നത് പരിഗണിക്കുക.
0%
2%
സന്ദർഭോചിതമായ ഇതരമാർഗങ്ങൾ
പ്രോഗ്രസ് ബാറുകൾ സ്ഥിരമായ ശൈലികൾക്കായി ഒരേ ബട്ടണും അലേർട്ട് ക്ലാസുകളും ഉപയോഗിക്കുന്നു.
40% പൂർത്തിയായി (വിജയം)
20% പൂർത്തിയായി
60% പൂർത്തിയായി (മുന്നറിയിപ്പ്)
80% പൂർത്തിയായി (അപകടം)
വരയുള്ള
ഒരു വരയുള്ള പ്രഭാവം സൃഷ്ടിക്കാൻ ഒരു ഗ്രേഡിയന്റ് ഉപയോഗിക്കുന്നു. IE9-ലും താഴെയും ലഭ്യമല്ല.
40% പൂർത്തിയായി (വിജയം)
20% പൂർത്തിയായി
60% പൂർത്തിയായി (മുന്നറിയിപ്പ്)
80% പൂർത്തിയായി (അപകടം)
ആനിമേറ്റഡ്
വലത്തുനിന്ന് ഇടത്തോട്ട് വരകൾ ആനിമേറ്റ് ചെയ്യാൻ to .activeചേർക്കുക . .progress-bar-stripedIE9-ലും താഴെയും ലഭ്യമല്ല.
45% പൂർത്തിയായി
അടുക്കിവെച്ചിരിക്കുന്നു
ഒന്നിലധികം ബാറുകൾ അടുക്കി .progressവയ്ക്കാൻ വയ്ക്കുക.
35% പൂർത്തിയായി (വിജയം)
20% പൂർത്തിയായി (മുന്നറിയിപ്പ്)
10% പൂർത്തിയായി (അപക���ം)
മാധ്യമ വസ്തു
വാചക ഉള്ളടക്കത്തിനൊപ്പം ഇടത് അല്ലെങ്കിൽ വലത് വിന്യസിച്ച ചിത്രം അവതരിപ്പിക്കുന്ന വിവിധ തരം ഘടകങ്ങൾ (ബ്ലോഗ് കമന്റുകൾ, ട്വീറ്റുകൾ മുതലായവ) നിർമ്മിക്കുന്നതിനുള്ള അമൂർത്ത ഒബ്ജക്റ്റ് ശൈലികൾ.
ഡിഫോൾട്ട് മീഡിയ
ഡിഫോൾട്ട് മീഡിയ ഒരു മീഡിയ ഒബ്ജക്റ്റ് (ചിത്രങ്ങൾ, വീഡിയോ, ഓഡിയോ) ഒരു ഉള്ളടക്ക ബ്ലോക്കിന്റെ ഇടത്തോട്ടോ വലത്തോട്ടോ പ്രദർശിപ്പിക്കുന്നു.
മാധ്യമ തലക്കെട്ട്
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്സെലറിസ്ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.
മാധ്യമ തലക്കെട്ട്
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്സെലറിസ്ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.
നെസ്റ്റഡ് മീഡിയ തലക്കെട്ട്
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്സെലറിസ്ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.
ക്ലാസുകളും നിലവിലുണ്ട് .pull-left, .pull-rightമുമ്പ് മീഡിയ ഘടകത്തിന്റെ ഭാഗമായി ഉപയോഗിച്ചിരുന്നുവെങ്കിലും v3.3.0 മുതൽ ആ ഉപയോഗത്തിനായി ഒഴിവാക്കിയിരിക്കുന്നു. അവ ഏകദേശം തുല്യമാണ് .media-leftകൂടാതെ html ന് .media-rightശേഷം .media-rightസ്ഥാപിക്കണം ..media-body
മീഡിയ വിന്യാസം
ചിത്രങ്ങളോ മറ്റ് മീഡിയയോ മുകളിലോ മധ്യത്തിലോ താഴെയോ വിന്യസിക്കാനാകും. ഡിഫോൾട്ട് മുകളിൽ വിന്യസിച്ചിരിക്കുന്നു.
മുകളിൽ വിന്യസിച്ച മീഡിയ
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്സെലറിസ്ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.
ഡോനെക് സെഡ് ഒഡിയോ ദുയി. Nullam quis risus eget urna mollis ornare vel Eu leo. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്.
മിഡിൽ അലൈൻ ചെയ്ത മീഡിയ
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്സെലറിസ്ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.
ഡോനെക് സെഡ് ഒഡിയോ ദുയി. Nullam quis risus eget urna mollis ornare vel Eu leo. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്.
താഴെ വിന്യസിച്ച മീഡിയ
ക്രാസ് സിറ്റ് അമെറ്റ് നിബ് ലിബറോ, ഗ്രാവിഡ നുള്ളയിൽ. നുള്ള വേൽ മെറ്റസ് സ്സെലറിസ്ക് ആന്റി സോളിസിറ്റുഡിൻ കൊമോഡോ. ക്രാസ് പുരസ് ഒഡിയോ, വെസ്റ്റിബുലം ഇൻ വൾപുട്ടേറ്റ് അറ്റ്, ടെമ്പസ് വിവേര ടർപിസ്. Fusce condimentum nunc ac nisi vulputate fringilla. ഡൊനെക് ലാസിനിയ കോൺഗ് ഫെലിസ് ഇൻ ഫൗസിബസ്.
ഡോനെക് സെഡ് ഒഡിയോ ദുയി. Nullam quis risus eget urna mollis ornare vel Eu leo. കം സോഷ്യസ് നാറ്റോക്ക് പെനാറ്റിബസ് എറ്റ് മാഗ്നിസ് ഡിസ് പാർച്യൂറിയന്റ് മോണ്ടസ്, നസ്സെതുർ റിഡിക്കുലസ് മസ്.
മീഡിയ ലിസ്റ്റ്
കുറച്ച് അധിക മാർക്ക്അപ്പ് ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ലിസ്റ്റിനുള്ളിൽ മീഡിയ ഉപയോഗിക്കാം (അഭിപ്രായ ത്രെഡുകൾക്കോ ലേഖന ലിസ്റ്റുകൾക്കോ ഉപയോഗപ്രദമാണ്).
ഘടകങ്ങളുടെ ലളിതമായ ലിസ്റ്റുകൾ മാത്രമല്ല, ഇഷ്ടാനുസൃത ഉള്ളടക്കമുള്ള സങ്കീർണ്ണമായവ പ്രദർശിപ്പിക്കുന്നതിനുള്ള വഴക്കമുള്ളതും ശക്തവുമായ ഘടകമാണ് ലിസ്റ്റ് ഗ്രൂപ്പുകൾ.
അടിസ്ഥാന ഉദാഹരണം
ഏറ്റവും അടിസ്ഥാന ലിസ്റ്റ് ഗ്രൂപ്പ് എന്നത് ലിസ്റ്റ് ഇനങ്ങളും ശരിയായ ക്ലാസുകളുമുള്ള ഓർഡർ ചെയ്യാത്ത ഒരു ലിസ്റ്റാണ്. പിന്തുടരുന്ന ഓപ്ഷനുകൾ അല്ലെങ്കിൽ ആവശ്യാനുസരണം നിങ്ങളുടെ സ്വന്തം CSS ഉപയോഗിച്ച് അതിൽ നിർമ്മിക്കുക.
ക്രാസ് ജസ്റ്റോ ഒഡിയോ
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
മോർബി ലിയോ റിസസ്
പോർട്ട എസി കൺസെക്റ്റേറ്റർ എസി
വെസ്റ്റിബുലം അറ്റ് ഇറോസ്
ബാഡ്ജുകൾ
ഏതെങ്കിലും ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനത്തിലേക്ക് ബാഡ്ജുകളുടെ ഘടകം ചേർക്കുക, അത് യാന്ത്രികമായി വലതുവശത്ത് സ്ഥാപിക്കും.
14ക്രാസ് ജസ്റ്റോ ഒഡിയോ
2ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
1മോർബി ലിയോ റിസസ്
ലിങ്ക് ചെയ്ത ഇനങ്ങൾ
ലിസ്റ്റ് ഇനങ്ങൾക്ക് പകരം ആങ്കർ ടാഗുകൾ ഉപയോഗിച്ച് ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനങ്ങളെ ലിങ്ക് ചെയ്യുക (അതിന് <div>പകരം രക്ഷിതാവ് എന്നും അർത്ഥമുണ്ട് <ul>). ഓരോ ഘടകത്തിനും ചുറ്റും വ്യക്തിഗത മാതാപിതാക്കളുടെ ആവശ്യമില്ല.
ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനങ്ങൾ ലിസ്റ്റ് ഇനങ്ങൾക്ക് പകരം ബട്ടണുകളായിരിക്കാം (അതിന് <div>പകരം രക്ഷിതാവ് എന്നർത്ഥം <ul>). ഓരോ ഘടകത്തിനും ചുറ്റും വ്യക്തിഗത മാതാപിതാക്കളുടെ ആവശ്യമില്ല. ഇവിടെ സാധാരണ .btnക്ലാസുകൾ ഉപയോഗിക്കരുത്.
എല്ലായ്പ്പോഴും ആവശ്യമില്ലെങ്കിലും, ചിലപ്പോൾ നിങ്ങളുടെ DOM ഒരു ബോക്സിൽ ഇടേണ്ടതുണ്ട്. അത്തരം സാഹചര്യങ്ങളിൽ, പാനൽ ഘടകം പരീക്ഷിക്കുക.
അടിസ്ഥാന ഉദാഹരണം
ഡിഫോൾട്ടായി, .panelചില അടിസ്ഥാന ബോർഡറുകളും ചില ഉള്ളടക്കം ഉൾക്കൊള്ളാൻ പാഡിംഗും പ്രയോഗിക്കുക മാത്രമാണ് ചെയ്യുന്നത്.
അടിസ്ഥാന പാനൽ ഉദാഹരണം
തലക്കെട്ടുള്ള പാനൽ
ഉപയോഗിച്ച് നിങ്ങളുടെ പാനലിലേക്ക് ഒരു ഹെഡിംഗ് കണ്ടെയ്നർ എളുപ്പത്തിൽ ചേർക്കുക .panel-heading. പ്രീ-സ്റ്റൈൽ ചെയ്ത തലക്കെട്ട് ചേർക്കാൻ ഒരു ക്ലാസിനൊപ്പം - <h1>നിങ്ങൾക്ക് എന്തും ഉൾപ്പെടുത്താം . എന്നിരുന്നാലും, - എന്നതിന്റെ ഫോണ്ട് വലുപ്പങ്ങൾ അസാധുവാക്കുന്നു .<h6>.panel-title<h1><h6>.panel-heading
ശരിയായ ലിങ്ക് കളറിംഗിനായി, എന്നതിനുള്ളിലെ തലക്കെട്ടുകളിൽ ലിങ്കുകൾ സ്ഥാപിക്കുന്നത് ഉറപ്പാക്കുക .panel-title.
തലക്കെട്ടില്ലാതെ പാനൽ തലക്കെട്ട്
പാനൽ ഉള്ളടക്കം
പാനൽ ശീർഷകം
പാനൽ ഉള്ളടക്കം
അടിക്കുറിപ്പുള്ള പാനൽ
എന്നതിലെ ബട്ടണുകൾ അല്ലെങ്കിൽ ദ്വിതീയ വാചകം പൊതിയുക .panel-footer. സന്ദർഭോചിതമായ വ്യതിയാനങ്ങൾ ഉപയോഗിക്കുമ്പോൾ പാനൽ ഫൂട്ടറുകൾക്ക് വർണ്ണങ്ങളും ബോർഡറുകളും പാരമ്പര്യമായി ലഭിക്കില്ല എന്നത് ശ്രദ്ധിക്കുക
പാനൽ ഉള്ളടക്കം
സന്ദർഭോചിതമായ ഇതരമാർഗങ്ങൾ
മറ്റ് ഘടകങ്ങളെപ്പോലെ, ഏതെങ്കിലും സന്ദർഭോചിതമായ സംസ്ഥാന ക്ലാസുകൾ ചേർത്ത് ഒരു പ്രത്യേക സന്ദർഭത്തിലേക്ക് എളുപ്പത്തിൽ ഒരു പാനൽ കൂടുതൽ അർത്ഥപൂർണ്ണമാക്കുക.
പാനൽ ശീർഷകം
പാനൽ ഉള്ളടക്കം
പാനൽ ശീർഷകം
പാനൽ ഉള്ളടക്കം
പാനൽ ശീർഷകം
പാനൽ ഉള്ളടക്കം
പാനൽ ശീർഷകം
പാനൽ ഉള്ളടക്കം
പാനൽ ശീർഷകം
പാനൽ ഉള്ളടക്കം
മേശകൾ കൊണ്ട്
.tableതടസ്സമില്ലാത്ത ഡിസൈനിനായി ഒരു പാനലിനുള്ളിൽ ബോർഡർ അല്ലാത്തവ ചേർക്കുക . ഒരു ഉണ്ടെങ്കിൽ .panel-body, വേർപെടുത്തുന്നതിനായി ഞങ്ങൾ പട്ടികയുടെ മുകളിൽ ഒരു അധിക ബോർഡർ ചേർക്കുന്നു.
പാനൽ തലക്കെട്ട്
ചില ഡിഫോൾട്ട് പാനൽ ഉള്ളടക്കം ഇവിടെയുണ്ട്. Nulla vitae elit libero, a pharetra ague. എനിയൻ ലാസിനിയ ബിബെൻഡം നുള്ള സെഡ് കൺസെക്റ്റേറ്റർ. എനിയൻ ഇയു ലിയോ ക്വാം. പെല്ലെന്റസ്ക്യൂ ഓർനാരെ സെം ലാസിനിയ ക്വാം വെനനാറ്റിസ് വെസ്റ്റിബുലം. Nullam id dolor id nibh ultricies വാഹനങ്ങൾ ut id elit.
#
പേരിന്റെ ആദ്യഭാഗം
പേരിന്റെ അവസാന ഭാഗം
ഉപയോക്തൃനാമം
1
അടയാളപ്പെടുത്തുക
ഓട്ടോ
@mdo
2
ജേക്കബ്
തോൺടൺ
@കൊഴുപ്പ്
3
ലാറി
പക്ഷി
@ട്വിറ്റർ
പാനൽ ബോഡി ഇല്ലെങ്കിൽ, ഘടകം പാനൽ ഹെഡറിൽ നിന്ന് ടേബിളിലേക്ക് തടസ്സമില്ലാതെ നീങ്ങുന്നു.
ചില ഡിഫോൾട്ട് പാനൽ ഉള്ളടക്കം ഇവിടെയുണ്ട്. Nulla vitae elit libero, a pharetra ague. എനിയൻ ലാസിനിയ ബിബെൻഡം നുള്ള സെഡ് കൺസെക്റ്റേറ്റർ. എനിയൻ ഇയു ലിയോ ക്വാം. പെല്ലെന്റസ്ക്യൂ ഓർനാരെ സെം ലാസിനിയ ക്വാം വെനനാറ്റിസ് വെസ്റ്റിബുലം. Nullam id dolor id nibh ultricies വാഹനങ്ങൾ ut id elit.
ക്രാസ് ജസ്റ്റോ ഒഡിയോ
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
മോർബി ലിയോ റിസസ്
പോർട്ട എസി കൺസെക്റ്റേറ്റർ എസി
വെസ്റ്റിബുലം അറ്റ് ഇറോസ്
പ്രതികരിക്കുന്ന ഉൾച്ചേർക്കൽ
ഏത് ഉപകരണത്തിലും ശരിയായി സ്കെയിൽ ചെയ്യുന്ന ഒരു അന്തർലീനമായ അനുപാതം സൃഷ്ടിക്കുന്നതിലൂടെ, അടങ്ങിയിരിക്കുന്ന ബ്ലോക്കിന്റെ വീതിയെ അടിസ്ഥാനമാക്കി വീഡിയോ അല്ലെങ്കിൽ സ്ലൈഡ്ഷോ അളവുകൾ നിർണ്ണയിക്കാൻ ബ്രൗസറുകളെ അനുവദിക്കുക.
നിയമങ്ങൾ നേരിട്ട് പ്രയോഗിക്കുന്നു <iframe>, <embed>, <video>, കൂടാതെ <object>ഘടകങ്ങൾ; .embed-responsive-itemനിങ്ങൾക്ക് മറ്റ് ആട്രിബ്യൂട്ടുകൾക്കായി സ്റ്റൈലിംഗുമായി പൊരുത്തപ്പെടുത്താൻ താൽപ്പര്യപ്പെടുമ്പോൾ, ഓപ്ഷണലായി ഒരു വ്യക്തമായ ഡിസെൻഡന്റ് ക്ലാസ് ഉപയോഗിക്കുക .
പ്രോ-ടിപ്പ്! ഞങ്ങൾ നിങ്ങൾക്കായി അത് അസാധുവാക്കുന്നതിനാൽ frameborder="0"നിങ്ങളുടെ s- ൽ ഉൾപ്പെടുത്തേണ്ടതില്ല .<iframe>
കിണറുകൾ
ഡിഫോൾട്ട് നന്നായി
ഒരു മൂലകത്തിന് ഒരു ഇൻസെറ്റ് ഇഫക്റ്റ് നൽകുന്നതിന് കിണർ ഒരു ലളിതമായ ഇഫക്റ്റായി ഉപയോഗിക്കുക.
നോക്കൂ, ഞാൻ കിണറ്റിലാണ്!
ഓപ്ഷണൽ ക്ലാസുകൾ
രണ്ട് ഓപ്ഷണൽ മോഡിഫയർ ക്ലാസുകളുള്ള പാഡിംഗും വൃത്താകൃതിയിലുള്ള മൂലകളും നിയന്ത്രിക്കുക.