صفحه: [1]   پایین
  چاپ صفحه  
نويسنده موضوع: آموزش جدول در بوت استرپ – قسمت اول  (دفعات بازدید: 547 بار)
shimasgs
کاربر جدید
*

تشكرها : 2
آفلاین آفلاین

تعداد ارسال: 2


ديدن مشخصات
« : 21 مرداد 1396,ساعت 12:00:19 »

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

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

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

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

کد:
<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>
</thead>

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


کلاس table-bordered

کلاس 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>
</thead>
خروجی را در شکل زیر مشاهده کنید. همان طور که می بینید جدول کادر بندی شده است.



کلاس 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>
<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>
</thead>

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


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

مرجع:
webyar.net
« آخرين ويرايش: 25 مرداد 1396,ساعت 10:35:52 توسط كیانی » خارج شده است
انجمن تخصصی استادان و دانشجویان کامپیوتر ایران
   

پنل اس ام اس
 خارج شده است
صفحه: [1]   بالا
  چاپ صفحه  
 
پرش به :