in English

Matafura

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

Pa peji ino

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>

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-success table-striped">
  ...
</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 neiyo 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 , mitsara inosimudzwa , uye matafura anoshanda ), takashandisa mamwe matekiniki ekuti mhedzisiro iyi ishande kune edu ese akasiyana tafura :

Isu tinotanga nekuisa kumashure kwesero retafura ine --bs-table-bgtsika pfuma. Ese akasiyana etafura anobva agadzika chivakwa ichocho kuti chipenye 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-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));

    --#{$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));
  }
}

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>

Vertical alignment

Tafura maseru e <thead>anogara akamira akachinjika pasi. Tafura maseru ari <tbody>kugara nhaka kurongeka kwavo kubva <table>uye anoenzanirana 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 nzvimbo yakati chechetere, 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 nzvimbo yakati chechetere, 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 nzvimbo yakati chechetere, 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

Mark

Otto

@mdo

Header	Header	Header
A	Chekutanga	Pakupedzisira
B	Chekutanga	Pakupedzisira
C	Chekutanga	Pakupedzisira

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

<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:                 $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%;

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