U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
in English

Miisaska

Dukumeenti iyo tusaaleyaal door-ku-habboon ee jaantusyada (marka la eego isticmaalkooda ku badan ee JavaScript plugins) oo wata Bootstrap.

Dulmar

Sababo la xiriira isticmaalka baahsan ee <table>canaasirta guud ahaan widgets qolo saddexaad sida jadwaladaha iyo taariikhda doorayaasha, miisaska Bootstrap waa la dooranayaa . Ku dar fasalka aasaasiga ah .tablemid kasta <table>, ka dibna ku kordhi fasalladayada wax ka beddelka ikhtiyaarka ah ama qaababka gaarka ah. Dhammaan qaababka miiska laguma dhaxlo Bootstrap, taasoo la micno ah in miisas kasta oo buul ah lagu qaabayn karo si ka madax bannaan waalidka.

Isticmaalka calaamadaynta miiska ugu aasaasiga ah, halkan waa sida .tablemiisaska ku salaysan u eegaan Bootstrap.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @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>

Kala duwanaanshiyaha

Isticmaal fasallada macnaha guud si aad u midabayso miisaska, safafka miiska ama unugyada gaarka ah.

Fasalka Ciwaanka Ciwaanka
Asal ahaan Unug Unug
Asal ahaan Unug Unug
Sare Unug Unug
Guul Unug Unug
Khatarta Unug Unug
Digniin Unug Unug
Xog Unug Unug
Iftiin Unug Unug
Madow Unug Unug
<!-- 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>
U gudbinta macnaha tignoolajiyada caawinta

Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .visually-hiddenfasalka dhexdiisa ku qarsoon.

Miisaska la dajiyay

Safafka la jeexay

Isticmaal .table-stripedsi aad ugu darto xariijimo zebra saf kasta oo ku dhex jira <tbody>.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter
<table class="table table-striped">
  ...
</table>

Fasaladan waxa kale oo lagu dari karaa kala duwanaanshaha miiska:

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter
<table class="table table-dark table-striped">
  ...
</table>
# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter
<table class="table table-success table-striped">
  ...
</table>

Safafka lulsan kara

Ku dar .table-hoversi aad awood ugu yeelatid heerka duleelka ee safafka miiska gudaha a <tbody>.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter
<table class="table table-hover">
  ...
</table>
# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter
<table class="table table-dark table-hover">
  ...
</table>

Safafkan hoverable sidoo kale waxaa lagu dari karaa kala duwanaanshaha xariijimaha:

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter
<table class="table table-striped table-hover">
  ...
</table>

Miisaska firfircoon

Muuji safka miiska ama unugga adiga oo ku daraya .table-activefasal.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @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>
# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @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>

Sidee bay u shaqeeyaan noocyada iyo miisaska lahjadeeyay?

Miisaska lahjadda leh ( safafka xariifsan , safafka la dhufto , iyo miisaska firfircoon ), waxaanu isticmaalnay farsamooyin qaar si aanu saamayntan uga dhigno mid u shaqeeya dhammaan noocyada miiskayada :

  • Waxaan ku bilaabeynaa inaan dejino asalka unugga miiska oo leh --bs-table-bghantidii caadiga ahayd. Dhammaan kala duwanaanshiyaha miiska ayaa dejinaya hantida caadada u ah si ay u midabeeyaan unugyada miiska. Sidan, ma galno dhibaato haddii midabada hufan loo isticmaalo asalka miiska.
  • Kadibna waxaan ku darnaa hadhka sanduuqa gudaha unugyada miiska iyadoo la box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);saarayo korka wax kasta oo la cayimay background-color. Sababtoo ah waxaan isticmaalnaa faafin weyn oo aan lahayn blur, midabku wuxuu noqon doonaa monotone. Maadaama --bs-table-accent-bgaan si caadi ah loo dejin, ma hayno hooska sanduuqa ee caadiga ah.
  • Marka mid .table-striped, .table-hoverama .table-activefasalo lagu daro, --bs-table-accent-bgwaxaa loo dejiyaa midab simi transparent si loo midabeeyo asalka.
  • Kala duwanaanshiyaha miis kasta, waxaan soo saareynaa --bs-table-accent-bgmidab leh farqiga ugu sarreeya iyadoo ku xiran midabkaas. Tusaale ahaan, midabka lahjadda loogu talagalay .table-primarywaa madow halka .table-darkuu leeyahay midab lahjad khafiif ah.
  • Midabada qoraalka iyo xudduudaha si isku mid ah ayaa loo soo saaray, midabkoodana waxaa lagu dhaxlayaa si caadi ah.

