آموزش جدول در بوت استرپ

saber

4 سال پیش

امتیاز دهید post

آموزش جدول در بوت استرپ

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش جدول در بوت استرپ خواهیم پرداخت.

بوت استرپ یک طرح تمیز برای ساخت جدول ها ارائه می دهد. برخی از عناصر جدول پشتیبانی شده توسط بوت استرپ عبارتند از:

<table>

عنصر بسته بندی برای نمایش داده ها در قالب جدول

<thead>

عنصر ظرف برای ردیف های هدر جدول (<tr>) برای برچسب گذاری ستون های جدول.

<tbody>

عنصر ظرف برای ردیف های جدول (<tr>) در بدنه جدول.

<tr>

عنصر ظرف برای مجموعه ای از سلول های جدول (<td> یا <th>) که در یک ردیف ظاهر می شود.

<td>

سلول جدول پیش فرض

<th>

سلول جدول ویژه برای برچسب ستون (یا ردیف ، بسته به دامنه و محل قرارگیری). باید در <thead> استفاده شود

<caption>

جدول کلی

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

&lt;table class = "table"&gt;
   &lt;caption&gt;Basic Table Layout&lt;/caption&gt;
   
   &lt;thead&gt;
      &lt;tr&gt;
         &lt;th&gt;Name&lt;/th&gt;
         &lt;th&gt;City&lt;/th&gt;
      &lt;/tr&gt;
   &lt;/thead&gt;
   
   &lt;tbody&gt;
      &lt;tr&gt;
         &lt;td&gt;Tanmay&lt;/td&gt;
         &lt;td&gt;Bangalore&lt;/td&gt;
      &lt;/tr&gt;
      
      &lt;tr&gt;
         &lt;td&gt;Sachin&lt;/td&gt;
         &lt;td&gt;Mumbai&lt;/td&gt;
      &lt;/tr&gt;
   &lt;/tbody&gt;
&lt;/table&gt;

<caption>Basic Table Layout</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>Tanmay</td>

<td>Bangalore</td>

</tr>

<tr>

<td>Sachin</td>

<td>Mumbai</td>

</tr>

</tbody>

</table>

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

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

Striped Table

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

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

<caption>Striped Table Layout</caption>

<thead>

<tr>

<th>Pincode</th>

</tr>

</thead>

<tbody>

<tr>

<td>Tanmay</td>

<td>Bangalore</td>

</tr>

<tr>

<td>Sachin</td>

<td>Mumbai</td>

</tr>

<tr>

</tr>

</tbody>

</table>

جدول حاشیه ای

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

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

<caption>Bordered Table Layout</caption>

<thead>

<tr>

<th>Pincode</th>

</tr>

</thead>

<tbody>

<tr>

<td>Tanmay</td>

<td>Bangalore</td>

</tr>

<tr>

<td>Sachin</td>

<td>Mumbai</td>

</tr>

<tr>

</tr>

</tbody>

</table>

Hover Table

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

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

<caption>Hover Table Layout</caption>

<thead>

<tr>

<th>Pincode</th>

</tr>

</thead>

<tbody>

<tr>

<td>Tanmay</td>

<td>Bangalore</td>

</tr>

<tr>

<td>Sachin</td>

<td>Mumbai</td>

</tr>

<tr>

</tr>

</tbody>

</table>

Condensed Table

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

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

<caption>Condensed Table Layout</caption>

<thead>

<tr>

<th>Pincode</th>

</tr>

</thead>

<tbody>

<tr>

<td>Tanmay</td>

<td>Bangalore</td>

</tr>

<tr>

<td>Sachin</td>

<td>Mumbai</td>

</tr>

<tr>

</tr>

</tbody>

</table>

کلاسهای متنی

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

active.

رنگ شناور را روی یک ردیف یا سلول خاص اعمال می کند

success.

یک عمل موفقیت آمیز یا مثبت را نشان می دهد

warning.

هشداری را نشان می دهد که ممکن است نیاز به توجه داشته باشد

danger.

یک عمل خطرناک یا بالقوه منفی را نشان می دهد

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

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

<caption>Contextual Table Layout</caption>

<thead>

<tr>

<th>Product</th>

<th>Payment Date</th>

<th>Status</th>

</tr>

</thead>

<tbody>

<td>Product1</td>

<td>Pending</td>

</tr>

<td>Product2</td>

<td>Delivered</td>

</tr>

<td>Product3</td>

<td>In Call to confirm</td>

</tr>

<td>Product4</td>

<td>Declined</td>

</tr>

</tbody>

</table>

جداول پاسخگو

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

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

<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>Pending</td>

</tr>

<tr>

<td>Product2</td>

<td>Delivered</td>

</tr>

<tr>

<td>Product3</td>

<td>In Call to confirm</td>

</tr>

<tr>

<td>Product4</td>

<td>Declined</td>

</tr>

</tbody>

</table>

</div>

منبع.

لیبست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

نویسنده مطلب saber

آموزش جدول در بوت استرپ

آموزش جدول در بوت استرپ

جدول کلی

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

Striped Table

جدول حاشیه ای

Hover Table

Condensed Table

کلاسهای متنی

جداول پاسخگو

لیبست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

آموزش جدول در بوت استرپ

جدول کلی

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

Striped Table

جدول حاشیه ای

Hover Table

Condensed Table

کلاسهای متنی

جداول پاسخگو

لیبست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه