Source

Bamesa

Mikanda mpe bandakisa mpo na opt-in styling ya ba tableaux (na kotalaka bosaleli na yango mingi na ba plugins ya JavaScript) na Bootstrap.

Bandakisa

Na ntina ya bosaleli mingi ya ba tableaux na kati ya ba widgets ya bato mosusu lokola ba calendriers mpe ba pickers ya mikolo, tosali ba tableaux na biso mpo ezala opt-in . Bakisa kaka classe ya base .tablena nionso <table>, sima extend na ba styles personnalisés to ba classes na biso ya modificateur ndenge na ndenge oyo ekotisami.

Kosalela marquage ya tableau ya moboko mingi, tala ndenge .tableba tableaux -based emonanaka na Bootstrap. Ba styles nionso ya tableau e hériter na Bootstrap 4 , elingi koloba ba tableaux nionso oyo ekangami ekozala style na ndenge moko na moboti.

# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry Ndɛkɛ yango @twitter na 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>

Okoki mpe kobongola balangi yango —na makomi ya pɛtɛɛ na ba fond ya moindo —na .table-dark.

# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry Ndɛkɛ yango @twitter na 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>

Options ya motó ya mesa

Ndenge moko na ba tableaux na ba tableaux ya molili, salela ba classes ya modificateur .thead-lightto .thead-darkpona kosala <thead>s emonana gris clair to foncé.

# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry Ndɛkɛ yango @twitter na twitter
# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry Ndɛkɛ yango @twitter na 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>

Milɔngɔ oyo ezali na bansinga

Salelá .table-stripedmpo na kobakisa zebra-striping na molɔngɔ́ nyonso ya mesa na kati ya <tbody>.

# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry Ndɛkɛ yango @twitter na 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>
# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry Ndɛkɛ yango @twitter na 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>

Mesa oyo ezali na ndelo

Bakisa .table-borderedmpo na bandelo na ngambo nyonso ya mesa mpe baselile.

# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry ndeke @twitter na 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>
# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry ndeke @twitter na 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>

Mesa oyo ezangi ndelo

Bakisa .table-borderlessmpo na mesa oyo ezangi bandelo.

# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry ndeke @twitter na 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-borderlessekoki mpe kosalelama na bamesa ya moindo.

# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry ndeke @twitter na 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>

Milɔngɔ́ oyo ekoki kobalusama

Bakisa .table-hovermpo na kofungola état ya hover na ba lignes ya tableau na kati ya <tbody>.

# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry ndeke @twitter na 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>
# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry ndeke @twitter na 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>

Meza ya moke

Bakisa .table-smmpo na kosala ete bamesa ezala compact mingi na kokataka remplissage ya ba cellules na katikati.

# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry ndeke @twitter na 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>
# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry ndeke @twitter na 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>

Ba kelasi ya contexte

Salelá bakelasi ya contexte mpo na kopesa langi na milɔngɔ ya tableau to na baselile mokomoko.

Kelasi Motó ya likambo Motó ya likambo
Esalaka Selile Selile
Mbeba Selile Selile
Ya liboso Selile Selile
Ebongiseli ya mibale Selile Selile
Kolonga Selile Selile
Likama Selile Selile
Likebisi Selile Selile
Info Selile Selile
Pole Selile Selile
Molili Selile Selile 
<!-- 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>

Ba variantes ya fond ya tableau ya mbala na mbala ezali te na tableau ya molili, nzokande, okoki kosalela ba utilitaires ya texte to ya fond pona kozua ba styles ya ndenge moko.

# . Motó ya likambo Motó ya likambo
1. 1. Selile Selile
2. 2 Selile Selile
3 Selile Selile
4. Selile Selile
5 Selile Selile
6 Selile Selile
7. 7 Selile Selile
8 Selile Selile
9 Selile Selile 
<!-- 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>
Kopesa ndimbola na ba technologies ya kosunga

Kosalela langi mpo na kobakisa ndimbola epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Sala ete sango oyo elakisami na langi ezala polele uta na makambo yango moko (ndakisa makomi oyo ezali komonana), to ekotisama na nzela ya mayele mosusu, lokola makomi ya kobakisa oyo ebombami elongo na .sr-onlykelasi.

