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>

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 port-seallaidh 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-briseadh, 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.

#	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh
1	cill	cill	cill	cill	cill
2	cill	cill	cill	cill	cill
3	cill	cill	cill	cill	cill

#	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh
1	cill	cill	cill	cill	cill
2	cill	cill	cill	cill	cill
3	cill	cill	cill	cill	cill

#	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh
1	cill	cill	cill	cill	cill
2	cill	cill	cill	cill	cill
3	cill	cill	cill	cill	cill

#	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh
1	cill	cill	cill	cill	cill
2	cill	cill	cill	cill	cill
3	cill	cill	cill	cill	cill

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