قسمت پنجم bootstrap :چگونه با بوت استرپ جدول طراحی کنیم؟

قسمت پنجم bootstrap :چگونه با بوت استرپ جدول طراحی کنیم؟

در این قسمت از اموزش های بوت استرپ به طراحی جدول با bootstrap 4 خواهیم پرداخت.

پیشنهاد میشود سایر قسمت های دوره ی بوت استرپ را مطالعه فرمایید.

جدول ساده

یک جدول ساده در بوت استرپ ۴ دارای لایه های روشن و تقسیم بندی افقی است.

کلاس .table یک ظاهر طراحی اولیه را به یک جدول اضافه می کند برای درک این موضوع به مثال زیر توجه کنید :

ردیف های راه راه

برای ایجاد ردیف های راه راه در جدول مورد نظر باید از کلاس .table-striped استفاده کنید.

برای درک کردن بهتر این موضوع قطعه کد زیر را اجرا کنید:

جدول مرز بندی شده

برای ایجاد یک جداول که دارای حاشیه باشد باید از کلاس .table-bordered استفاده کنید برای درک بهتر این موضوع به مثال زیر توجه کنید:

افکت در هنگام اشاره موس

اگر قصد دارید یک جدول حرفه ای طراحی کنید باید از کلاس .table-hover استفاده کنید تا هنگامی که نشان گر موس بر روی ردیف ها قرار گرفت رنگ پس زمینه خاکستری بگیرد. به مثال زیر توجه کنید :

جدول سیاه و سفید

برای ایجاد یک جدول با قابلیت پس زمینه ی مشکی و همچنین رنگ متن های سفید باید از کلاس .table-dark استفاده کنید.

جدول مشکی و راه راه

شما اگر قصد دارید یک ظاهر متفاوت یعنی مشکی و راه راه داشته باشید باید از کلاس .table-dark و .table-striped همزمان استفاده کنید به مثال زیر توجه کنید :

افکت موس در حالت تیره

برای ایجاد افکت موس درحالت تیره کافی است کلاس .table-hover را به علاوه کلاس .table-dark کنار هم قرار دهیم :

جدول بدون حاشیه دور

کلاسهای متنی

شما در جلسه گذشته با انواع رنگ ها و متن ها اشنا شدید ، حال وقت ان است که از تجربه ی جلسه گذشته یک خلاقیت ایجاد کنید ، کلاسه های متنی و بک گراند های جلسه ی پیش را با تگ های جدول ادغام کنید تا ترکیب زیبایی برای جداول خود خلق کنید.

تنها تفاوت استفاده از رنگ ها در جداول اوردن کلمه ی table بجای bg یا text در درس گذشته است.

رنگ سربرگ

شما با اضافه کردن کلاس .thead-dark یک سربرگ با پس زمینه ی تیره و با اضافه کردن .thead-light یک سربرگ با رنگ روشن ایجاد میکنید.

جداول کوچک

با اضافه کردن کلاس .table-sm شما یک جدول کوچک ایجاد میکنید:

جداول ریسپانسیو یا واکنشگرا

برای واکنشگرا کردن یک جدول باید از کلاس .table-responsive استفاده کنید ، با افزودن این کلاس یک صفحه نور افقی به روی صفحه نمایش اضافه میشود که از عرض ۹۹۲ پیکسل کمتر باشد و اگر صفحه ی شما از ۹۹۲ پیکسل بزرگتر باشد هیچ تفاوتی ایجاد نمیشود :

شما برای ایجاد اسکرول بار میتوانید از کلاس های زیر نیز استفاده کنید ، همانطور که در مثال بالا دیدید هنگامی اسکرول بار اضافه میشود که صفحه نمایش کمتر از ۹۹۲ پیکسل باشد.

کلاس .table-responsive-sm برای کوچکتر از ۵۷۶ پیکسل ، کلاس .table-responsive-md برای کوچکتر از ۷۶۸ پیکسل ، کلاس .table-responsive-lg برای کوچکتر از ۹۹۲ پیکسل و کلاس .table-responsive-xl برای نمایشگرهای کوچکتر از ۱۲۰۰ پیکسل اسکرول ایجاد میکنند.

ویدیوی قسمت پنجم

به انتهای این اموزش نیز رسیدیم امیدوارم این قسمت از اموزش ها برای شما عزیزان مفید واقع شده باشد ، در صورت نیاز برای اطلاعات بیشتر میتوانید به سایت getbootstrap مراجعه کنید.

پیروز باشید.

برچسب ها : table، اموزش ایجاد جدول

دیدگاه تازه ای بنویسید