Svetuka kune chikuru content Svetuka kuenda kudocs navigation
Check
in English

Matafura

Zvinyorwa uye mienzaniso yekusarudza-mukati styling yematafura (zvichipiwa kushandiswa kwavo kwakanyanya muJavaScript plugins) neBootstrap.

Overview

Nekuda kwekushandiswa kwakapararira <table>kwezvinhu mukati mewechitatu-bato majeti semakarenda nevanotora mazuva, matafura eBootstrap ari opt-in . Wedzera iyo base kirasi .tablekune chero <table>, wobva wawedzera neyedu yekusarudzika modifier makirasi kana tsika masitayipi. Ese masitayera etafura haana kugarwa nhaka muBootstrap, zvichireva kuti chero matafura akaiswa anogona kunyorwa akazvimirira kubva kumubereki.

Uchishandisa yakanyanya kukosha tafura markup, heino maitiro .table-akavakirwa matafura anotarisa muBootstrap.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @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>

Variants

Shandisa makirasi emamiriro ekunze kune mavara matafura, mitsara yematafura kana maseru ega.

Kirasi Heading Heading
Default Sero Sero
Primary Sero Sero
Secondary Sero Sero
Success Sero Sero
Danger Sero Sero
Yambiro Sero Sero
Info Sero Sero
Chiedza Sero Sero
Rima Sero Sero
<!-- 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>
Kuendesa zvinoreva kunobatsira matekinoroji

Kushandisa ruvara kuwedzera zvinoreva kunongopa chiratidzo chekuona, icho chisingazopirwe kune vashandisi vetekinoroji yekubatsira - senge zvidzitiro zvekuverenga. Ita shuwa kuti ruzivo rwunoratidzwa neruvara rwuri pachena kubva pane zvirimo (semuzvinyorwa zvinooneka), kana kuti zvinosanganisirwa neimwe nzira, senge mamwe mavara akavigwa .visually-hiddennekirasi.

Accented tables

Mitsara mitsetse

Shandisa .table-stripedkuwedzera zebra-striping kune chero mutsara wetafura mukati me <tbody>.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-striped">
  ...
</table>

Mitsetse mbiru

Shandisa .table-striped-columnskuwedzera zebra-striping kune chero tafura yetafura.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-striped-columns">
  ...
</table>

Aya makirasi anogona zvakare kuwedzerwa kune akasiyana tafura:

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-dark table-striped">
  ...
</table>
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-dark table-striped-columns">
  ...
</table>
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-success table-striped">
  ...
</table>
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-success table-striped-columns">
  ...
</table>

Hoverable mitsara

Wedzera .table-hoverkugonesa hover state patafura mitsara mukati me <tbody>.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-hover">
  ...
</table>
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-dark table-hover">
  ...
</table>

Iyi mitsara inosimudzwa inogona zvakare kusanganiswa nemitsara ine mitsetse yakasiyana:

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-striped table-hover">
  ...
</table>

Matafura anoshanda

Simbisa mutsara wetafura kana sero nekuwedzera .table-activekirasi.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @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>
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @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>

Iwo akasiyana uye matafura ane accented anoshanda sei?

Pamatafura ane accented ( mitsetse mitsetse , makoramu ane mitsetse , mitsara inosimudzwa , uye matafura anoshanda ), takashandisa mamwe matekiniki kuita kuti mhedzisiro iyi ishande kune edu ese akasiyana tafura :

  • Isu tinotanga nekuisa kumashure kwesero retafura ine --bs-table-bgtsika pfuma. Ese akasiyana tafura anozoisa iyo tsika chivakwa kuti ipende masero etafura. Nenzira iyi, isu hatipinde mudambudziko kana semi-pachena mavara akashandiswa semashure etafura.
  • Ipapo isu tinowedzera inset bhokisi mumvuri patafura maseru box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);nekuisa pamusoro pechero yakatsanangurwa background-color. Nekuti isu tinoshandisa kupararira kwakakura uye pasina blur, ruvara ruchava monotone. Sezvo --bs-table-accent-bgisina kusetwa nekusarudzika, isu hatina default bhokisi mumvuri.
  • Kana .table-striped, .table-striped-columns, .table-hoverkana .table-activemakirasi awedzerwa, iyo --bs-table-accent-bginoiswa kune semitransparent ruvara kuti ipende kumashure.
  • Patafura yega yega mutsauko, isu tinogadzira --bs-table-accent-bgruvara rune musiyano wepamusoro zvichienderana nemuvara iwoyo. Semuenzaniso, iyo accent color .table-primaryyeyakasviba nepo .table-darkiine ruvara rwakareruka rwemataurirwo.
  • Mavara uye mavara emuganhu anogadzirwa nenzira imwe chete, uye mavara avo anogarwa nhaka nekusarudzika.

