Source

میزونه

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

مثالونه

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

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

# لومړی تېر سمبالول
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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

تاسو کولی شئ رنګونه هم بدل کړئ — په تیاره پس منظر کې د روښانه متن سره — سره .table-dark.

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

د میز سر اختیارونه

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

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

<table class="table">
  <thead class="thead-light">
    <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>

پټې قطارونه

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

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

سرحدی میز

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

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

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

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

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

کوچنی میز

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

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

<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-active">...</td>

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

د منظم میز شالید ډولونه د تیاره میز سره شتون نلري ، په هرصورت ، تاسو ممکن د ورته سټایلونو ترلاسه کولو لپاره متن یا شالید اسانتیاوې وکاروئ.

# سرلیکنه سرلیکنه
1 حجره حجره
2 حجره حجره
3 حجره حجره
4 حجره حجره
5 حجره حجره
6 حجره حجره
7 حجره حجره
۸ حجره حجره
۹ حجره حجره 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
مرستندویه ټیکنالوژیو ته د معنی رسول

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

ځواب ورکوونکي جدولونه د هر ډول لپاس کولو .tableسره جوړ کړئ، په ترتیب سره د 576px، 768px، 768px، 992px، او 1120px .table-responsive{-sm|-md|-lg|-xl}په هر بریک پواینټ کې په افقی ډول میز سکرول کړئ.max-width

په یاد ولرئ چې براوزر اوس مهال د رینج شرایطو پوښتنو ملاتړ نه کوي ، موږ د محدودیتونو min-او max-مخکینیو او ویو پورټونو په شاوخوا کې کار کوو د جزوي چوکیو سره (کوم چې په ځانګړي شرایطو کې په لوړ dpi وسیلو کې واقع کیدی شي ، د مثال په توګه) د دې پرتله کولو لپاره د لوړ دقیقیت سره ارزښتونو کارولو سره. .

کیپشنونه

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

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

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

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

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

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

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

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

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

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