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

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت پنجم bootstrap :چگونه با بوت استرپ جدول طراحی کنیم؟

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

3677

Calendar-amico (2)

تاریخ انتشار:

29 , مرداد , 1398

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

در این قسمت از اموزش های بوت استرپ به طراحی جدول با 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 مراجعه کنید.

پیروز باشید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

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

    ارسال یک پیام

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    X