Esasy mazmuna geçiň Docs nawigasiýasyna geçiň
in English

Tablisa

Bootstrap bilen tablisalary optiki düzmek üçin resminamalar we mysallar (JavaScript plaginlerinde giňden ulanylyşyny göz öňünde tutup).

Bu sahypada

Gysgaça syn

Senenamalar we senäni saýlaýjylar ýaly üçünji tarap widjetlerinde elementleriň giňden ulanylmagy sebäpli “ Bootstrap” -yň<table> tablisalary açyk . Esasy synpy islendik birine goşuň , soňra goşmaça üýtgediji synplarymyz ýa-da adaty stillerimiz bilen giňeldiň. Stol stilleriniň hemmesi “Bootstrap” -da miras galanok, ýagny islendik höwürtgelenen stollary ene-atadan garaşsyz görnüşde düzüp bolýar..table<table>

Iň esasy tablisa belligini ulanyp, “ .tableBootstrap” -da esasly tablisalaryň görnüşi.

# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @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>

Görnüşler

Reňk tablisalaryna, tablisa hatarlaryna ýa-da aýratyn öýjüklere kontekst sapaklaryny ulanyň.

Synp Sözbaşy Sözbaşy
Bellenen Öýjük Öýjük
Başlangyç Öýjük Öýjük
Ikinji Öýjük Öýjük
Üstünlik Öýjük Öýjük
Howp Öýjük Öýjük
Duýduryş Öýjük Öýjük
Maglumat Öýjük Öýjük
Lightagtylyk Öýjük Öýjük
Garaňky Öýjük Öýjük 
<!-- 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>
Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .visually-hiddensynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

Maksatly tablisalar

Zolakly hatarlar

.table-stripedIçindäki islendik stol hataryna zebra-zolak goşmak üçin ulanyň <tbody>.

# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter 
<table class="table table-striped">
  ...
</table>

Bu sapaklary tablisanyň wariantlaryna hem goşup bolýar:

# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter 
<table class="table table-dark table-striped">
  ...
</table>
# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter 
<table class="table table-success table-striped">
  ...
</table>

Hereketli hatarlar

.table-hoverA içindäki stol hatarlarynda aýlaw ýagdaýyny açmak üçin goşuň <tbody>.

# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter 
<table class="table table-hover">
  ...
</table>
# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter 
<table class="table table-dark table-hover">
  ...
</table>

Bu aýlawly hatarlary zolakly görnüş bilen hem birleşdirip bolar:

# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter 
<table class="table table-striped table-hover">
  ...
</table>

Işjeň tablisalar

.table-activeSynp goşup, stoluň hataryny ýa-da öýjügini tapawutlandyryň .

# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @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>
# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @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>

Görnüşler we aksentlenen tablisalar nähili işleýär?

Ajaýyp tablisalar ( zolakly hatarlar , hereket edip boljak hatarlar we işjeň tablisalar ) üçin bu effektleri stoluň ähli görnüşleri üçin işlemek üçin käbir usullary ulandyk :

  • Customörite häsiýetli stol öýjüginiň fonuny bellemekden başlaýarys --bs-table-bg. Tablehli tablisanyň wariantlary, tablisanyň öýjüklerini reňklemek üçin şol aýratyn häsiýeti düzýärler. Şeýlelik bilen, ýarym dury reňkler stoluň fonunda ulanylsa, kynçylyk çekmeris.
  • box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);Soňra, görkezilenleriň üstünde gatlak bilen stol öýjüklerine goşma guty kölegesini goşýarys background-color. Hugegirt ýaýramagy ulanýarys we bulaşyklyk ýok, reňk monoton bolar. Düzgüne --bs-table-accent-bggörä düzülmänsoň, deslapky guty kölegesi ýok.
  • Haçan-da ýa .table-striped- .table-hoverda .table-activesynplar goşulanda, --bs-table-accent-bgfon reňklemek üçin ýarym açyk reňkde bolýar.
  • Her tablisanyň görnüşi üçin, --bs-table-accent-bgşol reňke baglylykda iň ýokary kontrastly reňk döredýäris. Mysal üçin, aksentiň reňki .table-primaryhas .table-darkaksent reňkine eýe bolýar.
  • Tekst we serhet reňkleri birmeňzeş döredilýär we reňkleri adaty ýagdaýda miras galypdyr.

Sahnanyň aňyrsynda şeýle görünýär:

@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));
  }
}

Stol araçäkleri

Serhet tablisalary

.table-borderedStoluň we öýjükleriň hemme tarapyna serhetler goşuň .

# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter 
<table class="table table-bordered">
  ...
</table>

Reňkleri üýtgetmek üçin serhet reňk enjamlaryny goşup bolýar:

# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter 
<table class="table table-bordered border-primary">
  ...
</table>

Serhetsiz tablisalar

.table-borderlessSerhetsiz stol üçin goşuň .

# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter 
<table class="table table-borderless">
  ...
</table>
# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter 
<table class="table table-dark table-borderless">
  ...
</table>

Ownuk stollar

Cellhli öýjügi ýarym kesip, has ykjam .table-smetmek üçin goşuň ..tablepadding

# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter 
<table class="table table-sm">
  ...
</table>
# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter 
<table class="table table-dark table-sm">
  ...
</table>

Dik tekizlemek

Stol öýjükleri <thead>elmydama aşagyna dikligine deňleşdirilýär. Stol öýjükleri <tbody>deňleşdirilişini miras alýarlar <table>we adaty ýagdaýda ýokarsyna deňleşdirilýär. Zerur ýerlerde täzeden deňleşdirmek üçin dik tekizlemek synplaryny ulanyň .

