Uhlolojikelele
Ngenxa yokusetshenziswa kabanzi kwezinto kuwo wonke amawijethi ezinkampani <table>
zangaphandle njengamakhalenda nezikhethi zedethi, amathebula e-Bootstrap asengenile . Engeza ikilasi lesisekelo kunoma iyiphi , bese unweba ngamakilasi ethu okushintsha noma izitayela zangokwezifiso. Zonke izitayela zethebula azizuzwa njengefa ku-Bootstrap, okusho ukuthi noma yimaphi amathebula afakwe esidlekeni angenziwa isitayela ngaphandle komzali..table
<table>
Usebenzisa imakhaphu yethebula eyisisekelo, nansi indlela .table
amathebula asekelwe ngayo abukeka ngayo ku-Bootstrap.
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< 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 >
Okuhlukile
Sebenzisa amakilasi anomongo ukuze ufake imibala kumathebula, imigqa yethebula noma amaseli ngamanye.
Ikilasi
Isihloko
Isihloko
Okuzenzakalelayo
Iseli
Iseli
Okuyinhloko
Iseli
Iseli
Okwesibili
Iseli
Iseli
Impumelelo
Iseli
Iseli
Ingozi
Iseli
Iseli
Isexwayiso
Iseli
Iseli
Ulwazi
Iseli
Iseli
Ukukhanya
Iseli
Iseli
Kumnyama
Iseli
Iseli
Kopisha
<!-- 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 >
Ukudlulisa incazelo kubuchwepheshe obusizayo
Ukusebenzisa umbala ukwengeza incazelo kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (isb umbhalo obonakalayo), noma lufakwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .visually-hidden
nekilasi.
Amathebula ane-accent
Imigqa enemigqa
Sebenzisa .table-striped
ukwengeza i-zebra-striping kunoma yimuphi umugqa wethebula ngaphakathi kwe- <tbody>
.
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< table class = "table table-striped" >
...
</ table >
Lawa makilasi angaphinda angezwe kokuhlukile kwethebula:
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< table class = "table table-dark table-striped" >
...
</ table >
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< table class = "table table-success table-striped" >
...
</ table >
Imigqa enyakazayo
Engeza .table-hover
ukuze unike amandla isimo sokuhambisa phezulu emigqeni yethebula ngaphakathi kwe- <tbody>
.
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< table class = "table table-hover" >
...
</ table >
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< table class = "table table-dark table-hover" >
...
</ table >
Le migqa enyakazayo ingabuye ihlanganiswe nokuhluka okunemigqa:
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< table class = "table table-striped table-hover" >
...
</ table >
Amathebula asebenzayo
Gqamisa umugqa wethebula noma iseli ngokungeza .table-active
iklasi.
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< 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 >
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< 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 >
Asebenza kanjani okuhlukile namathebula anezimpawu zokugcizelela?
Kumathebula agxiviziwe ( imigqa enemigqa , imigqa enyakazayo , namathebula asebenzayo ), sisebenzise amasu athile ukuze senze le miphumela isebenze kukho konke okuhlukile kwethebula lethu :
Siqala ngokusetha ingemuva leseli letafula elinempahla --bs-table-bg
yangokwezifiso. Zonke izinhlobo zethebula zibe sezisetha leyo mpahla yangokwezifiso ukuze ifake umbala kumaseli ethebula. Ngale ndlela, asingeni enkingeni uma imibala ebonisa ngale isetshenziswa njengengemuva letafula.
Bese sengeza isithunzi sebhokisi le-inset kumaseli ethebula box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
ukuze senze isendlalelo phezu kwanoma iyiphi eshiwo background-color
. Ngoba sisebenzisa ukusabalala okukhulu futhi akukho ukufiphala, umbala uzoba monotone. Njengoba --bs-table-accent-bg
ingasethiwe ngokuzenzakalelayo, asinaso isithunzi sebhokisi esizenzakalelayo.
Uma .table-striped
, .table-hover
noma .table-active
amakilasi engezwa, --bs-table-accent-bg
isethi isethwe kumbala okhanye kancane ukuze yenze umbala ongemuva.
Ngokwahluka kwethebula ngalinye, sikhiqiza --bs-table-accent-bg
umbala onokugqama okuphezulu kakhulu kuye ngalowo mbala. Isibonelo, umbala we-accent yawo .table-primary
umnyama ngenkathi .table-dark
unombala we-accent okhanyayo.
Imibala yombhalo neyomngcele ikhiqizwa ngendlela efanayo, futhi imibala yayo izuzwa ngokuzenzakalelayo.
Ngemuva kwezigcawu kubonakala kanje:
Kopisha
@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 ));
}
}
Imingcele yethebula
Amatafula anemingcele
Engeza .table-bordered
imingcele kuzo zonke izinhlangothi zetafula namaseli.
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< table class = "table table-bordered" >
...
</ table >
Izinsiza zombala womngcele zingangezwa ukushintsha imibala:
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< table class = "table table-bordered border-primary" >
...
</ table >
Amathebula angenayo imingcele
Engeza .table-borderless
kutafula elingenayo imingcele.
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< table class = "table table-borderless" >
...
</ table >
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< table class = "table table-dark table-borderless" >
...
</ table >
Amatafula amancane
Engeza .table-sm
ukuze wenze noma iyiphi .table
i-compact kakhudlwana ngokusika wonke amaseli padding
phakathi.
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< table class = "table table-sm" >
...
</ table >
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< table class = "table table-dark table-sm" >
...
</ table >
Ukuqondanisa okuqondile
Amaseli ethebula <thead>
okuthi ahlala eqondaniswe mpo phansi. Amaseli ethebula <tbody>
athola ukuqondana kwawo <table>
futhi aqondaniswe phezulu ngokuzenzakalelayo. Sebenzisa amakilasi okuqondanisa mpo ukuze uhlele kabusha lapho kudingeka.
Isihloko 1
Isihloko 2
Isihloko 3
Isihloko 4
Leli seli lithola ifa vertical-align: middle;
kusuka kuthebula
Leli seli lithola ifa vertical-align: middle;
kusuka kuthebula
Leli seli lithola ifa vertical-align: middle;
kusuka kuthebula
Lona nanku umbhalo othile wesimeli, okuhloswe ngawo ukuthatha indawo eqondile kancane, ukubonisa ukuthi ukuqondanisa okuqondile kusebenza kanjani kumaseli angaphambilini.
Leli seli lizuza vertical-align: bottom;
kumugqa wethebula
Leli seli lizuza vertical-align: bottom;
kumugqa wethebula
Leli seli lizuza vertical-align: bottom;
kumugqa wethebula
Lona nanku umbhalo othile wesimeli, okuhloswe ngawo ukuthatha indawo eqondile kancane, ukubonisa ukuthi ukuqondanisa okuqondile kusebenza kanjani kumaseli angaphambilini.
Leli seli lithola ifa vertical-align: middle;
kusuka kuthebula
Leli seli lithola ifa vertical-align: middle;
kusuka kuthebula
Leli seli liqondaniswe phezulu.
Lona nanku umbhalo othile wesimeli, okuhloswe ngawo ukuthatha indawo eqondile kancane, ukubonisa ukuthi ukuqondanisa okuqondile kusebenza kanjani kumaseli angaphambilini.
Kopisha
< 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 >
Ukwenza isidleke
Izitayela zemingcele, izitayela ezisebenzayo, nokuhluka kwethebula akuzuzwa njengefa ngamathebula akhiwe.
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
Unhlokweni
Unhlokweni
Unhlokweni
A
Okokuqala
Okokugcina
B
Okokuqala
Okokugcina
C
Okokuqala
Okokugcina
3
Larry
inyoni
@twitter
Kopisha
< table class = "table table-striped" >
< thead >
...
</ thead >
< tbody >
...
< tr >
< td colspan = "4" >
< table class = "table mb-0" >
...
</ table >
</ td >
</ tr >
...
</ tbody >
</ table >
Indlela yokwenza isidleke isebenza kanjani
Ukuvimbela noma yiziphi izitayela ukuthi zingavuzi ziye kumathebula afakwe esidlekeni, sisebenzisa isikhethi sezingane ( >
) ku-CSS yethu. Njengoba sidinga ukukhomba wonke u- td
s no - th
s ku- thead
, tbody
, kanye tfoot
, isikhethi sethu singabukeka siside kakhulu ngaphandle kwayo. Kanjalo, sisebenzisa .table > :not(caption) > * > *
isikhethi esibukeka ngendlela exakile ukuze siqondise wonke amathebula e- td
, kodwa awekho amathebula akhiwe esidlekeni.th
.table
Qaphela ukuthi uma ungeza <tr>
u-s njengabantwana abaqondile betafula, labo <tr>
bazogoqwa ngokuthi a <tbody>
ngokuzenzakalela, ngaleyo ndlela benze abakhethi bethu basebenze ngendlela ehlosiwe.
I-Anatomy
Ikhanda letafula
Ngokufana namathebula namathebula amnyama, sebenzisa amakilasi okulungisa .table-light
noma .table-dark
ukwenza u- <thead>
s abonakale ekhanyayo noma empunga emnyama.
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry
inyoni
@twitter
Kopisha
< table class = "table" >
< thead class = "table-light" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry
inyoni
@twitter
Kopisha
< table class = "table" >
< thead class = "table-dark" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry
inyoni
@twitter
Unyaweni
Unyaweni
Unyaweni
Unyaweni
Kopisha
< table class = "table" >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
< tfoot >
...
</ tfoot >
</ table >
Amazwibela
Isebenza <caption>
njengesihloko setafula. Isiza abasebenzisi abanezifundi zesikrini ukuze bathole ithebula futhi baqonde ukuthi limayelana nani futhi banqume ukuthi bafuna ukulifunda yini.
Uhlu lwabasebenzisi
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry Inyoni
@twitter
Kopisha
< table class = "table table-sm" >
< caption > List of users</ caption >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
Ungakwazi futhi ukubeka <caption>
phezu kwetafula nge .caption-top
.
Uhlu lwabasebenzisi
#
Okokuqala
Okokugcina
Bamba
1
Maka
Otto
@mdo
2
uJakobe
Thornton
@amafutha
3
Larry
inyoni
@twitter
Kopisha
< 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 >
Amathebula asabelayo
Amathebula aphendulayo avumela amathebula ukuthi asongwe ngokuvundlile kalula. Yenza noma yiliphi ithebula liphendule kuzo zonke izinkundla zokubuka ngokusonga .table
ngokuthi .table-responsive
. Noma, khetha indawo enkulu yokunqamula lapho ungathola khona ithebula eliphendulayo ngokusebenzisa .table-responsive{-sm|-md|-lg|-xl|-xxl}
.
Ukusika okuqondile/ukunciphisa
Amathebula aphendulayo asebenzisa overflow-y: hidden
okuthi , okusika noma yikuphi okuqukethwe okudlulela ngale kwangaphansi noma imiphetho ephezulu yethebula. Ikakhulukazi, lokhu kunganqamula amamenyu okwehlayo namanye amawijethi ezinkampani zangaphandle.
Ihlale iphendula
Kuwo wonke ama-breakpoint, sebenzisa .table-responsive
amathebula okuskrola avundlile.
#
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
1
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
2
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
3
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Kopisha
< div class = "table-responsive" >
< table class = "table" >
...
</ table >
</ div >
I-Breakpoint ethize
Sebenzisa .table-responsive{-sm|-md|-lg|-xl|-xxl}
njengoba kudingeka ukuze udale amathebula asabelayo afinyelele endaweni ethile yokuhlukana. Kusukela kuleyo ndawo yokuhlukana kuya phezulu, ithebula lizoziphatha ngendlela evamile futhi lingaskroli ngokuvundlile.
Lawa mathebula angase abonakale ephukile kuze kube yilapho izitayela zawo zokusabela zisebenza kububanzi obuthile bembobo yokubuka.
#
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
1
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
2
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
3
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
#
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
1
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
2
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
3
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
#
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
1
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
2
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
3
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
#
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
1
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
2
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
3
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
#
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
1
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
2
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
3
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
#
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
Isihloko
1
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
2
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
3
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Iseli
Kopisha
< 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 >
Sass
Okuguquguqukayo
Kopisha
$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 % ;
Iluphu
Kopisha
$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 ,
);
Ukwenza ngokwezifiso
Ama-factor variables ( $table-striped-bg-factor
, $table-active-bg-factor
& $table-hover-bg-factor
) asetshenziselwa ukunquma umehluko ezinhlobonhlobo zethebula.
Ngaphandle kokwehluka kwethebula elikhanyayo nelimnyama, imibala yetimu ikhanyiswa ukuhlukahluka $table-bg-level
.