Bosala ba tableaux oyo ezo répondre na enveloppant nionso .tablena .table-responsive{-sm|-md|-lg|-xl}, kosala que table e défiler horizontalement na max-widthpoint de rupture moko na moko ya jusqu'à (kasi inclus te) 576px, 768px, 992px, na 1120px, respectivement.

Yeba ete lokola ba navigateurs esimbaka te na tango oyo ba requêtes ya contexte ya range , tosalaka zinga zinga ya ba limitations ya min-mpe ba max-préfixes mpe ba viewports na ba largeurs fractionnelles (oyo ekoki kosalema na ba conditions mosusu na ba appareils ya dpi ya likolo, na ndakisa) na kosalelaka ba valeurs na précision ya likolo pona ba comparaisons oyo .

Ba captions ya maloba

A <caption>esalaka lokola motó ya likambo mpo na mesa. Esalisaka basaleli oyo bazali na batángi ya écran báluka mesa mpe báyeba makambo oyo ezali kolobela mpe bázwa ekateli soki balingi kotánga yango.

Liste ya ba usagers
# . Ya liboso Nsuka Kosalela
1. 1. Marko Otto @mdo
2. 2 Yakobo Thornton oyo azali @mafuta
3 Larry Ndɛkɛ yango @twitter na 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>

Bamesa oyo ezali kopesa eyano

Ba tableaux oyo ezo répondre epesaka nzela ya ko défiler ba tableaux horizontalement na pete. Salá ete mesa nyonso ezala na eyano na kati ya bisika nyonso ya kotala na kozingaka .tablena .table-responsive. To, pona point de rupture maximum oyo okozala na tableau responsive jusqu'à na kosalelaka .table-responsive{-sm|-md|-lg|-xl}.

Kokata/kokata na vertical

Ba tableaux oyo ezo répondre esalaka usage ya overflow-y: hidden, oyo ezo cliper contenus nionso oyo eleki ba bords ya se to ya likolo ya table. Mingimingi, yango ekoki kokata ba menu oyo ezali kokita mpe ba widgets mosusu ya bato mosusu.

Koyanola ntango nyonso

Na kati ya esika nyonso ya kobuka, salelá .table-responsivempo na kosala défilement ya ba tableaux na ndenge ya horizontal.

# . Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo
1. 1. Selile Selile Selile Selile Selile Selile Selile Selile Selile
2. 2 Selile Selile Selile Selile Selile Selile Selile Selile Selile
3 Selile Selile Selile Selile Selile Selile Selile Selile Selile 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Point de rupture spécifique

Salelá .table-responsive{-sm|-md|-lg|-xl}ndenge esengeli mpo na kosala ba tableaux oyo ezo répondre tii na point de rupture moko boye. Kobanda na point de rupture wana mpe likolo, tableau eko se comporter normalement mpe eko défiler horizontalement te.

Ba tableaux oyo ekoki komonana ebukani tii tango ba styles na yango ya réponse ekosalema na ba largeurs spécifiques ya port de vue.

# . Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo
1. 1. Selile Selile Selile Selile Selile Selile Selile Selile
2. 2 Selile Selile Selile Selile Selile Selile Selile Selile
3 Selile Selile Selile Selile Selile Selile Selile Selile 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# . Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo
1. 1. Selile Selile Selile Selile Selile Selile Selile Selile
2. 2 Selile Selile Selile Selile Selile Selile Selile Selile
3 Selile Selile Selile Selile Selile Selile Selile Selile 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# . Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo
1. 1. Selile Selile Selile Selile Selile Selile Selile Selile
2. 2 Selile Selile Selile Selile Selile Selile Selile Selile
3 Selile Selile Selile Selile Selile Selile Selile Selile 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# . Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo Motó ya likambo
1. 1. Selile Selile Selile Selile Selile Selile Selile Selile
2. 2 Selile Selile Selile Selile Selile Selile Selile Selile
3 Selile Selile Selile Selile Selile Selile Selile Selile 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>