ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിച്ച് പട്ടികകൾ തിരഞ്ഞെടുക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും (ജാവാസ്ക്രിപ്റ്റ് പ്ലഗിനുകളിൽ അവയുടെ പ്രചാരത്തിലുള്ള ഉപയോഗം കണക്കിലെടുക്കുമ്പോൾ).
ഈ പേജിൽ
അവലോകനം
<table>കലണ്ടറുകളും തീയതി പിക്കറുകളും പോലെയുള്ള മൂന്നാം കക്ഷി വിജറ്റുകളിലുടനീളം മൂലകങ്ങളുടെ വ്യാപകമായ ഉപയോഗം കാരണം , ബൂട്ട്സ്ട്രാപ്പിന്റെ പട്ടികകൾ ഓപ്റ്റ്-ഇൻ ആണ് . അടിസ്ഥാന ക്ലാസ് .tableഏതെങ്കിലും ഒന്നിലേക്ക് ചേർക്കുക <table>, തുടർന്ന് ഞങ്ങളുടെ ഓപ്ഷണൽ മോഡിഫയർ ക്ലാസുകളോ ഇഷ്ടാനുസൃത ശൈലികളോ ഉപയോഗിച്ച് വിപുലീകരിക്കുക. എല്ലാ പട്ടിക ശൈലികളും ബൂട്ട്സ്ട്രാപ്പിൽ പാരമ്പര്യമായി ലഭിച്ചിട്ടില്ല, അതായത് ഏതെങ്കിലും നെസ്റ്റഡ് ടേബിളുകൾ രക്ഷിതാവിൽ നിന്ന് സ്വതന്ത്രമായി സ്റ്റൈൽ ചെയ്യാവുന്നതാണ്.
ഏറ്റവും അടിസ്ഥാന ടേബിൾ മാർക്ക്അപ്പ് ഉപയോഗിച്ച്, .tableബൂട്ട്സ്ട്രാപ്പിൽ അധിഷ്ഠിത പട്ടികകൾ എങ്ങനെ കാണപ്പെടുന്നുവെന്നത് ഇതാ.
#
ആദ്യം
അവസാനത്തെ
കൈകാര്യം ചെയ്യുക
1
അടയാളപ്പെടുത്തുക
ഓട്ടോ
@mdo
2
ജേക്കബ്
തോൺടൺ
@കൊഴുപ്പ്
3
ലാറി ദി ബേർഡ്
@ട്വിറ്റർ
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
വകഭേദങ്ങൾ
ടേബിളുകൾ, പട്ടിക വരികൾ അല്ലെങ്കിൽ വ്യക്തിഗത സെല്ലുകൾ വർണ്ണിക്കാൻ സന്ദർഭോചിതമായ ക്ലാസുകൾ ഉപയോഗിക്കുക.
ക്ലാസ്
തലക്കെട്ട്
തലക്കെട്ട്
സ്ഥിരസ്ഥിതി
സെൽ
സെൽ
പ്രാഥമികം
സെൽ
സെൽ
സെക്കൻഡറി
സെൽ
സെൽ
വിജയം
സെൽ
സെൽ
അപായം
സെൽ
സെൽ
മുന്നറിയിപ്പ്
സെൽ
സെൽ
വിവരം
സെൽ
സെൽ
വെളിച്ചം
സെൽ
സെൽ
ഇരുട്ട്
സെൽ
സെൽ
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
സഹായ സാങ്കേതികവിദ്യകളുടെ അർത്ഥം അറിയിക്കുന്നു
അർത്ഥം ചേർക്കാൻ വർണ്ണം ഉപയോഗിക്കുന്നത് ഒരു വിഷ്വൽ സൂചന നൽകുന്നു, അത് സ്ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് കൈമാറില്ല. വർണ്ണത്താൽ സൂചിപ്പിക്കുന്ന വിവരങ്ങൾ ഉള്ളടക്കത്തിൽ നിന്ന് തന്നെ വ്യക്തമാണെന്ന് ഉറപ്പാക്കുക (ഉദാ: ദൃശ്യമായ ടെക്സ്റ്റ്), അല്ലെങ്കിൽ .visually-hiddenക്ലാസിനൊപ്പം മറച്ചിരിക്കുന്ന അധിക വാചകം പോലെയുള്ള ഇതര മാർഗങ്ങളിലൂടെ ഉൾപ്പെടുത്തിയിരിക്കുന്നു.
ഉച്ചാരണ പട്ടികകൾ
വരയുള്ള വരികൾ
.table-stripedഎന്നതിനുള്ളിലെ ഏതെങ്കിലും ടേബിൾ വരിയിലേക്ക് സീബ്രാ-സ്ട്രിപ്പിംഗ് ചേർക്കാൻ ഉപയോഗിക്കുക <tbody>.
#
ആദ്യം
അവസാനത്തെ
കൈകാര്യം ചെയ്യുക
1
അടയാളപ്പെടുത്തുക
ഓട്ടോ
@mdo
2
ജേക്കബ്
തോൺടൺ
@കൊഴുപ്പ്
3
ലാറി ദി ബേർഡ്
@ട്വിറ്റർ
<tableclass="table table-striped">
...
</table>
ഈ ക്ലാസുകൾ ടേബിൾ വേരിയന്റുകളിലേക്കും ചേർക്കാവുന്നതാണ്:
--bs-table-bgഇഷ്ടാനുസൃത പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ഒരു ടേബിൾ സെല്ലിന്റെ പശ്ചാത്തലം സജ്ജീകരിച്ചുകൊണ്ട് ഞങ്ങൾ ആരംഭിക്കുന്നു . എല്ലാ ടേബിൾ വേരിയന്റുകളും ടേബിൾ സെല്ലുകൾക്ക് വർണ്ണം നൽകുന്നതിന് ആ ഇഷ്ടാനുസൃത പ്രോപ്പർട്ടി സജ്ജീകരിക്കുന്നു. ഈ രീതിയിൽ, ടേബിൾ ബാക്ക്ഗ്രൗണ്ടുകളായി അർദ്ധ സുതാര്യമായ നിറങ്ങൾ ഉപയോഗിച്ചാൽ നമ്മൾ കുഴപ്പത്തിലാകില്ല.
അതിനുശേഷം ഞങ്ങൾ ടേബിൾ സെല്ലുകളിൽ ഒരു ഇൻസെറ്റ് ബോക്സ് ഷാഡോ box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ചേർക്കുന്നു background-color. ഞങ്ങൾ ഒരു വലിയ സ്പ്രെഡ് ഉപയോഗിക്കുന്നതിനാലും മങ്ങലില്ലാത്തതിനാലും, നിറം ഏകതാനമായിരിക്കും. സ്ഥിരസ്ഥിതിയായി --bs-table-accent-bgസജ്ജീകരിക്കാത്തതിനാൽ, ഞങ്ങൾക്ക് സ്ഥിരസ്ഥിതി ബോക്സ് ഷാഡോ ഇല്ല.
ഒന്നുകിൽ .table-striped, .table-hoverഅല്ലെങ്കിൽ .table-activeക്ലാസുകൾ ചേർക്കുമ്പോൾ, --bs-table-accent-bgപശ്ചാത്തലം വർണ്ണമാക്കുന്നതിന് ഒരു അർദ്ധസുതാര്യമായ നിറത്തിലേക്ക് സജ്ജമാക്കും.
ഓരോ ടേബിൾ വേരിയന്റിനും, --bs-table-accent-bgആ വർണ്ണത്തെ ആശ്രയിച്ച് ഏറ്റവും ഉയർന്ന ദൃശ്യതീവ്രതയുള്ള ഒരു നിറം ഞങ്ങൾ സൃഷ്ടിക്കുന്നു. ഉദാഹരണത്തിന്, ആക്സന്റ് നിറം .table-primaryഇരുണ്ടതാണ്, അതേസമയം .table-darkഇളം ആക്സന്റ് നിറമുണ്ട്.
ടെക്സ്റ്റും ബോർഡർ നിറങ്ങളും ഒരേ രീതിയിൽ ജനറേറ്റുചെയ്യുന്നു, അവയുടെ നിറങ്ങൾ ഡിഫോൾട്ടായി പാരമ്പര്യമായി ലഭിക്കും.
ന്റെ ടേബിൾ സെല്ലുകൾ <thead>എല്ലായ്പ്പോഴും ലംബമായി താഴെയായി വിന്യസിച്ചിരിക്കുന്നു. ടേബിൾ സെല്ലുകൾ <tbody>അവയുടെ വിന്യാസം അവകാശമാക്കുകയും <table>ഡിഫോൾട്ടായി മുകളിലേക്ക് വിന്യസിക്കുകയും ചെയ്യുന്നു. ആവശ്യമുള്ളിടത്ത് വീണ്ടും വിന്യസിക്കാൻ ലംബമായ അലൈൻ ക്ലാസുകൾ ഉപയോഗിക്കുക .
തലക്കെട്ട് 1
തലക്കെട്ട് 2
തലക്കെട്ട് 3
തലക്കെട്ട് 4
vertical-align: middle;ഈ സെൽ പട്ടികയിൽ നിന്ന് പാരമ്പര്യമായി ലഭിക്കുന്നു
vertical-align: middle;ഈ സെൽ പട്ടികയിൽ നിന്ന് പാരമ്പര്യമായി ലഭിക്കുന്നു
vertical-align: middle;ഈ സെൽ പട്ടികയിൽ നിന്ന് പാരമ്പര്യമായി ലഭിക്കുന്നു
മുമ്പത്തെ സെല്ലുകളിൽ ലംബ വിന്യാസം എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് കാണിക്കുന്നതിന്, കുറച്ച് ലംബമായ ഇടം എടുക്കാൻ ഉദ്ദേശിച്ചുള്ള ചില പ്ലെയ്സ്ഹോൾഡർ വാചകമാണിത്.
vertical-align: bottom;പട്ടിക നിരയിൽ നിന്ന് ഈ സെൽ അവകാശമാക്കുന്നു
vertical-align: bottom;പട്ടിക നിരയിൽ നിന്ന് ഈ സെൽ അവകാശമാക്കുന്നു
vertical-align: bottom;പട്ടിക നിരയിൽ നിന്ന് ഈ സെൽ അവകാശമാക്കുന്നു
മുമ്പത്തെ സെല്ലുകളിൽ ലംബ വിന്യാസം എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് കാണിക്കുന്നതിന്, കുറച്ച് ലംബമായ ഇടം എടുക്കാൻ ഉദ്ദേശിച്ചുള്ള ചില പ്ലെയ്സ്ഹോൾഡർ വാചകമാണിത്.
vertical-align: middle;ഈ സെൽ പട്ടികയിൽ നിന്ന് പാരമ്പര്യമായി ലഭിക്കുന്നു
vertical-align: middle;ഈ സെൽ പട്ടികയിൽ നിന്ന് പാരമ്പര്യമായി ലഭിക്കുന്നു
ഈ സെൽ മുകളിലേക്ക് വിന്യസിച്ചിരിക്കുന്നു.
മുമ്പത്തെ സെല്ലുകളിൽ ലംബ വിന്യാസം എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് കാണിക്കുന്നതിന്, കുറച്ച് ലംബമായ ഇടം എടുക്കാൻ ഉദ്ദേശിച്ചുള്ള ചില പ്ലെയ്സ്ഹോൾഡർ വാചകമാണിത്.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
നെസ്റ്റിംഗ്
ബോർഡർ ശൈലികൾ, സജീവ ശൈലികൾ, പട്ടിക വകഭേദങ്ങൾ എന്നിവ നെസ്റ്റഡ് ടേബിളുകൾക്ക് പാരമ്പര്യമായി ലഭിക്കുന്നില്ല.
നെസ്റ്റഡ് ടേബിളുകളിലേക്ക് ഏതെങ്കിലും ശൈലികൾ ചോരുന്നത് തടയാൻ , ഞങ്ങൾ >ഞങ്ങളുടെ CSS- ൽ ചൈൽഡ് കോമ്പിനേറ്റർ ( ) സെലക്ടർ ഉപയോഗിക്കുന്നു . , , എന്നിവയിലെ എല്ലാ tds ഉം ths ഉം ടാർഗെറ്റ് ചെയ്യേണ്ടതിനാൽ , ഞങ്ങളുടെ സെലക്ടർ അതില്ലാതെ വളരെ നീണ്ടതായി കാണപ്പെടും. അതുപോലെ , ന്റെ എല്ലാ സെലക്ടറുകളും ടാർഗെറ്റുചെയ്യാൻ ഞങ്ങൾ വിചിത്രമായി കാണപ്പെടുന്ന സെലക്ടർ ഉപയോഗിക്കുന്നു , എന്നാൽ സാധ്യതയുള്ള നെസ്റ്റഡ് ടേബിളുകളൊന്നും ഇല്ല.theadtbodytfoot.table > :not(caption) > * > *tdth.table
<tr>ഒരു ടേബിളിന്റെ ഡയറക്ട് ചിൽഡ്രൻ ആയി നിങ്ങൾ s-യെ ചേർത്താൽ, <tr>അവ ഡിഫോൾട്ടായി എയിൽ പൊതിഞ്ഞിരിക്കും <tbody>, അങ്ങനെ ഞങ്ങളുടെ സെലക്ടർമാർ ഉദ്ദേശിച്ച രീതിയിൽ പ്രവർത്തിക്കും.
അനാട്ടമി
മേശ തല
ടേബിളുകൾക്കും ഡാർക്ക് ടേബിളുകൾക്കും സമാനമായി, മോഡിഫയർ ക്ലാസുകൾ ഉപയോഗിക്കുക അല്ലെങ്കിൽ .table-lightകൾ ഇളം അല്ലെങ്കിൽ ഇരുണ്ട ചാരനിറത്തിൽ ദൃശ്യമാക്കുക..table-dark<thead>
<caption>ഒരു ടേബിളിനുള്ള തലക്കെട്ട് പോലെയാണ് എ പ്രവർത്തിക്കുന്നത്. സ്ക്രീൻ റീഡറുള്ള ഉപയോക്താക്കളെ ഒരു ടേബിൾ കണ്ടെത്താനും അത് എന്തിനെക്കുറിച്ചാണെന്ന് മനസ്സിലാക്കാനും അത് വായിക്കണോ എന്ന് തീരുമാനിക്കാനും ഇത് സഹായിക്കുന്നു.
ഉപയോക്താക്കളുടെ പട്ടിക
#
ആദ്യം
അവസാനത്തെ
കൈകാര്യം ചെയ്യുക
1
അടയാളപ്പെടുത്തുക
ഓട്ടോ
@mdo
2
ജേക്കബ്
തോൺടൺ
@കൊഴുപ്പ്
3
ലാറി ദി ബേർഡ്
@ട്വിറ്റർ
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
ഉപയോഗിച്ച് നിങ്ങൾക്ക് <caption>മേശയുടെ മുകളിൽ വയ്ക്കാം .caption-top.
ഉപയോക്താക്കളുടെ പട്ടിക
#
ആദ്യം
അവസാനത്തെ
കൈകാര്യം ചെയ്യുക
1
അടയാളപ്പെടുത്തുക
ഓട്ടോ
@mdo
2
ജേക്കബ്
തോൺടൺ
@കൊഴുപ്പ്
3
ലാറി
പക്ഷി
@ട്വിറ്റർ
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
പ്രതികരിക്കുന്ന പട്ടികകൾ
റെസ്പോൺസീവ് ടേബിളുകൾ ടേബിളുകൾ തിരശ്ചീനമായി സ്ക്രോൾ ചെയ്യാൻ അനുവദിക്കുന്നു. .tableഉപയോഗിച്ച് പൊതിഞ്ഞ് എല്ലാ വ്യൂപോർട്ടുകളിലുടനീളം ഏത് പട്ടികയും പ്രതികരിക്കുന്നതാക്കുക .table-responsive. അല്ലെങ്കിൽ, ഉപയോഗിച്ച് ഒരു റെസ്പോൺസീവ് ടേബിൾ ഉണ്ടായിരിക്കാൻ പരമാവധി ബ്രേക്ക്പോയിന്റ് തിരഞ്ഞെടുക്കുക .table-responsive{-sm|-md|-lg|-xl|-xxl}.
ലംബമായ ക്ലിപ്പിംഗ്/വെട്ടൽ
റെസ്പോൺസീവ് ടേബിളുകൾ ഉപയോഗപ്പെടുത്തുന്നു overflow-y: hidden, ഇത് പട്ടികയുടെ താഴെയോ മുകളിലോ ഉള്ള അരികുകൾക്കപ്പുറത്തേക്ക് പോകുന്ന ഏതൊരു ഉള്ളടക്കത്തെയും ക്ലിപ്പ് ചെയ്യുന്നു. പ്രത്യേകിച്ചും, ഇതിന് ഡ്രോപ്പ്ഡൗൺ മെനുകളും മറ്റ് മൂന്നാം കക്ഷി വിജറ്റുകളും ക്ലിപ്പ് ചെയ്യാൻ കഴിയും.
എപ്പോഴും പ്രതികരിക്കുന്നു
എല്ലാ ബ്രേക്ക്പോയിന്റിലും, .table-responsiveതിരശ്ചീനമായി സ്ക്രോളിംഗ് ടേബിളുകൾക്കായി ഉപയോഗിക്കുക.
.table-responsive{-sm|-md|-lg|-xl|-xxl}ഒരു പ്രത്യേക ബ്രേക്ക്പോയിന്റ് വരെ പ്രതികരിക്കുന്ന പട്ടികകൾ സൃഷ്ടിക്കാൻ ആവശ്യാനുസരണം ഉപയോഗിക്കുക . ആ ബ്രേക്ക്പോയിന്റിൽ നിന്നും മുകളിലേക്കും, ടേബിൾ സാധാരണ രീതിയിൽ പ്രവർത്തിക്കും, തിരശ്ചീനമായി സ്ക്രോൾ ചെയ്യില്ല.
നിർദ്ദിഷ്ട വ്യൂപോർട്ട് വീതിയിൽ അവയുടെ പ്രതികരണ ശൈലികൾ ബാധകമാകുന്നതുവരെ ഈ പട്ടികകൾ തകർന്നതായി കാണപ്പെടാം.
ടേബിൾ വേരിയന്റുകളിലെ കോൺട്രാസ്റ്റ് നിർണ്ണയിക്കാൻ ഫാക്ടർ വേരിയബിളുകൾ ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) ഉപയോഗിക്കുന്നു.
$table-bg-levelലൈറ്റ് & ഡാർക്ക് ടേബിൾ വേരിയന്റുകൾക്ക് പുറമെ, തീം നിറങ്ങൾ വേരിയബിളിലൂടെ ലഘൂകരിക്കുന്നു .