کتنه
د دریمې ډلې ویجټونو لکه کیلنڈرونو او نیټې غوره کونکو کې د عناصرو پراخه کارونې له امله <table>
، د بوټسټریپ میزونه غوره شوي . .table
هر ته بیس کلاس اضافه کړئ <table>
، بیا زموږ د اختیاري ترمیم کونکي ټولګیو یا دودیز سټایلونو سره پراخه کړئ. ټول جدول سټایلونه په بوټسټریپ کې میراث ندي ، پدې معنی چې هر ځړول شوي میزونه د مور او پلار څخه خپلواک سټایل کیدی شي.
د خورا لومړني جدول مارک اپ په کارولو سره ، دلته په .table
بوټسټریپ کې د میزونو پراساس څنګه ښکاري.
# |
لومړی |
تېر |
سمبالول |
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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
متغیرات
د میزونو، میز قطارونو یا انفرادي حجرو رنګ کولو لپاره متناسب ټولګي وکاروئ.
ټولګي |
سرلیک |
سرلیک |
ډیفالټ |
حجره |
حجره |
لومړني |
حجره |
حجره |
ثانوي |
حجره |
حجره |
بریالیتوب |
حجره |
حجره |
خطر |
حجره |
حجره |
خبرتیا |
حجره |
حجره |
معلومات |
حجره |
حجره |
رڼا |
حجره |
حجره |
تیاره |
حجره |
حجره |
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>
<!-- On rows -->
<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-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>
مرستندویه ټیکنالوژیو ته د معنی رسول
د معنی اضافه کولو لپاره د رنګ کارول یوازې یو بصری نښې وړاندې کوي، کوم چې به د مرستندویه ټیکنالوژیو کاروونکو ته نه لیږل کیږي - لکه د سکرین لوستونکي. ډاډ ترلاسه کړئ چې د رنګ لخوا څرګند شوي معلومات یا پخپله د مینځپانګې څخه څرګند دي (د بیلګې په توګه څرګند متن) ، یا د بدیل وسیلو له لارې شامل شوي ، لکه د .visually-hidden
ټولګي سره پټ اضافي متن.
تلفظ شوي میزونه
پټې قطارونه
.table-striped
د میز دننه د هر میز قطار ته د زیبرا سټریپینګ اضافه کولو لپاره وکاروئ <tbody>
.
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table table-striped">
...
</table>
دا ټولګي د جدول ډولونو کې هم اضافه کیدی شي:
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table table-dark table-striped">
...
</table>
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table table-success table-striped">
...
</table>
د ځړولو وړ قطارونه
.table-hover
د میز په قطارونو کې دننه د هوور حالت فعالولو لپاره اضافه کړئ <tbody>
.
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table table-hover">
...
</table>
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table table-dark table-hover">
...
</table>
دا د هوور وړ قطارونه هم د پټو ډولونو سره یوځای کیدی شي:
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table table-striped table-hover">
...
</table>
فعال میزونه
.table-active
د ټولګي په اضافه کولو سره د میز قطار یا سیل روښانه کړئ .
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table">
<thead>
...
</thead>
<tbody>
<tr class="table-active">
...
</tr>
<tr>
...
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2" class="table-active">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table table-dark">
<thead>
...
</thead>
<tbody>
<tr class="table-active">
...
</tr>
<tr>
...
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2" class="table-active">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</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
کې چې د سپک تلفظ رنګ لري.
- د متن او سرحد رنګونه په ورته ډول تولید شوي، او د دوی رنګونه په ډیفالټ میراث کیږي.
د پردې تر شا دا داسې ښکاري:
@mixin table-variant($state, $background) {
.table-#{$state} {
$color: color-contrast(opaque($body-bg, $background));
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
--#{$variable-prefix}table-bg: #{$background};
--#{$variable-prefix}table-striped-bg: #{$striped-bg};
--#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$variable-prefix}table-active-bg: #{$active-bg};
--#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
--#{$variable-prefix}table-hover-bg: #{$hover-bg};
--#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
color: $color;
border-color: mix($color, $background, percentage($table-border-factor));
}
}
د میز سرحدونه
سرحدی میزونه
.table-bordered
د میز او حجرو په ټولو اړخونو کې د سرحدونو لپاره اضافه کړئ .
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table table-bordered">
...
</table>
د رنګونو بدلولو لپاره د سرحد رنګ اسانتیاوې اضافه کیدی شي:
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table table-bordered border-primary">
...
</table>
بې سرحده میزونه
.table-borderless
د سرحدونو پرته د میز لپاره اضافه کړئ .
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table table-borderless">
...
</table>
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table table-dark table-borderless">
...
</table>
کوچني میزونه
د ټولو حجرو په نیمایي کې پرې کولو سره نور کمپیکٹ کولو .table-sm
لپاره اضافه کړئ ..table
padding
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table table-sm">
...
</table>
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table table-dark table-sm">
...
</table>
عمودی سمون
د جدول حجرې <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; د میز څخه په میراث کې راځي |
دا حجره د پورتنۍ برخې سره سمون لري. |
دا دلته د ځای لرونکی متن دی، چې موخه یې یو څه عمودی ځای نیول دی، ترڅو وښیې چې عمودی ترتیب څنګه په مخکینیو حجرو کې کار کوي. |
<div class="table-responsive">
<table class="table align-middle">
<thead>
<tr>
...
</tr>
</thead>
<tbody>
<tr>
...
</tr>
<tr class="align-bottom">
...
</tr>
<tr>
<td>...</td>
<td>...</td>
<td class="align-top">This cell is aligned to the top.</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
ځړول
د سرحد سټایلونه، فعال سټایلونه، او د میز ډولونه د نیست شوي میزونو لخوا په میراث نه دي.
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
سرلیک |
سرلیک |
سرلیک |
الف |
لومړی |
تېر |
ب |
لومړی |
تېر |
ج |
لومړی |
تېر |
|
3 |
لاري |
مرغۍ |
@ټویټر |
<table class="table table-striped">
<thead>
...
</thead>
<tbody>
...
<tr>
<td colspan="4">
<table class="table mb-0">
...
</table>
</td>
</tr>
...
</tbody>
</table>
ځړول څنګه کار کوي
د دې لپاره چې هر ډول سټایلونه نیست شوي میزونو ته د لیکیدو مخه ونیسي ، موږ >
زموږ په CSS کې د ماشوم ترکیب () انتخاب کونکی کاروو. ځکه چې موږ اړتیا لرو چې په , , او کې ټول td
s او th
s په نښه کړو، زموږ انتخاب کونکی به پرته له دې ډیر اوږد ښکاري. د دې په څیر، موږ د ټولو s او s په نښه کولو لپاره خورا عجیب ښکاري انتخاب کونکی کاروو ، مګر هیڅ یو احتمالي نیست شوي جدولونه.thead
tbody
tfoot
.table > :not(caption) > * > *
td
th
.table
په یاد ولرئ چې که تاسو <tr>
د میز د مستقیم ماشومانو په توګه s اضافه کړئ، دا <tr>
به په <tbody>
ډیفالټ کې وتړل شي، په دې توګه زموږ انتخاب کونکي د هدف په توګه کار کوي.
اناتومي
د میز سر
د جدولونو او تیاره میزونو په څیر، د ترمیم کونکي ټولګي وکاروئ .table-light
یا .table-dark
د <thead>
روښانه یا تیاره خړ څرګندولو لپاره.
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري |
مرغۍ |
@ټویټر |
<table class="table">
<thead class="table-light">
...
</thead>
<tbody>
...
</tbody>
</table>
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري |
مرغۍ |
@ټویټر |
<table class="table">
<thead class="table-dark">
...
</thead>
<tbody>
...
</tbody>
</table>
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري |
مرغۍ |
@ټویټر |
فوټر |
فوټر |
فوټر |
فوټر |
<table class="table">
<thead>
...
</thead>
<tbody>
...
</tbody>
<tfoot>
...
</tfoot>
</table>
کیپشنونه
د <caption>
میز لپاره د سرلیک په څیر کار کوي. دا د سکرین لوستونکو سره د کاروونکو سره مرسته کوي چې یو میز ومومي او پوه شي چې دا څه دي او پریکړه کوي چې ایا دوی غواړي لوستل شي.
د کاروونکو لیست
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري مرغۍ |
@ټویټر |
<table class="table table-sm">
<caption>List of users</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
تاسو کولی شئ <caption>
د میز په سر کې هم واچوئ .caption-top
.
د کاروونکو لیست
# |
لومړی |
تېر |
سمبالول |
1 |
مارک |
اوټو |
@mdo |
2 |
یعقوب |
تورټن |
@ غوړ |
3 |
لاري |
مرغۍ |
@ټویټر |
<table class="table caption-top">
<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>
ځواب ویونکي میزونه
ځواب ویونکي میزونه میزونو ته اجازه ورکوي چې په افقی ډول په اسانۍ سره سکرول شي. هر جدول د ټولو لید پورټونو په اوږدو کې د a سره لپاس کولو .table
سره ځواب ویونکی کړئ .table-responsive
. یا، د اعظمي وقفې نقطه غوره کړئ چې ورسره په کارولو سره ځواب ویونکی میز ولرئ .table-responsive{-sm|-md|-lg|-xl|-xxl}
.
عمودی ټوټه کول / قطع کول
ځواب ورکوونکي جدولونه کاروي overflow-y: hidden
، کوم چې هر هغه مینځپانګه بندوي چې د میز له لاندې یا پورتنیو څنډو څخه بهر ځي. په ځانګړې توګه، دا کولی شي د ډراپ ډاون مینو او نورو دریمې ډلې ویجټونه بند کړي.
تل ځواب ویونکی
د هرې وقفې په اوږدو کې، .table-responsive
د افقی سکرول کولو میزونو لپاره وکاروئ.
# |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
1 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
2 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
3 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
د وقفې نقطې مشخص
د اړتیا سره سم وکاروئ .table-responsive{-sm|-md|-lg|-xl|-xxl}
تر یوې ځانګړې وقفې پورې د ځواب ویونکي میزونو رامینځته کولو لپاره. د دې وقفې او پورته څخه، میز به په نورمال ډول چلند وکړي او په افقی ډول سکرول نه کوي.
دا میزونه ممکن مات شي تر هغه چې د دوی ځواب ویونکي سټایلونه په ځانګړي لید پورټ چوکۍ کې پلي شي.
# |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
1 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
2 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
3 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
# |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
1 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
2 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
3 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
# |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
1 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
2 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
3 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
# |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
1 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
2 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
3 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
# |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
1 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
2 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
3 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
# |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
سرلیک |
1 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
2 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
3 |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
حجره |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
<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>
<div class="table-responsive-xxl">
<table class="table">
...
</table>
</div>
ساس
متغیرات
$table-cell-padding-y: .5rem;
$table-cell-padding-x: .5rem;
$table-cell-padding-y-sm: .25rem;
$table-cell-padding-x-sm: .25rem;
$table-cell-vertical-align: top;
$table-color: $body-color;
$table-bg: transparent;
$table-accent-bg: transparent;
$table-th-font-weight: null;
$table-striped-color: $table-color;
$table-striped-bg-factor: .05;
$table-striped-bg: rgba($black, $table-striped-bg-factor);
$table-active-color: $table-color;
$table-active-bg-factor: .1;
$table-active-bg: rgba($black, $table-active-bg-factor);
$table-hover-color: $table-color;
$table-hover-bg-factor: .075;
$table-hover-bg: rgba($black, $table-hover-bg-factor);
$table-border-factor: .1;
$table-border-width: $border-width;
$table-border-color: $border-color;
$table-striped-order: odd;
$table-group-separator-color: currentColor;
$table-caption-color: $text-muted;
$table-bg-scale: -80%;
لوپ
$table-variants: (
"primary": shift-color($primary, $table-bg-scale),
"secondary": shift-color($secondary, $table-bg-scale),
"success": shift-color($success, $table-bg-scale),
"info": shift-color($info, $table-bg-scale),
"warning": shift-color($warning, $table-bg-scale),
"danger": shift-color($danger, $table-bg-scale),
"light": $light,
"dark": $dark,
);
دودیز کول
- د فکتور متغیرونه (
$table-striped-bg-factor
, $table-active-bg-factor
& $table-hover-bg-factor
) د جدول په ډولونو کې د تضاد د ټاکلو لپاره کارول کیږي.
- د رڼا او تیاره میز ډولونو سربیره، د موضوع رنګونه د
$table-bg-level
متغیر لخوا روښانه شوي.