ارسال نظر برای این مطلب
سید محمد میرعالی
امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.
دسته بندی مطالب
آمار سایت
کل مطالب : 39
کل نظرات : 6
افراد آنلاین : 2
تعداد اعضا : 0
آی پی امروز : 26
آی پی دیروز : 47
بازدید امروز : 2,580
باردید دیروز : 231
گوگل امروز : 3
گوگل دیروز : 1
بازدید هفته : 3,037
بازدید ماه : 3,289
بازدید سال : 13,409
بازدید کلی : 251,157
آموزش کار با جداول در Bootstrap 4
در اين مطلب از سايت ميرممد با كلاس هاي جدول در Bootstrap 4 كار ميكنيم و يك سري تكه كد مربوط به جداول در بوتسترپ نسخه چهار رو براتون قرار ميدم.
شما فقط کافیه کلاس Table رو به تگ جدولتون بدید مثل کد زیر :
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
خروجی کد بالا :
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
همونطور که میبینید یک ظاهر زیبایی به جدول شما میده فقط با اضافه کردن کلاس table به جدولتون.
کلاس table-striped در bootstrap 4 :
اگر بخواید جدولتون یک سطر درمیون مجزا بشن و یک جلوه ی خوبی برای جدا کردن سطر ها از هم بگیره میتونید کلاس table-striped رو به جدولتون اضافه کنید.
تکه کد استفاده از کلاس table-striped در بوتسترپ چهار :
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
خرحی کد بالا :
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
کلاس table-bordered در bootstrap 4 :
با دادن کلاس table-bordered به جدولمون خیلی راحت یک حاشیه به جدول اضافه میشه .
تکه کد استفاده از کلاس table-bordered در بوتسترپ 4 :
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
خروجی کد بالا :
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
کلاس table-hover در bootstrap 4 :
با اضافه کردن کلاس table-hover به جدولمون با رفتن موس روی هر سطر از جدول اون سطر متمایز میشه .
تکه کد استفاده از کلاس table-hover در بوتسترپ چهار :
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
خروجی کد بالا :
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
کلاس table-dark در bootstrap 4 :
کلاس table-dark یک جدول تیره درست میکنه.
تکه کد استفاده از کلاس table-dark در بوتسترپ چهار :
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
خروجی کد بالا :
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
برای جدول دارکمون هم میشه از کلاس های table-hover و table-striped استفاده کرد.
کلاس table-borderless در bootstrap 4 :
همونطور که از اسم کلاس table-borderless مشخصه بوردر یا حاشیه ی جدول رو حذف میکنه.
نمونه کد استفاده شده از کلاس table-borderless در بوتسترپ چهار :
<table class="table table-borderless">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
خروجی کد بالا :
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley |
july@example.com |
اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد
ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.
پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :