لیست ها

  1. رابط کاربری پایه
  2. لیست ها

لیست پیش فرض

استفاده کنید list-group کلاس در یک لیست نامرتب و list-group-item کلاس برای ایجاد یک گروه لیست پیش فرض.

  • قرارداد صورتحساب را ارسال کنید
  • تمام اسناد را ارسال کنید
  • ملاقات با دارون برای بررسی فرم دریافت
  • موضوع uikings را بررسی کنید و از مشتری پشتیبانی کنید
 <ul class="list-group">
    <li class="list-group-item"><i class="ri-bill-line align-middle me-2"></i> Send the billing agreement</li>
    <li class="list-group-item"><i class="ri-file-copy-2-line align-middle me-2"></i>Send over all the documentation.</li>
    <li class="list-group-item"><i class="ri-question-answer-line align-middle me-2"></i>Meeting with daron to review the intake form</li>
    <li class="list-group-item"><i class="ri-secure-payment-line align-middle me-2"></i>Check uikings theme and give customer support</li>
</ul>

آیتم فعال

استفاده کنید active کلاس به list-group-item برای نشان دادن انتخاب فعال فعلی.

  • قرارداد صورتحساب را ارسال کنید
  • تمام اسناد را ارسال کنید
  • ملاقات با دارون برای بررسی فرم دریافت
  • موضوع uikings را بررسی کنید و از مشتری پشتیبانی کنید
  • شروع به ارائه ارائه کنید
 <ul class="list-group">
    <li class="list-group-item active" aria-current="true">Send the billing agreement</li>
    <li class="list-group-item">Send over all the documentation.</li>
    <li class="list-group-item">Meeting with daron to review the intake form</li>
    <li class="list-group-item">Check uikings theme and give customer support</li>
    <li class="list-group-item">Start making a presentation</li>
</ul>

موارد غیر فعال

استفاده کنید disabled کلاس به list-group-item برای ساختن آنظاهر شوداز کار افتاده است.

  • جیمز بالارد
  • نانسی مارتینو
  • هنری برد
  • اریکا کرنان
 <ul class="list-group">
    <li class="list-group-item disabled" aria-disabled="true">
        <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
                <img src="assets/images/users/avatar-1.jpg" alt="" class="avatar-xs rounded-circle">
            </div>
            <div class="flex-grow-1 ms-2">
                James Ballard
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
                <img src="assets/images/users/avatar-2.jpg" alt="" class="avatar-xs rounded-circle">
            </div>
            <div class="flex-grow-1 ms-2">
                Nancy Martino
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
                <img src="assets/images/users/avatar-3.jpg" alt="" class="avatar-xs rounded-circle">
            </div>
            <div class="flex-grow-1 ms-2">
                Henry Baird
            </div>
        </div>
    </li>
    <li class="list-group-item">
        <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
                <img src="assets/images/users/avatar-3.jpg" alt="" class="avatar-xs rounded-circle">
            </div>
            <div class="flex-grow-1 ms-2">
                Erica Kernan
            </div>
        </div>
    </li>
</ul>

لیست با پیوند

استفاده کنید <a> تگ کنید تا با افزودن list-group-item-action آیتم های گروه لیست قابل اجرا را با حالت های شناور، غیرفعال و فعال ایجاد کنید.

دسته بندی دانلود دسترسی امنیتی پوشه ذخیره سازی اعلان فشار حالت تاریک 
 <div class="list-group list-group-fill-success">
    <a href="#" class="list-group-item list-group-item-action active"><i class="ri-download-2-fill align-middle me-2"></i>Category Download</a>
    <a href="#" class="list-group-item list-group-item-action"><i class="ri-shield-check-line align-middle me-2"></i>Security Access</a>
    <a href="#" class="list-group-item list-group-item-action"><i class="ri-database-2-line align-middle me-2"></i>Storage folder</a>
    <a href="#" class="list-group-item list-group-item-action"><i class="ri-notification-3-line align-middle me-2"></i>Push Notification</a>
    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true"><i class="ri-moon-fill align-middle me-2"></i>Dark Mode</a>
</div>

لیست با دکمه

