Source

මේස

බූට්ස්ට්‍රැප් සමඟ වගු තෝරා ගැනීම සඳහා ප්‍රලේඛනය සහ උදාහරණ (ජාවාස්ක්‍රිප්ට් ප්ලගීනවල ඒවායේ ප්‍රචලිත භාවිතය අනුව).

උදාහරණ

දින දර්ශන සහ දින තෝරන යන්ත්‍ර වැනි තෙවන පාර්ශ්ව විජට් හරහා වගු පුලුල්ව භාවිතා කිරීම හේතුවෙන්, අපි අපගේ වගු තෝරාගත හැකි ලෙස නිර්මාණය කර ඇත . .tableඕනෑම දෙයකට මූලික පන්තිය එක් කරන්න <table>, ඉන්පසු අභිරුචි විලාසයන් හෝ අපගේ විවිධ ඇතුළත් කර ඇති විකරණකාරක පන්ති සමඟ දිගු කරන්න.

.tableවඩාත්ම මූලික වගු සලකුණු භාවිතා කරමින්, Bootstrap හි පදනම් වගු පෙනෙන ආකාරය මෙන්න . සියලුම වගු විලාසයන් Bootstrap 4 හි උරුම වී ඇත , එයින් අදහස් වන්නේ ඕනෑම කැදලි වගු මව්පියන් මෙන් මෝස්තර කරනු ලැබේ.

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර් 
<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 ලැරී කුරුල්ලා @ට්විටර් 
<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-lights ලා හෝ තද අළු පැහැයක් ඇති කිරීමට..thead-dark<thead>

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්
# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර් 
<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 ලැරී කුරුල්ලා @ට්විටර් 
<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 ලැරී කුරුල්ලා @ට්විටර් 
<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 ලැරී කුරුල්ලා @ට්විටර් 
<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 ලැරී කුරුල්ලා @ට්විටර් 
<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-hovera තුළ වගු පේළි මත hover තත්වයක් සක්‍රීය කිරීමට එක් කරන්න <tbody>.

# පළමුවන අවසන් හසුරුවන්න
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර් 
<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 ලැරී කුරුල්ලා @ට්විටර් 
<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 ලැරී කුරුල්ලා @ට්විටර් 
<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 ලැරී කුරුල්ලා @ට්විටර් 
<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 ලැරී කුරුල්ලා @ට්විටර් 
<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>