Muuqaalka gadaashiisa waxay u egtahay sidan:

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

Xuduudaha miiska

Miisaska xuduudaha

Ku dar .table-borderedsoohdimaha dhammaan dhinacyada miiska iyo unugyada.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter
<table class="table table-bordered">
  ...
</table>

Utility midabka xuduudaha ayaa lagu dari karaa si loo beddelo midabada:

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter
<table class="table table-bordered border-primary">
  ...
</table>

Miisas aan xuduud lahayn

Ku dar .table-borderlessmiis aan xuduud lahayn.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter
<table class="table table-borderless">
  ...
</table>
# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter
<table class="table table-dark table-borderless">
  ...
</table>

Miisaska yaryar

Ku dar .table-smsi aad u samaysid mid .tablekale oo is haysta adiga oo dhammaan unugyada paddingkala badh ka jaraya.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter
<table class="table table-sm">
  ...
</table>
# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter
<table class="table table-dark table-sm">
  ...
</table>

toosan toosan

Unugyada miiska <thead>ayaa had iyo jeer toosan xagga hoose. Unugyada miiska ee ku jira waxay ka <tbody>dhaxlaan toosintooda <table>oo waxay la jaanqaadaan xagga sare si caadi ah. Isticmaal fasalada toosan si aad dib ugu toosiso halka loo baahdo.

Ciwaanka 1 Ciwaanka 2 Ciwaanka 3 Ciwaanka 4
Unuggani waxa uu ka dhaxlaa vertical-align: middle;miiska Unuggani waxa uu ka dhaxlaa vertical-align: middle;miiska Unuggani waxa uu ka dhaxlaa vertical-align: middle;miiska Halkan waxaa ku qoran qaar ka mid ah qoraalka meeleeyaha, loogu talagalay in lagu qaado meel bannaan oo toosan, si loo muujiyo sida toosinta toosan ee unugyada hore.
Unuggani waxa uu ka dhaxlaa vertical-align: bottom;safka miiska Unuggani waxa uu ka dhaxlaa vertical-align: bottom;safka miiska Unuggani waxa uu ka dhaxlaa vertical-align: bottom;safka miiska Halkan waxaa ku qoran qaar ka mid ah qoraalka meeleeyaha, loogu talagalay in lagu qaado meel bannaan oo toosan, si loo muujiyo sida toosinta toosan ee unugyada hore.
Unuggani waxa uu ka dhaxlaa vertical-align: middle;miiska Unuggani waxa uu ka dhaxlaa vertical-align: middle;miiska Unuggani waxa uu la siman yahay xagga sare. Halkan waxaa ku qoran qaar ka mid ah qoraalka meeleeyaha, loogu talagalay in lagu qaado meel bannaan oo toosan, si loo muujiyo sida toosinta toosan ee unugyada hore.
<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>

Buul

Qaababka xudduudaha, qaababka firfircoon, iyo kala duwanaanshaha miiska laguma dhaxlo miisaska buulka leh.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
Madax Madax Madax
A Marka hore Dambe
B Marka hore Dambe
C Marka hore Dambe
3 Larry Shimbirka @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Sida buulku u shaqeeyo

Si aan uga hortagno in qaab kasta uu u daadanayo miisaska buulka leh, waxaan isticmaalnaa isku-duwaha ilmaha ( >) ee CSS-tayada. Maadaama aan u baahanahay in aan bartilmaameedsanno dhammaan tds iyo ths ku jira thead, tbody, iyo tfoot, doorashadayadu waxay u ekaan doontaa mid aad u dheer la'aanteed. Sidan oo kale, waxaan u isticmaalnaa doore muuqaal qurux badan .table > :not(caption) > * > *si aan u beegsano dhammaan tds iyo ths of the .table, laakiin midna miisaska buul ka iman kara.

Ogsoonow in haddii aad ku darto <tr>s sida carruurta tooska ah ee miiska, kuwaas <tr>waxaa lagu duuduubi doonaa si aan <tbody>caadi ahayn, sidaas awgeed xulashadayada waxay u shaqeeyaan sidii loogu talagalay.

