میرممد

آموزش برنامه نویسی همراه با تکه کد های کاربردی از زبان های مختلف برنامه نویسی
سید محمد میرعالی

سید محمد میرعالی

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

دسته بندی مطالب آمار سایت
  • کل مطالب : 13
  • کل نظرات : 0
  • افراد آنلاین : 1
  • تعداد اعضا : 0
  • آی پی امروز : 17
  • آی پی دیروز : 25
  • بازدید امروز : 76
  • باردید دیروز : 61
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 137
  • بازدید ماه : 1,356
  • بازدید سال : 22,286
  • بازدید کلی : 22,286
  • آموزش کار با جداول در Bootstrap 4


    در اين مطلب از سايت ميرممد با كلاس هاي جدول در Bootstrap 4 كار ميكنيم و يك سري تكه كد مربوط به جداول در بوتسترپ نسخه چهار رو براتون قرار ميدم.

    شما فقط کافیه کلاس Table رو به تگ جدولتون بدید مثل کد زیر :

    <table class="table">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>

    خروجی کد بالا :


    FirstnameLastnameEmail
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    همونطور که میبینید یک ظاهر زیبایی به جدول شما میده فقط با اضافه کردن کلاس table به جدولتون.

    کلاس table-striped در bootstrap 4  :

    اگر بخواید جدولتون یک سطر درمیون مجزا بشن و یک جلوه ی خوبی برای جدا کردن سطر ها از هم بگیره میتونید کلاس table-striped رو به جدولتون اضافه کنید.

    تکه کد استفاده از کلاس table-striped در بوتسترپ چهار :

    <table class="table table-striped">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>

    خرحی کد بالا :

     

    FirstnameLastnameEmail
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    کلاس table-bordered در bootstrap 4  :

    با دادن کلاس table-bordered به جدولمون خیلی راحت یک حاشیه به جدول اضافه میشه .

    تکه کد استفاده از کلاس table-bordered در بوتسترپ 4 :

    <table class="table table-bordered">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>

    خروجی کد بالا :

     

    FirstnameLastnameEmail
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    کلاس table-hover در bootstrap 4  :

    با اضافه کردن کلاس table-hover به جدولمون با رفتن موس روی هر سطر از جدول اون سطر متمایز میشه .

    تکه کد استفاده از کلاس table-hover در بوتسترپ چهار :

    <table class="table table-hover">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>

    خروجی کد بالا :

    FirstnameLastnameEmail
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    کلاس table-dark در bootstrap 4  :

    کلاس table-dark یک جدول تیره درست میکنه.

    تکه کد استفاده از کلاس table-dark در بوتسترپ چهار :

    <table class="table table-dark">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>

    خروجی کد بالا :

    FirstnameLastnameEmail
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    برای جدول دارکمون هم میشه از کلاس های table-hover و table-striped استفاده کرد.

    کلاس table-borderless در bootstrap 4  :

    همونطور که از اسم کلاس table-borderless مشخصه بوردر یا حاشیه ی جدول رو حذف میکنه.

    نمونه کد استفاده شده از کلاس table-borderless در بوتسترپ چهار :

    <table class="table table-borderless">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>

    خروجی کد بالا :

    FirstnameLastnameEmail
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley

    july@example.com

    اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد

    ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.



    پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :

    آموزش DocType در HTML 5

    صفحه بندی در Bootstrap 4

    آموزش کار با Progress Bar در Bootstrap 4

    آموزش کار با Badge در Bootstrap 4

    آموزش کار با Button در Bootstrap 4

    آموزش کار با Alerts در Bootstrap 4

    آموزش کار با Jumbotron در Bootstrap 4

    آموزش استفاده از Tooltip در Bootstrap 4

    آموزش استفاده از تگ video در HTML5

    آموزش كار با تصاوير در Bootstrap 4

    بازدید : 718 شنبه 21 مهر 1397 : 16:57 نظرات ()
    ارسال نظر برای این مطلب

    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی