طراحی جدول با بوت استرپ
ساخت و طراحی جدول با بوت استرپ 4 به زبان فارسی همراه با مثال و توضیحات کامل و دانلود فایل های تمرینی . در این آموزش با کلاس های مختلف جدول در بوت استرپ آشنا می شوید. کدها همه تست شده میباشد.
کلاس های جدول در بوت استرپ
در این بخش از آموزش بوت استرپ به زبان فارسی از تاپ سایت 98 ، کلاس های جدول در بوت استرپ 4 را بررسی می کنیم.
کلاس های مختلفی برای طراحی جدول در بوت استرپ وجود دارد که با آنها می توانیم جداول متنوعی را طراحی کنیم.
جداول در بوت استرپ 4 دارای تنوع زیادی میباشد.
دانلود کد جدول در بوت استرپ
با کلیک روی گزینه زیر یعنی دانلود کد جدول در بوت استرپ 4 می توانید کدهای جداول زیر را دانلود کنید.
کدها همه تست شده است کافی است روی فایل های html دابل کلیک کرده تا باز شود و نتیجه را ببینید.
طراحی جدول با کلاس table-striped
به سراغ اولین کلاس یعنی طراحی جدول با کلاس table-striped می رویم.
با کلاس table-striped می توانیم جدولی طراحی کنیم که بصورت یک در میان رنگ ها را تغییر دهد .
این کار باعث می شود محتوا راحت خوانده شود.
در زیر مثال طراحی جدول با کلاس table-striped را مشاهده می کنید.
در قسمت بالا کد جداول را نیز قرار داده ایم که می توانید دانلود نمایید.
<thead>
<tr>
<th>Fname</th>
<th>Lname</th>
<th>Tel</th>
</tr>
</thead>
<tbody>
<tr>
<td>ali</td>
<td>aaa</td>
<td>12345</td>
</tr>
<tr>
<td>reza</td>
<td>bbb</td>
<td>22551</td>
</tr>
<tr>
<td>soroush</td>
<td>ccc</td>
<td>66991</td>
</tr>
</tbody>
</table>
طراحی جدول با کلاس table-bordered
در این بخش به سراغ طراحی جدول با کلاس table-bordered در بوت استرپ می رویم.
با کلاس table-bordered می توانیم جدولی طراحی کنیم که دور آن کادری کشیده شده باشد.
به مثال زیر توجه کنید. تنها تفاوت با کد بالا در خط اول یعنی تگ table است.
این جدول ساده ولی زیبا است. بستگی به نوع پروژه ها می توانید از جداول مختلف بوت استرپ استفاده نمایید.
کد جدول زیر را می توانید در بخش بالا دانلود کنید.
<thead>
<tr>
<th>Fname</th>
<th>Lname</th>
<th>Tel</th>
</tr>
</thead>
<tbody>
<tr>
<td>ali</td>
<td>aaa</td>
<td>12345</td>
</tr>
<tr>
<td>reza</td>
<td>bbb</td>
<td>22551</td>
</tr>
<tr>
<td>soroush</td>
<td>ccc</td>
<td>66991</td>
</tr>
</tbody>
</table>
طراحی جدول با کلاس table-hover
حال به بررسی طراحی جدول با کلاس table-hover می پردازیم.
از کلاس table-hover در بوت استرپ 4 زمانی استفاده می شود که بخواهیم جدولی طراحی کنیم که وقتی روی هر سطر آن قرار گرفتیم رنگ آن تغییر کند.
مثال زیر را ببینید . کد زیر در بخش دانلود بنام table3وجود دارد.
پس از اجرای این کد مشاهده می کنید که با هاور ، رنگ سطر تغییر می کند.
<thead>
<tr>
<th>Fname</th>
<th>Lname</th>
<th>Tel</th>
</tr>
</thead>
<tbody>
<tr>
<td>ali</td>
<td>aaa</td>
<td>12345</td>
</tr>
<tr>
<td>reza</td>
<td>bbb</td>
<td>22551</td>
</tr>
<tr>
<td>soroush</td>
<td>ccc</td>
<td>66991</td>
</tr>
</tbody>
</table>
طراحی جدول با کلاس table-dark
در این بخش قصد داریم به طراحی جدول با کلاس table-dark در بوت استرپ بپردازیم.
کلاس table-dark یک بک گروند مشکی به جدول می دهد.
اگر به طرح های تیره علاقه داریم می توانید از این کلاس استفاده کنید.
کد مثال زیر با عنوان table4 در بخش دانلود قرار داده ایم می توانید آن را اجرا نمایید تا نتیجه را ببینید.
<thead>
<tr>
<th>Fname</th>
<th>Lname</th>
<th>Tel</th>
</tr>
</thead>
<tbody>
<tr>
<td>ali</td>
<td>aaa</td>
<td>12345</td>
</tr>
<tr>
<td>reza</td>
<td>bbb</td>
<td>22551</td>
</tr>
<tr>
<td>soroush</td>
<td>ccc</td>
<td>66991</td>
</tr>
</tbody>
</table>
طراحی جدول با کلاس های table-dark و table-striped
در این بخش قصد داریم از ترکیب طراحی جدول با کلاس های table-dark و table-striped را آموزش دهیم.
در مثال زیر یک جدول مشکی را مشاهده می کنید که یک در میان رنگ ان متفاوت است.
این کار برای مشاهده محتوا مناسب است.
<thead>
<tr>
<th>First name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>mohammad</td>
<td>12</td>
</tr>
<tr>
<td>ehsan</td>
<td>18</td>
</tr>
<tr>
<td>soroush</td>
<td>16</td>
</tr>
</tbody>
</table>
طراحی جدول با کلاس table-borderless
طراحی جدول با کلاس table-borderless برای زمانی مناسب است که می خواهید دور جدول هیچ کادری نباشد.
کلاس table-borderless در بوت استرپ 4 ، کادر دور جدول را حذف می کند.
در زیر نحوه استفاده از آن را مشاهده می کنید.
تغییر رنگ tr ها در جدول
در مثال زیر تغییر رنگ tr ها در جدول را مشاهده می کنید.
هر سطر می تواند دارای یک رنگ باشد. این ویژگی برای زمانی مناسب است که یک سطر مهم باشد و بخواهیم رنگ پس زمینه آن را تغییر دهیم.
این کد را در فایل table5 قرار داده ایم.
<thead>
<tr class="table-dark">
<th>First name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr class="table-success">
<td>mohammad</td>
<td>12</td>
</tr>
<tr class="table-primary">
<td>ehsan</td>
<td>18</td>
</tr>
<tr class="table-danger">
<td>soroush</td>
<td>16</td>
</tr>
</tbody>
</table>
تغییر پس زمینه هدر جدول
برای تغییر پس زمینه هدر جدول در بوت استرپ 4 کافی است یک کلاس به تگ thead بدهیم.
در مثال زیر ما یک جدول دارای border یا کادر ایجاد کردیم.
سپس به هدر یا thead یک کلاس thead-dark اضافه کردیم.
نتیجه این کد را می توانید در فایل table6 در فایل های دانلودی ببینید.
یک جدول دارای کادر با هدر و پس زمینه مشکی. این جدول ساده اما زیبا است.
<thead class="thead-dark">
<tr>
<th>First name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>mohammad</td>
<td>12</td>
</tr>
<tr>
<td>ehsan</td>
<td>18</td>
</tr>
<tr>
<td>soroush</td>
<td>16</td>
</tr>
</tbody>
</table>
امیدواریم این آموزش برای شما مفید باشد.
موفق باشید.
منبع: دبلیو 3 اسکولز
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید