Source

Imbonerahamwe

Inyandiko n'ingero zo guhitamo-imbonerahamwe yimbonerahamwe (ukurikije imikoreshereze yabo muri plagin ya JavaScript) hamwe na Bootstrap.

Ingero

Bitewe no gukoresha cyane imbonerahamwe kurubuga rwa gatatu rwa widget nka kalendari hamwe nabatoranya amatariki, twateguye ameza yacu kugirango duhitemo . Gusa ongeraho urwego shingiro .tablekuri 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 
<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 
<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-lightcyangwa .thead-darkkugirango <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 
<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-stripedkugirango 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 
<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 
<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-borderedimipaka kumpande zose zameza na selile.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<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 
<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-borderlesskumeza idafite imipaka.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<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-borderlessirashobora kandi gukoreshwa kumeza yijimye.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<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-hoverkugirango ushoboze kugendagenda kumurongo kumurongo kumeza muri a <tbody>.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<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 
<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-smkugirango imbonerahamwe irusheho gukata uduce twa selile mo kabiri.

# Ubwa mbere Icya nyuma Koresha
1 Ikimenyetso Otto @mdo
2 Yakobo Thornton @fat
3 Inyoni @twitter 
<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 
<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 
<!-- 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 
<!-- 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-onlyn'ishuri.

Kora imbonerahamwe yitabiriwe no gupfunyika icyaricyo cyose .table, .table-responsive{-sm|-md|-lg|-xl}bigatuma imbonerahamwe izenguruka itambitse kuri buri cyerekezo max-widthkigera 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 
<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 .tablehamwe .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-responsivekumeza 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 
<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 
<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 
<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 
<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 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>