Source

Tabeloj

Dokumentado kaj ekzemploj por enskribstilado de tabeloj (konsiderante ilia ĝenerala uzo en JavaScript-kromaĵoj) kun Bootstrap.

Ekzemploj

Pro la disvastigita uzo de tabeloj tra triaj uzaĵoj kiel kalendaroj kaj dato-elektiloj, ni desegnis niajn tabelojn por esti enskribitaj . Nur aldonu la bazan klason .tableal iu ajn <table>, tiam etendiĝu per kutimaj stiloj aŭ niaj diversaj inkluzivitaj modifiklasoj.

Uzante la plej bazan tabelmarkadon, jen kiel .table-bazitaj tabeloj aspektas en Bootstrap. Ĉiuj tabelstiloj estas hereditaj en Bootstrap 4 , kio signifas, ke ĉiuj nestitaj tabeloj estos stilitaj en la sama maniero kiel la gepatro.

#	Unue	Laste	Tenilo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry	la birdo	@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>

Vi ankaŭ povas inversigi la kolorojn—kun malpeza teksto sur malhelaj fonoj—per .table-dark.

#	Unue	Laste	Tenilo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry	la birdo	@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>

Opcioj de tablokapo

Simile al tabeloj kaj malhelaj tabeloj, uzu la modifklasojn .thead-lightaŭ .thead-darkpor ke <thead>s aperi hele aŭ malhelgrizaj.

#	Unue	Laste	Tenilo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry	la birdo	@twitter

#	Unue	Laste	Tenilo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry	la birdo	@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>

Striitaj vicoj

Uzu .table-stripedpor aldoni zebro-striadon al iu tabelvico ene de la <tbody>.

#	Unue	Laste	Tenilo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry	la birdo	@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>

#	Unue	Laste	Tenilo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry	la birdo	@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>

Bordita tablo

Aldonu .table-borderedpor randoj sur ĉiuj flankoj de la tablo kaj ĉeloj.

#	Unue	Laste	Tenilo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry la Birdo		@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>

#	Unue	Laste	Tenilo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry la Birdo		@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>

Ŝvebeblaj vicoj

Aldoni .table-hoverpor ebligi ŝveban staton sur tabelvicoj ene de <tbody>.

#	Unue	Laste	Tenilo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry la Birdo		@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>

#	Unue	Laste	Tenilo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry la Birdo		@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>

Malgranda tablo

Aldonu .table-smpor fari tablojn pli kompaktajn tranĉante ĉela remburaĵo en duono.

#	Unue	Laste	Tenilo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry la Birdo		@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>

#	Unue	Laste	Tenilo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry la Birdo		@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>

Kuntekstaj klasoj

Uzu kuntekstajn klasojn por kolorigi tabelvicojn aŭ individuajn ĉelojn.

Klaso	Titolo	Titolo
Aktiva	Ĉelo	Ĉelo
Defaŭlte	Ĉelo	Ĉelo
Primaraj	Ĉelo	Ĉelo
Sekundara	Ĉelo	Ĉelo
Sukceso	Ĉelo	Ĉelo
Danĝero	Ĉelo	Ĉelo
Averto	Ĉelo	Ĉelo
Info	Ĉelo	Ĉelo
Lumo	Ĉelo	Ĉelo
Mallumo	Ĉelo	Ĉelo

<!-- 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>

Regulaj tabelaj fonvariaĵoj ne haveblas kun la malhela tabelo, tamen vi povas uzi tekston aŭ fonajn ilojn por atingi similajn stilojn.

#	Titolo	Titolo
1	Ĉelo	Ĉelo
2	Ĉelo	Ĉelo
3	Ĉelo	Ĉelo
4	Ĉelo	Ĉelo
5	Ĉelo	Ĉelo
6	Ĉelo	Ĉelo
7	Ĉelo	Ĉelo
8	Ĉelo	Ĉelo
9	Ĉelo	Ĉelo

<!-- 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>

Transdonante signifon al helpaj teknologioj

Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidentaj el la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivitaj per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .sr-onlyklaso.

Kreu respondemajn tabelojn envolvante iun ajn .tableper .table-responsive{-sm|-md|-lg|-xl}, igante la tabelon ruliĝi horizontale ĉe ĉiu max-widthrompopunkto de ĝis (sed ne inkluzivante) 576 px, 768 px, 992 px, kaj 1120 px, respektive.

Notu, ke ĉar retumiloj nuntempe ne subtenas gamo-kuntekstdemandojn , ni laboras ĉirkaŭ la limigoj de min-kaj max-prefiksoj kaj vidfenestroj kun frakciaj larĝoj (kiuj povas okazi sub certaj kondiĉoj ĉe alt-dpi-aparatoj, ekzemple) uzante valorojn kun pli alta precizeco por ĉi tiuj komparoj. .

Subtitoloj

A <caption>funkcias kiel titolo por tabelo. Ĝi helpas uzantojn kun ekranlegiloj trovi tabelon kaj kompreni pri kio temas kaj decidi ĉu ili volas legi ĝin.

Listo de uzantoj
#	Unue	Laste	Tenilo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry	la birdo	@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>

Respondema tabeloj

Respondema tabeloj permesas tabelojn rulumi horizontale kun facileco. Faru ajnan tabelon respondema tra ĉiuj vidfenestroj envolvante .tableper .table-responsive. Aŭ elektu maksimuman rompopunkton kun kiu havi respondeman tabelon ĝis uzante .table-responsive{-sm|-md|-lg|-xl}.

Vertikala tondado/tranĉado

Respondema tabeloj uzas overflow-y: hidden, kiu detranĉas ajnan enhavon kiu iras preter la malsupraj aŭ supraj randoj de la tabelo. Aparte, ĉi tio povas detranĉi falmenuojn kaj aliajn triajn fenestraĵojn.

Ĉiam respondema

Tra ĉiu rompopunkto, uzu .table-responsivepor horizontale ruliĝantaj tabloj.

#	Titolo	Titolo	Titolo	Titolo	Titolo	Titolo	Titolo	Titolo	Titolo
1	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo
2	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo
3	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Rompopunkto specifa

Uzu .table-responsive{-sm|-md|-lg|-xl}laŭbezone por krei respondemajn tabelojn ĝis aparta rompopunkto. De tiu rompopunkto kaj supren, la tablo kondutos normale kaj ne rulumo horizontale.

#	Titolo	Titolo	Titolo	Titolo	Titolo
1	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo
2	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo
3	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo

#	Titolo	Titolo	Titolo	Titolo	Titolo
1	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo
2	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo
3	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo

#	Titolo	Titolo	Titolo	Titolo	Titolo
1	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo
2	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo
3	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo

#	Titolo	Titolo	Titolo	Titolo	Titolo
1	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo
2	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo
3	Ĉelo	Ĉelo	Ĉelo	Ĉelo	Ĉelo

<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>