Sourceමේස
බූට්ස්ට්රැප් සමඟ වගු තෝරා ගැනීම සඳහා ප්රලේඛනය සහ උදාහරණ (ජාවාස්ක්රිප්ට් ප්ලගීනවල ඒවායේ ප්රචලිත භාවිතය අනුව).
උදාහරණ
දින දර්ශන සහ දින තෝරන යන්ත්ර වැනි තෙවන පාර්ශ්ව විජට් හරහා වගු පුලුල්ව භාවිතා කිරීම හේතුවෙන්, අපි අපගේ වගු තෝරාගත හැකි ලෙස නිර්මාණය කර ඇත . .table
ඕනෑම දෙයකට මූලික පන්තිය එක් කරන්න <table>
, ඉන්පසු අභිරුචි විලාසයන් හෝ අපගේ විවිධ ඇතුළත් කර ඇති විකරණකාරක පන්ති සමඟ දිගු කරන්න.
.table
වඩාත්ම මූලික වගු සලකුණු භාවිතා කරමින්, Bootstrap හි පදනම් වගු පෙනෙන ආකාරය මෙන්න . සියලුම වගු විලාසයන් Bootstrap 4 හි උරුම වී ඇත , එයින් අදහස් වන්නේ ඕනෑම කැදලි වගු මව්පියන් මෙන් මෝස්තර කරනු ලැබේ.
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී |
කුරුල්ලා |
@ට්විටර් |
ඔබට අඳුරු පසුබිම් මත සැහැල්ලු අකුරු සහිත-වර්ණ ප්රතිලෝම කළ හැක .table-dark
.
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී |
කුරුල්ලා |
@ට්විටර් |
මේස හිස විකල්ප
වගු සහ අඳුරු වගු වලට සමානව, විකරණකාරක පන්ති භාවිතා කරන්න හෝ .thead-light
s ලා හෝ තද අළු පැහැයක් ඇති කිරීමට..thead-dark
<thead>
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී |
කුරුල්ලා |
@ට්විටර් |
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී |
කුරුල්ලා |
@ට්විටර් |
ඉරි සහිත පේළි
.table-striped
තුළ ඇති ඕනෑම වගු පේළියකට සීබ්රා-ඉරි එකතු කිරීමට භාවිතා කරන්න <tbody>
.
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී |
කුරුල්ලා |
@ට්විටර් |
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී |
කුරුල්ලා |
@ට්විටර් |
මායිම් මේසය
.table-bordered
මේසයේ සහ සෛලවල සියලුම පැතිවල මායිම් සඳහා එකතු කරන්න .
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී කුරුල්ලා |
@ට්විටර් |
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී කුරුල්ලා |
@ට්විටර් |
මායිම් රහිත මේසය
.table-borderless
මායිම් නොමැති මේසයක් සඳහා එකතු කරන්න .
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී කුරුල්ලා |
@ට්විටර් |
.table-borderless
අඳුරු මේස මත ද භාවිතා කළ හැකිය.
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී කුරුල්ලා |
@ට්විටර් |
චලනය කළ හැකි පේළි
.table-hover
a තුළ වගු පේළි මත hover තත්වයක් සක්රීය කිරීමට එක් කරන්න <tbody>
.
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී කුරුල්ලා |
@ට්විටර් |
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී කුරුල්ලා |
@ට්විටර් |
කුඩා මේසය
.table-sm
සෛල පිරවුම අඩකින් කැපීමෙන් වගු වඩාත් සංයුක්ත කිරීමට එක් කරන්න .
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී කුරුල්ලා |
@ට්විටර් |
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී කුරුල්ලා |
@ට්විටර් |
සන්දර්භ පන්ති
වගු පේළි හෝ තනි සෛල වර්ණ කිරීමට සන්දර්භීය පන්ති භාවිතා කරන්න.
පන්තිය |
ශීර්ෂය |
ශීර්ෂය |
ක්රියාකාරී |
සෛලය |
සෛලය |
පෙරනිමිය |
සෛලය |
සෛලය |
ප්රාථමික |
සෛලය |
සෛලය |
ද්විතියික |
සෛලය |
සෛලය |
සාර්ථකත්වය |
සෛලය |
සෛලය |
අනතුර |
සෛලය |
සෛලය |
අවවාදයයි |
සෛලය |
සෛලය |
තොරතුරු |
සෛලය |
සෛලය |
ආලෝකය |
සෛලය |
සෛලය |
අඳුරු |
සෛලය |
සෛලය |
අඳුරු වගුව සමඟ සාමාන්ය වගු පසුබිම් ප්රභේද නොමැත, කෙසේ වෙතත්, ඔබට සමාන මෝස්තර ලබා ගැනීමට පෙළ හෝ පසුබිම් උපයෝගිතා භාවිතා කළ හැක.
# |
ශීර්ෂය |
ශීර්ෂය |
1 |
සෛලය |
සෛලය |
2 |
සෛලය |
සෛලය |
3 |
සෛලය |
සෛලය |
4 |
සෛලය |
සෛලය |
5 |
සෛලය |
සෛලය |
6 |
සෛලය |
සෛලය |
7 |
සෛලය |
සෛලය |
8 |
සෛලය |
සෛලය |
9 |
සෛලය |
සෛලය |
උපකාරක තාක්ෂණයන් සඳහා අර්ථය ලබා දීම
අර්ථය එකතු කිරීම සඳහා වර්ණය භාවිතා කිරීම දෘශ්ය ඇඟවීමක් පමණක් සපයයි, එය තිර කියවනය වැනි ආධාරක තාක්ෂණයන් භාවිතා කරන්නන්ට ලබා නොදේ. වර්ණයෙන් දැක්වෙන තොරතුරු එක්කෝ අන්තර්ගතයෙන්ම පැහැදිලි බව (උදා: දෘශ්ය පෙළ) හෝ .sr-only
පන්තිය සමඟ සඟවා ඇති අතිරේක පෙළ වැනි විකල්ප ක්රම මගින් ඇතුළත් කර ඇති බව සහතික කර ගන්න.
576px, 768px, 992px, සහ 1120px දක්වා (නමුත් ඇතුළුව නොවේ) සෑම කඩඉමකදීම වගුව තිරස් අතට අනුචලනය කිරීම මගින් ඕනෑම එකක් .table
සමඟ ඔතා ප්රතිචාරාත්මක වගු සාදන්න ..table-responsive{-sm|-md|-lg|-xl}
max-width
බ්රවුසර දැනට පරාස සන්දර්භය විමසුම් සඳහා සහය නොදක්වන බැවින්, අපි මෙම සංසන්දනය සඳහා ඉහළ නිරවද්යතාවයකින් අගයන් භාවිතා කරමින් භාගික පළල (උදාහරණයක් ලෙස, අධි-dpi උපාංගවල යම් යම් තත්වයන් යටතේ සිදුවිය හැකි) සහිත උපසර්ග min-
සහmax-
දර්ශන තොටුවල සීමාවන් වටා ක්රියා කරන බව සලකන්න. .
සිරස්තල
මේසයක් සඳහා <caption>
ශීර්ෂයක් ලෙස ක්රියා කරයි. එය තිර කියවනය සහිත පරිශීලකයින්ට වගුවක් සොයා ගැනීමට සහ එය කුමක්ද යන්න තේරුම් ගැනීමට සහ එය කියවීමට අවශ්ය දැයි තීරණය කිරීමට උදවු කරයි.
පරිශීලක ලැයිස්තුව
# |
පළමුවන |
අවසන් |
හසුරුවන්න |
1 |
ලකුණ |
ඔටෝ |
@mdo |
2 |
යාකොබ් |
තෝන්ටන් |
@මේදය |
3 |
ලැරී |
කුරුල්ලා |
@ට්විටර් |
ප්රතිචාරාත්මක වගු
ප්රතිචාරාත්මක වගු මඟින් වගු පහසුවෙන් තිරස් අතට අනුචලනය කිරීමට ඉඩ සලසයි. .table
සමඟ එතීමෙන් ඕනෑම වගුවක් සියලුම දර්ශන තොට හරහා ප්රතිචාරාත්මක කරන්න .table-responsive
. නැතහොත්, භාවිතා කිරීමෙන් ප්රතිචාරාත්මක වගුවක් ඇති උපරිම කඩඉමක් තෝරන්න .table-responsive{-sm|-md|-lg|-xl}
.
සිරස් කැපීම / කප්පාදු කිරීම
ප්රතිචාරාත්මක වගු භාවිතා කරයි overflow-y: hidden
, එය මේසයේ පහළ හෝ ඉහළ දාරවලින් ඔබ්බට යන ඕනෑම අන්තර්ගතයක් ක්ලිප් කරයි. විශේෂයෙන්, මෙය පතන මෙනු සහ අනෙකුත් තෙවන පාර්ශවීය විජට් කපා හැරිය හැක.
සෑම විටම ප්රතිචාර දක්වයි
සෑම කඩඉමක් හරහාම, .table-responsive
තිරස් අනුචලන වගු සඳහා භාවිතා කරන්න.
# |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
1 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
2 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
3 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
බිඳුම් ලක්ෂ්යය විශේෂිත
භාවිත.table-responsive{-sm|-md|-lg|-xl}
විශේෂිත කඩඉමක් දක්වා ප්රතිචාරාත්මක වගු සෑදීමට අවශ්ය පරිදිඑම කඩඉම් ලක්ෂ්යයෙන් සහ ඉහළට, මේසය සාමාන්ය ලෙස හැසිරෙන අතර තිරස් අතට අනුචලනය නොවේ.
මෙම වගු ඒවායේ ප්රතිචාරාත්මක විලාසයන් නිශ්චිත දර්ශන තොටුපල පළලට අදාළ වන තෙක් කැඩී ඇති බවක් පෙනෙන්නට තිබේ.
# |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
1 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
2 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
3 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
# |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
1 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
2 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
3 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
# |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
1 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
2 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
3 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
# |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
ශීර්ෂය |
1 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
2 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
3 |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |
සෛලය |