ഉള്ളടക്കത്തിന്റെ ഒരു പരമ്പര പ്രദർശിപ്പിക്കുന്നതിനുള്ള വഴക്കമുള്ളതും ശക്തവുമായ ഘടകമാണ് ലിസ്റ്റ് ഗ്രൂപ്പുകൾ. ഉള്ളിലുള്ള ഏത് ഉള്ളടക്കത്തെയും പിന്തുണയ്ക്കുന്നതിന് അവ പരിഷ്ക്കരിക്കുകയും വിപുലീകരിക്കുകയും ചെയ്യുക.
അടിസ്ഥാന ഉദാഹരണം
ലിസ്റ്റ് ഇനങ്ങളും ശരിയായ ക്ലാസുകളുമുള്ള ഓർഡർ ചെയ്യാത്ത പട്ടികയാണ് ഏറ്റവും അടിസ്ഥാന ലിസ്റ്റ് ഗ്രൂപ്പ്. പിന്തുടരുന്ന ഓപ്ഷനുകൾ ഉപയോഗിച്ച് അല്ലെങ്കിൽ ആവശ്യാനുസരണം നിങ്ങളുടെ സ്വന്തം CSS ഉപയോഗിച്ച് അതിൽ നിർമ്മിക്കുക.
ക്രാസ് ജസ്റ്റോ ഒഡിയോ
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
മോർബി ലിയോ റിസസ്
പോർട്ട എസി കൺസെക്റ്റേറ്റർ എസി
വെസ്റ്റിബുലം അറ്റ് ഇറോസ്
സജീവ ഇനങ്ങൾ
നിലവിലെ സജീവമായ തിരഞ്ഞെടുപ്പ് സൂചിപ്പിക്കാൻ a- .activeലേക്ക് ചേർക്കുക ..list-group-item
ക്രാസ് ജസ്റ്റോ ഒഡിയോ
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
മോർബി ലിയോ റിസസ്
പോർട്ട എസി കൺസെക്റ്റേറ്റർ എസി
വെസ്റ്റിബുലം അറ്റ് ഇറോസ്
പ്രവർത്തനരഹിതമാക്കിയ ഇനങ്ങൾ
അപ്രാപ്തമാക്കിയതായി ദൃശ്യമാക്കാൻ a-.disabled ലേക്ക് ചേർക്കുക . ചില ഘടകങ്ങൾക്ക് അവരുടെ ക്ലിക്ക് ഇവന്റുകൾ (ഉദാ, ലിങ്കുകൾ) പൂർണ്ണമായി അപ്രാപ്തമാക്കുന്നതിന് ഇഷ്ടാനുസൃത JavaScript ആവശ്യമായി വരുമെന്നത് ശ്രദ്ധിക്കുക..list-group-item.disabled
ക്രാസ് ജസ്റ്റോ ഒഡിയോ
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
മോർബി ലിയോ റിസസ്
പോർട്ട എസി കൺസെക്റ്റേറ്റർ എസി
വെസ്റ്റിബുലം അറ്റ് ഇറോസ്
ലിങ്കുകളും ബട്ടണുകളും
ഹോവർ, പ്രവർത്തനരഹിതമാക്കിയ, സജീവമായ അവസ്ഥകൾ എന്നിവ ഉപയോഗിച്ച് പ്രവർത്തനക്ഷമമായ ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനങ്ങൾ സൃഷ്ടിക്കാൻ s <a>അല്ലെങ്കിൽ s ഉപയോഗിക്കുക . നോൺ-ഇന്ററാക്ടീവ് എലമെന്റുകൾ ( s അല്ലെങ്കിൽ s പോലുള്ളവ) കൊണ്ട് നിർമ്മിച്ച ലിസ്റ്റ് ഗ്രൂപ്പുകൾക്ക് ഒരു ക്ലിക്ക് അല്ലെങ്കിൽ ടാപ്പ് താങ്ങാനാവുന്നില്ലെന്ന് ഉറപ്പാക്കാൻ ഞങ്ങൾ ഈ വ്യാജ ക്ലാസുകളെ വേർതിരിക്കുന്നു .<button>.list-group-item-action<li><div>
ഇവിടെ സ്റ്റാൻഡേർഡ് ക്ലാസുകൾ ഉപയോഗിക്കുന്നില്ലെന്ന്.btn ഉറപ്പാക്കുക .
s ഉപയോഗിച്ച് <button>, നിങ്ങൾക്ക് ക്ലാസിന് disabledപകരം ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാനും കഴിയും. .disabledഖേദകരമെന്നു പറയട്ടെ, <a>അപ്രാപ്തമാക്കിയ ആട്രിബ്യൂട്ടിനെ പിന്തുണയ്ക്കുന്നില്ല.
ഫ്ലഷ്
.list-group-flushഒരു പാരന്റ് കണ്ടെയ്നറിൽ (ഉദാഹരണത്തിന്, കാർഡുകൾ) ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനങ്ങളുടെ എഡ്ജ് ടു എഡ്ജ് റെൻഡർ ചെയ്യുന്നതിന് ചില ബോർഡറുകളും വൃത്താകൃതിയിലുള്ള കോണുകളും നീക്കം ചെയ്യാൻ ചേർക്കുക .
ക്രാസ് ജസ്റ്റോ ഒഡിയോ
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
മോർബി ലിയോ റിസസ്
പോർട്ട എസി കൺസെക്റ്റേറ്റർ എസി
വെസ്റ്റിബുലം അറ്റ് ഇറോസ്
തിരശ്ചീനമായി
.list-group-horizontalഎല്ലാ ബ്രേക്ക്പോയിന്റുകളിലുടനീളം ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനങ്ങളുടെ ലേഔട്ട് ലംബത്തിൽ നിന്ന് തിരശ്ചീനമായി മാറ്റാൻ ചേർക്കുക . പകരമായി, .list-group-horizontal-{sm|md|lg|xl}ആ ബ്രേക്ക്പോയിന്റിൽ നിന്ന് ആരംഭിക്കുന്ന ഒരു ലിസ്റ്റ് ഗ്രൂപ്പിനെ തിരശ്ചീനമാക്കാൻ ഒരു റെസ്പോൺസീവ് വേരിയന്റ് തിരഞ്ഞെടുക്കുക min-width. നിലവിൽ തിരശ്ചീന ലിസ്റ്റ് ഗ്രൂപ്പുകളെ ഫ്ലഷ് ലിസ്റ്റ് ഗ്രൂപ്പുകളുമായി സംയോജിപ്പിക്കാൻ കഴിയില്ല.
പ്രോടിപ്പ്: തിരശ്ചീനമായിരിക്കുമ്പോൾ തുല്യ വീതിയുള്ള ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനങ്ങൾ വേണോ? .flex-fillഓരോ ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനത്തിലും ചേർക്കുക .
ക്രാസ് ജസ്റ്റോ ഒഡിയോ
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
മോർബി ലിയോ റിസസ്
ക്രാസ് ജസ്റ്റോ ഒഡിയോ
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
മോർബി ലിയോ റിസസ്
ക്രാസ് ജസ്റ്റോ ഒഡിയോ
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
മോർബി ലിയോ റിസസ്
ക്രാസ് ജസ്റ്റോ ഒഡിയോ
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
മോർബി ലിയോ റിസസ്
ക്രാസ് ജസ്റ്റോ ഒഡിയോ
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
മോർബി ലിയോ റിസസ്
സന്ദർഭോചിതമായ ക്ലാസുകൾ
സ്റ്റേറ്റ്ഫുൾ പശ്ചാത്തലവും വർണ്ണവും ഉള്ള ലിസ്റ്റ് ഇനങ്ങൾ സ്റ്റൈൽ ചെയ്യാൻ സന്ദർഭോചിതമായ ക്ലാസുകൾ ഉപയോഗിക്കുക.
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ
ഒരു ലളിതമായ പ്രാഥമിക ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനം
ഒരു ലളിതമായ ദ്വിതീയ ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനം
ഒരു ലളിതമായ വിജയ ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനം
ഒരു ലളിതമായ അപകട പട്ടിക ഗ്രൂപ്പ് ഇനം
ഒരു ലളിതമായ മുന്നറിയിപ്പ് ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനം
ഒരു ലളിതമായ വിവര ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനം
ഒരു ലളിതമായ ലൈറ്റ് ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനം
ഒരു ലളിതമായ ഇരുണ്ട ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനം
കൂടെ സാന്ദർഭിക ക്ലാസുകളും പ്രവർത്തിക്കുന്നു .list-group-item-action. മുമ്പത്തെ ഉദാഹരണത്തിൽ ഇല്ലാത്ത ഹോവർ ശൈലികൾ ഇവിടെ ചേർക്കുന്നത് ശ്രദ്ധിക്കുക. .activeസംസ്ഥാനവും പിന്തുണയ്ക്കുന്നു ; ഒരു സാന്ദർഭിക ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനത്തിൽ സജീവമായ തിരഞ്ഞെടുപ്പ് സൂചിപ്പിക്കാൻ ഇത് പ്രയോഗിക്കുക.
അർത്ഥം ചേർക്കാൻ വർണ്ണം ഉപയോഗിക്കുന്നത് ഒരു വിഷ്വൽ സൂചന നൽകുന്നു, അത് സ്ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് കൈമാറില്ല. വർണ്ണത്താൽ സൂചിപ്പിക്കുന്ന വിവരങ്ങൾ ഉള്ളടക്കത്തിൽ നിന്ന് തന്നെ വ്യക്തമാണെന്ന് ഉറപ്പാക്കുക (ഉദാ: ദൃശ്യമായ ടെക്സ്റ്റ്), അല്ലെങ്കിൽ .sr-onlyക്ലാസിനൊപ്പം മറച്ചിരിക്കുന്ന അധിക വാചകം പോലെയുള്ള ഇതര മാർഗങ്ങളിലൂടെ ഉൾപ്പെടുത്തിയിരിക്കുന്നു.
ബാഡ്ജുകളോടെ
ചില യൂട്ടിലിറ്റികളുടെ സഹായത്തോടെ വായിക്കാത്ത എണ്ണങ്ങളും പ്രവർത്തനങ്ങളും മറ്റും കാണിക്കുന്നതിന് ഏതെങ്കിലും ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനത്തിലേക്ക് ബാഡ്ജുകൾ ചേർക്കുക .
ക്രാസ് ജസ്റ്റോ ഒഡിയോ14
ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ2
മോർബി ലിയോ റിസസ്1
ഇഷ്ടാനുസൃത ഉള്ളടക്കം
ഫ്ലെക്സ്ബോക്സ് യൂട്ടിലിറ്റികളുടെ സഹായത്തോടെ ചുവടെയുള്ളതുപോലുള്ള ലിങ്ക് ചെയ്ത ലിസ്റ്റ് ഗ്രൂപ്പുകൾക്ക് പോലും ഉള്ളിൽ ഏതാണ്ട് ഏതെങ്കിലും HTML ചേർക്കുക .
bootstrap.jsപ്രാദേശിക ഉള്ളടക്കത്തിന്റെ ടാബബിൾ പാനുകൾ സൃഷ്ടിക്കുന്നതിന് ഞങ്ങളുടെ ലിസ്റ്റ് ഗ്രൂപ്പ് വിപുലീകരിക്കുന്നതിന് , JavaScript പ്ലഗിൻ എന്ന ടാബ് ഉപയോഗിക്കുക—അത് വ്യക്തിഗതമായോ കംപൈൽ ചെയ്ത ഫയലിലൂടെയോ ഉൾപ്പെടുത്തുക.
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.
Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.
ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്നു
data-toggle="list"ലളിതമായി വ്യക്തമാക്കിയോ ഒരു ഘടകത്തിലോ ജാവാസ്ക്രിപ്റ്റ് എഴുതാതെ നിങ്ങൾക്ക് ഒരു ലിസ്റ്റ് ഗ്രൂപ്പ് നാവിഗേഷൻ സജീവമാക്കാം . എന്നതിൽ ഈ ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുക .list-group-item.
JavaScript വഴി
JavaScript വഴി ടാബബിൾ ലിസ്റ്റ് ഇനം പ്രവർത്തനക്ഷമമാക്കുക (ഓരോ ലിസ്റ്റ് ഇനവും വ്യക്തിഗതമായി സജീവമാക്കേണ്ടതുണ്ട്):
നിങ്ങൾക്ക് വ്യക്തിഗത ലിസ്റ്റ് ഇനം പല തരത്തിൽ സജീവമാക്കാം:
ഫേഡ് പ്രഭാവം
ടാബുകൾ പാനൽ മങ്ങാൻ, .fadeഓരോന്നിലേക്കും ചേർക്കുക .tab-pane. ആദ്യ ടാബ് പാളിയും .showപ്രാരംഭ ഉള്ളടക്കം ദൃശ്യമാക്കേണ്ടതുണ്ട്.
രീതികൾ
$().ടാബ്
ഒരു ലിസ്റ്റ് ഇന ഘടകവും ഉള്ളടക്ക കണ്ടെയ്നറും സജീവമാക്കുന്നു. ടാബിന് DOM-ൽ ഒരു കണ്ടെയ്നർ നോഡ് data-targetഅല്ലെങ്കിൽ ഒരു ടാർഗെറ്റിംഗ് ഉണ്ടായിരിക്കണം.href
.tab('കാണിക്കുക')
നൽകിയിരിക്കുന്ന ലിസ്റ്റ് ഇനം തിരഞ്ഞെടുത്ത് അതിന്റെ അനുബന്ധ പാളി കാണിക്കുന്നു. മുമ്പ് തിരഞ്ഞെടുത്ത മറ്റേതെങ്കിലും ലിസ്റ്റ് ഇനം തിരഞ്ഞെടുക്കപ്പെടാതിരിക്കുകയും അനുബന്ധ പാളി മറയ്ക്കുകയും ചെയ്യും. ടാബ് പാളി യഥാർത്ഥത്തിൽ കാണിക്കുന്നതിന് മുമ്പ് കോളറിലേക്ക് മടങ്ങുന്നു (ഉദാഹരണത്തിന്, shown.bs.tabഇവന്റ് സംഭവിക്കുന്നതിന് മുമ്പ്).
സംഭവങ്ങൾ
ഒരു പുതിയ ടാബ് കാണിക്കുമ്പോൾ, ഇവന്റുകൾ ഇനിപ്പറയുന്ന ക്രമത്തിൽ പ്രവർത്തിക്കുന്നു:
hide.bs.tab(നിലവിലെ സജീവമായ ടാബിൽ)
show.bs.tab(കാണിക്കേണ്ട ടാബിൽ)
hidden.bs.tab(മുമ്പത്തെ സജീവ ടാബിൽ, hide.bs.tabഇവന്റിന് സമാനമായത്)
ഒരു ടാബും ഇതിനകം സജീവമല്ലെങ്കിൽ, hide.bs.tabഇവന്റുകളും hidden.bs.tabഫയർ ചെയ്യപ്പെടില്ല.
ഇവന്റ് തരം
വിവരണം
show.bs.tab
ഈ ഇവന്റ് ടാബ് ഷോയിൽ പ്രവർത്തിക്കുന്നു, എന്നാൽ പുതിയ ടാബ് കാണിക്കുന്നതിന് മുമ്പ്. യഥാക്രമം സജീവമായ ടാബും മുമ്പത്തെ സജീവമായ ടാബും (ലഭ്യമെങ്കിൽ) ഉപയോഗിക്കുകയും event.targetടാർഗെറ്റുചെയ്യുകയും ചെയ്യുക.event.relatedTarget
കാണിച്ചിരിക്കുന്നു.bs.tab
ഒരു ടാബ് കാണിച്ചതിന് ശേഷം ടാബ് ഷോയിൽ ഈ ഇവന്റ് ഫയർ ചെയ്യുന്നു. യഥാക്രമം സജീവമായ ടാബും മുമ്പത്തെ സജീവമായ ടാബും (ലഭ്യമെങ്കിൽ) ഉപയോഗിക്കുകയും event.targetടാർഗെറ്റുചെയ്യുകയും ചെയ്യുക.event.relatedTarget
hide.bs.tab
ഒരു പുതിയ ടാബ് കാണിക്കുമ്പോൾ ഈ ഇവന്റ് ഫയർ ചെയ്യുന്നു (അതിനാൽ മുമ്പത്തെ സജീവമായ ടാബ് മറയ്ക്കണം). യഥാക്രമം നിലവിലെ സജീവ ടാബും പുതിയ ഉടൻ സജീവമാകുന്ന ടാബും ടാർഗെറ്റുചെയ്യാനും event.targetഉപയോഗിക്കുക .event.relatedTarget
മറച്ച.bs.tab
ഒരു പുതിയ ടാബ് കാണിച്ചതിന് ശേഷം ഈ ഇവന്റ് ഫയർ ചെയ്യുന്നു (അങ്ങനെ മുമ്പത്തെ സജീവ ടാബ് മറച്ചിരിക്കുന്നു). യഥാക്രമം മുമ്പത്തെ സജീവ ടാബും പുതിയ സജീവ ടാബും ടാർഗെറ്റുചെയ്യാനും event.targetഉപയോഗിക്കാനും .event.relatedTarget