استفاده کنید <button> تگ کنید تا با افزودن list-group-item-action آیتم های گروه لیست قابل اجرا را با حالت های شناور، غیرفعال و فعال ایجاد کنید.

 <div class="list-group">
    <button type="button" class="list-group-item list-group-item-action active" aria-current="true"><i class="ri-reply-fill align-middle me-2"></i>Reply</button>
    <button type="button" class="list-group-item list-group-item-action"><i class="ri-share-forward-fill align-middle me-2"></i>Forward Message</button>
    <button type="button" class="list-group-item list-group-item-action"><i class="ri-equalizer-line align-middle me-2"></i>Filter Message</button>
    <button type="button" class="list-group-item list-group-item-action"><i class="ri-delete-bin-5-line align-middle me-2"></i>Delete Message</button>
    <button type="button" class="list-group-item list-group-item-action" disabled><i class="ri-forbid-line align-middle me-2"></i>Block "Mark Spencer</button>
</div>

لیست فلاش

استفاده کنید list-group-flush کلاس برای حذف برخی از حاشیه ها و گوشه های گرد برای ارائه موارد گروهی لیست.

  • قرارداد صورتحساب را ارسال کنید
  • تمام اسناد را ارسال کنید
  • ملاقات با دارون برای بررسی فرم دریافت
  • موضوع uikings را بررسی کنید و از مشتری پشتیبانی کنید
  • شروع به ارائه ارائه کنید
 <ul class="list-group list-group-flush">
    <li class="list-group-item">Send the billing agreement</li>
    <li class="list-group-item">Send over all the documentation.</li>
    <li class="list-group-item">Meeting with daron to review the intake form</li>
    <li class="list-group-item">Check uikings theme and give customer support</li>
    <li class="list-group-item">Start making a presentation</li>
</ul>

فهرست افقی

استفاده کنید list-group-horizontal کلاس برای تغییر طرح بندی آیتم های گروه لیست از عمودی به افقی در تمام نقاط شکست.

  • صندوق ورودی
  • کار کنید
  • خرید
  • صندوق ورودی
  • کار کنید
  • خرید
  • صندوق ورودی
  • کار کنید
  • خرید
 <!-- Start Alignment -->
<ul class="list-group list-group-horizontal-md">
    <li class="list-group-item">Inbox</li>
    <li class="list-group-item">Work</li>
    <li class="list-group-item">Shopping</li>
</ul> 

 <!-- Center Alignment -->
<ul class="list-group list-group-horizontal-md justify-content-center">
    <li class="list-group-item">Inbox</li>
    <li class="list-group-item">Work</li>
    <li class="list-group-item">Shopping</li>
</ul> 

 <!-- Right Alignment -->
<ul class="list-group list-group-horizontal-md justify-content-end">
    <li class="list-group-item">Inbox</li>
    <li class="list-group-item">Work</li>
    <li class="list-group-item">Shopping</li>
</ul>

کلاس های متنی

از کلاس های متنی برای استایل دادن به آیتم های لیست با پس زمینه و رنگ حالت دار استفاده کنید.

  • پروتئین ها و چربی ها در
  • یک آیتم ساده در لیست اولیه
  • یک آیتم لیست ثانویه ساده
  • یک آیتم ساده لیست موفقیت در گروه
  • یک آیتم گروهی لیست خطر ساده
  • یک آیتم گروهی لیست هشدار ساده
  • یک مورد ساده در لیست اطلاعات
  • یک آیتم گروهی لیست نور ساده
  • یک آیتم ساده در لیست تاریک
 <ul class="list-group">
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
    <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
    <li class="list-group-item list-group-item-success">A simple success list group item</li>
    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
    <li class="list-group-item list-group-item-info">A simple info list group item</li>
    <li class="list-group-item list-group-item-light">A simple light list group item</li>
    <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

کلاس های متنی با پیوند

کلاس های متنی نیز با آن کار می کنند .list-group-item-action . به اضافه کردن سبک های شناور در اینجا توجه کنید که در مثال قبلی وجود ندارد.

یک آیتم گروهی فهرست پیش فرض ساده یک آیتم ساده در لیست اولیه یک آیتم لیست ثانویه ساده یک آیتم ساده لیست موفقیت در گروه یک آیتم گروهی لیست خطر ساده یک آیتم گروهی لیست هشدار ساده یک آیتم گروهی ساده در لیست اطلاعات یک آیتم گروهی لیست نور ساده یک آیتم ساده در لیست تاریک 
 <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

لیست های رنگی