Anatomy

Madaxa miiska

Si la mid ah miisaska iyo miisaska mugdiga ah, isticmaal fasallada wax ka beddelka .table-lightama .table-darksi aad <thead>s ugu muuqato iftiin ama cawl madow.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Lugta miiska

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @twitter
Lug Lug Lug Lug
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Qoraallo

Shaqooyin sida <caption>miiska loo socdo. Waxay ka caawisaa isticmaalayaasha akhristayaasha shaashadda si ay u helaan miis oo ay fahmaan waxa ku saabsan oo ay go'aansadaan haddii ay rabaan inay akhriyaan.

Liiska isticmaalayaasha
# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry the Bird @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Waxa kale oo aad ku dhejin kartaa <caption>dusha sare ee miiska .caption-top.

Liiska isticmaalayaasha
# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @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>

Miisaska jawaab celinta

Jadwalka jawaabaha leh ayaa u oggolaanaya miisaska in si sahlan loo rogo si toos ah. Miis kasta ka dhig mid u jawaabaya dhammaan goobaha daawashada adiga oo ku .tableduubaya .table-responsive. Ama, soo qaado meesha ugu sarreysa ee aad ku yeelan karto miis jawaab celin leh adigoo isticmaalaya .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Goyn toosan/goyn

Miisaska ka jawaaba ayaa isticmaala overflow-y: hidden, kaas oo gooya wax kasta oo ka baxsan cidhifyada hoose ama sare ee miiska. Gaar ahaan, tani waxay gooyn kartaa liiska hoos-u-dhaca iyo aaladaha kale ee qolo saddexaad.

Had iyo jeer u jawaaba

Meel kasta oo jaban, isticmaal .table-responsivemiisaska si toosan u rogrogaya.

# Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka
1 Unug Unug Unug Unug Unug Unug Unug Unug Unug
2 Unug Unug Unug Unug Unug Unug Unug Unug Unug
3 Unug Unug Unug Unug Unug Unug Unug Unug Unug
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Burbur gaar ah

Isticmaal .table-responsive{-sm|-md|-lg|-xl|-xxl}hadba sida loogu baahdo si aad u abuurto jadwal jawaab celin ah ilaa meel goyn gaar ah. Laga bilaabo meeshaas jaban iyo kor, miisku si caadi ah ayuu u dhaqmi doonaa oo si siman uma rogrogmi doono.

Jaantusyadani waxa laga yaabaa inay u muuqdaan kuwo jaban ilaa qaababkooda ka jawaabaya lagu dabaqo ballaadhka muuqaalka gaarka ah.

# Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka
1 Unug Unug Unug Unug Unug Unug Unug Unug
2 Unug Unug Unug Unug Unug Unug Unug Unug
3 Unug Unug Unug Unug Unug Unug Unug Unug
# Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka
1 Unug Unug Unug Unug Unug Unug Unug Unug
2 Unug Unug Unug Unug Unug Unug Unug Unug
3 Unug Unug Unug Unug Unug Unug Unug Unug
# Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka
1 Unug Unug Unug Unug Unug Unug Unug Unug
2 Unug Unug Unug Unug Unug Unug Unug Unug
3 Unug Unug Unug Unug Unug Unug Unug Unug
# Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka
1 Unug Unug Unug Unug Unug Unug Unug Unug
2 Unug Unug Unug Unug Unug Unug Unug Unug
3 Unug Unug Unug Unug Unug Unug Unug Unug
# Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka
1 Unug Unug Unug Unug Unug Unug Unug Unug
2 Unug Unug Unug Unug Unug Unug Unug Unug
3 Unug Unug Unug Unug Unug Unug Unug Unug
# Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka
1 Unug Unug Unug Unug Unug Unug Unug Unug
2 Unug Unug Unug Unug Unug Unug Unug Unug
3 Unug Unug Unug Unug Unug Unug Unug Unug
<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

Kala duwanaansho

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

Habaynta

  • Doorsoomayaasha isirka ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) ayaa loo isticmaalaa si loo go'aamiyo kala duwanaanshaha shaxda.
  • Marka laga reebo noocyada miiska iftiinka & mugdiga ah, midabada mawduuca waxaa iftiiminaya $table-bg-leveldoorsoomayaasha.