سبد (0)

تبلیغات

جدول ها در بوت استرپ

جدول پایه در بوت استرپ 

Wiki

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

کلاس table استایل های مقدماتی را به جدوال اضافه می کند:

مثال (جدول های بوت استرپ)

خودتان امتحان کنید »

ایجاد ردیف های راه راه در بوت استرپ

Wiki

با استفاده از کلاس table-striped می توانیم جدول های خود را به شکل راه راه در بیاوریم:

مثال (جدول های بوت استرپ)

خودتان امتحان کنید »

اضافه کردن کادر به جدول در بوت استرپ

Wiki

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

مثال (جدول های بوت استرپ)

خودتان امتحان کنید »

جدول متراکم شده در بوت استرپ

Wiki

کلاس table-condensed. یک جدول را با نصف کردن padding خانه ها، متراکم می کند:

مثال (جدول های بوت استرپ)

خودتان امتحان کنید »

کلاس های متنی در بوت استرپ

Wiki

از کلاس های متنی می توان  برای رنگی کردن ردیف های جدول(<tr>) یا سلول های جدول(<td>) استفاده کرد:

مثال (جدول های بوت استرپ)

خودتان امتحان کنید »

 انواع کلاس های متنی که می توانید از آنها استفاده کنید:

کلاس توضیحات
active.

اعمال رنگ بر روی ردیف یا سلول جدول هنگام رویداد hover.

success.

یک عمل موفقیت آمیز یا مثبت را مشخص می کند.

info.

یک اطلاعات آموزنده و خنثی را مشخص می کند.

warning.

یک اخطار که نیاز به توجه دارد را مشخص می کند.

danger.

یک عمل خطرناک یا منفی را مشخص می کند.


مرجع کامل کلاس های جدول در بوت استرپ

Wiki

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

دیدگاه‌ها  

+2 # salar5075 1395-12-24 14:24
سلام اگر امکانش هست کلاس active رو با یک مثال توضیح بدید.دقیقا نمیدونم چجوری باید ازش استفاده کنم.
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-12-24 14:47
سلام. این کلاس، یکی از ردیف ها یا سلول ها رو به رنگ خاکستری روشن در می آورد. به مثال زیر توجه کنید:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_tr_active&stacked=h
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # saye kian 1394-04-27 13:04
در جدول های یک خاصیت دیگری وجود دارد به نام table-respansiv e ؛
نمی دونم به چه کار میاد؛وقتی که عنصر والد ریسپانسیو باشد عنصر فرزند هم خوب ریسپانسیو میشود دیگه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1394-04-27 14:19
فرض کنید یک جدول بزرگ که عرض زیادی دارد در سایت خودتان ساخته اید. حالا تصور کنید که این جدول وقتی بخواهد در یک موبایل کوچک نمایش داده شود چه اتفاقی می افتد. همان طور که می دانید، جدول ها به طور پیش فرض اسکرول افقی، ندارند. کلاس table-responsiv e یک اسکرول افقی در چنین مواقعی برای جدول ما فراهم می آورد. برای استفاده از این کلاس می توانید به صورت زیر عمل کنید:
<div class="table-responsiv e" >
<table class="table" >
...
</table >
</div >
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # عباس طاهری 1394-02-03 10:58
با عرض سلام و خسته نباشید
خدمتتون عرض کنم که قسمت کلاس های متنی بر روی خودتان امتحان کنید وقتی کلیک می کنیم با خطای 404 مواجه میشیم.اگر امکانش هست بررسی کنین.با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1394-02-03 11:49
سلام
با تشکر از دقت نظر شما، به زودی تمام دکمه های "خودتان امتحان کنید" بررسی و اصلاح می شوند و همچنین مثال ها به صورت "راست چین" در خواهند آمد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی