Source

Tabelat

Dokumentacioni dhe shembuj për stilimin e tabelave (duke pasur parasysh përdorimin e tyre të përhapur në shtojcat JavaScript) me Bootstrap.

Shembuj

Për shkak të përdorimit të gjerë të tabelave nëpër miniaplikacionet e palëve të treta, si kalendarët dhe zgjedhësit e datave, ne i kemi projektuar tabelat tona për t'u zgjedhur . Thjesht shtoni klasën bazë .tablenë çdo <table>, pastaj zgjerojeni me stile të personalizuara ose klasa të ndryshme modifikuese të përfshira.

Duke përdorur shënjimin më bazë të tabelës, ja se si .tableduken tabelat e bazuara në Bootstrap. Të gjitha stilet e tabelave trashëgohen në Bootstrap 4 , që do të thotë se çdo tavolinë e vendosur do të stilohet në të njëjtën mënyrë si prindi.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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

Ju gjithashtu mund t'i ktheni ngjyrat - me tekst të lehtë në sfond të errët - me .table-dark.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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

Opsionet e kokës së tavolinës

Ngjashëm me tabelat dhe tabelat e errëta, përdorni klasat e modifikuesve .thead-lightose .thead-darkpër ta bërë <thead>s të duket gri e hapur ose e errët.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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

Rreshtat me vija

Përdoreni .table-stripedpër të shtuar vija zebra në çdo rresht tabele brenda <tbody>.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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

Tabela me kufi

Shto .table-borderedpër kufijtë në të gjitha anët e tabelës dhe qelizat.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Rreshtat e lëvizshëm

Shto .table-hoverpër të aktivizuar një gjendje qëndrimi në rreshtat e tabelës brenda një <tbody>.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Tavolinë e vogël

Shtoni .table-smpër t'i bërë tavolinat më kompakte duke e prerë mbushjen e qelizave në gjysmë.

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry Zogu		@Cicëroj

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

Klasat kontekstuale

Përdorni klasa kontekstuale për të ngjyrosur rreshtat e tabelës ose qelizat individuale.

Klasa	Drejtimi	Drejtimi
Aktiv	Qelizë	Qelizë
E paracaktuar	Qelizë	Qelizë
fillore	Qelizë	Qelizë
E mesme	Qelizë	Qelizë
Sukses	Qelizë	Qelizë
Rrezik	Qelizë	Qelizë
Paralajmërim	Qelizë	Qelizë
Informacion	Qelizë	Qelizë
Drita	Qelizë	Qelizë
E errët	Qelizë	Qelizë

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

Variantet e zakonshme të sfondit të tabelës nuk disponohen me tabelën e errët, megjithatë, mund të përdorni programe teksti ose sfondi për të arritur stile të ngjashme.

#	Drejtimi	Drejtimi
1	Qelizë	Qelizë
2	Qelizë	Qelizë
3	Qelizë	Qelizë
4	Qelizë	Qelizë
5	Qelizë	Qelizë
6	Qelizë	Qelizë
7	Qelizë	Qelizë
8	Qelizë	Qelizë
9	Qelizë	Qelizë

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

Përcjellja e kuptimit tek teknologjitë ndihmëse

Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .sr-onlyklasën.

Krijoni tabela të përgjegjshme duke mbështjellë ndonjë .tableme .table-responsive{-sm|-md|-lg|-xl}, duke e bërë tabelën të lëvizë horizontalisht në çdo max-widthpikë ndërprerjeje deri në (por pa përfshirë) përkatësisht 576 pikselë, 768 px, 992 px dhe 1120 px.

Vini re se meqenëse shfletuesit nuk mbështesin aktualisht pyetjet e kontekstit të diapazonit , ne punojmë rreth kufizimeve min-dhe max-prefikseve dhe portave të pamjes me gjerësi të pjesshme (të cilat mund të ndodhin në kushte të caktuara në pajisjet me dpi të lartë, për shembull) duke përdorur vlera me saktësi më të lartë për këto krahasime .

Titrat

Një <caption>funksionon si një titull për një tabelë. Ai i ndihmon përdoruesit me lexues ekrani të gjejnë një tabelë dhe të kuptojnë se për çfarë bëhet fjalë dhe të vendosin nëse duan ta lexojnë atë.

Lista e përdoruesve
#	Së pari	E fundit	Doreza
1	shenjë	Oto	@mdo
2	Jakobi	Thornton	@yndyrë
3	Larry	Zogu	@Cicëroj

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

Tabelat e përgjegjshme

Tabelat e përgjegjshme lejojnë që tabelat të lëvizin me lehtësi horizontalisht. Bëni çdo tabelë të përgjegjshme në të gjitha portat e shikimit duke e mbështjellë një .tableme .table-responsive. Ose, zgjidhni një pikë ndërprerjeje maksimale me të cilën do të keni një tabelë të përgjegjshme deri në duke përdorur .table-responsive{-sm|-md|-lg|-xl}.

Prerje/prerje vertikale

Tabelat e përgjegjshme përdorin overflow-y: hidden, e cila heq çdo përmbajtje që shkon përtej skajeve të poshtme ose të sipërme të tabelës. Në veçanti, kjo mund të fshijë menytë rënëse dhe pajisje të tjera të palëve të treta.

Gjithmonë i përgjegjshëm

Për çdo pikë ndërprerjeje, përdoret .table-responsivepër tabelat me lëvizje horizontale.

#	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi
1	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
2	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
3	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë

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

Pika specifike e ndërprerjes

Përdorni .table-responsive{-sm|-md|-lg|-xl}sipas nevojës për të krijuar tabela të përgjegjshme deri në një pikë të caktuar ndërprerjeje. Nga ajo pikë e ndërprerjes e lart, tabela do të sillet normalisht dhe nuk do të lëvizë horizontalisht.

#	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi
1	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
2	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
3	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë

#	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi
1	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
2	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
3	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë

#	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi
1	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
2	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
3	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë

#	Drejtimi	Drejtimi	Drejtimi	Drejtimi	Drejtimi
1	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
2	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë
3	Qelizë	Qelizë	Qelizë	Qelizë	Qelizë

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