در این قسمت از اموزش های بوت استرپ به طراحی جدول با bootstrap 4 خواهیم پرداخت.
پیشنهاد میشود سایر قسمت های دوره ی بوت استرپ را مطالعه فرمایید.
جدول ساده
یک جدول ساده در بوت استرپ 4 دارای لایه های روشن و تقسیم بندی افقی است.
کلاس .table یک ظاهر طراحی اولیه را به یک جدول اضافه می کند برای درک این موضوع به مثال زیر توجه کنید :
جدول ساده
نام نام خانوادگی ایمیل مرتضی افضلی morteza@example.com سجاد حسین زاده sajjad@example.com پوریا مرادی pooriya@example.com
ردیف های راه راه
برای ایجاد ردیف های راه راه در جدول مورد نظر باید از کلاس .table-striped استفاده کنید.
برای درک کردن بهتر این موضوع قطعه کد زیر را اجرا کنید:
جدول با ردیف های راه راه
نام نام خانوادگی ایمیل مرتضی افضلی morteza@example.com سجاد حسین زاده sajjad@example.com پوریا مرادی pooriya@example.com
جدول مرز بندی شده
برای ایجاد یک جداول که دارای حاشیه باشد باید از کلاس .table-bordered استفاده کنید برای درک بهتر این موضوع به مثال زیر توجه کنید:
جدول دارای حاشیه
نام نام خانوادگی ایمیل مرتضی افضلی morteza@example.com سجاد حسین زاده sajjad@example.com پوریا مرادی pooriya@example.com
افکت در هنگام اشاره موس
اگر قصد دارید یک جدول حرفه ای طراحی کنید باید از کلاس .table-hover استفاده کنید تا هنگامی که نشان گر موس بر روی ردیف ها قرار گرفت رنگ پس زمینه خاکستری بگیرد. به مثال زیر توجه کنید :
نام نام خانوادگی ایمیل مرتضی افضلی morteza@example.com سجاد حسین زاده sajjad@example.com پوریا مرادی pooriya@example.com
جدول سیاه و سفید
برای ایجاد یک جدول با قابلیت پس زمینه ی مشکی و همچنین رنگ متن های سفید باید از کلاس .table-dark استفاده کنید.
جدول سیاه و سفید
نام نام خانوادگی ایمیل مرتضی افضلی morteza@example.com سجاد حسین زاده sajjad@example.com پوریا مرادی pooriya@example.com
جدول مشکی و راه راه
شما اگر قصد دارید یک ظاهر متفاوت یعنی مشکی و راه راه داشته باشید باید از کلاس .table-dark و .table-striped همزمان استفاده کنید به مثال زیر توجه کنید :
جدول سیاه و راه راه
نام نام خانوادگی ایمیل مرتضی افضلی morteza@example.com سجاد حسین زاده sajjad@example.com پوریا مرادی pooriya@example.com
افکت موس در حالت تیره
برای ایجاد افکت موس درحالت تیره کافی است کلاس .table-hover را به علاوه کلاس .table-dark کنار هم قرار دهیم :
نام نام خانوادگی ایمیل مرتضی افضلی morteza@example.com سجاد حسین زاده sajjad@example.com پوریا مرادی pooriya@example.com
جدول بدون حاشیه دور
نام نام خانوادگی ایمیل مرتضی افضلی morteza@example.com سجاد حسین زاده sajjad@example.com پوریا مرادی pooriya@example.com
کلاسهای متنی
شما در جلسه گذشته با انواع رنگ ها و متن ها اشنا شدید ، حال وقت ان است که از تجربه ی جلسه گذشته یک خلاقیت ایجاد کنید ، کلاسه های متنی و بک گراند های جلسه ی پیش را با تگ های جدول ادغام کنید تا ترکیب زیبایی برای جداول خود خلق کنید.
تنها تفاوت استفاده از رنگ ها در جداول اوردن کلمه ی table بجای bg یا text در درس گذشته است.
رنگ سربرگ
شما با اضافه کردن کلاس .thead-dark یک سربرگ با پس زمینه ی تیره و با اضافه کردن .thead-light یک سربرگ با رنگ روشن ایجاد میکنید.
نام نام خانوادگی ایمیل مرتضی افضلی morteza@example.com سجاد حسین زاده sajjad@example.com پوریا مرادی pooriya@example.com
نام نام خانوادگی ایمیل مرتضی افضلی morteza@example.com سجاد حسین زاده sajjad@example.com پوریا مرادی pooriya@example.com
جداول کوچک
با اضافه کردن کلاس .table-sm شما یک جدول کوچک ایجاد میکنید:
جداول کوچیک
نام نام خانوادگی ایمیل مرتضی افضلی morteza@example.com سجاد حسین زاده sajjad@example.com پوریا مرادی pooriya@example.com
جداول ریسپانسیو یا واکنشگرا
برای واکنشگرا کردن یک جدول باید از کلاس .table-responsive استفاده کنید ، با افزودن این کلاس یک صفحه نور افقی به روی صفحه نمایش اضافه میشود که از عرض 992 پیکسل کمتر باشد و اگر صفحه ی شما از 992 پیکسل بزرگتر باشد هیچ تفاوتی ایجاد نمیشود :
# نام نام خانوادگی سن شهر کشور جسنسیت مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال مثال 1 مرتضی افضلی 22 تهران ایران مرد تست تست تست تست تست تست تست تست تست تست تست تست
شما برای ایجاد اسکرول بار میتوانید از کلاس های زیر نیز استفاده کنید ، همانطور که در مثال بالا دیدید هنگامی اسکرول بار اضافه میشود که صفحه نمایش کمتر از 992 پیکسل باشد.
کلاس .table-responsive-sm برای کوچکتر از 576 پیکسل ، کلاس .table-responsive-md برای کوچکتر از 768 پیکسل ، کلاس .table-responsive-lg برای کوچکتر از 992 پیکسل و کلاس .table-responsive-xl برای نمایشگرهای کوچکتر از 1200 پیکسل اسکرول ایجاد میکنند.
ویدیوی قسمت پنجم
به انتهای این اموزش نیز رسیدیم امیدوارم این قسمت از اموزش ها برای شما عزیزان مفید واقع شده باشد ، در صورت نیاز برای اطلاعات بیشتر میتوانید به سایت getbootstrap مراجعه کنید.
پیروز باشید.
