Source

Clàir

Sgrìobhainnean agus eisimpleirean airson stoidhle roghnach de chlàran (seach gu bheil iad air an cleachdadh gu cumanta ann am plugins JavaScript) le Bootstrap.

Eisimpleirean

Mar thoradh air cleachdadh farsaing de chlàran thairis air widgets treas-phàrtaidh leithid mìosachain agus luchd-togail cinn-latha, tha sinn air na bùird againn a dhealbhadh gus a bhith roghnachadh a-steach . Dìreach cuir a’ bhun-chlas .tableri gin <table>, an uairsin leudaich le stoidhlichean àbhaisteach no na diofar chlasaichean mion-atharrachaidh againn.

A’ cleachdadh a’ chomharra bùird as bunaitiche, seo mar .tablea choimheadas bùird stèidhichte ann am Bootstrap. Tha na stoidhlichean bùird uile air an sealbhachadh ann am Bootstrap 4 , a’ ciallachadh gum bi bùird neadachaidh sam bith air an stialladh san aon dòigh ris a’ phàrant.

# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
3 Larry an Eòin @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>

Faodaidh tu cuideachd na dathan a thionndadh - le teacsa aotrom air cùl-raon dorcha - le .table-dark.

# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
3 Larry an Eòin @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>

Roghainnean ceann-bùird

Coltach ri bùird agus clàran dorcha, cleachd na clasaichean mion-atharrachaidh .thead-lightno .thead-darkgus toirt air <thead>s nochdadh liath aotrom no dorcha.

# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
3 Larry an Eòin @twitter
# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
3 Larry an Eòin @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>

Sreathan stiallach

Cleachd .table-stripedgus stiallan zebra a chur ri sreath bùird sam bith taobh a-staigh an fhaidhle <tbody>.

# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
3 Larry an Eòin @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>
# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
3 Larry an Eòin @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>

Clàr crìche

Cuir ris .table-borderedairson crìochan air gach taobh den bhòrd agus na ceallan.

# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
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>
# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
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>

Clàr gun chrìoch

Cuir ris .table-borderlessairson bòrd gun chrìochan.

# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
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-borderlessFaodar a chleachdadh cuideachd air bùird dorcha.

# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
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>

Sreathan sùbailte

Cuir .table-hoverris gus staid hover a chomasachadh air sreathan bùird taobh a-staigh faidhle <tbody>.

# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
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>
# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
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>

Clàr beag

Cuir .table-smris gus bùird a dhèanamh nas toinnte le bhith a’ gearradh pleadhag cealla ann an leth.

# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
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>
# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
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>

Clasaichean co-theacsail

Cleachd clasaichean co-theacsail gus sreathan bùird no ceallan fa leth a dhath.

Clas Ceann-cinnidh Ceann-cinnidh
Gnìomhach cill cill
Deònach cill cill
Bun-sgoil cill cill
Àrd-sgoile cill cill
Soirbheachas cill cill
Cunnart cill cill
Rabhadh cill cill
Fiosrachadh cill cill
Solas cill cill
Dorch cill cill 
<!-- 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>

Chan eil atharrachaidhean cùl-fhiosrachaidh clàr cunbhalach rim faighinn leis a’ chlàr dhorcha, ge-tà, faodaidh tu goireasan teacsa no cùl-fhiosrachaidh a chleachdadh gus stoidhlichean coltach ris a choileanadh.

# Ceann-cinnidh Ceann-cinnidh
1 cill cill
2 cill cill
3 cill cill
4 cill cill
5 cill cill
6 cill cill
7 cill cill
8 cill cill
9 cill cill 
<!-- 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>
A’ toirt brìgh do theicneòlasan cuideachail

Chan eil a bhith a’ cleachdadh dath gus brìgh a chur ris ach a’ toirt seachad sealladh lèirsinneach, nach tèid a thoirt do luchd-cleachdaidh theicneòlasan taice - leithid leughadairean sgrion. Dèan cinnteach gu bheil fiosrachadh air a chomharrachadh leis an dath an dàrna cuid follaiseach bhon t-susbaint fhèin (me an teacsa faicsinneach), no air a thoirt a-steach tro dhòighean eile, leithid teacsa a bharrachd falaichte leis a’ .sr-onlychlas.