1-nji sözbaşy 2-nji sözbaşy 3-nji sözbaşy 4-nji sözbaşy
Bu öýjük vertical-align: middle;tablisadan miras alýar Bu öýjük vertical-align: middle;tablisadan miras alýar Bu öýjük vertical-align: middle;tablisadan miras alýar Bu ýerde dikligine deňleşmegiň öňki öýjüklerde nähili işleýändigini görkezmek üçin birneme dik ýer tutmagy maksat edinýän käbir ýer eýesi teksti bar.
Bu öýjük vertical-align: bottom;tablisanyň hataryndan miras alýar Bu öýjük vertical-align: bottom;tablisanyň hataryndan miras alýar Bu öýjük vertical-align: bottom;tablisanyň hataryndan miras alýar Bu ýerde dikligine deňleşmegiň öňki öýjüklerde nähili işleýändigini görkezmek üçin birneme dik ýer tutmagy maksat edinýän käbir ýer eýesi teksti bar.
Bu öýjük vertical-align: middle;tablisadan miras alýar Bu öýjük vertical-align: middle;tablisadan miras alýar Bu öýjük ýokarsyna deňleşdirildi. Bu ýerde dikligine deňleşmegiň öňki öýjüklerde nähili işleýändigini görkezmek üçin birneme dik ýer tutmagy maksat edinýän käbir ýer eýesi teksti bar. 
<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>

Höwürtge

Serhet stilleri, işjeň stiller we tablisa görnüşleri öýlenen tablisalara miras galanok.

# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
Sözbaşy Sözbaşy Sözbaşy
A. Ilki bilen Iň soňky
B. Ilki bilen Iň soňky
C. Ilki bilen Iň soňky
3 Larry guş @twitter 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Höwürtge nähili işleýär

Haýsydyr bir stiliň ýerleşdirilen stollara syzmazlygy üçin >CSS-de çaga kombinatoryny () saýlaýjysyny ulanýarys. tdInhli s-leri thnyşana almalydygymyz sebäpli thead, saýlaýjymyz onsuz gaty uzyn görüner. Şeýle bolansoň, ähli s- leri nyşana almak üçin gaty üýtgeşik görünýän saýlaýjyny ulanýarys , ýöne hiç hili potensial ýerleşdirilen tablisa ýok.tbodytfoot.table > :not(caption) > * > *tdth.table

<tr>Stoluň gönüden-göni çagalary hökmünde s goşsaňyz , deslapky <tr>görnüşde <tbody>örtüljekdigini, şeýlelik bilen saýlaýjylarymyzyň isleýşi ýaly işlemegine üns beriň.

Anatomiýa

Stoluň başy

Stollara we gara stollara meňzeş ýaly, üýtgediji synplary ulanyň .table-lightýa-da .table-darkaçyk <thead>ýa-da goýy çal reňkde görüniň.

# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry guş @twitter 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry guş @twitter 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Stol aýagy

# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry guş @twitter
Aşakdaky ýazgy Aşakdaky ýazgy Aşakdaky ýazgy Aşakdaky ýazgy 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Tionsazgylar

Tablisa sözbaşy ýaly <caption>funksiýalar. Ekran okyjylary bolan ulanyjylara tablisa tapmaga we onuň nämedigine düşünmäge we ony okamak isleýändiklerine karar bermäge kömek edýär.

Ulanyjylaryň sanawy
# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry the guş @twitter 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Şeýle hem <caption>, stoluň ýokarsyna goýup bilersiňiz .caption-top.

Ulanyjylaryň sanawy
# Ilki bilen Iň soňky Işlediň
1 Bellik Otto @mdo
2 Jacobakup Thornton @fat
3 Larry guş @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>

Jogap beriji tablisalar

Jogap beriji tablisalar tablisalary aňsatlyk bilen keseligine aýlamaga mümkinçilik berýär. Viewhli görnüşdäki tablisa bilen .tablegaplaň .table-responsive. Ora-da ulanyp, jogap tablisasyna eýe boljak iň ýokary nokady saýlaň .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Dik kesmek / kesmek

Jogapkärçilikli tablisalar ulanylýar, overflow-y: hiddentablisanyň aşaky ýa-da ýokarky gyralaryndan çykýan islendik mazmuny kesýär. Hususan-da, bu açylýan menýulary we beýleki üçünji tarap widjetlerini kesip biler.

Elmydama jogap beriň

Her nokadyň üstünden .table-responsivekeseligine aýlamak tablisalaryny ulanyň.

# Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy
1 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
2 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
3 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Bölüniş nokady

Ulany.table-responsive{-sm|-md|-lg|-xl|-xxl}Belli bir nokada çenli täsirli tablisalary döretmek üçin zerur bolandaŞol nokatdan ýokaryk, tablisa kadaly hereket eder we keseligine aýlanmaz.

Bu tablisalar, duýgur görnüşleri belli bir görnüş giňliginde ulanylýança döwülen ýaly bolup biler.

# Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy
1 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
2 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
3 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
# Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy
1 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
2 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
3 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
# Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy
1 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
2 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
3 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
# Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy
1 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
2 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
3 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
# Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy
1 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
2 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
3 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
# Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy Sözbaşy
1 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
2 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük
3 Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük Öýjük 
<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

Üýtgeýjiler

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

Aýlaw

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

Düzeltmek

  • Faktor üýtgeýjileri ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) tablisanyň görnüşleriniň arasyndaky tapawudy kesgitlemek üçin ulanylýar.
  • $table-bg-levelLightagty we garaňky stol görnüşlerinden başga-da, üýtgeýänler tarapyndan mowzuk reňkleri ýeňilleşdirilýär .