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یا s .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 سیل سیل
8 سیل سیل
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کلاس کے ساتھ چھپا ہوا اضافی متن۔

بالترتیب 576px، 768px، 992px، اور 1120px تک (لیکن اس میں شامل نہیں) کے ہر بریک پوائنٹ پر ٹیبل کو افقی طور پر اسکرول کرتے ہوئے، کسی .tableکے ساتھ لپیٹ کر ریسپانسیو ٹیبلز بنائیں۔.table-responsive{-sm|-md|-lg|-xl}max-width

نوٹ کریں کہ چونکہ براؤزرز فی الحال رینج کے سیاق و سباق کے سوالات کو سپورٹ نہیں کرتے ہیں، اس لیے ہم ان موازنوں کے لیے زیادہ درستگی کے ساتھ اقدار کا استعمال کرتے ہوئے فریکشنل چوڑائی (جو کہ ہائی ڈی پی آئی ڈیوائسز پر مخصوص حالات میں ہو سکتے ہیں) کے ساتھ سابقہ ​​جات min-اورmax- ویو پورٹ کی حدود کے ارد گرد کام کرتے ہیں۔ .

کیپشنز

ایک <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>

ذمہ دار میزیں

ریسپانسیو ٹیبلز ٹیبلز کو آسانی کے ساتھ افقی طور پر سکرول کرنے کی اجازت دیتی ہیں۔ .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>