Source

Majedwali

Nyaraka na mifano ya kuchagua kuingia kwa mtindo wa jedwali (kwa kuzingatia matumizi yao ya kawaida katika programu jalizi za JavaScript) na Bootstrap.

Mifano

Kutokana na kuenea kwa matumizi ya majedwali kwenye wijeti za watu wengine kama vile kalenda na vichagua tarehe, tumeunda majedwali yetu kuwa ya kuchagua kuingia . Ongeza tu darasa la msingi .tablekwa any <table>, kisha upanue kwa mitindo maalum au madarasa yetu mbalimbali ya kurekebisha yaliyojumuishwa.

Kwa kutumia lebo ya msingi zaidi ya jedwali, hivi ndivyo .tablemajedwali-msingi yanavyoonekana kwenye Bootstrap. Mitindo yote ya jedwali imerithiwa katika Bootstrap 4 , kumaanisha kuwa jedwali zozote zilizowekwa kwenye kiota zitawekwa kwa mtindo sawa na mzazi.

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @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>

Unaweza pia kubadilisha rangi—kwa maandishi mepesi kwenye mandharinyuma meusi—kwa .table-dark.

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @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>

Chaguzi za kichwa cha meza

Sawa na majedwali na majedwali meusi, tumia madarasa ya kurekebisha .thead-lightau .thead-darkkufanya <thead>s ionekane nyepesi au kijivu iliyokolea.

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @twitter
# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @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>

Safu zenye mistari

Tumia .table-stripedkuongeza zebra-striping kwenye safu mlalo yoyote ya jedwali ndani ya <tbody>.

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @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>
# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @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>

Jedwali la mipaka

Ongeza .table-borderedkwa mipaka pande zote za jedwali na seli.

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @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>
# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @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>

Jedwali lisilo na mipaka

Ongeza .table-borderlesskwa meza bila mipaka.

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @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-borderlesspia inaweza kutumika kwenye meza za giza.

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @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>

Safu zinazoweza kusongeshwa

Ongeza .table-hoverili kuwezesha hali ya kuelea kwenye safu mlalo za jedwali ndani ya <tbody>.

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @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>
# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @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>

Jedwali ndogo

Ongeza .table-smili kufanya meza kushikana zaidi kwa kukata pedi za seli katikati.

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @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>
# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @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>

Madarasa ya muktadha

Tumia madarasa ya muktadha kupaka rangi safu mlalo za jedwali au seli mahususi.

Darasa Kichwa Kichwa
Inayotumika Kiini Kiini
Chaguomsingi Kiini Kiini
Msingi Kiini Kiini
Sekondari Kiini Kiini
Mafanikio Kiini Kiini
Hatari Kiini Kiini
Onyo Kiini Kiini
Habari Kiini Kiini
Mwanga Kiini Kiini
Giza Kiini Kiini 
<!-- 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>

Vibadala vya mandharinyuma vya kawaida vya jedwali havipatikani na jedwali jeusi, hata hivyo, unaweza kutumia maandishi au huduma za usuli kufikia mitindo sawa.

# Kichwa Kichwa
1 Kiini Kiini
2 Kiini Kiini
3 Kiini Kiini
4 Kiini Kiini
5 Kiini Kiini
6 Kiini Kiini
7 Kiini Kiini
8 Kiini Kiini
9 Kiini Kiini 
<!-- 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>
Kuwasilisha maana kwa teknolojia za usaidizi

Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (km maandishi yanayoonekana), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .sr-onlydarasa.

Unda majedwali yanayojibu kwa kukunja yoyote .tablena .table-responsive{-sm|-md|-lg|-xl}, kufanya jedwali kusogeza kwa mlalo katika kila max-widthsehemu ya kukatika hadi (lakini bila kujumuisha) 576px, 768px, 992px, na 1120px, mtawalia.

Kumbuka kuwa kwa kuwa vivinjari havitumii maswali ya muktadha wa anuwai kwa sasa , tunashughulikia vizuizi min-na max-viambishi awali na tovuti za kutazama zenye upana wa sehemu (ambayo inaweza kutokea chini ya hali fulani kwenye vifaa vya juu vya dpi, kwa mfano) kwa kutumia thamani kwa usahihi wa juu kwa ulinganisho huu. .

Manukuu

Hufanya <caption>kazi kama kichwa cha jedwali. Husaidia watumiaji walio na visoma skrini kupata jedwali na kuelewa inahusu nini na kuamua kama wanataka kuisoma.

Orodha ya watumiaji
# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @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>

Majedwali ya mwitikio

Majedwali jibu huruhusu jedwali kusongeshwa kwa mlalo kwa urahisi. Fanya jedwali lolote lijisikie kwenye tovuti zote za kutazama kwa kufunga .tablena .table-responsive. Au, chagua kikomo cha juu zaidi ambacho unaweza kuwa na jedwali la kuitikia hadi kwa kutumia .table-responsive{-sm|-md|-lg|-xl}.

Ukataji/upunguzaji wima

Majedwali jibu hutumia overflow-y: hidden, ambayo huondoa maudhui yoyote ambayo huenda zaidi ya kingo za chini au za juu za jedwali. Hasa, hii inaweza kupunguza menyu kunjuzi na wijeti zingine za wahusika wengine.

Daima msikivu

Katika kila sehemu ya kukatiza, tumia .table-responsivekwa majedwali ya kusogeza kwa mlalo.

# Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa
1 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini
2 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini
3 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint maalum

Tumia .table-responsive{-sm|-md|-lg|-xl}inavyohitajika ili kuunda majedwali jibu hadi sehemu fulani ya kukanusha. Kutoka kwa sehemu hiyo na juu, jedwali litafanya kazi kama kawaida na sio kusogea kwa usawa.

Majedwali haya yanaweza kuonekana yamevunjwa hadi mitindo yao ya kuitikia itumike katika upana mahususi wa kituo cha kutazama.

# Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa
1 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini
2 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini
3 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa
1 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini
2 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini
3 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa
1 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini
2 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini
3 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa Kichwa
1 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini
2 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini
3 Kiini Kiini Kiini Kiini Kiini Kiini Kiini Kiini 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>