Seri kwezviitiko zvinoita seizvi:

@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));
    $border-color: mix($color, $background, percentage($table-border-factor));

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

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Tafura miganhu

Bordered tables

Wedzera .table-borderedkune miganhu kumativi ese etafura uye maseru.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-bordered">
  ...
</table>

Border color utilities inogona kuwedzerwa kuchinja mavara:

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-bordered border-primary">
  ...
</table>

Matafura asina miganhu

Wedzera .table-borderlesskune tafura isina miganhu.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-borderless">
  ...
</table>
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-dark table-borderless">
  ...
</table>

Matafura madiki

Wedzera .table-smkuita chero .tablecompact nekucheka yese sero paddingmuhafu.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-sm">
  ...
</table>
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-dark table-sm">
  ...
</table>

Tafura mapoka emapoka

Wedzera muganhu wakakora, wakasviba pakati pemapoka ematafura— <thead>, <tbody>, uye <tfoot>-ne .table-group-divider. Gadzirisa iyo ruvara nekushandura iyo border-top-color(yatisiri kupa ikozvino kirasi yekushandisa panguva ino).

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
html
<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 class="table-group-divider">
    <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>

Vertical alignment

Tafura masero e <thead>anogara akatwasuka anoenderana nepasi. Tafura maseru ari <tbody>kugara nhaka kurongeka kwavo kubva <table>uye anorongeka kumusoro nekukasira. Shandisa makirasi ekuenzanisa akatwasuka kuti uenzanise pazvinoda.

Musoro 1 Musoro 2 Musoro 3 Musoro wechi4
Sero iri rinogara nhaka vertical-align: middle;kubva patafura Sero iri rinogara nhaka vertical-align: middle;kubva patafura Sero iri rinogara nhaka vertical-align: middle;kubva patafura Aya heano mamwe mavara echibatiso, ane chinangwa chekutora yakati wandei nzvimbo yakatwasuka, kuratidza kuti kurongeka kwakatwasuka kunoshanda sei mumaseru apfuura.
Sero iri rinogara nhaka vertical-align: bottom;kubva pamutsetse wetafura Sero iri rinogara nhaka vertical-align: bottom;kubva pamutsetse wetafura Sero iri rinogara nhaka vertical-align: bottom;kubva pamutsetse wetafura Aya heano mamwe mavara echibatiso, ane chinangwa chekutora yakati wandei nzvimbo yakatwasuka, kuratidza kuti kurongeka kwakatwasuka kunoshanda sei mumaseru apfuura.
Sero iri rinogara nhaka vertical-align: middle;kubva patafura Sero iri rinogara nhaka vertical-align: middle;kubva patafura Sero iri rinoenderana nepamusoro. Aya heano mamwe mavara echibatiso, ane chinangwa chekutora yakati wandei nzvimbo yakatwasuka, kuratidza kuti kurongeka kwakatwasuka kunoshanda sei mumaseru apfuura.
<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

Zvitaera zvemuganho, masitayera anoshanda, uye akasiyana etafura haagarwe nhaka nematafura anested.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
Header Header Header
A Chekutanga Pakupedzisira
B Chekutanga Pakupedzisira
C Chekutanga Pakupedzisira
3 Larry Shiri @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Mashandire anoita dendere

Kuti tidzivise chero masitayera kubva pakudonha kuenda kumatafura akaiswa madendere, tinoshandisa musanganiswa wemwana ( >) selector muCSS yedu. Sezvo isu tichida kunanga ese tds uye ths mu thead, tbody, uye tfoot, yedu yatinosarudza inotaridzika kureba isina iyo. Saka nekudaro, isu tinoshandisa inotaridzika isinganzwisisike .table > :not(caption) > * > *inosarudzika kunanga ese tds uye ths eiyo .table, asi hapana kana imwe yeanogona nested matafura.

