اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړ شئ
in English

میزونه

د بوټسټریپ سره د میزونو د غوره کولو سټایل کولو لپاره اسناد او مثالونه (د دوی په جاواسکریپټ پلګ انونو کې د دوی پراخه کارول ورکړل شوي).

کتنه

د دریمې ډلې ویجټونو لکه کیلنڈرونو او نیټې غوره کونکو کې د عناصرو پراخه کارونې له امله <table>، د بوټسټریپ میزونه غوره شوي . .tableهر ته بیس کلاس اضافه کړئ <table>، بیا زموږ د اختیاري ترمیم کونکي ټولګیو یا دودیز سټایلونو سره پراخه کړئ. ټول جدول سټایلونه په بوټسټریپ کې میراث ندي ، پدې معنی چې هر ځړول شوي میزونه د مور او پلار څخه خپلواک سټایل کیدی شي.

د خورا لومړني جدول مارک اپ په کارولو سره ، دلته په .tableبوټسټریپ کې د میزونو پراساس څنګه ښکاري.

# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<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>

متغیرات

د میزونو، میز قطارونو یا انفرادي حجرو رنګ کولو لپاره متناسب ټولګي وکاروئ.

ټولګي سرلیک سرلیک
ډیفالټ حجره حجره
لومړني حجره حجره
ثانوي حجره حجره
بریالیتوب حجره حجره
خطر حجره حجره
خبرتیا حجره حجره
معلومات حجره حجره
رڼا حجره حجره
تیاره حجره حجره
<!-- 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>
مرستندویه ټیکنالوژیو ته د معنی رسول

د معنی اضافه کولو لپاره د رنګ کارول یوازې یو بصری نښې وړاندې کوي، کوم چې به د مرستندویه ټیکنالوژیو کاروونکو ته نه لیږل کیږي - لکه د سکرین لوستونکي. ډاډ ترلاسه کړئ چې د رنګ لخوا څرګند شوي معلومات یا پخپله د مینځپانګې څخه څرګند دي (د بیلګې په توګه څرګند متن) ، یا د بدیل وسیلو له لارې شامل شوي ، لکه د .visually-hiddenټولګي سره پټ اضافي متن.

تلفظ شوي میزونه

پټې قطارونه

.table-stripedد میز دننه د هر میز قطار ته د زیبرا سټریپینګ اضافه کولو لپاره وکاروئ <tbody>.

# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table table-striped">
  ...
</table>

دا ټولګي د جدول ډولونو کې هم اضافه کیدی شي:

# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table table-dark table-striped">
  ...
</table>
# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table table-success table-striped">
  ...
</table>

د ځړولو وړ قطارونه

.table-hoverد میز په قطارونو کې دننه د هوور حالت فعالولو لپاره اضافه کړئ <tbody>.

# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table table-hover">
  ...
</table>
# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table table-dark table-hover">
  ...
</table>

دا د هوور وړ قطارونه هم د پټو ډولونو سره یوځای کیدی شي:

# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table table-striped table-hover">
  ...
</table>

فعال میزونه

.table-activeد ټولګي په اضافه کولو سره د میز قطار یا سیل روښانه کړئ .

# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<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>
# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<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>

متغیرات او تلفظ شوي میزونه څنګه کار کوي؟

د تلفظ شوي میزونو لپاره ( پټې شوي قطارونه ، د هوور وړ قطارونه ، او فعال میزونه )، موږ ځینې تخنیکونه کارولي ترڅو دا اغیزې زموږ د ټولو جدول ډولونو لپاره کار وکړي :

  • --bs-table-bgموږ د دودیز ملکیت سره د میز حجرې شالید تنظیم کولو سره پیل کوو . د جدول ټول ډولونه بیا هغه دودیز ملکیت تنظیموي ترڅو د میز حجرو رنګ کړي. په دې توګه، موږ په ستونزه کې نه یو که نیم شفاف رنګونه د میز شالید په توګه وکارول شي.
  • بیا موږ د میز په حجرو کې د انسیټ بکس سیوري اضافه کوو چې box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);د هر مشخص شوي پرت پرت سره background-color. ځکه چې موږ یو لوی خپریدنه کاروو او هیڅ رنګه نه وي، رنګ به یو واحد وي. څرنګه --bs-table-accent-bgچې د ډیفالټ لخوا غیر ټاکل شوی، موږ د ډیفالټ بکس سیوري نلرو.
  • کله چې یا .table-striped، .table-hoverیا .table-activeټولګي اضافه شي، --bs-table-accent-bgد شالید رنګ کولو لپاره نیم شفاف رنګ ته ټاکل کیږي.
  • د هر جدول ډولونو لپاره، موږ د --bs-table-accent-bgدې رنګ پورې اړوند د لوړ توپیر سره رنګ تولیدوو. د مثال په توګه، د تلفظ رنګ .table-primaryتور دی پداسې حال .table-darkکې چې د سپک تلفظ رنګ لري.
  • د متن او سرحد رنګونه په ورته ډول تولید شوي، او د دوی رنګونه په ډیفالټ میراث کیږي.

