பூட்ஸ்டார்ப் உடன் அட்டவணைகள் (ஜாவாஸ்கிரிப்ட் செருகுநிரல்களில் பரவலாகப் பயன்படுத்தப்படும்) வடிவமைப்பிற்கான ஆவணப்படுத்தல் மற்றும் எடுத்துக்காட்டுகள்.
இந்தப் பக்கத்தில்
கண்ணோட்டம்
<table>���ாலெண்டர்கள் மற்றும் தேதி பிக்கர்கள் போன்ற மூன்றாம் தரப்பு விட்ஜெட்கள் முழுவதும் உறுப்புகளின் பரவலான பயன்பாடு காரணமாக , பூட்ஸ்டார்ப்பின் அட்டவணைகள் தேர்வு செய்யப்படுகின்றன . அடிப்படை வகுப்பைச் சேர்க்கவும் .table, <table>பின்னர் எங்கள் விருப்ப மாற்றியமைக்கும் வகுப்புகள் அல்லது தனிப்பயன் பாணிகளுடன் நீட்டிக்கவும். அனைத்து அட்டவணை பாணிகளும் பூட்ஸ்டார்ப்பில் மரபுரிமையாக இல்லை, அதாவது எந்த உள்ளமை அட்டவணைகளும் பெற்றோரிடமிருந்து சுயாதீனமாக வடிவமைக்கப்படலாம்.
மிகவும் அடிப்படையான டேபிள் மார்க்அப்பைப் பயன்படுத்தி, .tableபூட்ஸ்டார்ப்பில் அடிப்படையிலான அட்டவணைகள் எப்படி இருக்கும் என்பது இங்கே.
#
முதலில்
கடந்த
கைப்பிடி
1
குறி
ஓட்டோ
@mdo
2
ஜேக்கப்
தோர்ன்டன்
@கொழுப்பு
3
லாரி பறவை
@twitter
<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>.
--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 இல் உள்ள குழந்தை இணைப்பான் ( ) தேர்வியைப் பயன்படுத்துகிறோம். , , மற்றும் , இல் உள்ள அனைத்து tdகள் மற்றும் களை நாம் இலக்காகக் கொள்ள வேண்டியிருப்பதால் , எங்கள் தேர்வாளர் அது இல்லாமல் அழகாக இருக்கும். எனவே, அனைத்து கள் மற்றும் களை இலக்காகக் காட்ட வித்தியாசமாகத் தோன்றும் தேர்வியைப் பயன்படுத்துகிறோம் , ஆனால் சாத்தியமான உள்ளமை அட்டவணைகள் எதுவும் இல்லை.ththeadtbodytfoot.table > :not(caption) > * > *tdth.table
<tr>ஒரு அட்டவணையின் நேரடிக் குழந்தைகளாக நீங்கள் sஐச் சேர்த்தால் , அவை முன்னிருப்பாக <tr>ஒரு உடன் மூடப்பட்டிருக்கும் <tbody>, இதனால் எங்கள் தேர்வாளர்கள் விரும்பியபடி செயல்படுவார்கள்.
உடற்கூறியல்
மேஜை தலை
அட்டவணைகள் மற்றும் இருண்ட அட்டவணைகளைப் போலவே, மாற்றியமைக்கும் வகுப்புகளைப் பயன்படுத்தவும் .table-lightஅல்லது களை வெளிர் அல்லது அடர் சாம்பல் நிறத்தில் .table-darkகாட்டவும் .<thead>
ஒரு <caption>அட்டவணைக்கு ஒரு தலைப்பு போல் செயல்படுகிறது. ஸ்க்ரீன் ரீடர்களைக் கொண்ட பயனர்கள் ஒரு அட்டவணையைக் கண்டுபிடித்து, அது எதைப் பற்றியது என்பதைப் புரிந்துகொண்டு அதைப் படிக்க வேண்டுமா என்பதைத் தீர்மானிக்க இது உதவுகிறது.
பயனர்களின் பட்டியல்
#
முதலில்
கடந்த
கைப்பிடி
1
குறி
ஓட்டோ
@mdo
2
ஜேக்கப்
தோர்ன்டன்
@கொழுப்பு
3
லாரி பறவை
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
<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மாறி மூலம் ஒளிர்கின்றன.