آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش جداول در BootStrap

دوره های مرتبط با این مقاله

جدول پایه ی 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
امتحان کنید

کلاس های متنی عبارتند از:

class
شرح
.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
امتحان کنید
  • 2384
  •    714
  • تاریخ ارسال :   1395/10/06

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .