Source

Litafole

Litokomane le mehlala ea ho khetha ho kenya litafole (ho fanoe ka tšebeliso e atileng ho li-plugins tsa JavaScript) ka Bootstrap.

Mehlala

Ka lebaka la ts'ebeliso e atileng ea litafole ho li-widget tsa batho ba bang joalo ka lialmanaka le ba khethang matsatsi, re hlophisitse litafole tsa rona hore e ka khetha ho kena . Kenya feela sehlopha sa mantlha .tableho efe kapa efe <table>, ebe u atolosa ka mekhoa e tloaelehileng kapa litlelase tsa rona tse fapaneng tse kenyellelitsoeng tsa ho fetola.

U sebelisa letšoao la motheo la tafole, mona ke hore na .tablelitafole tse thehiloeng ho Bootstrap li shebahala joang. Mefuta eohle ea litafole e futsitsoe ho Bootstrap 4 , ho bolelang hore litafole life kapa life tse behiloeng li tla ngoloa ka mokhoa o tšoanang le oa motsoali.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>

U ka boela ua fetola mebala-ka mongolo o bobebe ho bokantle bo lefifi ka .table-dark.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>

Likhetho tsa hlooho ea tafole

Joalo ka litafole le litafole tse lefifi, sebelisa litlelase tsa modifier .thead-lightkapa .thead-darkho etsa hore <thead>s e bonahale e le bobebe kapa boputsoa bo lefifi.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @twitter
# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>

Mela e methalo

Sebelisa .table-stripedho eketsa liqoaha-tsalo moleng ofe kapa ofe oa tafole ka har'a <tbody>.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>
# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>

Tafole e moeling

Eketsa .table-borderedbakeng sa meeli ka mahlakoreng 'ohle a tafole le lisele.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>
# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>

Tafole e se nang moeli

Eketsa .table-borderlessbakeng sa tafole ntle le meeli.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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-borderlesse ka boela ea sebelisoa litafoleng tse lefifi.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>

Hoverable mela

Eketsa .table-hoverho nolofalletsa boemo ba hover holim'a mela ea tafole ka har'a <tbody>.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>
# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>

Tafole e nyane

Eketsa .table-smho etsa hore litafole li kopane haholoanyane ka ho khaola lisele tsa lisele ka halofo.

# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>
# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>

Lihlopha tsa maemo

Sebelisa litlelase tsa maemo ho mebala methalong ea litafole kapa liseleng ka bomong.

Sehlopha Sehlooho Sehlooho
E sebetsa Sele Sele
Ea kamehla Sele Sele
Ea mantlha Sele Sele
Ea bobeli Sele Sele
Katleho Sele Sele
Kotsi Sele Sele
Tlhokomediso Sele Sele
Info Sele Sele
Leseli Sele Sele
Lefifi Sele Sele 
<!-- 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>

Mefuta e tloaelehileng ea litafole ha e fumanehe ka tafole e lefifi, leha ho le joalo, u ka sebelisa mongolo kapa lisebelisoa tsa morao-rao ho fumana mekhoa e ts'oanang.

# Sehlooho Sehlooho
1 Sele Sele
2 Sele Sele
3 Sele Sele
4 Sele Sele
5 Sele Sele
6 Sele Sele
7 Sele Sele
8 Sele Sele
9 Sele Sele 
<!-- 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>
Ho fetisa moelelo ho litheknoloji tse thusang

Ho sebelisa mebala ho eketsa moelelo ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka sebali sa skrine. Netefatsa hore tlhahisoleseding e hlahisitsweng ke mmala e ka ba e totobetseng ho tswa ho dikahare ka boyona (mohlala, mongolo o bonahalang), kapa e kenyeleditswe ka mekgwa e meng, e kang mongolo o tlatsetso o patilweng le .sr-onlysehlopha.

Theha litafole tse arabelang ka ho phuthela leha e le efe .tableka .table-responsive{-sm|-md|-lg|-xl}, ho etsa hore tafole e tsamaee e tšekaletse sebakeng se seng le se seng max-widthho fihla ho (empa u sa kenyelle) 576px, 768px, 992px, le 1120px, ka ho latellana.

Hlokomela hore kaha libatli ha joale ha li tšehetse lipotso tse amanang le litaba , re sebetsa ho pota-pota mefokolo ea min-li max--prefixes le libaka tsa pono tse nang le bophara ba likaroloana (tse ka hlahang tlas'a maemo a itseng ho lisebelisoa tse phahameng tsa dpi, mohlala) ka ho sebelisa boleng bo nepahetseng haholo bakeng sa papiso ena. .

Litlhaloso

E <caption>sebetsa joalo ka sehlooho sa tafole. E thusa basebelisi ba nang le libali tsa skrine ho fumana tafole le ho utloisisa hore na e bua ka eng le ho etsa qeto ea hore na ba batla ho e bala.

Lenane la basebelisi
# Ea pele Qetellong Tšoara
1 Tšoaea Otto @mdo
2 Jakobo Thornton @mafura
3 Larry Nonyana @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>

Litafole tse arabelang

Litafole tse arabelang li lumella litafole ho tsamaisoa ka mokhoa o tšekaletseng habonolo. Etsa hore tafole efe kapa efe e arabele libakeng tsohle tsa pono ka ho phuthela .tableka .table-responsive. Kapa, ​​​​khetha sebaka se seholo seo u ka bang le tafole e arabelang ho fihlela ka ho sebelisa .table-responsive{-sm|-md|-lg|-xl}.

Keketso e emeng e otlolohileng

Litafole tse arabelang li sebelisa overflow-y: hidden, e tlosang litaba life kapa life tse fetang bokatlase kapa lipheletsong tse kaholimo tsa tafole. Haholo-holo, sena se ka fokotsa menyetla ea ho theoha le li-widget tse ling tsa motho oa boraro.

Kamehla e arabela

Hohle sebakeng se seng le se seng, sebelisa .table-responsivelitafole tse otlolohileng.

# Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho
1 Sele Sele Sele Sele Sele Sele Sele Sele Sele
2 Sele Sele Sele Sele Sele Sele Sele Sele Sele
3 Sele Sele Sele Sele Sele Sele Sele Sele Sele 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint e khethehileng

Sebelisa .table-responsive{-sm|-md|-lg|-xl}kamoo ho hlokahalang ho theha litafole tse arabelang ho fihlela sebakeng se itseng. Ho tloha sebakeng seo ho ea holimo ho ea holimo, tafole e tla itšoara ka mokhoa o tloaelehileng 'me e se ke ea tsamaea e tšekaletse.

Litafole tsena li ka 'na tsa bonahala li robehile ho fihlela mekhoa ea bona ea ho arabela e sebetsa ho bophara bo itseng ba pono.

# Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho
1 Sele Sele Sele Sele Sele Sele Sele Sele
2 Sele Sele Sele Sele Sele Sele Sele Sele
3 Sele Sele Sele Sele Sele Sele Sele Sele 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho
1 Sele Sele Sele Sele Sele Sele Sele Sele
2 Sele Sele Sele Sele Sele Sele Sele Sele
3 Sele Sele Sele Sele Sele Sele Sele Sele 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho
1 Sele Sele Sele Sele Sele Sele Sele Sele
2 Sele Sele Sele Sele Sele Sele Sele Sele
3 Sele Sele Sele Sele Sele Sele Sele Sele 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho Sehlooho
1 Sele Sele Sele Sele Sele Sele Sele Sele
2 Sele Sele Sele Sele Sele Sele Sele Sele
3 Sele Sele Sele Sele Sele Sele Sele Sele 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>