نمایش نتایج: از شماره 1 تا 1 از مجموع 1

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

  
  1. #1
    نام حقيقي: شیما قطره سامانی

    خواننده
    تاریخ عضویت
    Feb 2017
    محل سکونت
    اصفهان
    نوشته
    2
    سپاسگزاری شده
    1
    سپاسگزاری کرده
    0

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

    برای ایجاد جدول در بوت استرپ از کلاس table در تگ table استفاده می کنیم. جدول پایه در بوت استرپ به طور پیش فرض شامل خطوط افقی است و padding دارد. کلاس table، استایل مقدماتی را به جدول اضافه می کند و کلاس table-striped جدول را به صورت راه راه در می آورد. در کد زیر با نحوه ی استفاده از این کلاس ها آشنا می شوید.
    کد HTML:
    <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 برای ایجاد کادر در اطراف و درون جدول است. به کد زیر دقت کنید.
    کد HTML:
    <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;">

    کد HTML:
    <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 ، رنگی کردن سطر یا یک سلول از جدول و ریسپانسیو کردن جدول ادامه خواهیم داد پس همراه ما باشید.

    منبع: طراحی سایت اصفهان



    موضوعات مشابه:
    ویرایش توسط shimasgs : 2017-08-12 در ساعت 11:47 AM

کلمات کلیدی در جستجوها:

هیچ کلمه ای ثبت نشده است.

برچسب برای این موضوع

مجوز های ارسال و ویرایش

  • شما نمی توانید موضوع جدید ارسال کنید
  • شما نمی توانید به پست ها پاسخ دهید
  • شما نمی توانید فایل پیوست ضمیمه کنید
  • شما نمی توانید پست های خود را ویرایش کنید
  •