Ziva kuti kana iwe ukawedzera <tr>s sevana vakananga vetafura, avo <tr>vanozoputirwa mukati <tbody>nekusarudzika, nekudaro kuita kuti vateki vedu vashande sezvavakaronga.

Anatomy

Musoro wetafura

Zvakafanana nematafura nematafura akasviba, shandisa makirasi ekugadzirisa .table-lightkana .table-darkkuita kuti <thead>s iite seyakajeka kana rima grey.

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Tafura tsoka

# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @twitter
Footer Footer Footer Footer
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Mashoko

A <caption>anoshanda semusoro wetafura. Inobatsira vashandisi vane screen readers kuti vawane tafura uye vanzwisise kuti ndeyei uye vosarudza kana vachida kuiverenga.

Rondedzero yevashandisi
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Iwe unogona zvakare kuisa iyo <caption>pamusoro petafura ne .caption-top.

Rondedzero yevashandisi
# Chekutanga Pakupedzisira Bata
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @twitter
html
<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>

Matafura anopindura

Matafura anopindura anobvumira matafura kuti atenderedzwe akachinjika zviri nyore. Ita chero tafura ipindure pamativi ese ekuona nekuputira .tablene .table-responsive. Kana, tora nzvimbo yakakura yekutyora iyo yekuve netafura inopindura kusvika nekushandisa .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertical clipping/truncation

Matafura anopindura anoshandisa overflow-y: hidden, ayo anobvisa chero zvirimo zvinodarika kuzasi kana kumucheto kwetafura. Kunyanya, izvi zvinogona kudimbura mamenu ekudonha uye mamwe echitatu-bato majeti.

Nguva dzose inopindura

Pakati pese pese pese, shandisa .table-responsivekune yakachinjika kupuruzira matafura.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Sero Sero Sero Sero Sero Sero Sero Sero Sero
2 Sero Sero Sero Sero Sero Sero Sero Sero Sero
3 Sero Sero Sero Sero Sero Sero Sero Sero Sero
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint chaiyo

Shandisa .table-responsive{-sm|-md|-lg|-xl|-xxl}sezvinodiwa kugadzira matafura anopindura kusvika kune imwe nzvimbo yekutyora. Kubva pane iyo breakpoint uye kumusoro, tafura ichaita zvakajairwa uye kwete kupururudza yakatwasuka.

Aya matafura anogona kuita seakatyoka kudzamara masitayipi avo ekupindura ashanda pane yakatarwa viewport wides.

# Heading Heading Heading Heading Heading Heading Heading Heading
1 Sero Sero Sero Sero Sero Sero Sero Sero
2 Sero Sero Sero Sero Sero Sero Sero Sero
3 Sero Sero Sero Sero Sero Sero Sero Sero
# Heading Heading Heading Heading Heading Heading Heading Heading
1 Sero Sero Sero Sero Sero Sero Sero Sero
2 Sero Sero Sero Sero Sero Sero Sero Sero
3 Sero Sero Sero Sero Sero Sero Sero Sero
# Heading Heading Heading Heading Heading Heading Heading Heading
1 Sero Sero Sero Sero Sero Sero Sero Sero
2 Sero Sero Sero Sero Sero Sero Sero Sero
3 Sero Sero Sero Sero Sero Sero Sero Sero
# Heading Heading Heading Heading Heading Heading Heading Heading
1 Sero Sero Sero Sero Sero Sero Sero Sero
2 Sero Sero Sero Sero Sero Sero Sero Sero
3 Sero Sero Sero Sero Sero Sero Sero Sero
# Heading Heading Heading Heading Heading Heading Heading Heading
1 Sero Sero Sero Sero Sero Sero Sero Sero
2 Sero Sero Sero Sero Sero Sero Sero Sero
3 Sero Sero Sero Sero Sero Sero Sero Sero
# Heading Heading Heading Heading Heading Heading Heading Heading
1 Sero Sero Sero Sero Sero Sero Sero Sero
2 Sero Sero Sero Sero Sero Sero Sero Sero
3 Sero Sero Sero Sero Sero Sero Sero Sero
<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

Variables

$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:                 var(--#{$prefix}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:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

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

$table-bg-scale:              -80%;

Loop

$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,
);

Customizing

  • The factor variables ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) inoshandiswa kuona musiyano mumatafura akasiyana.
  • Kunze kwechiedza & nerima tafura akasiyana, mavara etime anorerutswa $table-bg-scalenekusiyana.