Source

خشتەکان

بەڵگەنامە و نموونە بۆ شێوازی هەڵبژاردنی خشتەکان (بە لەبەرچاوگرتنی بەکارهێنانی باو لە پێوەکراوەکانی جاڤاسکڕێپتدا) لەگەڵ Bootstrap.

نموونە

بەهۆی بەکارهێنانی بەربڵاوی خشتەکان لە سەرانسەری ویجتەکانی لایەنی سێیەم وەک ساڵنامە و هەڵبژێرەری بەروارەکان، ئێمە خشتەکانمان دیزاین کردووە کە بەشداریکردن بن . تەنها پۆلی بنەڕەتی زیاد بکە .tableبۆ هەر یەکێک <table>, پاشان درێژ بکەرەوە بە ستایلە تایبەتەکان یان پۆلە جۆراوجۆرەکانی دەستکاریکەرمان.

بە بەکارهێنانی بنەڕەتیترین نیشاندانی خشتەکان، لێرەدا چۆن .tableخشتەکانی -based لە Bootstrap دەردەکەون. هەموو ستایلەکانی خشتەکان لە Bootstrap 4 بۆ میرات گیراون ، واتە هەر خشتەیەکی هێلانەکراو بە هەمان شێوەی باوک ستایل دەکرێت.

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندەکە لە @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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

هەروەها دەتوانیت ڕەنگەکان پێچەوانە بکەیتەوە-بە دەقی سووک لەسەر پاشبنەمای تاریک-بە .table-dark.

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندەکە لە @twitter 
<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>s بە خۆڵەمێشی سووک یان تۆخ دەربکەوێت.

# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندەکە لە @twitter
# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندەکە لە @twitter 
<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. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندەکە لە @twitter 
<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. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندەکە لە @twitter 
<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. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter 
<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. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter 
<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. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter 
<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. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter 
<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. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter 
<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. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندە لە @twitter 
<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. 1 خانە خانە
2. 2 خانە خانە
3. 3 خانە خانە
4. 4 خانە خانە
5. 5 خانە خانە
6. 6 خانە خانە
7. 7 خانە خانە
8. 8 خانە خانە
9. 9 خانە خانە 
<!-- 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بە .table-responsive{-sm|-md|-lg|-xl}, وا لە خشتەکە بکە بە شێوەی ئاسۆیی لە هەر max-widthخاڵێکی شکاندن تا (بەڵام لەخۆناگرێت) 576px، 768px، 992px، و 1120px، بە رێککەوت.

سەرنج بدە کە لەبەر ئەوەی وێبگەڕەکان لە ئێستادا پشتگیری لە پرسیارەکانی ناوەڕۆکی مەودا ناکەن ، ئێمە لە دەوری سنوورەکانی min-و max-پێشگرەکان و دەرگاکانی بینین بە پانایی بەشەکی (کە دەتوانێت لە ژێر هەندێک بارودۆخدا ڕووبدات لەسەر ئامێرەکانی dpi بەرز، بۆ نموونە) بە بەکارهێنانی بەهاکان بە وردبینییەکی بەرزتر بۆ ئەم بەراوردکردنانە کاردەکەین .

کەپشنەکان

A <caption>وەک سەردێڕێک بۆ خشتەیەک کاردەکات. یارمەتی بەکارهێنەران دەدات کە خوێنەری شاشەیان هەیە بۆ دۆزینەوەی خشتەیەک و تێبگەن کە باسی چی دەکات و بڕیار بدەن کە ئایا دەیانەوێت بیخوێننەوە یان نا.

لیستی بەکارهێنەران
# . یەکەم دوایین دەسک
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندەکە لە @twitter 
<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>

خشتەکانی وەڵامدەرەوە

خشتەکانی وەڵامدەرەوە ڕێگە بە خشتەکان دەدەن بە ئاسانی بە شێوەی ئاسۆیی سکڕۆڵ بکرێن. هەر خشتەیەک بکە بە وەڵامدەرەوە لە سەرانسەری هەموو دەرگاکانی بینین بە پێچانی .tableبە .table-responsive. یان، زۆرترین خاڵێکی شکاندن هەڵبژێرە کە لەگەڵیدا خشتەی وەڵامدەرەوەت هەبێت تا بە بەکارهێنانی .table-responsive{-sm|-md|-lg|-xl}.

بڕین/بڕینی ڕاست

خشتەکانی وەڵامدەرەوە سوود لە overflow-y: hidden, وەردەگرن، کە هەر ناوەڕۆکێک کە لە لێوارەکانی خوارەوە یان سەرەوەی خشتەکە تێپەڕێت، دەبڕێت. بە تایبەتی ئەمە دەتوانێت مینیوەکانی دابەزین و ویجتەکانی تری لایەنی سێیەم ببڕێت.

هەمیشە وەڵامدەرەوە

لە سەرانسەری هەموو خاڵێکی شکاندن، .table-responsiveبۆ خشتەکان بە شێوەی ئاسۆیی بەکاری بهێنە.

# . سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ
1. 1 خانە خانە خانە خانە خانە خانە خانە خانە خانە
2. 2 خانە خانە خانە خانە خانە خانە خانە خانە خانە
3. 3 خانە خانە خانە خانە خانە خانە خانە خانە خانە 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

تایبەت بە خاڵی شکاندن

بەپێی پێویست بەکاری بهێنە .table-responsive{-sm|-md|-lg|-xl}بۆ دروستکردنی خشتەی وەڵامدەرەوە تا خاڵێکی شکاندنی دیاریکراو. لەو خاڵە شکاندنەوە و بەرەو سەرەوە، خشتەکە بە شێوەیەکی ئاسایی ڕەفتار دەکات و بە شێوەی ئاسۆیی سکڕۆڵ ناکات.

# . سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ
1. 1 خانە خانە خانە خانە خانە
2. 2 خانە خانە خانە خانە خانە
3. 3 خانە خانە خانە خانە خانە
# . سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ
1. 1 خانە خانە خانە خانە خانە
2. 2 خانە خانە خانە خانە خانە
3. 3 خانە خانە خانە خانە خانە
# . سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ
1. 1 خانە خانە خانە خانە خانە
2. 2 خانە خانە خانە خانە خانە
3. 3 خانە خانە خانە خانە خانە
# . سەردێڕ سەردێڕ سەردێڕ سەردێڕ سەردێڕ
1. 1 خانە خانە خانە خانە خانە
2. 2 خانە خانە خانە خانە خانە
3. 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>