Tembiecharã
Ojepuru hetaiterei rupi umi <table>
elemento mbohapýha widget rupive haꞌeháicha arapapaha ha ára jeporavoha, Bootstrap vorekuéra haꞌehína opt-in . Emoĩ pe clase base .table
oimeraẽvape <table>
, upéi embohape ñande clase modificador opcional térã estilo personalizado reheve. Opaite tabla estilo ndojeheredái Bootstrap-pe, heꞌiséva oimeraẽva tabla anidado ikatuha oñemboguapy ijeheguiete túvagui.
Oipurúvo cuadro marcado iñepyrũrãvéva, ko’ápe ojehecha mba’éichapa .table
ojehecha umi tabla -based Bootstrap-pe.
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< 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 >
Variantes rehegua
Eipuru clase contextual embojegua hag̃ua umi cuadro, fila fila térã celda peteĩteĩva.
Mbo'ehakoty
Ñe’ẽryru
Ñe’ẽryru
Upevakuére
Koty'i
Koty'i
Tenondeguáva
Koty'i
Koty'i
Mokõiha
Koty'i
Koty'i
Ñesẽporã
Koty'i
Koty'i
Ñemongyhyje
Koty'i
Koty'i
Ñemongyhyje
Koty'i
Koty'i
Info
Koty'i
Koty'i
Tesakã
Koty'i
Koty'i
Pytũ
Koty'i
Koty'i
Kopia
<!-- 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 >
Ombohasávo he’iséva umi tecnología oipytyvõvape
Oipurúvo saꞌi omoĩ hag̃ua heꞌiséva omeꞌe peteĩ jehechaukarãnte, noñembohasamoꞌãiva umi oiporúvape umi tecnología oipytyvõva – haꞌeháicha umi pantalla moñeꞌerã. Ejesareko marandu ojehechaukáva saꞌi rupive ojehecha porãha pe contenido-gui voi (techapyrã, jehaipyre ojehecháva), térã oikeha ambue tape rupive, haꞌeháicha jehaipyre adicional oñeñomivaꞌekue .visually-hidden
mboꞌepy ndive.
Umi cuadro oguerekóva acento
Filas rayadas rehegua
Eipuru .table-striped
emoĩ hag̃ua zebra-rayado oimeraẽva mesa vore ryepýpe <tbody>
.
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< table class = "table table-striped" >
...
</ table >
Ko’ã mbo’esyry ikatu avei oñembojoapy umi variante tabla rehegua:
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< table class = "table table-dark table-striped" >
...
</ table >
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< table class = "table table-success table-striped" >
...
</ table >
Filas hoverables rehegua
Oñembojoapy .table-hover
ojehechauka hag̃ua peteĩ estado hover umi vore vore rehegua peteĩ <tbody>
.
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< table class = "table table-hover" >
...
</ table >
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< table class = "table table-dark table-hover" >
...
</ table >
Koꞌã fila ojeipysóva ikatu avei oñembojoaju pe variante rayada ndive:
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< table class = "table table-striped table-hover" >
...
</ table >
Umi cuadro activa rehegua
Emombaꞌeguasu peteĩ vore vore térã celda emoĩvo peteĩ .table-active
mboꞌepy.
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< 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 >
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< 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 >
Mba éichapa omba apo umi variante ha umi cuadro acento rehegua.
Umi cuadro acentuado-pe g̃uarã ( filas rayadas , filas hoverables ha cuadros activas ), roipuru algunas técnicas koꞌã efecto ombaꞌapo hag̃ua opaite ore tabla variante-pe g̃uarã :
Ñañepyrũ ñamohendavo peteĩ celda tabla rehegua fondo orekóva --bs-table-bg
propiedad personalizada. Opaite tabla variante upéi omohenda upe propiedad personalizada ocolora hag̃ua umi celda tabla rehegua. Péicha, ndajaikei apañuãime ojeporúramo umi saꞌi semitransparente mesa fondo ramo.
Upéi ñamoĩ peteĩ sombra caja inserta rehegua umi celda mesa rehegua orekóva box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
to capa oimeraẽva ojeꞌevaꞌekue ári background-color
. Jaipuru rupi petet dispersión tuichaitereíva ha ndaipóri desenfoque, pe color ha e va erã monotono. Oje’e’ỹ guive --bs-table-accent-bg
por defecto, ndoroguerekói peteĩ sombra caja por defecto.
Oñemoĩ jave peteĩva .table-striped
, .table-hover
térã .table-active
mbo’esyry, pe --bs-table-accent-bg
oñemohenda peteĩ sa’y semitransparente-pe oñembosa’y hag̃ua tapykuehoha.
Káda variante tabla rehegua, jagenera petet --bs-table-accent-bg
color oguerekóva contraste ijyvatevéva odependéva upe color rehe. Techapyrã, pe acento color para .table-primary
iñypytũve .table-dark
oguereko aja peteĩ acento color tesapevéva.
Jehaipyre ha rembe’y sa’ykuéra oñemboheko peteĩcha, ha isa’ykuéra ojehereda por defecto.
Umi escenario rapykuéri ojehecha péicha:
Kopia
@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 ));
}
}
Mesa rembe’ykuéra
Mesakuéra oguerekóva frontera
Oñemoĩve .table-bordered
umi borde-pe g̃uarã opaite lado cuadro ha celdakuérape g̃uarã.
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< table class = "table table-bordered" >
...
</ table >
Umi utilidad color frontera rehegua ikatu oñembojoapy oñemoambue hag̃ua color:
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< table class = "table table-bordered border-primary" >
...
</ table >
Umi mesa ndorekóiva frontera
Oñemoĩve .table-borderless
peteĩ mesa ndorekóiva frontera-pe g̃uarã.
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< table class = "table table-borderless" >
...
</ table >
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< table class = "table table-dark table-borderless" >
...
</ table >
Mesa michĩva
Oñemoĩve .table-sm
ojejapo .table
haguã compactove oñeikytĩvo opaite célula padding
mbytépe.
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< table class = "table table-sm" >
...
</ table >
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< table class = "table table-dark table-sm" >
...
</ table >
Alineación vertical rehegua
Umi célula mesa rehegua de <thead>
akóinte oñemohenda verticalmente iguy gotyo. Umi celda tabla rehegua oĩva <tbody>
ohereda iñemohendahagui <table>
ha oñemboheko yvate gotyo por defecto. Eipuru umi clase alineación vertical rehegua emohenda jey hag̃ua tekotevẽhápe.
Ñe’ẽryru 1.1
Ñe’ẽryru 2.1
Ñe’ẽryru 3.1
Ñe’ẽryru 4.1
Ko celda ohereda vertical-align: middle;
pe cuadro-gui
Ko celda ohereda vertical-align: middle;
pe cuadro-gui
Ko celda ohereda vertical-align: middle;
pe cuadro-gui
Kóva koꞌape oĩ peteĩ jehaipyre tenda rehegua, oñembosakoꞌivaꞌekue oipyhy hag̃ua hetaiterei espacio vertical, ohechauka hag̃ua mbaꞌeichaitépa ombaꞌapo pe alineación vertical umi celda mboyveguápe.
Ko celda ohereda vertical-align: bottom;
pe tabla vore’ígui
Ko celda ohereda vertical-align: bottom;
pe tabla vore’ígui
Ko celda ohereda vertical-align: bottom;
pe tabla vore’ígui
Kóva koꞌape oĩ peteĩ jehaipyre tenda rehegua, oñembosakoꞌivaꞌekue oipyhy hag̃ua hetaiterei espacio vertical, ohechauka hag̃ua mbaꞌeichaitépa ombaꞌapo pe alineación vertical umi celda mboyveguápe.
Ko celda ohereda vertical-align: middle;
pe cuadro-gui
Ko celda ohereda vertical-align: middle;
pe cuadro-gui
Ko célula oñemohenda yvate gotyo.
Kóva koꞌape oĩ peteĩ jehaipyre tenda rehegua, oñembosakoꞌivaꞌekue oipyhy hag̃ua hetaiterei espacio vertical, ohechauka hag̃ua mbaꞌeichaitépa ombaꞌapo pe alineación vertical umi celda mboyveguápe.
Kopia
< 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 >
Nidación rehegua
Umi estilo frontera rehegua, estilo activo ha umi variante tabla rehegua ndojeheredavéi umi tabla anidado rupive.
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
Akãrapu’ã
Akãrapu’ã
Akãrapu’ã
PETEĨ
Peteĩha
Paha
B. Ñe’ẽpoty ha purahéi
Peteĩha
Paha
C rehegua
Peteĩha
Paha
3.1
Larry rehegua
pe Guyra
@twitter-pe
Kopia
< table class = "table table-striped" >
< thead >
...
</ thead >
< tbody >
...
< tr >
< td colspan = "4" >
< table class = "table mb-0" >
...
</ table >
</ td >
</ tr >
...
</ tbody >
</ table >
Mba’éichapa omba’apo anidación
Ani hag̃ua mba’eveichagua estilo osẽ umi tabla anidado-pe, jaipuru mboajepyréva combinador infantil ( >
) ñande CSS-pe. Tekotevẽgui ñamohenda opaite td
s ha th
s oĩva thead
, tbody
, ha -pe tfoot
, ñande selector ojehecha puku porãta hese’ỹre. Péicha, jaipuru .table > :not(caption) > * > *
selector ojehecharamovéva impar-pe ñamohenda hag̃ua opaite td
s ha th
s umi .table
, ha katu ni peteĩva mbaꞌeveichagua tabla anidado potencial-gui.
Ñañaminduꞌu ñamoĩramo <tr>
s peteĩ mesa raꞌy directo ramo, umíva <tr>
oñembojere a-pe <tbody>
por defecto, upéicha rupi ñande selector-kuéra ombaꞌapo oñehaꞌarõháicha.
Anatomía rehegua
Mesa akã
Ojogua umi cuadro ha cuadro iñypytũvape, eipuru umi clase modificador .table-light
térã .table-dark
ejapo hag̃ua <thead>
s ojehechauka gris tesape térã iñypytũva.
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry rehegua
pe Guyra
@twitter-pe
Kopia
< table class = "table" >
< thead class = "table-light" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry rehegua
pe Guyra
@twitter-pe
Kopia
< table class = "table" >
< thead class = "table-dark" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry rehegua
pe Guyra
@twitter-pe
Ñepyrũrã
Ñepyrũrã
Ñepyrũrã
Ñepyrũrã
Kopia
< table class = "table" >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
< tfoot >
...
</ tfoot >
</ table >
Umi leyenda
A <caption>
ombaꞌapo peteĩ iñakãrapuꞌaicha peteĩ cuadro-pe g̃uarã. Oipytyvõ puruhárape orekóva pantalla moñe’ẽhára ojuhu hag̃ua peteĩ mesa ha oikuaa hag̃ua mba’érehepa oñe’ẽ ha odesidi omoñe’ẽsépa.
Umi puruhára lista
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry pe Guyra
@twitter-pe
Kopia
< table class = "table table-sm" >
< caption > List of users</ caption >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
Ikatu avei remoĩ <caption>
pe mesa ári .caption-top
.
Umi puruhára lista
# Ñemby
Peteĩha
Paha
Ipoguýpe oĩva
1. 1.1
Marcos
Otto rehegua
@mdo rehegua
2. 2.1
Jacob
Thornton rehegua
@ñandy
3.1
Larry rehegua
pe Guyra
@twitter-pe
Kopia
< 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 >
Umi cuadro ombohováiva
Umi cuadro ombohováiva oheja ojedesplaza hag̃ua umi cuadro horizontalmente ndahasýiva. Ejapo oimeraẽva mesa ombohovái hag̃ua opaite jehechaukaha rupi embojere peteĩ .table
ndive .table-responsive
. Térã, eiporavo peteĩ punto de ruptura máximo hendive oguereko hag̃ua peteĩ cuadro ombohováiva oipurúvo .table-responsive{-sm|-md|-lg|-xl|-xxl}
.
Recorte/truncación vertical rehegua
Umi cuadro ombohováiva oipuru overflow-y: hidden
, oikytĩva oimeraẽ contenido ohasáva mesa guy térã yvate gotyo. En particular, kóva ikatu oikytĩ umi menú desplegable ha ambue widget mbohapýha.
Akóinte ombohováiva
Opaite punto de ruptura rupi, eipuru .table-responsive
umi cuadro ojedesplaza hag̃ua horizontalmente.
# Ñemby
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
1. 1.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
2. 2.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
3.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Kopia
< div class = "table-responsive" >
< table class = "table" >
...
</ table >
</ div >
Punto de ruptura específico rehegua
Poru.table-responsive{-sm|-md|-lg|-xl|-xxl}
tekotevẽháicha emoheñói hag̃ua cuadro ombohováiva peteĩ punto de ruptura particular peve. Upe punto de ruptura guive ha yvate gotyo, pe cuadro oñekomporta vaꞌerã normalmente ha ndojedesplazamoꞌãi horizontalmente.
Ko’ã cuadro ikatu ojehechauka oñembyaíva umi estilo ombohováiva ojeporu peve umi jehechaukaha ancho específico-pe.
# Ñemby
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
1. 1.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
2. 2.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
3.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
# Ñemby
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
1. 1.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
2. 2.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
3.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
# Ñemby
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
1. 1.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
2. 2.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
3.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
# Ñemby
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
1. 1.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
2. 2.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
3.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
# Ñemby
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
1. 1.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
2. 2.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
3.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
# Ñemby
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
Ñe’ẽryru
1. 1.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
2. 2.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
3.1
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Koty'i
Kopia
< 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 rehegua
Variables rehegua
Kopia
$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 % ;
Sã
Kopia
$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 ,
);
Personalización rehegua
Umi factor variable rehegua ( $table-striped-bg-factor
, $table-active-bg-factor
& .$table-hover-bg-factor
) ojepuru ojekuaa hagua mba éichapa ojoavy umi variante cuadro rehegua.
Ambue umi variante mesa tesape & iñypytũvagui, umi color tema rehegua oñembohesape pe $table-bg-level
variable rupive.