031- 344 500 60

طراحی سایت اصفهان | سئو سایت اصفهان
طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی شرکت, طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی اینترنتی اصفهان , تبلیغات اینترنتی , 09133886881

صفحه نخست » بلاگ » bootstrap » آموزش جدول در بوت استرپ – قسمت اول

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

تاریخ:۱۷ام مرداد ۱۳۹۶
پشتیبانی وب یار
31

آموزش 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 می توانید از آموزش های بعدی ما با خبر شوید.

درباره نویسنده :
پشتیبانی وب یار

مطالب مرتبط

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

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

هشدارها در بوت استرپ در این مقاله آموزش بوت استرپ را با مبحث هشدارها در بوت استرپ ادامه می دهیم. در این آموزش شما با انواع هشدارها در بوت استرپ، بستن هشدارها در بوت استرپ و کلاس alert-link آشنا خواهید شد. هشدارها در بوت استرپ برای نمایش اعلان به کاربر استفاده می شوند. در واقع هر […]

آموزش جدول ریسپانسیو در bootstrap

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

آموزش جدول در بوت استرپ – جدول ریسپانسیو در bootstrap   در این مقاله آموزش جدول در بوت استرپ را با کلاس table-condensed ، کلاس های متنی برای رنگی کردن سطر یا سلول جدول و ریسپانسیو کردن جدول ادامه خواهیم داد پس خواندن این مقاله را از دست ندهید. در قسمت اول آموزش جدول در بوت […]

استایل دهی به متن

آموزش بوت استرپ استایل دهی به متن در bootstrap

آموزش بوت استرپ استایل دهی به متن در bootstrap با ادامه آموزش بوت استرپ bootstrap و این بار آموزش استایل دهی به متن در bootstrap توسط تیم وب یار در خدمت شما هستیم. در مقالهآموزش بوت استرپ استایل دهی به متن در bootstrap ،با معرفی تگ های mark,small,hgroup  در خدمت شما هستیم. در جلسه قبل با […]

ارسال دیدگاه

*    

*    

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

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

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

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