جدول پایه ی BootStrap (Basic BootStrap Table)
جدول پایه ی BootStrap دارای یک Padding اندک بوده که تنها دارای تقسیم کننده های افقی است.
کلاسِ .table استایل پایه را به جدول اضافه می کند.
نمونه 1
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
جدول با ردیف های راه راه (Striped Rows)
کلاس .table-striped ردیف های راه راه را به یک جدول اضافه می کنند:
نمونه 2
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
جدول کادربندی شده (Bordered Table)
کلاسِ .table-bordered تمامِ قسمت های جدول و ستون را کادر بندی می کند:
نمونه 3
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
جدول با ردیف های Hover
کلاسِ .table-hover منجر به ایجادِ حالتِ Hover در ردیف های جدول می شود، بدین صورت که با قرار دادن نشانگر بر روی هر سطر، رنگ پس زمینه ایجاد می شود.
نمونه 4
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
جدول متراکم (Condensed Table)
کلاسِ .table-condensed از طریق نصف کردنِ Padding سلول ها، منجر به متراکم شدن جدول می شود.
نمونه 5
| Firstname |
Lastname |
Email |
| John |
Doe |
john@example.com |
| Mary |
Moe |
mary@example.com |
| July |
Dooley |
july@example.com |
کلاس های متنی(Contextual Classes)
کلاس های متنی موجب رنگبندی سطرها (<tr>) یا ستون ها (<td>) می شوند:
نمونه 6
| Firstname |
Lastname |
Email |
| Default |
Defaultson |
def@somemail.com |
| Success |
Doe |
john@example.com |
| Danger |
Moe |
mary@example.com |
| Info |
Dooley |
july@example.com |
| Warning |
Refs |
bo@example.com |
| Active |
Activeson |
act@example.com |
کلاس های متنی عبارتند از:
.active
رنگ hover را به سطر یا ستون جدول اضافه می کند.
.success
بیانگرِ وقوع یک عملکرد مثبت یا موفق.
.info
بیانگر یک تغییر یا عملیات خنثی
.warning
بیانگرِ هشداری که نیاز به توجه دارد.
.danger
بیانگرِ یک عمل خطرناک یا عملیاتی که به طور بلقوه منفی است.
جداول Responsive
کلاسِ .table-responsive یک جدولِ Responsive را ایجاد می کند. این جدول می تواند به صورت افقی بر روی دستگاه های کوچک که کمتر از 768 پیکسل می باشند، Scroll شود.
نمونه 7
| # |
Firstname |
Lastname |
Age |
City |
Country |
| 1 |
Anna |
Pitt |
35 |
New York |
USA |
امتحان کنید
-
2717
-
834
-
تاریخ ارسال
:
1395/10/06
دانلود PDF
دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور:
tahlildadeh.com یا www.tahlildadeh.com
لطفا به این مطلب امتیاز دهید
ارسال دیدگاه
نظرات کاربران