Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
in English

Majedwali

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

Muhtasari

Kwa sababu ya kuenea kwa matumizi ya <table>vipengee kwenye wijeti za watu wengine kama vile kalenda na vichagua tarehe, majedwali ya Bootstrap ni ya kuchagua kuingia . Ongeza darasa la msingi .tablekwa any <table>, kisha upanue na madarasa yetu ya hiari ya kurekebisha au mitindo maalum. Mitindo yote ya jedwali haijarithiwa katika Bootstrap, kumaanisha kuwa jedwali zozote zilizowekwa kwenye kiota zinaweza kutengenezwa bila mpangilio kutoka kwa mzazi.

Kwa kutumia lebo ya msingi zaidi ya jedwali, hivi ndivyo .tablemajedwali-msingi yanavyoonekana kwenye Bootstrap.

# 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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Lahaja

Tumia madarasa ya muktadha kwa majedwali ya rangi, safu mlalo za jedwali au seli mahususi.

Darasa Kichwa Kichwa
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 tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>
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 .visually-hiddendarasa.

Jedwali zenye lafudhi

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">
  ...
</table>

Madarasa haya pia yanaweza kuongezwa kwa anuwai za jedwali:

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter
<table class="table table-dark table-striped">
  ...
</table>
# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter
<table class="table table-success table-striped">
  ...
</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">
  ...
</table>
# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter
<table class="table table-dark table-hover">
  ...
</table>

Safu hizi zinazoweza kusongeshwa pia zinaweza kuunganishwa na lahaja yenye milia:

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter
<table class="table table-striped table-hover">
  ...
</table>

Meza zinazotumika

Angazia safu mlalo ya jedwali au kisanduku kwa kuongeza .table-activedarasa.

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">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-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Je, lahaja na jedwali zenye lafudhi hufanyaje kazi?

Kwa majedwali yenye lafudhi ( safu mlalo zenye mistari , safu mlalo zinazoweza kuelea , na jedwali zinazotumika ), tulitumia baadhi ya mbinu kufanya madoido haya yafanye kazi kwa anuwai zetu zote za jedwali :

  • Tunaanza kwa kuweka usuli wa seli ya jedwali na --bs-table-bgmali maalum. Vibadala vyote vya jedwali kisha weka sifa hiyo maalum ili kupaka rangi seli za jedwali. Kwa njia hii, hatutaingia kwenye matatizo ikiwa rangi zisizo na uwazi zitatumika kama mandharinyuma ya jedwali.
  • Kisha tunaongeza kivuli cha kisanduku cha kuingiza kwenye seli za jedwali na box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);kuweka safu juu ya yoyote iliyobainishwa background-color. Kwa sababu tunatumia uenezi mkubwa na hakuna ukungu, rangi itakuwa monotone. Kwa kuwa --bs-table-accent-bghaijawekwa kwa chaguo-msingi, hatuna kivuli cha kisanduku chaguo-msingi.
  • Wakati aidha .table-striped, .table-hoverau .table-activemadarasa yameongezwa, --bs-table-accent-bghuwekwa kwa rangi isiyo na uwazi ili kupaka mandharinyuma.
  • Kwa kila lahaja ya jedwali, tunatoa --bs-table-accent-bgrangi yenye utofauti wa juu zaidi kulingana na rangi hiyo. Kwa mfano, rangi ya lafudhi .table-primaryni nyeusi zaidi wakati .table-darkina rangi nyepesi ya lafudhi.
  • Nakala na rangi za mpaka zinazalishwa kwa njia ile ile, na rangi zao hurithiwa kwa chaguo-msingi.

Nyuma ya pazia inaonekana kama hii:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Mipaka ya meza

Meza za 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">
  ...
</table>

Huduma za rangi ya mpaka zinaweza kuongezwa ili kubadilisha rangi:

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter
<table class="table table-bordered border-primary">
  ...
</table>

Jedwali bila 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">
  ...
</table>
# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter
<table class="table table-dark table-borderless">
  ...
</table>

Meza ndogo

Ongeza .table-smili kushikana .tablezaidi kwa kukata seli zote paddingkatikati.

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter
<table class="table table-sm">
  ...
</table>
# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter
<table class="table table-dark table-sm">
  ...
</table>

Mpangilio wa wima

Seli za jedwali za <thead>kila mara hupangiliwa wima hadi chini. Seli za jedwali katika <tbody>hurithi upangaji wao kutoka <table>na hupangwa hadi juu kwa chaguo-msingi. Tumia madarasa ya kupanga wima ili kupanga upya inapohitajika.

Kichwa 1 Kichwa cha 2 Kichwa cha 3 Kichwa cha 4
Seli hii hurithi vertical-align: middle;kutoka kwa jedwali Seli hii hurithi vertical-align: middle;kutoka kwa jedwali Seli hii hurithi vertical-align: middle;kutoka kwa jedwali Haya hapa ni maandishi ya kishikilia nafasi, yanayokusudiwa kuchukua nafasi wima kidogo, ili kuonyesha jinsi upangaji wima unavyofanya kazi katika visanduku vilivyotangulia.
Seli hii hurithi vertical-align: bottom;kutoka kwa safu mlalo ya jedwali Seli hii hurithi vertical-align: bottom;kutoka kwa safu mlalo ya jedwali Seli hii hurithi vertical-align: bottom;kutoka kwa safu mlalo ya jedwali Haya hapa ni maandishi ya kishikilia nafasi, yanayokusudiwa kuchukua nafasi wima kidogo, ili kuonyesha jinsi upangaji wima unavyofanya kazi katika visanduku vilivyotangulia.
Seli hii hurithi vertical-align: middle;kutoka kwa jedwali Seli hii hurithi vertical-align: middle;kutoka kwa jedwali Seli hii imepangwa hadi juu. Haya hapa ni maandishi ya kishikilia nafasi, yanayokusudiwa kuchukua nafasi wima kidogo, ili kuonyesha jinsi upangaji wima unavyofanya kazi katika visanduku vilivyotangulia.
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Nesting

Mitindo ya mipaka, mitindo inayotumika, na anuwai za jedwali hazirithiwi na majedwali yaliyowekwa.

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
Kijajuu Kijajuu Kijajuu
A Kwanza Mwisho
B Kwanza Mwisho
C Kwanza Mwisho
3 Larry ndege @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Jinsi kiota kinavyofanya kazi

Ili kuzuia mitindo yoyote isivuje hadi kwa majedwali yaliyowekwa, tunatumia >kichaguzi cha mtoto ( ) katika CSS yetu. Kwa kuwa tunahitaji kulenga tds na ths zote kwenye thead, tbody, na tfoot, kiteuzi chetu kitaonekana kirefu sana bila hiyo. Kwa hivyo, tunatumia kiteuzi cha sura isiyo ya kawaida .table > :not(caption) > * > *kulenga tds na ths zote za .table, lakini hakuna jedwali zozote zinazowezekana.

Kumbuka kuwa ukiongeza <tr>s kama watoto wa moja kwa moja wa jedwali, hizo <tr>zitafungwa <tbody>kwa chaguo-msingi, na hivyo kufanya wateuzi wetu kufanya kazi kama ilivyokusudiwa.

Anatomia

Kichwa cha meza

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

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Mguu wa meza

# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @twitter
Kijachini Kijachini Kijachini Kijachini
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

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 table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Unaweza pia kuweka <caption>juu ya meza na .caption-top.

Orodha ya watumiaji
# Kwanza Mwisho Kushughulikia
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @twitter
<table class="table caption-top">
  <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 a.table na .table-responsive. Au, chagua kikomo cha juu zaidi ambacho unaweza kuwa na jedwali la kuitikia hadi kwa kutumia .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Ukataji/upunguzaji wima

Jedwali jibu hufanya matumizioverflow-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|-xxl} inavyohitajika ili kuunda majedwali jibu hadi sehemu fulani ya kukanusha. Kutoka kwa sehemu hiyo ya mapumziko na juu, jedwali litafanya kazi kama kawaida na sio kusonga 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
# 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
# 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
# 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
# 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
# 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">
  <table class="table">
    ...
  </table>
</div>

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

<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>

Sass

Vigezo

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Kitanzi

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Kubinafsisha

  • Vigezo vya sababu ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) hutumika kubainisha utofautishaji katika vibadala vya jedwali.
  • Kando na vibadala vya jedwali jeusi na jeusi, rangi za mandhari hurahisishwa na $table-bg-levelutofauti.