Source

அட்டவணைகள்

பூட்ஸ்டார்ப் உடன் அட்டவணைகள் (ஜாவாஸ்கிரிப்ட் செருகுநிரல்களில் பரவலாகப் பயன்படுத்தப்படும்) வடிவமைப்பிற்கான ஆவணப்படுத்தல் மற்றும் எடுத்துக்காட்டுகள்.

எடுத்துக்காட்டுகள்

கேலெண்டர்கள் மற்றும் தேதி பிக்கர்கள் போன்ற மூன்றாம் தரப்பு விட்ஜெட்கள் முழுவதும் டேபிள்கள் பரவலாகப் பயன்படுத்தப்படுவதால், நாங்கள் தேர்வுசெய்யும் வகையில் எங்கள் அட்டவணையை வடிவமைத்துள்ளோம் . அடிப்படை வகுப்பைச் சேர்க்கவும் .table, <table>பின்னர் தனிப்பயன் பாணிகள் அல்லது எங்களின் பல்வேறு உள்ளிட்ட மாற்றியமைக்கும் வகுப்புகளுடன் நீட்டிக்கவும்.

மிகவும் அடிப்படையான டேபிள் மார்க்அப்பைப் பயன்படுத்தி, .tableபூட்ஸ்டார்ப்பில் அடிப்படையிலான அட்டவணைகள் எப்படி இருக்கும் என்பது இங்கே. அனைத்து அட்டவணை பாணிகளும் பூட்ஸ்டார்ப் 4 இல் மரபுரிமையாக உள்ளன , அதாவது எந்த உள்ளமை அட்டவணைகளும் பெற்றோரின் பாணியில் வடிவமைக்கப்படும்.

# முதலில் கடந்த கைப்பிடி
1 குறி ஓட்டோ @mdo
2 ஜேக்கப் தோர்ன்டன் @கொழுப்பு
3 லாரி பறவை @twitter 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

இருண்ட பின்னணியில் ஒளி உரையுடன், வண்ணங்களையும் நீங்கள் தலைகீழாக மாற்றலாம் .table-dark.

# முதலில் கடந்த கைப்பிடி
1 குறி ஓட்டோ @mdo
2 ஜேக்கப் தோர்ன்டன் @கொழுப்பு
3 லாரி பறவை @twitter 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

அட்டவணை தலை விருப்பங்கள்

அட்டவணைகள் மற்றும் இருண்ட அட்டவணைகளைப் போலவே, மாற்றியமைக்கும் வகுப்புகளைப் பயன்படுத்தவும் .thead-lightஅல்லது களை வெளிர் அல்லது அடர் சாம்பல் நிறத்தில் .thead-darkகாட்டவும் .<thead>

# முதலில் கடந்த கைப்பிடி
1 குறி ஓட்டோ @mdo
2 ஜேக்கப் தோர்ன்டன் @கொழுப்பு
3 லாரி பறவை @twitter
# முதலில் கடந்த கைப்பிடி
1 குறி ஓட்டோ @mdo
2 ஜேக்கப் தோர்ன்டன் @கொழுப்பு
3 லாரி பறவை @twitter 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

கோடிட்ட வரிசைகள்

.table-stripedஉள்ள எந்த அட்டவணை வரிசையிலும் வரிக்குதிரை-கோட்டை சேர்க்க பயன்படுத்தவும் <tbody>.

# முதலில் கடந்த கைப்பிடி
1 குறி ஓட்டோ @mdo
2 ஜேக்கப் தோர்ன்டன் @கொழுப்பு
3 லாரி பறவை @twitter 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# முதலில் கடந்த கைப்பிடி
1 குறி ஓட்டோ @mdo
2 ஜேக்கப் தோர்ன்டன் @கொழுப்பு
3 லாரி பறவை @twitter 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

விளிம்பு அட்டவணை

.table-borderedஅட்டவணை மற்றும் கலங்களின் அனைத்துப் பக்கங்களிலும் பார்டர்களைச் சேர்க்கவும் .

# முதலில் கடந்த கைப்பிடி
1 குறி ஓட்டோ @mdo
2 ஜேக்கப் தோர்ன்டன் @கொழுப்பு
3 லாரி பறவை @twitter 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# முதலில் கடந்த கைப்பிடி
1 குறி ஓட்டோ @mdo
2 ஜேக்கப் தோர்ன்டன் @கொழுப்பு
3 லாரி பறவை @twitter 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

வட்டமிடக்கூடிய வரிசைகள்

.table-hoverஒரு உள்ள அட்டவணை வரிசைகளில் ஒரு மிதவை நிலையை செயல்படுத்த சேர்க்கவும் <tbody>.

# முதலில் கடந்த கைப்பிடி
1 குறி ஓட்டோ @mdo
2 ஜேக்கப் தோர்ன்டன் @கொழுப்பு
3 லாரி பறவை @twitter 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# முதலில் கடந்த கைப்பிடி
1 குறி ஓட்டோ @mdo
2 ஜேக்கப் தோர்ன்டன் @கொழுப்பு
3 லாரி பறவை @twitter 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

சிறிய மேஜை

.table-smசெல் பேடிங்கை பாதியாக குறைப்பதன் மூலம் டேபிள்களை மேலும் கச்சிதமாக மாற்ற சேர்க்கவும் .

# முதலில் கடந்த கைப்பிடி
1 குறி ஓட்டோ @mdo
2 ஜேக்கப் தோர்ன்டன் @கொழுப்பு
3 லாரி பறவை @twitter 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# முதலில் கடந்த கைப்பிடி
1 குறி ஓட்டோ @mdo
2 ஜேக்கப் தோர்ன்டன் @கொழுப்பு
3 லாரி பறவை @twitter 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

சூழ்நிலை வகுப்புகள்

அட்டவணை வரிசைகள் அல்லது தனிப்பட்ட கலங்களை வண்ணமயமாக்க சூழ்நிலை வகுப்புகளைப் பயன்படுத்தவும்.

வர்க்கம் தலைப்பு தலைப்பு
செயலில் செல் செல்
இயல்புநிலை செல் செல்
முதன்மை செல் செல்
இரண்டாம் நிலை செல் செல்
வெற்றி செல் செல்
ஆபத்து செல் செல்
எச்சரிக்கை செல் செல்
தகவல் செல் செல்
ஒளி செல் செல்
இருள் செல் செல் 
<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

வழக்கமான டேபிள் பின்னணி மாறுபாடுகள் டார்க் டேபிளுடன் கிடைக்கவில்லை, இருப்பினும், ஒத்த பாணிகளை அடைய நீங்கள் உரை அல்லது பின்னணி பயன்பாடுகளைப் பயன்படுத்தலாம்.

# தலைப்பு தலைப்பு
1 செல் செல்
2 செல் செல்
3 செல் செல்
4 செல் செல்
5 செல் செல்
6 செல் செல்
7 செல் செல்
8 செல் செல்
9 செல் செல் 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
உதவி தொழில்நுட்பங்களுக்கு அர்த்தத்தை வெளிப்படுத்துதல்

பொருளைச் சேர்க்க வண்ணத்தைப் பயன்படுத்துவது ஒரு காட்சிக் குறிப்பை மட்டுமே வழங்குகிறது, இது ஸ்கிரீன் ரீடர்கள் போன்ற உதவித் தொழில்நுட்பங்களைப் பயன்படுத்துபவர்களுக்குத் தெரிவிக்கப்படாது. வண்ணத்தால் குறிக்கப்படும் தகவல் உள்ளடக்கத்திலிருந்தே (எ.கா. புலப்படும் உரை) தெளிவாக இருப்பதை உறுதிசெய்யவும் அல்லது .sr-onlyவகுப்பில் மறைக்கப்பட்ட கூடுதல் உரை போன்ற மாற்று வழிகளில் சேர்க்கப்பட்டுள்ளது.

576px, 768px, 992px மற்றும் 1120px வரையிலான (ஆனால் அடங்காமல்) ஒவ்வொரு பிரேக் பாயிண்டிலும் அட்டவணையை கிடைமட்டமாக உருட்டும் வகையில், எதையும் .tableகொண்டு பதிலளிக்கக்கூடிய அட்டவணைகளை உருவாக்கவும் ..table-responsive{-sm|-md|-lg|-xl}max-width