د پردې تر شا دا داسې ښکاري:

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

د میز سرحدونه

سرحدی میزونه

.table-borderedد میز او حجرو په ټولو اړخونو کې د سرحدونو لپاره اضافه کړئ .

# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table table-bordered">
  ...
</table>

د رنګونو بدلولو لپاره د سرحد رنګ اسانتیاوې اضافه کیدی شي:

# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table table-bordered border-primary">
  ...
</table>

بې سرحده میزونه

.table-borderlessد سرحدونو پرته د میز لپاره اضافه کړئ .

# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table table-borderless">
  ...
</table>
# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table table-dark table-borderless">
  ...
</table>

کوچني میزونه

د ټولو حجرو په نیمایي کې پرې کولو سره نور کمپیکٹ کولو .table-smلپاره اضافه کړئ ..tablepadding

# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table table-sm">
  ...
</table>
# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table table-dark table-sm">
  ...
</table>

عمودی سمون

د جدول حجرې <thead>تل په عمودی توګه لاندې سره سمون لري. د جدول حجرې په <tbody>میراث کې د دوی ترتیب له هغې څخه ترلاسه کوي <table>او د ډیفالټ له مخې سر ته تنظیم شوي. د اړتیا په صورت کې د بیا تنظیم کولو لپاره د عمودی ترتیب ټولګیو څخه کار واخلئ .

سرلیک 1 سرلیک 2 سرلیک 3 سرلیک 4
دا حجره vertical-align: middle;د میز څخه په میراث کې راځي دا حجره vertical-align: middle;د میز څخه په میراث کې راځي دا حجره vertical-align: middle;د میز څخه په میراث کې راځي دا دلته د ځای لرونکی متن دی، چې موخه یې یو څه عمودی ځای نیول دی، ترڅو وښیې چې عمودی ترتیب څنګه په مخکینیو حجرو کې کار کوي.
دا حجره vertical-align: bottom;د میز قطار څخه په میراث کې ده دا حجره vertical-align: bottom;د میز قطار څخه په میراث کې ده دا حجره vertical-align: bottom;د میز قطار څخه په میراث کې ده دا دلته د ځای لرونکی متن دی، چې موخه یې یو څه عمودی ځای نیول دی، ترڅو وښیې چې عمودی ترتیب څنګه په مخکینیو حجرو کې کار کوي.
دا حجره vertical-align: middle;د میز څخه په میراث کې راځي دا حجره vertical-align: middle;د میز څخه په میراث کې راځي دا حجره د پورتنۍ برخې سره سمون لري. دا دلته د ځای لرونکی متن دی، چې موخه یې یو څه عمودی ځای نیول دی، ترڅو وښیې چې عمودی ترتیب څنګه په مخکینیو حجرو کې کار کوي.
<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>

ځړول

د سرحد سټایلونه، فعال سټایلونه، او د میز ډولونه د نیست شوي میزونو لخوا په میراث نه دي.

# لومړی تېر سمبالول
1 مارک اوټو @mdo
سرلیک سرلیک سرلیک
الف لومړی تېر
ب لومړی تېر
ج لومړی تېر
3 لاري مرغۍ @ټویټر
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

ځړول څنګه کار کوي

د دې لپاره چې هر ډول سټایلونه نیست شوي میزونو ته د لیکیدو مخه ونیسي ، موږ >زموږ په CSS کې د ماشوم ترکیب () انتخاب کونکی کاروو. ځکه چې موږ اړتیا لرو چې په , , او کې ټول tds او ths په نښه کړو، زموږ انتخاب کونکی به پرته له دې ډیر اوږد ښکاري. د دې په څیر، موږ د ټولو s او s په نښه کولو لپاره خورا عجیب ښکاري انتخاب کونکی کاروو ، مګر هیڅ یو احتمالي نیست شوي جدولونه.theadtbodytfoot.table > :not(caption) > * > *tdth.table

په یاد ولرئ چې که تاسو <tr>د میز د مستقیم ماشومانو په توګه s اضافه کړئ، دا <tr>به په <tbody>ډیفالټ کې وتړل شي، په دې توګه زموږ انتخاب کونکي د هدف په توګه کار کوي.

