Source

Lentelės

Dokumentai ir pavyzdžiai, kaip pasirinkti lentelių stilių (atsižvelgiant į jų paplitimą „JavaScript“ papildiniuose) naudojant „Bootstrap“.

Pavyzdžiai

Kadangi lentelės plačiai naudojamos trečiųjų šalių valdikliuose, pvz., kalendoriuose ir datos rinkikliuose, savo lenteles sukūrėme taip, kad jas būtų galima pasirinkti . Tiesiog pridėkite bazinę klasę .tableprie bet kurios <table>, tada išplėskite pasirinktiniais stiliais arba įvairiomis įtrauktomis modifikavimo klasėmis.

Naudojant paprasčiausią lentelės žymėjimą, štai kaip .table„Bootstrap“ atrodo pagrįstos lentelės. Visi lentelių stiliai yra paveldimi Bootstrap 4 , o tai reiškia, kad visos įdėtos lentelės bus stilizuotos taip pat, kaip ir pirminės lentelės.

# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris paukštis @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>

Taip pat galite apversti spalvas su šviesiu tekstu tamsiame fone su .table-dark.

# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris paukštis @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>

Stalo galvutės parinktys

Panašiai kaip lenteles ir tamsias lenteles, naudokite modifikavimo klases .thead-lightarba .thead-dark, kad jos <thead>atrodytų šviesiai arba tamsiai pilkos.

# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris paukštis @twitter
# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris paukštis @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>

Dryžuotos eilutės

Naudokite .table-stripednorėdami pridėti zebro juosteles į bet kurią lentelės eilutę <tbody>.

# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris paukštis @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>
# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris paukštis @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>

Stalas su apvadu

Pridėkite .table-borderedkraštines visose lentelės ir langelių pusėse.

# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris Paukštis @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>
# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris Paukštis @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>

Stalas be rėmelių

Pridėkite .table-borderlesslentelę be sienų.

# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris Paukštis @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-borderlessgali būti naudojamas ir ant tamsių stalų.

# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris Paukštis @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>

Pakeliamos eilutės

Pridėti .table-hover, kad įgalintumėte pelės žymeklio būseną lentelės eilutėse, esančiose <tbody>.

# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris Paukštis @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>
# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris Paukštis @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>

Mažas staliukas

Pridėkite .table-sm, kad lentelės būtų kompaktiškesnės, perpjaunant ląstelių užpildą per pusę.

# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris Paukštis @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>
# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris Paukštis @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>

Kontekstinės klasės

Norėdami nuspalvinti lentelės eilutes arba atskirus langelius, naudokite kontekstines klases.

Klasė Antraštė Antraštė
Aktyvus Ląstelė Ląstelė
Numatytas Ląstelė Ląstelė
Pirminis Ląstelė Ląstelė
Antrinis Ląstelė Ląstelė
Sėkmė Ląstelė Ląstelė
Pavojus Ląstelė Ląstelė
Įspėjimas Ląstelė Ląstelė
Informacija Ląstelė Ląstelė
Šviesa Ląstelė Ląstelė
Tamsus Ląstelė Ląstelė 
<!-- 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>

Įprasti lentelės fono variantai nepasiekiami naudojant tamsią lentelę, tačiau galite naudoti teksto arba fono priemones , kad gautumėte panašius stilius.

# Antraštė Antraštė
1 Ląstelė Ląstelė
2 Ląstelė Ląstelė
3 Ląstelė Ląstelė
4 Ląstelė Ląstelė
5 Ląstelė Ląstelė
6 Ląstelė Ląstelė
7 Ląstelė Ląstelė
8 Ląstelė Ląstelė
9 Ląstelė Ląstelė 
<!-- 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>
Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (pvz., matomas tekstas), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą .sr-onlyklasėje.

Kurkite interaktyvias lenteles apvyniodami bet kurią .tablesu .table-responsive{-sm|-md|-lg|-xl}, kad lentelė slinktų horizontaliai kiekviename max-widthpertraukos taške iki (bet neįskaitant) atitinkamai iki 576 pikselių, 768 pikselių, 992 pikselių ir 1 120 pikselių.

Atminkite, kad šiuo metu naršyklės nepalaiko diapazono konteksto užklausų , todėl apeiname trupmeninio pločio priešdėlius min-irmax- peržiūros sritis (kurie gali atsirasti tam tikromis sąlygomis, pavyzdžiui, didelės dpi įrenginiuose), naudodami tikslesnes vertes šiems palyginimams. .

Antraštės

A <caption>veikia kaip lentelės antraštė. Tai padeda vartotojams, turintiems ekrano skaitytuvus, rasti lentelę, suprasti, apie ką ji, ir nuspręsti, ar jie nori ją perskaityti.

Vartotojų sąrašas
# Pirmas Paskutinis Rankena
1 ženklas Otto @mdo
2 Jokūbas Torntonas @riebus
3 Laris paukštis @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>

Responsive lentelės

Reaktyvios lentelės leidžia lengvai slinkti lenteles horizontaliai. Padarykite bet kurią lentelę interaktyvią visose peržiūros srityse, apvyniodami a .tablesu .table-responsive. Arba, naudodami , pasirinkite didžiausią pertraukos tašką, su kuriuo norite pasiekti interaktyvią lentelę .table-responsive{-sm|-md|-lg|-xl}.

Vertikalus kirpimas / sutrumpinimas

Interaktyviosiose lentelėse naudojama overflow-y: hidden, kuri nupjauna bet kokį turinį, esantį už apatinio arba viršutinio lentelės krašto. Visų pirma, tai gali išjungti išskleidžiamuosius meniu ir kitus trečiųjų šalių valdiklius.

Visada reaguoja

Visuose pertraukos taškuose naudokite .table-responsivehorizontaliai slenkančias lenteles.

# Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė
1 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė
2 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė
3 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Konkretus lūžio taškas

Naudokite .table-responsive{-sm|-md|-lg|-xl}, jei reikia, kad sukurtumėte interaktyvias lenteles iki konkretaus pertraukos taško. Nuo tos pertraukos taško lentelė elgsis įprastai ir neslinks horizontaliai.

Šios lentelės gali atrodyti neveikiančios, kol jų interaktyvūs stiliai bus pritaikyti tam tikram peržiūros srities pločiui.

# Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė
1 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė
2 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė
3 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė
1 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė
2 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė
3 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė
1 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė
2 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė
3 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė Antraštė
1 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė
2 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė
3 Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė Ląstelė 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>