Isishwankathelo
Ngenxa yokusetyenziswa ngokubanzi kwezinto kwiiwijethi zomntu <table>
wesithathu ezifana neekhalenda kunye nabakhi bomhla, iitafile zeBootstrap zingenile . Yongeza iklasi yesiseko .table
kuyo nayiphi na<table>
, emva koko wandise ngeeklasi zethu ozikhethayo zesilungisi okanye izimbo zesiko. Zonke izitayile zetafile azifumaneki njengelifa kwi-Bootstrap, okuthetha ukuba naziphi na iitafile ezibekwe kwindlwane zinokubhalwa ngokuzimeleyo kumzali.
Usebenzisa olona phawu lusisiseko lwetafile, nantsi indlela-esekwe njani .table
iitafile kwiBootstrap.
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< 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 >
Ukwahluka
Sebenzisa iiklasi zomxholo ukufaka imibala kwiitheyibhile, iirowu zetafile okanye iiseli ezizimeleyo.
Iklasi
Isihloko
Isihloko
Ukuhlala kukho
Iseli
Iseli
Amabanga aphantsi
Iseli
Iseli
Eyesibini
Iseli
Iseli
Impumelelo
Iseli
Iseli
Ingozi
Iseli
Iseli
Isilumkiso
Iseli
Iseli
Ulwazi
Iseli
Iseli
Ukukhanya
Iseli
Iseli
Mnyama
Iseli
Iseli
Khuphela
<!-- 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 >
Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo
Ukusebenzisa umbala ukongeza intsingiselo kubonelela kuphela ngesalathiso esibonakalayo, esingayi kuthunyelwa kubasebenzisi betekhnoloji encedisayo - njengezifundi zesikrini. Qinisekisa ukuba ulwazi olubonakaliswe ngumbala lucacile kumxholo ngokwawo (umzekelo, umbhalo obonakalayo), okanye luqukwe ngezinye iindlela, ezifana nesicatshulwa esongezelelweyo esifihlwe .visually-hidden
eklasini.
Iitafile ezine-accented
Imiqolo enemigca
Sebenzisa .table-striped
ukudibanisa zebra-striping kuwo nawuphi na umqolo wetafile ngaphakathi kwe <tbody>
.
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< table class = "table table-striped" >
...
</ table >
Ezi klasi zinokongezwa kwiintlobo ezahlukeneyo zetafile:
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< table class = "table table-dark table-striped" >
...
</ table >
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< table class = "table table-success table-striped" >
...
</ table >
Imiqolo eshukumayo
Yongeza .table-hover
ukwenza imo ye hover kwimigca yetafile ngaphakathi kwe <tbody>
.
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< table class = "table table-hover" >
...
</ table >
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< table class = "table table-dark table-hover" >
...
</ table >
Le miqolo ishukumayo inokudityaniswa nokwahluka okunemigca:
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< table class = "table table-striped table-hover" >
...
</ table >
Iitafile ezisebenzayo
Phawula umqolo wetafile okanye iseli ngokudibanisa .table-active
iklasi.
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< 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 >
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< 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 >
Zisebenza njani iinguqu kunye neetafile ezine-accented?
Kwiitafile ezinemigca yonyuso ( imigca enemigca , iirowu ezishukumayo , kunye neetafile ezisebenzayo ), sisebenzise ubuchule obuthile ukwenza ezi ziphumo zisebenze kuzo zonke iintlobo ezahlukeneyo zetafile :
Siqala ngokucwangcisa imvelaphi yeseli yetafile kunye --bs-table-bg
nepropati yesiko. Zonke iinguqulelo zetafile ziseta loo mpahla yesiko ukwenza umbala kwiiseli zetafile. Ngale ndlela, asiyi kungena engxakini ukuba imibala engafihliyo isetyenziswa njengemvelaphi yetafile.
Emva koko songeza isithunzi sebhokisi ye-inset kwiiseli zetafile box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
ngokumaleko ngaphezulu kwayo nayiphi na into echaziweyo background-color
. Ngenxa yokuba sisebenzisa ukusasazeka okukhulu kwaye akukho mfifi, umbala uya kuba yi-monotone. Ukusukela oko--bs-table-accent-bg
ayimiselwanga ngokwendalo, asinaso isithunzi sebhokisi esihlala sihleli.
Xa enye .table-striped
, .table-hover
okanye .table-active
iiklasi zongeziweyo, i --bs-table-accent-bg
icwangciswe kumbala ongabonakali kakuhle ukwenza umbala ongasemva.
Ngokwahluka kwetafile nganye, sivelisa --bs-table-accent-bg
umbala onowona mahluko uphezulu ngokuxhomekeke kuloo mbala. Umzekelo, umbala we-accent kuba .table-primary
mnyama ngelixa .table-dark
unombala we-accent ekhaphukhaphu.
Umbhalo kunye nemibala yemida iveliswa ngendlela efanayo, kwaye imibala yazo izuzwe ngokungagqibekanga.
Emva kwemifanekiso ibonakala ngolu hlobo:
Khuphela
@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 ));
}
}
Imida yetafile
Iitafile ezinemida
Yongeza .table-bordered
imida kumacala onke etafile kunye neeseli.
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< table class = "table table-bordered" >
...
</ table >
Izinto eziluncedo zombala womda zingongezwa ukutshintsha imibala:
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< table class = "table table-bordered border-primary" >
...
</ table >
Iitafile ezingenamida
Yongeza .table-borderless
itafile ngaphandle kwemida.
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< table class = "table table-borderless" >
...
</ table >
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< table class = "table table-dark table-borderless" >
...
</ table >
Iitafile ezincinci
Yongeza .table-sm
ukwenza nayiphi na .table
i-compact ngokusika yonke iseli padding
phakathi.
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< table class = "table table-sm" >
...
</ table >
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< table class = "table table-dark table-sm" >
...
</ table >
Ulungelelwaniso oluthe nkqo
Iiseli zetheyibhile <thead>
zisoloko zithe nkqo zilungelelaniswe emazantsi. Iiseli <tbody>
zetheyibhile kulungelelwaniso lwazo ukusuka <table>
kwaye zilungelelaniswe phezulu ngokungagqibekanga. Sebenzisa iiklasi zokulungelelanisa ngokuthe nkqo ukulungelelanisa kwakhona apho kuyimfuneko.
Isihloko 1
Isihloko 2
Isihloko 3
Isihloko 4
Le seli ifumana ilifa vertical-align: middle;
etafileni
Le seli ifumana ilifa vertical-align: middle;
etafileni
Le seli ifumana ilifa vertical-align: middle;
etafileni
Oku nantsi enye isicatshulwa sesibambi-ndawo, esijonge ukuthatha indawo ethe nkqo kakhulu, ukubonisa indlela ulungelelwaniso oluthe nkqo lusebenza ngayo kwiiseli ezandulelayo.
Le seli ifumana ilifa vertical-align: bottom;
kumqolo wetafile
Le seli ifumana ilifa vertical-align: bottom;
kumqolo wetafile
Le seli ifumana ilifa vertical-align: bottom;
kumqolo wetafile
Oku nantsi enye isicatshulwa sesibambi-ndawo, esijonge ukuthatha indawo ethe nkqo kakhulu, ukubonisa indlela ulungelelwaniso oluthe nkqo lusebenza ngayo kwiiseli ezandulelayo.
Le seli ifumana ilifa vertical-align: middle;
etafileni
Le seli ifumana ilifa vertical-align: middle;
etafileni
Le seli ilungelelaniswe phezulu.
Oku nantsi enye isicatshulwa sesibambi-ndawo, esijonge ukuthatha indawo ethe nkqo kakhulu, ukubonisa indlela ulungelelwaniso oluthe nkqo lusebenza ngayo kwiiseli ezandulelayo.
Khuphela
< 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 >
Ukuzalela
Izimbo zomda, izimbo ezisebenzayo, kunye nokwahluka kwetafile azizuzwwa njengeetafile ezibekwe kwindlwane.
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
Okubhalwe ngasentla kwekhasi
Okubhalwe ngasentla kwekhasi
Okubhalwe ngasentla kwekhasi
A
Ekuqaleni
Okokugqibela
B
Ekuqaleni
Okokugqibela
C
Ekuqaleni
Okokugqibela
3
Larry
intaka
@twitter
Khuphela
< table class = "table table-striped" >
< thead >
...
</ thead >
< tbody >
...
< tr >
< td colspan = "4" >
< table class = "table mb-0" >
...
</ table >
</ td >
</ tr >
...
</ tbody >
</ table >
Isebenza njani indlwane
Ukuthintela naziphi na izimbo ekuvuzeni iitafile ezibekwe kwindlwane, sisebenzisa isihlanganisi somntwana ( >
) umkhethi kwiCSS yethu. Kuba kufuneka sijolise kuzo zonke ii- td
s kunye no th
-s kwi- thead
, tbody
, kunye tfoot
, umkhethi wethu angajongeka ixesha elide ngaphandle kwayo. Ngokunjalo, sisebenzisa .table > :not(caption) > * > *
umkhethi ojongeka ngendlela engaqhelekanga ukujolisa zonke td
ii-s kunye th
ne- .table
, kodwa akukho nanye kuzo naziphi iitafile ezinokubakho.
Qaphela ukuba udibanisa <tr>
s njengabantwana ngqo kwitafile, abo <tr>
baya kusongelwa <tbody>
ngokungagqibekanga, ngaloo ndlela ukwenza abakhethi bethu basebenze njengoko bekucetywa.
I-Anatomy
Intloko yetafile
Ngokufana neetafile kunye neetafile ezimnyama, sebenzisa iiklasi zesilungisi .table-light
okanye .table-dark
ukwenza <thead>
s kubonakale ukukhanya okanye grey emnyama.
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry
intaka
@twitter
Khuphela
< table class = "table" >
< thead class = "table-light" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry
intaka
@twitter
Khuphela
< table class = "table" >
< thead class = "table-dark" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry
intaka
@twitter
Umbhalo osemazantsi
Umbhalo osemazantsi
Umbhalo osemazantsi
Umbhalo osemazantsi
Khuphela
< table class = "table" >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
< tfoot >
...
</ tfoot >
</ table >
Iinkcazelo
Imisebenzi <caption>
efana nesihloko setafile. Inceda abasebenzisi abafunda isikrini ukuba bafumane itafile kwaye baqonde ukuba ingantoni kwaye bathathe isigqibo sokuba bafuna ukuyifunda na.
Uluhlu lwabasebenzisi
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry intaka
@twitter
Khuphela
< table class = "table table-sm" >
< caption > List of users</ caption >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
Unako kwakhona ukubeka <caption>
phezu kwetafile nge .caption-top
.
Uluhlu lwabasebenzisi
#
Ekuqaleni
Okokugqibela
Phatha
1
Phawula
Otto
@mdo
2
uYakobi
Thornton
@fat
3
Larry
intaka
@twitter
Khuphela
< 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 >
Iitafile eziphendulayo
Iitheyibhile eziphendulayo zivumela iitafile ukuba ziskrolwe ngokuthe tye ngokulula. Yenza nayiphi na itafile iphendule kuzo zonke iindawo zokujonga ngokusonga .table
nge .table-responsive
. Okanye, khetha eyona ndawo iphezulu onokuthi ube netafile ephendulayo ukuya kuthi ga ngoku .table-responsive{-sm|-md|-lg|-xl|-xxl}
.
Ukunqunyulwa ngokuthe nkqo/ukunciphisa
Iitheyibhile eziphendulayo zisebenzisa overflow-y: hidden
i-, ekhuphela nawuphi na umxholo ongaphaya komzantsi okanye kumphetho wetafile. Ngokukodwa, oku kunokuqhawula iimenyu ezihlayo kunye nezinye iiwijethi zomntu wesithathu.
Isoloko iphendula
Kuzo zonke iindawo zokuphumla, sebenzisa .table-responsive
iitafile zokuskrola ngokuthe tye.
#
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
Khuphela
< div class = "table-responsive" >
< table class = "table" >
...
</ table >
</ div >
Breakpoint ethile
Sebenzisa .table-responsive{-sm|-md|-lg|-xl|-xxl}
njengoko kufuneka ukwenza iitafile eziphendulayo ukuya kwindawo ethile yoqhawulo. Ukusuka kuloo ndawo yokuqhekeka ukuya phezulu, itafile iya kuziphatha ngokwesiqhelo kwaye ingasondeli ngokuthe tye.
Ezi theyibhile zinokubonakala zaphukile de izimbo zazo zokuphendula zisebenze kububanzi obuthile bendawo yokujonga.
#
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
Khuphela
< 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
Izinto eziguquguqukayo
Khuphela
$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 % ;
Umjikelo
Khuphela
$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
Izinto eziguquguqukayo ( $table-striped-bg-factor
, $table-active-bg-factor
& $table-hover-bg-factor
) zisetyenziselwa ukumisela umahluko kwiintlobo ezahlukeneyo zetafile.
Ngaphandle kokukhanya kunye nokwahluka kwetafile emnyama, imibala yomxholo ikhanyiswa $table-bg-level
kukuguquguquka.