Inyandiko n'ingero zo guhitamo-imbonerahamwe yimbonerahamwe (ukurikije imikoreshereze yabo muri plugin ya JavaScript) hamwe na Bootstrap.
Ingero
Bitewe no gukoresha cyane imbonerahamwe kurubuga rwa gatatu rwa widgets nka kalendari hamwe nabatoranya amatariki, twateguye ameza yacu kugirango duhitemo . Gusa ongeraho urwego shingiro .table
kuri buriwese <table>
, hanyuma wongere hamwe nuburyo bwihariye cyangwa ibyiciro bitandukanye birimo guhindura ibyiciro.
Ukoresheje urutonde rwibanze rwibanze, dore uko .table
-bishingiye kumeza reba muri Bootstrap. Imiterere yimeza yose yarazwe muri Bootstrap 4 , bivuze ko ameza yose yashizwemo azandikwa muburyo bumwe nababyeyi.
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Larry
Inyoni
@twitter
Gukoporora
<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> Larry</td>
<td> the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
Urashobora kandi guhindura amabara-hamwe ninyandiko yoroheje kumurongo wijimye-hamwe .table-dark
.
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Larry
Inyoni
@twitter
Gukoporora
<table class= "table table-dark" >
<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>
Imbonerahamwe yumutwe
Bisa nameza nameza yijimye, koresha ibyiciro bihindura .thead-light
cyangwa .thead-dark
kugirango <thead>
ugaragare urumuri cyangwa umukara wijimye.
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Larry
Inyoni
@twitter
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Larry
Inyoni
@twitter
Gukoporora
<table class= "table" >
<thead class= "thead-dark" >
<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 class= "table" >
<thead class= "thead-light" >
<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>
Imirongo ikurikiranye
Koresha .table-striped
kugirango wongereho zebra-gukuramo kumurongo uwo ariwo wose wameza muri <tbody>
.
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Larry
Inyoni
@twitter
Gukoporora
<table class= "table table-striped" >
<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>
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Larry
Inyoni
@twitter
Gukoporora
<table class= "table table-striped table-dark" >
<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>
Imeza ihana imbibi
Ongeraho .table-bordered
imipaka kumpande zose zameza na selile.
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Inyoni
@twitter
Gukoporora
<table class= "table table-bordered" >
<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>
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Inyoni
@twitter
Gukoporora
<table class= "table table-bordered table-dark" >
<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>
Imeza itagira umupaka
Ongeraho .table-borderless
kumeza idafite imipaka.
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Inyoni
@twitter
Gukoporora
<table class= "table table-borderless" >
<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>
.table-borderless
irashobora kandi gukoreshwa kumeza yijimye.
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Inyoni
@twitter
Gukoporora
<table class= "table table-borderless table-dark" >
<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>
Imirongo yemewe
Ongeraho .table-hover
kugirango ushoboze kugendagenda kumurongo kumurongo kumeza muri a <tbody>
.
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Inyoni
@twitter
Gukoporora
<table class= "table table-hover" >
<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>
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Inyoni
@twitter
Gukoporora
<table class= "table table-hover table-dark" >
<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>
Imeza nto
Ongeraho .table-sm
kugirango imbonerahamwe irusheho gukata uduce twa selile mo kabiri.
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Inyoni
@twitter
Gukoporora
<table class= "table table-sm" >
<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>
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Inyoni
@twitter
Gukoporora
<table class= "table table-sm table-dark" >
<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>
Amasomo ajyanye
Koresha ibyiciro kugirango uhindure amabara kumurongo cyangwa selile.
Icyiciro
Umutwe
Umutwe
Bikora
Akagari
Akagari
Mburabuzi
Akagari
Akagari
Ibanze
Akagari
Akagari
Secondary
Akagari
Akagari
Intsinzi
Akagari
Akagari
Akaga
Akagari
Akagari
Iburira
Akagari
Akagari
Amakuru
Akagari
Akagari
Umucyo
Akagari
Akagari
Umwijima
Akagari
Akagari
Gukoporora
<!-- On rows -->
<tr class= "table-active" > ...</tr>
<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-active" > ...</td>
<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>
Imiterere isanzwe yimbonerahamwe ntishobora kuboneka hamwe nameza yijimye, icyakora, urashobora gukoresha inyandiko cyangwa ibikoresho byingenzi kugirango ugere kumiterere isa.
#
Umutwe
Umutwe
1
Akagari
Akagari
2
Akagari
Akagari
3
Akagari
Akagari
4
Akagari
Akagari
5
Akagari
Akagari
6
Akagari
Akagari
7
Akagari
Akagari
8
Akagari
Akagari
9
Akagari
Akagari
Gukoporora
<!-- On rows -->
<tr class= "bg-primary" > ...</tr>
<tr class= "bg-success" > ...</tr>
<tr class= "bg-warning" > ...</tr>
<tr class= "bg-danger" > ...</tr>
<tr class= "bg-info" > ...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class= "bg-primary" > ...</td>
<td class= "bg-success" > ...</td>
<td class= "bg-warning" > ...</td>
<td class= "bg-danger" > ...</td>
<td class= "bg-info" > ...</td>
</tr>
Gutanga ibisobanuro kubuhanga bufasha
Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (urugero: inyandiko igaragara), cyangwa bigashyirwa muburyo butandukanye, nk'inyandiko y'inyongera ihishe hamwe .sr-only
n'ishuri.
Kora imbonerahamwe yitabiriwe no gupfunyika icyaricyo cyose .table
, .table-responsive{-sm|-md|-lg|-xl}
bigatuma imbonerahamwe izenguruka itambitse kuri buri cyerekezo max-width
kigera kuri (ariko utabariyemo) 576px, 768px, 992px, na 1120px.
Menya ko kuva mushakisha zidashyigikiye urutonde rwibibazo , dukora hafi yimbibi za prefixes min-
hamwemax-
na kureba hamwe nubugari bwibice (bishobora kugaragara mubihe bimwe na bimwe kubikoresho byo hejuru-dpi, urugero) dukoresheje indangagaciro zifite ubusobanuro bunoze bwo kugereranya. .
Ibisobanuro
Imikorere <caption>
nkumutwe kumeza. Ifasha abakoresha hamwe nabasomyi ba ecran kubona imbonerahamwe no kumva icyo ivuga no guhitamo niba bashaka kuyisoma.
Urutonde rwabakoresha
#
Ubwa mbere
Icya nyuma
Koresha
1
Ikimenyetso
Otto
@mdo
2
Yakobo
Thornton
@fat
3
Larry
Inyoni
@twitter
Gukoporora
<table class= "table" >
<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>
Imbonerahamwe isubiza
Imbonerahamwe isubiza yemerera imbonerahamwe kuzenguruka mu buryo butambitse kandi byoroshye. Kora imbonerahamwe iyo ari yo yose isubiza ibintu byose ureba .table
hamwe .table-responsive
. Cyangwa, hitamo intera ntarengwa yo kugira imbonerahamwe isubiza hejuru ukoresheje .table-responsive{-sm|-md|-lg|-xl}
.
Gukata neza / guhagarika
Imbonerahamwe ishubije ikoresha overflow-y: hidden
, ikuraho ibintu byose birenze hepfo cyangwa hejuru yimeza. By'umwihariko, ibi birashobora gukuramo ibice byamanutse hamwe nandi mashyaka ya gatatu.
Buri gihe witabira
Hirya no hino, koresha .table-responsive
kumeza utambitse.
#
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
1
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
2
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
3
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Gukoporora
<div class= "table-responsive" >
<table class= "table" >
...
</table>
</div>
Ibice byihariye
Koresha .table-responsive{-sm|-md|-lg|-xl}
nkuko bikenewe kugirango ukore imbonerahamwe yishura kugeza kumurongo runaka. Uhereye kuri ibyo bice no hejuru, imbonerahamwe izitwara bisanzwe kandi ntizunguruka.
Izi mbonerahamwe zishobora kugaragara nkizimenetse kugeza uburyo bwo gusubiza bwakoreshejwe mubugari bwihariye bwo kureba.
#
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
1
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
2
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
3
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Gukoporora
<div class= "table-responsive-sm" >
<table class= "table" >
...
</table>
</div>
#
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
1
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
2
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
3
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Gukoporora
<div class= "table-responsive-md" >
<table class= "table" >
...
</table>
</div>
#
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
1
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
2
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
3
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Gukoporora
<div class= "table-responsive-lg" >
<table class= "table" >
...
</table>
</div>
#
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
Umutwe
1
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
2
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
3
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Akagari
Gukoporora
<div class= "table-responsive-xl" >
<table class= "table" >
...
</table>
</div>