உலாவிகள் தற்போது வரம்பு சூழல் வினவல்களை ஆதரிக்காததால் , இந்த ஒப்பீடுகளுக்கு அதிக துல்லியத்துடன் மதிப்புகளைப் பயன்படுத்துவதன் மூலம், பகுதியளவு அகலங்களைக் கொண்ட (உதாரணமாக, உயர்-dpi சாதனங்களில் சில நிபந்தனைகளின் கீழ் இது நிகழலாம்) முன்னொட்டுகள் min-மற்றும்max- காட்சிப் பகுதிகளின் வரம்புகளைச் சுற்றி வேலை செய்கிறோம் . .

தலைப்புகள்

ஒரு <caption>அட்டவணைக்கு ஒரு தலைப்பு போல் செயல்படுகிறது. ஸ்க்ரீன் ரீடர்களைக் கொண்ட பயனர்கள் ஒரு அட்டவணையைக் கண்டுபிடித்து, அது எதைப் பற்றியது என்பதைப் புரிந்துகொண்டு அதைப் படிக்க வேண்டுமா என்பதைத் தீர்மானிக்க இது உதவுகிறது.

பயனர்களின் பட்டியல்
# முதலில் கடந்த கைப்பிடி
1 குறி ஓட்டோ @mdo
2 ஜேக்கப் தோர்ன்டன் @கொழுப்பு
3 லாரி பறவை @twitter 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="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}.

செங்குத்து கிளிப்பிங்/துண்டிப்பு

பதிலளிக்கக்கூடிய அட்டவணைகள் overflow-y: hidden, அட்டவணையின் கீழ் அல்லது மேல் விளிம்புகளுக்கு அப்பால் செல்லும் எந்த உள்ளடக்கத்தையும் கிளிப் செய்யும். குறிப்பாக, இது கீழ்தோன்றும் மெனுக்கள் மற்றும் பிற மூன்றாம் தரப்பு விட்ஜெட்களை அகற்றும்.

எப்போதும் பதிலளிக்கக்கூடியது

ஒவ்வொரு பிரேக் பாயிண்டிலும், .table-responsiveகிடைமட்டமாக ஸ்க்ரோலிங் டேபிள்களைப் பயன்படுத்தவும்.

# தலைப்பு தலைப்பு தலைப்பு தலைப்பு தலைப்பு தலைப்பு தலைப்பு தலைப்பு தலைப்பு
1 செல் செல் செல் செல் செல் செல் செல் செல் செல்
2 செல் செல் செல் செல் செல் செல் செல் செல் செல்
3 செல் செல் செல் செல் செல் செல் செல் செல் செல் 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

பிரேக் பாயிண்ட் குறிப்பிட்டது

.table-responsive{-sm|-md|-lg|-xl}குறிப்பிட்ட பிரேக் பாயிண்ட் வரை பதிலளிக்கக்கூடிய அட்டவணைகளை உருவாக்க தேவைக்கேற்ப பயன்படுத்தவும் . அந்த இடைவெளியில் இருந்து மேலே, அட்டவணை சாதாரணமாக செயல்படும் மற்றும் கிடைமட்டமாக உருட்டப்படாது.

# தலைப்பு தலைப்பு தலைப்பு தலைப்பு தலைப்பு
1 செல் செல் செல் செல் செல்
2 செல் செல் செல் செல் செல்
3 செல் செல் செல் செல் செல்
# தலைப்பு தலைப்பு தலைப்பு தலைப்பு தலைப்பு
1 செல் செல் செல் செல் செல்
2 செல் செல் செல் செல் செல்
3 செல் செல் செல் செல் செல்
# தலைப்பு தலைப்பு தலைப்பு தலைப்பு தலைப்பு
1 செல் செல் செல் செல் செல்
2 செல் செல் செல் செல் செல்
3 செல் செல் செல் செல் செல்
# தலைப்பு தலைப்பு தலைப்பு தலைப்பு தலைப்பு
1 செல் செல் செல் செல் செல்
2 செல் செல் செல் செல் செல்
3 செல் செல் செல் செல் செல் 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>