Шолу
<table>
Күнтізбелер мен күн таңдаушылары сияқты үшінші тарап виджеттері арқылы элементтерді кеңінен пайдалануына байланысты Bootstrap кестелері қосылуға мүмкіндік береді . Негізгі классты .table
кез келгенге қосыңыз <table>
, содан кейін қосымша модификатор сыныптарымен немесе реттелетін мәнерлермен кеңейтіңіз. Барлық кесте мәнерлері Bootstrap бағдарламасында мұраланбайды, яғни кез келген кірістірілген кестелерді ата-анадан тәуелсіз стильдеуге болады.
Ең негізгі кестені белгілеуді пайдаланып, .table
Bootstrap қолданбасында негізделген кестелер қалай көрінеді.
# |
Бірінші |
Соңғы |
Тұтқаны |
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 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 |
Ларри құс |
@twitter |
<table class="table table-striped">
...
</table>
Бұл сыныптарды кесте нұсқаларына да қосуға болады:
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри құс |
@twitter |
<table class="table table-dark table-striped">
...
</table>
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри құс |
@twitter |
<table class="table table-success table-striped">
...
</table>
Жылжымалы жолдар
.table-hover
ішінде кесте жолдарындағы меңзер күйін қосу үшін Қосу <tbody>
.
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри құс |
@twitter |
<table class="table table-hover">
...
</table>
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри құс |
@twitter |
<table class="table table-dark table-hover">
...
</table>
Бұл қозғалмалы жолдарды жолақты нұсқамен біріктіруге болады:
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри құс |
@twitter |
<table class="table table-striped table-hover">
...
</table>
Белсенді кестелер
.table-active
Класс қосу арқылы кесте жолын немесе ұяшықты бөлектеңіз .
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри құс |
@twitter |
<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 |
Ларри құс |
@twitter |
<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 |
Ларри құс |
@twitter |
<table class="table table-bordered">
...
</table>
Түстерді өзгерту үшін жиек түсінің утилиталарын қосуға болады:
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри құс |
@twitter |
<table class="table table-bordered border-primary">
...
</table>
Жиектері жоқ кестелер
.table-borderless
Жиектері жоқ кесте үшін қосыңыз .
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри құс |
@twitter |
<table class="table table-borderless">
...
</table>
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри құс |
@twitter |
<table class="table table-dark table-borderless">
...
</table>
Шағын үстелдер
Барлық ұяшықты екіге кесу арқылы .table-sm
кез келген .table
ықшамдау үшін қосыңыз .padding
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри құс |
@twitter |
<table class="table table-sm">
...
</table>
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри құс |
@twitter |
<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 |
Тақырып |
Тақырып |
Тақырып |
А |
Бірінші |
Соңғы |
Б |
Бірінші |
Соңғы |
C |
Бірінші |
Соңғы |
|
3 |
Ларри |
құс |
@twitter |
<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>
бойынша a ішіне оралатынын <tbody>
ескеріңіз, осылайша біздің селекторлар белгіленгендей жұмыс істейді.
Анатомия
Үстел басы
Кестелер мен күңгірт кестелерге ұқсас, модификатор сыныптарын пайдаланыңыз .table-light
немесе s ашық немесе қою сұр болып көрінуі .table-dark
үшін .<thead>
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри |
құс |
@twitter |
<table class="table">
<thead class="table-light">
...
</thead>
<tbody>
...
</tbody>
</table>
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри |
құс |
@twitter |
<table class="table">
<thead class="table-dark">
...
</thead>
<tbody>
...
</tbody>
</table>
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри |
құс |
@twitter |
Колонтитул |
Колонтитул |
Колонтитул |
Колонтитул |
<table class="table">
<thead>
...
</thead>
<tbody>
...
</tbody>
<tfoot>
...
</tfoot>
</table>
Жазбалар
Кестеге арналған <caption>
тақырып сияқты функцияларды орындайды. Ол экраннан оқу құралдары бар пайдаланушыларға кестені табуға және оның не туралы екенін түсінуге және оны оқығысы келетін-келмейтінін шешуге көмектеседі.
Пайдаланушылар тізімі
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри құс |
@twitter |
<table class="table table-sm">
<caption>List of users</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
<caption>
Онымен бірге үстелдің жоғарғы жағына қоюға болады .caption-top
.
Пайдаланушылар тізімі
# |
Бірінші |
Соңғы |
Тұтқаны |
1 |
белгі |
Отто |
@mdo |
2 |
Джейкоб |
Торнтон |
@май |
3 |
Ларри |
құс |
@twitter |
<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>
Жауапты кестелер
Жауапты кестелер кестелерді көлденеңінен оңай айналдыруға мүмкіндік береді. .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
айнымалы арқылы жеңілдетілген.