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

آخرین بروز رسانی: شهریور ۱۵, ۱۳۹۶
آموزش ایجاد جدول در bootstrap

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

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

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

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

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

<table class="table"> <thead>    <tr>       <td>Class</td>       <td>Description</td>    </tr> </thead> <tbody>    <tr>       <td>.active</td>       <td>Applies the hover color to the table row or table cell</td>    </tr>    <tr>       <td>.success</td>       <td>Indicates a successful or positive action</td>    </tr>    <tr>       <td>.info</td>       <td>Indicates a neutral informative change or action</td>    </tr> </tbody> </table> <br><br> <table class="table table-striped" style="background:#b3b3ff;"> <thead>    <tr>      <td>Class</td>      <td>Description</td>    </tr> </thead> <tbody>    <tr>      <td>.active</td>      <td>Applies the hover color to the table row or table cell</td>    </tr>    <tr>      <td>.warning</td>      <td>Indicates a warning that might need attention</td>    </tr>    <tr>      <td>.danger</td>      <td>Indicates a dangerous or potentially negative action</td>    </tr> </tbody> </table>

 

 

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

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

کلاس table-bordered

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

<table class="table table-bordered"> <thead>     <tr>       <td>Class</td>       <td>Description</td>     </tr> </thead> <tbody>     <tr>       <td>.active</td>       <td>Applies the hover color to the table row or table cell</td>     </tr>     <tr>       <td>.success</td>       <td>Indicates a successful or positive action</td>     </tr>     <tr>       <td>.info</td>       <td>Indicates a neutral informative change or action</td>     </tr> </tbody> </table>

 

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

 

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

کلاس table-hover

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

<table class="table table-hover" style="background:#b3b3ff;"> <thead>   <tr>     <td>Class</td>     <td>Description</td>   </tr> </thead> <tbody>   <tr>     <td>.active</td>     <td>Applies the hover color to the table row or table cell</td   </tr>   <tr>     <td>.success</td>     <td>Indicates a successful or positive action</td>   </tr>   <tr>     <td>.info</td>     <td>Indicates a neutral informative change or action</td>   </tr> </tbody> </table>

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

 

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

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

نوشته آموزش جدول در بوت استرپ – قسمت اول اولین بار در طراحی سایت اصفهان | سئو سایت در اصفهان پدیدار شد.

طراحی سایت اصفهان | سئو سایت در اصفهان

پربازدیدترین اخبار
طراحی سایت

طراحی سایت در اصفهان   طراحی سایت و سئو سایت در اصفهان   تیم طراحی سایت و سئو سایت وب یار به آدرس ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت , سئو سایت در گوگل ، ارسال […]

در مرورگرهای مدرن هرگاه تب جدیدی باز کنید با مجموعه ای از وبسایت هایی که بیشترین بازدید را از آن ها داشته اید مواجه خواهید شد. حقیقت آن است که با استفاده از ابزار سفارشی و افزونه های مختلف و کمی تغییر در این بخش، می توانید کاربرد تب های جدید را بهبود بخشید. به […]

بازاریابی محتوا و سئو   بازاریابی محتوا و سئو چه ارتباطی با یکدیگر دارند ؟   اگر شما یک کسب و کار اینترنتی یا آنلاین دارید برای ارتقای آن و توسعه تجارت خود باید بازدید و رتبه بندی مناسب در گوگل به دست بیاورید که این کار آسانی است اگر مقاله با ما تا انتهای […]

صفحه فرود یا Landing Page  در آموزش های مباحث تبلیغات سایت ها امروز قصد داریم آموزش Landing Page  یا صفحه ی فرود که یکی از موارد مهم در بازاریابی اینترنتی و تجارت آنلاین می باشد را برای شما عزیزان مطرح کنیم  و به اهمیت و دلایل طراحی Landing Page بپردازیم. در ابتدا به توضیحی مختصر […]

برای یک خانم تنها سفر کردن ممکن است مقداری سخت به نظر برسد اما نکته اصلی همین سختی است که البته با مقداری آگاهی میتوانید تمام سختی را به تجربه های لذت بخش تبدیل کرد. به گزارش آلامتو و به نقل از الی گشت؛ سفر کردن یکی از بهترین راه های بدست آوردن تجربه در […]