اناتومي

د میز سر

د جدولونو او تیاره میزونو په څیر، د ترمیم کونکي ټولګي وکاروئ .table-lightیا .table-darkد <thead>روښانه یا تیاره خړ څرګندولو لپاره.

# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

د میز پښه

# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
فوټر فوټر فوټر فوټر
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

کیپشنونه

د <caption>میز لپاره د سرلیک په څیر کار کوي. دا د سکرین لوستونکو سره د کاروونکو سره مرسته کوي چې یو میز ومومي او پوه شي چې دا څه دي او پریکړه کوي چې ایا دوی غواړي لوستل شي.

د کاروونکو لیست
# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

تاسو کولی شئ <caption>د میز په سر کې هم واچوئ .caption-top.

د کاروونکو لیست
# لومړی تېر سمبالول
1 مارک اوټو @mdo
2 یعقوب تورټن @ غوړ
3 لاري مرغۍ @ټویټر
<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>

ځواب ویونکي میزونه

ځواب ویونکي میزونه میزونو ته اجازه ورکوي چې په افقی ډول په اسانۍ سره سکرول شي. هر جدول د ټولو لید پورټونو په اوږدو کې د a سره لپاس کولو .tableسره ځواب ویونکی کړئ .table-responsive. یا، د اعظمي وقفې نقطه غوره کړئ چې ورسره په کارولو سره ځواب ویونکی میز ولرئ .table-responsive{-sm|-md|-lg|-xl|-xxl}.

عمودی ټوټه کول / قطع کول

ځواب ورکوونکي جدولونه کاروي overflow-y: hidden، کوم چې هر هغه مینځپانګه بندوي چې د میز له لاندې یا پورتنیو څنډو څخه بهر ځي. په ځانګړې توګه، دا کولی شي د ډراپ ډاون مینو او نورو دریمې ډلې ویجټونه بند کړي.

تل ځواب ویونکی

د هرې وقفې په اوږدو کې، .table-responsiveد افقی سکرول کولو میزونو لپاره وکاروئ.

# سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک
1 حجره حجره حجره حجره حجره حجره حجره حجره حجره
2 حجره حجره حجره حجره حجره حجره حجره حجره حجره
3 حجره حجره حجره حجره حجره حجره حجره حجره حجره
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

د وقفې نقطې مشخص

د اړتیا سره سم وکاروئ .table-responsive{-sm|-md|-lg|-xl|-xxl}تر یوې ځانګړې وقفې پورې د ځواب ویونکي میزونو رامینځته کولو لپاره. د دې وقفې او پورته څخه، میز به په نورمال ډول چلند وکړي او په افقی ډول سکرول نه کوي.

دا میزونه ممکن مات شي تر هغه چې د دوی ځواب ویونکي سټایلونه په ځانګړي لید پورټ چوکۍ کې پلي شي.

# سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک
1 حجره حجره حجره حجره حجره حجره حجره حجره
2 حجره حجره حجره حجره حجره حجره حجره حجره
3 حجره حجره حجره حجره حجره حجره حجره حجره
# سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک
1 حجره حجره حجره حجره حجره حجره حجره حجره
2 حجره حجره حجره حجره حجره حجره حجره حجره
3 حجره حجره حجره حجره حجره حجره حجره حجره
# سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک
1 حجره حجره حجره حجره حجره حجره حجره حجره
2 حجره حجره حجره حجره حجره حجره حجره حجره
3 حجره حجره حجره حجره حجره حجره حجره حجره
# سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک
1 حجره حجره حجره حجره حجره حجره حجره حجره
2 حجره حجره حجره حجره حجره حجره حجره حجره
3 حجره حجره حجره حجره حجره حجره حجره حجره
# سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک
1 حجره حجره حجره حجره حجره حجره حجره حجره
2 حجره حجره حجره حجره حجره حجره حجره حجره
3 حجره حجره حجره حجره حجره حجره حجره حجره
# سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک سرلیک
1 حجره حجره حجره حجره حجره حجره حجره حجره
2 حجره حجره حجره حجره حجره حجره حجره حجره
3 حجره حجره حجره حجره حجره حجره حجره حجره
<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>

ساس

متغیرات

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

لوپ

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

دودیز کول

  • د فکتور متغیرونه ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) د جدول په ډولونو کې د تضاد د ټاکلو لپاره کارول کیږي.
  • د رڼا او تیاره میز ډولونو سربیره، د موضوع رنګونه د $table-bg-levelمتغیر لخوا روښانه شوي.