Cruthaich clàran freagairteach le bhith a’ pasgadh gin .tablele .table-responsive{-sm|-md|-lg|-xl}, a’ toirt air a’ bhòrd gluasad gu còmhnard aig gach max-widthbriseadh suas gu (ach gun a bhith a’ toirt a-steach) 576px, 768px, 992px, agus 1120px, fa leth.

Thoir an aire, leis nach eil brobhsairean a’ toirt taic do cheistean co-theacsa raon an-dràsta , bidh sinn ag obair timcheall air crìochan min-agus max-ro -leasachan agus puirt seallaidh le leudan bloighteach (a dh’ fhaodadh tachairt fo chumhachan sònraichte air innealan àrd-dpi, mar eisimpleir) le bhith a’ cleachdadh luachan le mionaideachd nas àirde airson na coimeasan sin. .

Fo-thiotalan

Tha <caption>gnìomh mar cheann airson bòrd. Bidh e a’ cuideachadh luchd-cleachdaidh le leughadairean sgrion gus clàr a lorg agus tuigsinn cò mu dheidhinn a tha e agus co-dhùnadh a bheil iad airson a leughadh.

Liosta de luchd-cleachdaidh
# A’ chiad Mu dheireadh Làimhseachadh
1 Marc Otto @meadh
2 Iacob Thornton @saill
3 Larry an Eòin @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>

Clàran freagairteach

Bidh bùird fhreagarrach a’ leigeil le bùird a bhith air an gluasad gu còmhnard gu furasta. Dèan bòrd sam bith freagairteach thairis air a h-uile sealladh le bhith a’ pasgadh a .tablele .table-responsive. No, tagh an ìre as àirde airson clàr freagairteach a bhith agad le bhith a’ cleachdadh .table-responsive{-sm|-md|-lg|-xl}.

Gearradh dìreach / giorrachadh

Bidh bùird fhreagarrach a’ cleachdadh overflow-y: hidden, a bhios a’ gearradh dheth susbaint sam bith a tha a’ dol seachad air oirean ìosal no àrd a’ bhùird. Gu sònraichte, faodaidh seo clàran-bìdh tuiteam-sìos agus widgets treas-phàrtaidh eile a ghearradh dheth.

An-còmhnaidh freagairteach

Thar gach puing-bhriseadh, cleachd .table-responsiveairson bùird scrollaidh gu còmhnard.

# Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh
1 cill cill cill cill cill cill cill cill cill
2 cill cill cill cill cill cill cill cill cill
3 cill cill cill cill cill cill cill cill cill 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint sònraichte

Cleachd .table-responsive{-sm|-md|-lg|-xl}mar a dh’ fheumar gus bùird freagairteach a chruthachadh suas gu àite brisidh sònraichte. Bhon ìre briseadh sin agus suas, bidh am bòrd gad ghiùlan fhèin gu h-àbhaisteach agus cha bhith e a’ gluasad gu còmhnard.

Dh’ fhaodadh gun nochd na clàran sin briste gus am bi na stoidhlichean freagairteach aca a’ buntainn ri leudan seallaidh sònraichte.

# Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh
1 cill cill cill cill cill cill cill cill
2 cill cill cill cill cill cill cill cill
3 cill cill cill cill cill cill cill cill 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh
1 cill cill cill cill cill cill cill cill
2 cill cill cill cill cill cill cill cill
3 cill cill cill cill cill cill cill cill 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh
1 cill cill cill cill cill cill cill cill
2 cill cill cill cill cill cill cill cill
3 cill cill cill cill cill cill cill cill 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh Ceann-cinnidh
1 cill cill cill cill cill cill cill cill
2 cill cill cill cill cill cill cill cill
3 cill cill cill cill cill cill cill cill 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>