قسمت شانزدهم bootstrap : نحوه ی استفاده از کادر در بوت استرپ ۴

یک کادر در بوت استرپ 4 ، حاوی حاشیه دور یا border می باشد . شما میتوانید در این کادر محتوا نیز قرار دهید ، همچنین این کادر میتوان شمال هدر ، پاورقی یا فوتر ، محتوا ، رنگ و … نیز باشد.

پیشنهاد میشود قبل از ورود به این اموزش قسمت های پیشین دوره ی بوت استرپ را مطالعه فرمایید. اما اگر وقت این کار را ندارید هیچ مسئله ای نیست تا انتهای مقاله با ما همراه باشید سعی میکنیم به مطالعه گذشته نیز اشاره خواهیم داشت.

کارت ساده

یک کارت ساده به وسیله ی کلاس .card و همچنین استفاده از تگ div با کلاس .card-body قابل استفاده است.

به مثال زیر توجه فرمایید :

  
Basic card

هدر و فوتر

برای اضافه کردن هدر و فوتر به کارت کافی است از کلاس .card-header برای سربرگ و .cart-footer برای پاورقی استفاده کنید.

به مثال زیر توجه فرمایید :

  
Header
  
Content
  
Footer

کارتهای رنگی

همانطور که در جلسه ی چهارم بوت استرپ راجب رنگ های پس زمینه در بوت استرپ صحبت کردیم ، شما میتوانید از کلاس های .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark و .bg-light استفاده کنید. به مثال زیر توجه کنید :

  
Cards with Contextual Classes
  

    
Basic card
  
  

  

    
Primary card
  
  

  

    
Success card
  
  

  

    
Info card
  
  

  

    
Warning card
  
  

  

    
Danger card
  
  

  

    
Secondary card
  
  

  

    
Dark card
  
  

  

    
Light card
  

تیتر ها ، نوشته ها و لینک ها

از عنوان کارت استفاده کنید تا عناوین کارت را به عناصر مختلف اضافه کنید. اگر آخرین فرزند (یا تنها فرزند) درون .card-body باشد ، از کلاس .card-text برای حذف حاشیه های پایین برای یک عنصر <p> استفاده می شود. کلاس .card-link یک رنگ آبی را به هر پیوند و یک اثر شناور اضافه می کند.

برای درک بهتر به مثال زیر توجه فرمایید :

  

    
Card title
    
Some example text. Some example text.
    Card link
    Another link
  

عکس در کارت

شما میتوانید از .card-img-top و همچنین .card-img-bottom در تگ img استفاده کنید . به یاد داشته باشید که ما عکس ها را خارج از .card-body تعریف میکنیم.

به مثال زیر توجه فرمایید:

  
  

    
John Doe
    
Some example text.
    See Profile
  

پیوند کارت

کلاس .stretched-link را به پیوندی درون کارت اضافه کنید ، و کل کارت قابل کلیک و قابل جابجایی خواهد بود (کارت به عنوان پیوند عمل می کند):

 See Profile

پوشش تصویر کارت

شاید شما هم تمایل داشته باشید که بر روی عکسی که قرار داده اید متنی بنویسید ، برای این کار کافی است کلاس .card-img-overlay را به تگ مورد نظر اضافه کنید به مثال زیر توجه فرمایید :

  
  

    
John Doe
    
Some example text.
    See Profile
  

ستون کارتها

کلاس. ستون-ستونها یک شبکه از کارتن مانند (به عنوان pinterest) ایجاد می کند. با وارد کردن کارت های بیشتر ، طرح به طور خودکار تنظیم می شود.

توجه: کارت ها به صورت عمودی در صفحه های کوچک نمایش داده می شوند (کمتر از 576 پیکسل):

  

    

      
Some text inside the first card
    
  
  

    

      
Some text inside the second card
    
  
  

    

      
Some text inside the third card
    
  
  

    

      
Some text inside the fourth card
    
  
  

    

      
Some text inside the fifth card
    
  
  

    

      
Some text inside the sixth card
    
  

عرشه کارتها

کلاس .card-deck یک شبکه کارت ایجاد می کند که از نظر قد و عرض برابر هستند. با وارد کردن کارت های بیشتر ، طرح به طور خودکار تنظیم می شود.

توجه: کارت ها به صورت عمودی در صفحه های کوچک نمایش داده می شوند (کمتر از 576 پیکسل):

  

    

      
Some text inside the first card
    
  
  

    

      
Some text inside the second card
    
  
  

    

      
Some text inside the third card
    
  
  

    

      
Some text inside the fourth card
    
  

گروه کارتها

کلاس .card-group شبیه به .card-deck است. تنها تفاوت این است که کلاس .card-group حاشیه های چپ و راست را بین هر کارت حذف می کند.

توجه: کارت ها به صورت عمودی در صفحه های کوچک (کمتر از 576 پیکسل) نمایش داده می شوند ، با حاشیه بالا و پایین:

  

    

      
Some text inside the first card
    
  
  

    

      
Some text inside the second card
    
  
  

    

      
Some text inside the third card
    
  
  

    

      
Some text inside the fourth card
    
  

ویدیوی قسمت شانزدهم

پیشنهاد میشود برای داشتن اطلاعات بیشتر به سایت getbootstrap مراجعه فرمایید.

همچنین میتوانید برای داشتن اطلاعات بیشتر از جلسات قبل به دوره ی جامع بوت استرپ 4 مراجعه فرمایید و از اموزش های رایگان ما استفاده کنید.

پایدار باشید.