Source

Ripanga

Ko nga tuhinga me nga tauira mo te whakauru-whakaahua o nga ripanga (i runga i te nuinga o te whakamahi i roto i nga taputapu JavaScript) me Bootstrap.

Tauira

Na te kaha o te whakamahi i nga ripanga puta noa i nga widget-tuatoru penei i nga maramataka me nga kaikokoti ra, kua hangaia e matou o matou ripanga kia uru mai . Taapiri noa te karaehe turanga .tableki tetahi <table>, katahi ka toro atu me nga momo ritenga me o taatau momo karaehe whakarereke.

Ma te whakamahi i te tohu ripanga tino taketake, koinei te ahua o .tablenga ripanga-a-ringa ki Bootstrap. Ko nga momo ripanga katoa he mea tuku iho ki Bootstrap 4 , ko te tikanga ko nga ripanga kohanga ka rite ki te ahua o te matua.

# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @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>

Ka taea hoki e koe te huri i nga tae—me nga kupu marama i runga i nga papamuri pouri—me te .table-dark.

# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @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>

Nga whiringa upoko ripanga

He rite ki nga tepu me nga tepu pouri, whakamahia nga karaehe whakarereke .thead-light, .thead-darkkia <thead>maamaa ranei te ahua o te hina, te hina pouri ranei.

# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @twitter
# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @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>

Nga rarangi tarekare

Whakamahia .table-stripedki te taapiri i te zebra-striping ki tetahi rarangi ripanga i roto i te <tbody>.

# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @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>
# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @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>

Tepu taitapa

Tāpirihia .table-borderedhe taitapa ki ngā taha katoa o te ripanga me ngā pūtau.

# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @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>
# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @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>

Tepu taitapa kore

Tāpiri .table-borderlessmo te ripanga kore taitapa.

# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @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-borderlessKa taea hoki te whakamahi ki nga tepu pouri.

# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @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>

Nga rarangi whakamarumaru

Tāpirihia .table-hoverkia taea ai te ahua whakaparo ki nga rarangi ripanga i roto i te <tbody>.

# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @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>
# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @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>

Tepu iti

Taapirihia .table-smkia pai ake ai nga teepu ma te tapahi i nga papaa pūtau kia haurua.

# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @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>
# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @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>

Nga karaehe horopaki

Whakamahia nga karaehe horopaki ki te kara i nga rarangi ripanga me nga pūtau takitahi.

Karaehe Upoko Upoko
Hohe Pūtau Pūtau
Taunoa Pūtau Pūtau
Paraimere Pūtau Pūtau
Tuarua Pūtau Pūtau
Angitu Pūtau Pūtau
mōrearea Pūtau Pūtau
Whakatupato Pūtau Pūtau
Nga korero Pūtau Pūtau
Maama Pūtau Pūtau
pouri Pūtau Pūtau 
<!-- 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>

Ko nga rereke papamuri tepu auau kaore i te waatea me te tepu pouri, heoi, ka taea e koe te whakamahi tuhinga, taputapu papamuri ranei hei whakatutuki i nga momo ahua.

# Upoko Upoko
1 Pūtau Pūtau
2 Pūtau Pūtau
3 Pūtau Pūtau
4 Pūtau Pūtau
5 Pūtau Pūtau
6 Pūtau Pūtau
7 Pūtau Pūtau
8 Pūtau Pūtau
9 Pūtau Pūtau 
<!-- 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>
Te kawe i te tikanga ki nga hangarau awhina

Ko te whakamahi i te tae ki te taapiri i te tikanga he tohu tirohanga noa iho, kaore e tukuna ki nga kaiwhakamahi hangarau awhina - penei i nga kaipanui mata. Me mohio kei te kitea nga korero e tohuhia ana e te tae mai i te ihirangi ake (hei tauira, te tuhinga ka kitea), ka whakaurua ranei ma etahi atu huarahi, penei i etahi atu tuhinga huna ki te .sr-onlyakomanga.

Waihangahia nga ripanga urupare ma te takai i tetahi .tableki te .table-responsive{-sm|-md|-lg|-xl}, kia panuku whakapae te ripanga ki ia max-widthwaahi wehenga ki runga (engari kaua e uru) 576px, 768px, 992px, me te 1120px, ia.

Kia mahara, i te mea kaore nga kaitirotiro e tautoko i nga patai horopaki awhe i tenei wa , ka mahi maatau i nga herenga min-me max-nga prefix me nga tauranga tirohanga me nga whanui hautau (ka puta i raro i etahi ahuatanga i runga i nga taputapu Dpi teitei, hei tauira) ma te whakamahi i nga uara e tino tika ana mo enei whakataurite. .

Nga tapanga

He <caption>mahi ano he pane mo te ripanga. Ka awhina i nga kaiwhakamahi me nga kaipanui mata ki te kimi i tetahi ripanga me te mohio he aha te korero me te whakatau mehemea ka hiahia ratou ki te panui.

Rarangi o nga kaiwhakamahi
# Tuatahi Whakamutunga Kakau
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @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>

Tepu whakautu

Ka taea e nga ripanga urupare te panuku whakapae me te ngawari. Whakaritea tetahi ripanga kia aro ki nga tauranga tirohanga katoa ma te takai i te .tableki .table-responsive. Ranei, kowhiria he waahi wehenga morahi hei whakatakoto i te ripanga urupare ma te whakamahi .table-responsive{-sm|-md|-lg|-xl}.

Tope poutū/tapahi

Ka whakamahia e nga ripanga urupare te overflow-y: hidden, ka tope i nga ihirangi kei tua atu i nga tapa o raro, o runga ranei o te ripanga. Ina koa, ka taea e tenei te tango i nga tahua takaiho me etahi atu widget-tuatoru.

He urupare i nga wa katoa

Puta noa i nga waahi pakaru, whakamahia .table-responsivemo nga ripanga panuku whakapae.

# Upoko Upoko Upoko Upoko Upoko Upoko Upoko Upoko Upoko
1 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau
2 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau
3 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Wehenga motuhake

Whakamahia .table-responsive{-sm|-md|-lg|-xl}ina hiahiatia hei hanga i nga ripanga urupare tae noa ki tetahi waahi pakaru. Mai i tera waahi pakaru me te piki ake, ka rite tonu te ahua o te ripanga kaore e panuku whakapae.

Ka pakaru pea enei ripanga kia tae ra ano o raatau momo urupare ki nga whanuitanga tauranga tiro motuhake.

# Upoko Upoko Upoko Upoko Upoko Upoko Upoko Upoko
1 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau
2 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau
3 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Upoko Upoko Upoko Upoko Upoko Upoko Upoko Upoko
1 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau
2 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau
3 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Upoko Upoko Upoko Upoko Upoko Upoko Upoko Upoko
1 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau
2 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau
3 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Upoko Upoko Upoko Upoko Upoko Upoko Upoko Upoko
1 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau
2 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau
3 Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau Pūtau 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>