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

در صفحات وب نیز از لیست بندی های مختلفی استفاده میشود یکی از معمول ترین و رایجترین نوع لیستی که استفاده میکنیم ، لیست شمارشی طبقه بندی نشده است.

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

اگر اطلاعی از جلسات قبلی ندارید نگران نباشید تا انتهای این مقاله سعی میکنیم در حد امکان به مطالب قبلی اشاره ای داشته باشیم.

لیست ساده

همانطور که گفتیم ساده ترین نوع لیست ها ، لیست های طبقه بندی نشده است ، برای ساخت چنین لیستی کافی است از تگ ul با کلاس .list-group و تگ li با کلاس .list-group-item به شکل زیر استفاده کنید:

 

  
First item
  
Second item
  
Third item
 

حالت فعال

برای استفاده از حالت فعال کافی است کلاس .active را به تگ مورد نظر اضافه کنیم:

 

  
Active item
  
Second item
  
Third item
 

لیست همراه با لینک

برای استفاده از لیست های لینک دار بهتر است از تگ div بجای تگ ul استفاده کنیم و بجای li کافی است تگ a با ادرس اینترنتی مورد نظر را قرار دهیم ، با این تفاوت که بجای کلاس .list-group-item از کلاس .list-group-item-action استفاده کرد:

 

  First item
  Second item
  Third item
 

آیتم های غیرفعال

برای استفاده از حالت غیرفعال کافی است از کلاس .disabled استفاده کنیم :

 

  Disabled item
  Disabled item
  Third item
 

حذف مرز ها

در مثال اول با افزودن کلاس .list-group حاشیه ای ایجاد میشد ، اما خب طبق تدابیر اندیشیده شده در بوت استرپ و گستردگی میتوانید از کلاس .list-group-flush استفاده کنید تا حاشیه دور حذف شود:

 

  
First item
  
Second item
  
Third item
  
Fourth item
 

فهرست افقی

اگر تمایل به این دارید که بجای نمایش عمودی فهرست ، فهرست شما به نمای افقی تبدیل شود کافی است کلاس .list-group-horizontal را در کنار کلاس .list-group اضافه کنید:

 

  
First item
  
Second item
  
Third item
  
Fourth item
 

کلاسهای متنی

از کلاسهای متنی می توان برای لیست کردن موارد استفاده کرد. کلاس های رنگ آمیزی لیست موارد عبارتند از: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-dark ,list-group-item-light,:

برای درک بهتر کلاس ها مثال زیر را اجرا نمایید :

 

  
Success item
  
Secondary item
  
Info item
  
Warning item
  
Danger item
  
Primary item
  
Dark item
  
Light item
 

لینک در کلاسهای متنی

 

  Action item
  Success item
  Secondary item
  Info item
  Warning item
  Danger item
  Primary item
  Dark item
  Light item
 

لیست همراه با نشانه

برای افزودن نشانه اعداد به لیست میتوانیم از تگ span به شکل زیر استفاده کنیم:

 

  

    Inbox
    12
  
  

    Ads
    50
  
  

    Junk
    99
  
 

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

امیدوارم تا اینجای مقاله برای شما عزیزان مفید واقع شده باشد.

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

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