Гомуми күзәтү
<table>
Календарь һәм дата сайлау кебек өченче як виджетларында элементларның киң кулланылуы аркасында , Bootstrap таблицалары оптималь . Төп классны .table
теләсә кемгә өстәгез <table>
, аннары безнең өстәмә үзгәртүче классларыбыз яки махсус стильләр белән киңәйтегез. Барлык өстәл стильләре Bootstrap'та мирас түгел, димәк, ояланган өстәлләр ата-аналардан бәйсез ясалырга мөмкин.
Иң төп өстәл билгесен кулланып, монда .table
Bootstrap-та нигезләнгән таблицалар.
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
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
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
Күчермә
< table class = "table table-striped" >
...
</ table >
Бу классларны өстәл вариантларына да өстәргә мөмкин:
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
Күчермә
< table class = "table table-dark table-striped" >
...
</ table >
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
Күчермә
< table class = "table table-success table-striped" >
...
</ table >
Котлы юллар
.table-hover
А эчендә өстәл рәтләренә менү халәтен булдыру өчен өстәгез <tbody>
.
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
Күчермә
< table class = "table table-hover" >
...
</ table >
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
Күчермә
< table class = "table table-dark table-hover" >
...
</ table >
Бу йөри торган юлларны сызыклы вариант белән берләштерергә мөмкин:
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
Күчермә
< table class = "table table-striped table-hover" >
...
</ table >
Актив таблицалар
.table-active
Класс өстәп өстәл рәтен яки шакмакны аерып алыгыз .
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
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
Ягъкуб
Торнтон
@fat
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
Tableәр өстәл варианты өчен без --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
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
Күчермә
< table class = "table table-bordered" >
...
</ table >
Төсләрне үзгәртү өчен чик төсендәге коммуналь хезмәтләр өстәргә мөмкин:
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
Күчермә
< table class = "table table-bordered border-primary" >
...
</ table >
Чиксез таблицалар
.table-borderless
Чиксез өстәл өстәгез .
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
Күчермә
< table class = "table table-borderless" >
...
</ table >
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
Күчермә
< table class = "table table-dark table-borderless" >
...
</ table >
Кечкенә өстәлләр
Барлык күзәнәкләрне яртыга бүлеп, тагын да компакт .table-sm
ясарга өстәгез ..table
padding
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
Күчермә
< table class = "table table-sm" >
...
</ table >
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
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
ларны максат итеп куярга кирәк thead
, tbody
һәм tfoot
, безнең селектор ансыз бик озын күренер иде. Шулай итеп, без барлык с һәм ларны .table > :not(caption) > * > *
максат итү өчен бик сәер күренгән селектор кулланабыз , ләкин потенциаль ояланган таблицаларның берсе дә юк.td
th
.table
Игътибар итегез, әгәр сез <tr>
таблицаның туры балалары итеп өстәсәгез, алар килешү буенча <tr>
төреләчәк <tbody>
, шулай итеп безнең сайлап алучылар теләгәнчә эшлиләр.
Анатомия
Өстәл башы
Таблицаларга һәм кара өстәлләргә охшаган модификатор классларын кулланыгыз, .table-light
яисә ачык яки куе соры булып күренсен .table-dark
өчен .<thead>
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри
Кош
@twitter
Күчермә
< table class = "table" >
< thead class = "table-light" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри
Кош
@twitter
Күчермә
< table class = "table" >
< thead class = "table-dark" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри
Кош
@twitter
Аяк асты
Аяк асты
Аяк асты
Аяк асты
Күчермә
< table class = "table" >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
< tfoot >
...
</ tfoot >
</ table >
Язулар
<caption>
Таблицага баш кебек функцияләр . Бу экран укучылары булган кулланучыларга таблицаны табарга һәм аның нәрсә икәнен аңларга һәм аны укырга теләгәннәрен хәл итәргә булыша.
Кулланучылар исемлеге
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
Күчермә
< table class = "table table-sm" >
< caption > List of users</ caption >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
Сез шулай ук <caption>
өстәлнең өстенә куя аласыз .caption-top
.
Кулланучылар исемлеге
#
Башта
Соңгы
Тоткыч
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
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 >
Onsаваплы таблицалар
Onsаваплы таблицалар таблицаларны горизонталь яктан җиңел әйләндерергә мөмкинлек бирә. Барлык күренешләр буенча теләсә нинди таблицаны җаваплы итеп .table
ясагыз .table-responsive
. Яисә, кулланып, җаваплы таблицага ия булган максималь ноктаны сайлагыз .table-responsive{-sm|-md|-lg|-xl|-xxl}
.
Вертикаль кисү / кисү
Onsаваплы таблицалар кулланыла overflow-y: hidden
, алар өстәлнең аскы яисә өске кырларыннан арткан эчтәлекне кисеп ала. Аерым алганда, бу тамчы менюларны һәм бүтән өченче як виджетларын кисәргә мөмкин.
Waysәрвакыт җаваплы
Breakәрбер нокта аша .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 >
Сасс
Variзгәрешләр
Күчермә
$table-cell-padding-y : .5 rem ;
$table-cell-padding-x : .5 rem ;
$table-cell-padding-y-sm : .25 rem ;
$table-cell-padding-x-sm : .25 rem ;
$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 % ;
Loop
Күчермә
$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 ,
);
Custзенчәләштерү
Таблицаның вариантларында контрастны билгеләү өчен фактор үзгәрүчәннәре ( $table-striped-bg-factor
, $table-active-bg-factor
& ) кулланыла.$table-hover-bg-factor
Якты һәм караңгы өстәл вариантларыннан кала, тема төсләре $table-bg-level
үзгәрүчән белән җиңеләйтелә.