آموزش جدول در بوت استرپ – قسمت اول

آخرین بروز رسانی: مرداد ۱۷, ۱۳۹۶

آموزش bootstrap – آموزش جدول در بوت استرپ

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

در این آموزش به ایجاد جدول، کلاس table-bordered ، کلاس table-hover و کلاس table-striped پرداخته می شود. همراه ما باشید تا خیلی واضح و ساده با جدول در بوت استرپ آشنا شوید.

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

برای ایجاد جدول در بوت استرپ از کلاس table در تگ table استفاده می کنیم. جدول پایه در بوت استرپ به طور پیش فرض شامل خطوط افقی است و padding دارد. کلاس table، استایل مقدماتی را به جدول اضافه می کند و کلاس table-striped جدول را به صورت راه راه در می آورد. در کد زیر با نحوه ی استفاده از این کلاس ها آشنا می شوید.

 

 

همانطور که می دانید تگ tr برای ایجاد سطر و تگ td برای ایجاد ستون در جدول است. تگ thead و تگ tbody به ترتیب برای هدر جدول و بدنه ی اصلی جدول استفاده می شوند.
خروجی کد بالا به صورت زیر می باشد.

آموزش جدول در بوت استرپ

کلاس table-bordered

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

 

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

 

اموزش بوت استرپ - اموزش جدول در بوت استرپ

کلاس table-hover

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

خروجی به صورت زیر می باشد. همانطور که در شکل مشاهده می کنید زمانی که ماوس را روی سطرهای جدول نگه می داریم، رنگ آن تغییر می کند.

 

 آموزش جدول در بوت استرپ

در مقالات بعدی آموزش جدول در بوت استرپ را با کلاس table-condensed ، رنگی کردن سطر یا یک سلول از جدول و ریسپانسیو کردن جدول ادامه خواهیم داد پس همراه ما باشید. با عضویت در کانال تلگرام وب یار @webyar_net می توانید از آموزش های بعدی ما با خبر شوید.

مطالب مرتبط
ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2017

بالا