آموزش کار با جدول ها در Bootstrap بوت استرپ با مثال

جدول ها در Bootstrap

Bootstrap با CSS

Bootstrap یک چیدمان تمیز را برای ساخت جداول فراهم می کند. برخی از عناصر جدول که توسط Bootstrap پشتیبانی می شوند ، عبارتند از :

جدول پایه

اگر بخواهیم یک سبک جدول خوب و پایه ای را فقط با چند فاصله گذاری اندک و تقسیم کننده افقی ایجاد کنیم ، کلاس پایه table. را به جدول اضافه می نماییم ، همان طور که در مثال زیر نشان داده شده است :

<table class = "table">
   <caption>Basic Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
	
</table>

خروجی قطعه کد بالا ، به صورت زیر می باشد :

کلاس های اختیاری جدول

همراه با نشانه گذاری جدول پایه و کلاس table. ، چند کلاس اضافی دیگر وجود دارند که می توانیم از آنها برای سبک بندی نشانه گذاری استفاده کنیم. بخش های زیر ، نگاه اجمالی در مورد همه این کلاس ها ارائه می دهند.

جدول نواری

با اضافه کردن کلاس table-striped. ، خطوطی را در ردیف ها در داخل تگ <tbody> خواهیم دید که در مثال زیر دیده می شود :

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
   
</table>

خروجی قطعه کد بالا ، به صورت زیر می باشد :

جدول حاشیه دار

با افزودن کلاس table-bordered. ، حاشیه هایی را در اطراف هر عنصر و هم چنین حاشیه هایی را در اطراف کل جدول خواهیم دید ، همان طور که در مثال زیر نشان داده شده است :

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
	
</table>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

جدول شناور

با افزودن کلاس table-hover. ، یک پس زمینه خاکستری روشن به ردیف ها اضافه می شود ، زمانی که مکان نما بر روی آنها قرار می گیرد ، این رنگ پس زمینه نمایان می شود ، همان طور که در مثال زیر دیده می شود :

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
   
</table>

خروجی قطعه کد بالا ، به صورت زیر می باشد :

جدول فشرده

با اضافه کردن کلاس table-condensed. ، فاصله گذاری ردیف به نصف کاهش می یابد تا جدول فشرده شود. همان طور که در مثال زیر دیده می شود. اگر بخواهیم اطلاعات متراکم تر باشند ، استفاده از این جدول مفید خواهد بود.

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
   
</table>

خروجی قطعه کد بالا ، به صورت زیر می باشد :

کلاس های Contextual

کلاس های Contextual که در جدول زیر نشان داده شده است ، به ما اجازه می دهند رنگ پس زمینه ردیف های جدول یا سلول های خاص جدول خود را تغییر دهیم.

این کلاس ها می توانند با تگ های <tr> ، <td> یا <th> اعمال شوند.

<table class = "table">
   <caption>Contextual Table Layout</caption>
   
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   
   <tbody>
      <tr class = "active">
         <td>Product1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      
      <tr class = "success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      
      <tr class = "warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      
      <tr class = "danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
   
</table>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

جدول های واکنش گرا

با قرار دادن کلاس .table-responsive ، ما می توانیم جدول را به صورت افقی در دستگاه های کوچک (زیر 768px) پیمایش کنیم. در زمان مشاهده جدول در دستگاهی با پهنای بزرگ تر از 768 پیکسل ، هیچ تفاوتی در این جداول مشاهده نخواهیم کرد.

<div class = "table-responsive">
   <table class = "table">
      
      <caption>Responsive Table Layout</caption>
      
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      
      <tbody>
         <tr>
            <td>Product1</td>
            <td>23/11/2013</td>
            <td>Pending</td>
         </tr>
         
         <tr>
            <td>Product2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         
         <tr>
            <td>Product3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
         
         <tr>
            <td>Product4</td>
            <td>20/10/2013</td>
            <td>Declined</td>
         </tr>
      </tbody>
      
   </table>
</div>

خروجی قطعه کد بالا ، به صورت زیر می باشد :