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>

Maseya bêsînor

Ji .table-borderlessbo tabloyek bê sînor 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-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-borderlessdikare li ser maseyên tarî jî were bikar anîn.

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

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.

Dibe ku ev tablo şikestî xuya bikin heya ku şêwazên wan ên bersivdar li ser firehiyên dîmendera taybetî bicîh nebin.

# 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
2 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 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# 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
2 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 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# 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
2 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 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# 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
2 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 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>