جدول پایه

تمام سبک های جدول در بوت استرپ 4 به ارث برده می شوند، به این معنی که هر یک از جداول نود شده به همان شیوه ای که پدر و مادر است، مدل می شوند.

جدول ساده

برای یک ظاهر اساسی، کلاس پایه را اضافه کنید .tableبه هر که <table>.ممکن است به نظر فوق العاده بیفایده باشد، اما با توجه به استفاده گسترده از جداول برای پلاگین های دیگر مانند تقویم و جمع کننده های تاریخ، ما تصمیم گرفتیم الگوهای سبک سفارشی ما را جدا کنیم.

# نام نام خانوادگی نام کاربری
1 علی احمدی @mdo
2 زیبا فاطمی @fat
3 سینا یعقوبی @twitter

جدول معکوس

شما همچنین می توانید رنگ ها را با متن سبک در زمینه های تاریک با .table-inverse.

# نام نام خانوادگی نام کاربری
1 علی احمدی @mdo
2 زیبا فاطمی @fat
3 سینا یعقوبی @twitter
گزینه های جدول

تمام سبک های جدول در بوت استرپ 4 به ارث برده می شوند، به این معنی که هر یک از جداول نود شده به همان شیوه ای که پدر و مادر است، مدل می شوند.

سر میز نور

همانند جداول پیش فرض و معکوس، از یکی از دو کلاس اصلاح کننده استفاده کنید <thead>به رنگ خاکستری روشن ظاهر می شود

# نام نام خانوادگی نام کاربری
1 علی احمدی @mdo
2 زیبا فاطمی @fat
3 سینا یعقوبی @twitter

سر میز تیره

همانند جداول پیش فرض و معکوس، از یکی از دو کلاس اصلاح کننده استفاده کنید <thead>ظاهر می شود خاکستری تیره.

# نام نام خانوادگی نام کاربری
1 علی احمدی @mdo
2 زیبا فاطمی @fat
3 سینا یعقوبی @twitter
ردیف های نوار

تمام سبک های جدول در بوت استرپ 4 به ارث برده می شوند، به این معنی که هر یک از جداول نود شده به همان شیوه ای که پدر و مادر است، مدل می شوند.

ردیف های حاوی نور

استفاده کنید. نوار قابل تنظیم برای افزودن گورخر-striping به هر ردیف جدول در داخل <tbody>.

# نام نام خانوادگی نام کاربری
1 علی احمدی @mdo
2 زیبا فاطمی @fat
3 سینا یعقوبی @twitter

ردیف های نوار در معرض

استفاده .table-striped و .table-niverse برای اضافه کردن گورخر-راه راه به هر ردیف جدول و یک ظاهر طراحی معکوس در داخل <tbody>.

# نام نام خانوادگی نام کاربری
1 علی احمدی @mdo
2 زیبا فاطمی @fat
3 سینا یعقوبی @twitter

ردیف های قابل انفجار

اضافه کن .table-hoverبرای فعال کردن حالت شناور در سطرهای جدول در داخل <tbody>.

# نام نام خانوادگی نام کاربری
1 علی احمدی @mdo
2 زیبا فاطمی @fat
3 حسن حسینی @twitter

جدول کوچک

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

# نام نام خانوادگی نام کاربری
1 علی احمدی @mdo
2 زیبا فاطمی @fat
3 حسن حسینی @twitter

کلاس های متنی

استفاده از کلاس های متنی برای رنگ کردن سطرهای جدول یا سلول های جداگانه.

نوع عنوان ستون عنوان ستون عنوان ستون
فعال محتوای ستون محتوای ستون محتوای ستون
پیش فرض محتوای ستون محتوای ستون محتوای ستون
اولیه محتوای ستون محتوای ستون محتوای ستون
ثانویه محتوای ستون محتوای ستون محتوای ستون
موفقیت محتوای ستون محتوای ستون محتوای ستون
خطر محتوای ستون محتوای ستون محتوای ستون
هشدار محتوای ستون محتوای ستون محتوای ستون
اطلاعات محتوای ستون محتوای ستون محتوای ستون
روشن محتوای ستون محتوای ستون محتوای ستون
تیره محتوای ستون محتوای ستون محتوای ستون

جداول پاسخگو

با اضافه کردن جداول پاسخگو ایجاد کنید .table-responsiveبه هر که .table آنها را به صورت افقی روی دستگاه های کوچک حرکت دهید (زیر 768 پیکسل). هنگام مشاهده هر چیزی بزرگتر از 768 پیکسل عرض، شما هیچ تفاوت در این جداول نمی بینید.

# نام نام خانوادگی نام کاربری
1 علی احمدی @mdo
2 زیبا فاطمی @fat
3 حسن حسینی @twitter