استفاده کنید list-group-fill- با کلاس اصلاح کننده به آیتم های لیست سبک با پس زمینه و رنگ حالت.

  • پروتئین ها و چربی ها در
  • یک آیتم ساده در لیست اولیه
  • یک آیتم لیست ثانویه ساده
  • یک آیتم ساده لیست موفقیت در گروه
  • یک آیتم گروهی لیست خطر ساده
  • یک آیتم گروهی لیست هشدار ساده
  • یک آیتم گروهی ساده در لیست اطلاعات
  • یک آیتم گروهی لیست نور ساده
  • یک آیتم ساده در لیست تاریک
 <ul class="list-group">
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item list-group-fill-primary">A simple primary list group item</li>
    <li class="list-group-item list-group-fill-secondary">A simple secondary list group item</li>
    <li class="list-group-item list-group-fill-success">A simple success list group item</li>
    <li class="list-group-item list-group-fill-danger">A simple danger list group item</li>
    <li class="list-group-item list-group-fill-warning">A simple warning list group item</li>
    <li class="list-group-item list-group-fill-info">A simple info list group item</li>
    <li class="list-group-item list-group-fill-light">A simple light list group item</li>
    <li class="list-group-item list-group-fill-dark">A simple dark list group item</li>
</ul>

محتوای سفارشی

تقریباً هر HTML را در داخل اضافه کنید، حتی برای گروه های لیست پیوندی مانند زیر، با کمکابزارهای فلکس باکس.

در انتظار
چارلی پریچارد

12 دقیقه پیش

همه آنها فراتر از کلمات موجود در صفحه چیزی برای گفتن دارند. آنها می توانند به صورت معمولی یا خنثی، عجیب و غریب یا گرافیکی ظاهر شوند. به همین دلیل مهم است که در مورد پیام خود فکر کنید، سپس فونت مناسب را انتخاب کنید. ژاکت کازبی eu banh mi، qui irure تری ریچاردسون سابق ماهی مرکب.
در انتظار
دومینیک چارلتون

12 دقیقه پیش

صندوق امانات seitan letterpress، کیتار جین خام Keffiyeh Etsy پارتی هنری قبل از اینکه به فروش برسند، ژاکت کاسبی رایگان از ماهی مرکب بدون گلوتن را پاکسازی کنند. فانی پک پورتلند سیتان DIY، مهمانی هنری لوکاور گرگ کلیشه زندگی بالا اکو پارک آستین.
رد شد
دکلان لانگ

12 دقیقه پیش

زمین لرزه های بزرگ جولای نذر تجربی دیوانه را مخدوش می کند. دخترم قبل از ترک شش دوجین کاپشن چهارخانه بافت. شش شیطان بزرگ از ژاپن به سرعت نحوه والس را فراموش کردند. دوباره امتحان کنید تا درست به نظر برسد، و هر assumenda labore aes Homo nostrud organic، assumenda labore زیبایی magna عناصر، دکمه ها، همه چیز.
موفق
آنجلا برنیر

5 روز پیش

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

 
 <div class="list-group">
    <a href="javascript:void(0);" class="list-group-item list-group-item-action active">
        <div class="float-end">
            Pending 
        </div>
        <div class="d-flex mb-2 align-items-center">
            <div class="flex-shrink-0">
                <img src="assets/images/users/avatar-1.jpg" alt="" class="avatar-sm rounded-circle" />
            </div>
            <div class="flex-grow-1 ms-3">
                <h5 class="list-title fs-15 mb-1">Charlie Pritchard</h5>
                <p class="list-text mb-0 fs-12">12 min Ago</p>
            </div>
        </div>
        <p class="list-text mb-0">They all have something to say beyond the words on the page. They can come across as casual or neutral, exotic or graphic. That's why it's important to think about your message, then choose a font that fits. Cosby sweater eu banh mi, qui irure terry richardson ex squid.</p>
    </a> 
     <a href="javascript:void(0);" class="list-group-item list-group-item-action">
        <div class="float-end">
            Pending 
        </div>
        <div class="d-flex mb-2 align-items-center">
            <div class="flex-shrink-0">
                <img src="assets/images/users/avatar-2.jpg" alt="" class="avatar-sm rounded-circle" />
            </div>
            <div class="flex-grow-1 ms-3">
                <h5 class="list-title fs-15 mb-1">Dominic Charlton</h5>
                <p class="list-text mb-0 fs-12">12 min Ago</p>
            </div>
        </div>
        <p class="list-text mb-0">Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin.</p>
    </a> 
     <a href="javascript:void(0);" class="list-group-item list-group-item-action">
        <div class="float-end">
            Rejected 
        </div>
        <div class="d-flex mb-2 align-items-center">
            <div class="flex-shrink-0">
                <img src="assets/images/users/avatar-3.jpg" alt="" class="avatar-sm rounded-circle" />
            </div>
            <div class="flex-grow-1 ms-3">
                <h5 class="list-title fs-15 mb-1">Declan Long</h5>
                <p class="list-text mb-0 fs-12">12 min Ago</p>
            </div>
        </div>
        <p class="list-text mb-0">Big July earthquakes confound zany experimental vow. My girl wove six dozen plaid jackets before she quit. Six big devils from Japan quickly forgot how to waltz. try again until it looks right, and each assumenda labore aes Homo nostrud organic, assumenda labore aesthetic magna elements, buttons, everything.</p>
    </a> 
     <a href="javascript:void(0);" class="list-group-item list-group-item-action">
        <div class="float-end">
            Successful 
        </div>
        <div class="d-flex mb-2 align-items-center">
            <div class="flex-shrink-0">
                <img src="assets/images/users/avatar-4.jpg" alt="" class="avatar-sm rounded-circle" />
            </div>
            <div class="flex-grow-1 ms-3">
                <h5 class="list-title fs-15 mb-1">Angela Bernier</h5>
                <p class="list-text mb-0 fs-12">5 days Ago</p>
            </div>
        </div>
        <p class="list-text mb-0">Just like in the image where we talked about using multiple fonts, you can see that the background in this graphic design is blurred. Whenever you put text on top of an image, it’s important that your viewers can understand the text, and sometimes that means applying a gaussian readable.</p>
    </a>
