Source

Tables

Belgekirin û mînakên ji bo şêwaza vebijarkî ya tabloyan (ji ber karanîna wan a berbelav di pêvekên JavaScript de) bi Bootstrap re.

Examples

Ji ber berbelavbûna karanîna tabloyan li ser widgetên sêyemîn ên mîna salname û hilbijêrên tarîx, me tabloyên xwe ji bo vebijarkî dîzayn kir . Tenê çîna bingehîn .tableli her <table>yekê zêde bikin, dûv re bi şêwazên xwerû an çînên meyên guhezker ên cihêreng ên tevlêkirî dirêj bikin.

Bi karanîna nîşankirina tabloya herî bingehîn, li vir çawa .tabletabloyên -based li Bootstrap xuya dikin. Hemî şêwazên tabloyê di Bootstrap 4-ê de mîras in , tê vê wateyê ku hemî tabloyên hêlînkirî dê bi heman awayê dêûbav bêne şêwaz kirin.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@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>

Her weha hûn dikarin rengan-bi nivîsa sivik a li ser paşxaneyên tarî- bi rengan vegerînin .table-dark.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@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>

Vebijarkên serê sifrê

Mîna tablo û tabloyên tarî, çînên guhêrbar bikar bînin .thead-lightan jî .thead-darkji bo ku <thead>s gewr sivik an tarî xuya bikin.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@twitter

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@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>

Rêzên xerîdar

Ji .table-stripedbo lêzêdekirina zebra-striping li her rêzika tabloyê ya di hundurê de bikar bînin <tbody>.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@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>

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@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>

Tabloya sînorkirî

Ji .table-borderedbo sînorên li ser hemî aliyên tablo û hucreyan zêde bikin.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@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>

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@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>

Rêzên hoverable

Zêde .table-hoverbikin da ku rewşek hêlînê li ser rêzên tabloyê di nav a <tbody>.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@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>

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@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>

Maseya piçûk

Zêde .table-smbikin da ku tabloyan tevlihevtir bikin bi qutkirina pelika hucreyê nîvco.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@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>

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry The Bird		@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>

Dersên hevoksaziyê

Ji bo rengkirina rêzên tabloyê an şaneyên takekesî dersên kontekstê bikar bînin.

Sinif	Sernivîs	Sernivîs
Jîr	Koşik	Koşik
Destçûnî	Koşik	Koşik
Bingehîn	Koşik	Koşik
Dûwemdor	Koşik	Koşik
Serketinî	Koşik	Koşik
Talûke	Koşik	Koşik
Gazî	Koşik	Koşik
Info	Koşik	Koşik
Sivik	Koşik	Koşik
Tarî	Koşik	Koşik

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

Guhertoyên paşperdeya tabloya birêkûpêk bi tabloya tarî re peyda nabin, lêbelê, hûn dikarin ji bo bidestxistina şêwazên wekhev karûbarên nivîsê an paşîn bikar bînin.

#	Sernivîs	Sernivîs
1	Koşik	Koşik
2	Koşik	Koşik
3	Koşik	Koşik
4	Koşik	Koşik
5	Koşik	Koşik
6	Koşik	Koşik
7	Koşik	Koşik
8	Koşik	Koşik
9	Koşik	Koşik

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

Veguheztina wateya teknolojiyên arîkar

Bikaranîna rengan ji bo zêdekirina wateyê tenê nîşanek dîtbar peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (mînak nivîsa xuyayî), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .sr-onlypolê re veşartî ye.

Tabloyên bersivdar bi pêçandina yek .tablebi .table-responsive{-sm|-md|-lg|-xl}, çêbikin ku tablo li her max-widthxala veqetandinê bi horizontî bigerin (lê ne tê de) bi rêzê ve 576px, 768px, 992px, û 1120px.

Bala xwe bidinê ku ji ber ku gerok naha pirsên çarçoweya rêzê piştgirî nakin , em li dora sînorkirin min-û max-pêşgir û dîmenderan bi firehiyên perçeyî dixebitin (yên ku di bin hin şert û mercan de li ser cîhazên bilind-dpi, mînakî) dikarin bi karanîna nirxan bi rastbûna bilindtir ji bo van berhevdanan bixebitin. .

Captions

A <caption>fonksiyonên wek sernivîsê ji bo sifrê. Ew ji bikarhênerên bi xwendevanên ekranê re dibe alîkar ku tabloyek bibînin û fêm bikin ka ew li ser çi ye û biryar bidin ka ew dixwazin wê bixwînin.

Lîsteya bikarhêneran
#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@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>

Tabloyên bersivdar

Tabloyên bersivdar dihêlin ku tablo bi hêsanî bi horizontî werin gerandin. Bi pêçandina tabloyek .tablebi .table-responsive. An jî, xala veqetandinê ya herî zêde ya ku bi karanîna tabloyek bersivdar hebe hilbijêrin .table-responsive{-sm|-md|-lg|-xl}.

Clipping Vertical / qutkirin

Tabloyên bersivdar bi kar tînin overflow-y: hidden, ku her naverokek ku ji keviyên jêrîn an jorîn ên tabloyê derbas dibe qut dike. Bi taybetî, ev dikare pêşekên dakêşanê û widgetên din ên partiya sêyemîn qut bike.

Her tim bersivdar

Li seranserê her xala veqetandinê, ji .table-responsivebo tabloyên gerîdeya horîzontal bikar bînin.

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik

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

Breakpoint taybet

Wekî ku hewce be bikar bînin .table-responsive{-sm|-md|-lg|-xl}da ku tabloyên bersivdar heya nuqteyek taybetî biafirînin. Ji wê nuqteya veqetandinê û jor, dê tablo bi rengek normal tevbigere û bi horizontî negere.

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik

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