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 ho fetola .thead-lightkapa .thead-darkho etsa hore <thead>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 kenya liqoaha-striping 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>

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.

#	Sehlooho	Sehlooho	Sehlooho	Sehlooho	Sehlooho
1	Sele	Sele	Sele	Sele	Sele
2	Sele	Sele	Sele	Sele	Sele
3	Sele	Sele	Sele	Sele	Sele

#	Sehlooho	Sehlooho	Sehlooho	Sehlooho	Sehlooho
1	Sele	Sele	Sele	Sele	Sele
2	Sele	Sele	Sele	Sele	Sele
3	Sele	Sele	Sele	Sele	Sele

#	Sehlooho	Sehlooho	Sehlooho	Sehlooho	Sehlooho
1	Sele	Sele	Sele	Sele	Sele
2	Sele	Sele	Sele	Sele	Sele
3	Sele	Sele	Sele	Sele	Sele

#	Sehlooho	Sehlooho	Sehlooho	Sehlooho	Sehlooho
1	Sele	Sele	Sele	Sele	Sele
2	Sele	Sele	Sele	Sele	Sele
3	Sele	Sele	Sele	Sele	Sele

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