</div>

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

از نشان‌ها برای هر مورد از گروه‌های فهرست استفاده کنید تا با کمک برخی موارد، تعداد خوانده‌نشده، فعالیت و موارد دیگر را نشان دهید.آب و برق.

  • قرارداد صورتحساب را ارسال کنید بالا
  • تمام اسناد را ارسال کنید
  • ملاقات با دارون برای بررسی فرم دریافت پایین
  • موضوع uikings را بررسی کنید و از مشتری پشتیبانی کنید متوسط
  • شروع به ارائه ارائه کنید بالا 
 <ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Send the billing agreement <span class="badge bg-success">High</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Send over all the documentation 
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Meeting with daron to review the intake form <span class="badge bg-danger">Low</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Check uikings theme and give customer support <span class="badge bg-secondary">Medium</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Start making a presentation <span class="badge bg-success">High</span>
    </li>
</ul>

لیست با چک باکس

از چک باکس های Bootstrap در موارد گروه لیست استفاده کنید و در صورت نیاز سفارشی کنید.

 <div class="list-group">
    <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="">
        Declined Payment
    </label>
    <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" checked>
        Delivery Error
    </label>
    <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" checked>
        Wrong Amount
    </label>
    <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="">
        Wrong Address
    </label>
    <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="">
        Wrong UX/UI Solution
    </label>
</div>

لیست با رادیو

از رادیوهای Bootstrap در لیست آیتم های گروه استفاده کنید و در صورت نیاز سفارشی کنید.

 <div class="list-group">
    <label class="list-group-item">
        <input class="form-check-input me-1" name="exampleRadios" type="radio" value="">
        Declined Payment
    </label>
    <label class="list-group-item">
        <input class="form-check-input me-1" name="exampleRadios" type="radio" value="" checked>
        Delivery Error
    </label>
    <label class="list-group-item">
        <input class="form-check-input me-1" name="exampleRadios" type="radio" value="">
        Wrong Amount
    </label>
    <label class="list-group-item">
        <input class="form-check-input me-1" name="exampleRadios" type="radio" value="">
        Wrong Address
    </label>
    <label class="list-group-item">
        <input class="form-check-input me-1" name="exampleRadios" type="radio" value="">
        Wrong UX/UI Solution
    </label>
</div>

لیست با نماد

از نمادها برای هر آیتم گروه لیست برای نمایش نمادها در لیست موارد گروه استفاده کنید.

  • قرارداد صورتحساب را ارسال کنید
  • تمام اسناد را ارسال کنید
  • ملاقات با دارون برای بررسی فرم دریافت
  • موضوع uikings را بررسی کنید و از مشتری پشتیبانی کنید
  • شروع به ارائه ارائه کنید
 <ul class="list-group">
    <li class="list-group-item"><i class="mdi mdi-check-bold align-middle lh-1 me-2"></i> Send the billing agreement</li>
    <li class="list-group-item"><i class="mdi mdi-check-bold align-middle lh-1 me-2"></i> Send over all the documentation.</li>
    <li class="list-group-item"><i class="mdi mdi-check-bold align-middle lh-1 me-2"></i> Meeting with daron to review the intake form</li>
    <li class="list-group-item"><i class="mdi mdi-check-bold align-middle lh-1 me-2"></i> Check uikings theme and give customer support</li>
    <li class="list-group-item"><i class="mdi mdi-check-bold align-middle lh-1 me-2"></i> Start making a presentation</li>
</ul>

لیست با شماره گذاری شده

استفاده کنید list-group-numbered کلاس (به صورت اختیاری از an <ol> عنصر) برای نمایش آیتم های گروه لیست شماره گذاری شده.

  1. قرارداد صورتحساب را ارسال کنید
  2. تمام اسناد را ارسال کنید
  3. ملاقات با دارون برای بررسی فرم دریافت
  4. موضوع uikings را بررسی کنید و از مشتری پشتیبانی کنید
  5. شروع به ارائه ارائه کنید
 <ol class="list-group list-group-numbered">
    <li class="list-group-item">Send the billing agreement</li>
    <li class="list-group-item">Send over all the documentation.</li>
    <li class="list-group-item">Meeting with daron to review the intake form</li>
    <li class="list-group-item">Check uikings theme and give customer support</li>
    <li class="list-group-item">Start making a presentation</li>
</ol>

لیست های محتوای سفارشی

تقریباً هر HTML را در داخل اضافه کنید، حتی برای گروه های لیست پیوندی مانند زیر، با کمکابزارهای فلکس باکس.

  • نتفلیکس
    2 دقیقه پیش
    -25.50 دلار
  • Spotify
    5 روز پیش
    48.25 دلار
  • امیلی اسلیتر
    8 روز پیش
    354.90 دلار
  • پی پال
    1 ماه پیش
    -12.22 دلار
  • هاروی ولز
    4 ماه پیش
    -459.78 دلار 
 <div data-simplebar style="max-height: 215px;"> 
    <ul class="list-group">
        <li class="list-group-item">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                    <div class="d-flex">
                        <div class="flex-shrink-0 avatar-xs">
                            <div class="avatar-title bg-danger-subtle text-danger rounded">
                                <i class="ri-netflix-fill"></i>
                            </div>
                        </div>
                        <div class="flex-shrink-0 ms-2">
                            <h6 class="fs-14 mb-0">Netfilx</h6>
                            <small class="text-muted">2 min Ago</small>
                        </div>
                    </div>
                </div>
                <div class="flex-shrink-0">
                    <span class="text-danger">-$25.50</span>
                </div>
            </div>
        </li>
        <li class="list-group-item">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                    <div class="d-flex">
                        <div class="flex-shrink-0 avatar-xs">
                            <div class="avatar-title bg-success-subtle text-success rounded">
                                <i class="ri-spotify-fill"></i>
                            </div>
                        </div>
                        <div class="flex-shrink-0 ms-2">
                            <h6 class="fs-14 mb-0">Spotify</h6>
                            <small class="text-muted">5 days Ago</small>
                        </div>
                    </div>
                </div>
                <div class="flex-shrink-0">
                    <span class="text-success">$48.25</span>
                </div>
            </div>
        </li>
        <li class="list-group-item">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                    <div class="d-flex">
                        <div class="flex-shrink-0">
                            <img src="assets/images/users/avatar-2.jpg" alt="" class="avatar-xs rounded" />
                        </div>
                        <div class="flex-shrink-0 ms-2">
                            <h6 class="fs-14 mb-0">Emily Slater</h6>
                            <small class="text-muted">8 days Ago</small>
                        </div>
                    </div>
                </div>
                <div class="flex-shrink-0">
                    <span class="text-success">$354.90</span>
                </div>
            </div>
        </li>
        <li class="list-group-item">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                    <div class="d-flex">
                        <div class="flex-shrink-0 avatar-xs">
                            <div class="avatar-title bg-secondary-subtle text-secondary rounded">
                                <i class="ri-paypal-fill"></i>
                            </div>
                        </div>
                        <div class="flex-shrink-0 ms-2">
                            <h6 class="fs-14 mb-0">Paypal</h6>
                            <small class="text-muted">1 month Ago</small>
                        </div>
                    </div>
                </div>
                <div class="flex-shrink-0">
                    <span class="text-danger">-$12.22</span>
                </div>
            </div>
        </li>
        <li class="list-group-item">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                    <div class="d-flex">
                        <div class="flex-shrink-0">
                            <img src="assets/images/users/avatar-3.jpg" alt="" class="avatar-xs rounded" />
                        </div>
                        <div class="flex-shrink-0 ms-2">
                            <h6 class="fs-14 mb-0">Harvey Wells</h6>
                            <small class="text-muted">4 month Ago</small>
                        </div>
                    </div>
                </div>
                <div class="flex-shrink-0">
                    <span class="text-success">-$459.78</span>
                </div>
            </div>
        </li>
    </ul>
</div>
2025© Velzon.
طراحی و توسعه توسط مرداد