لوگو لوگوی تاریک
کامپوننت ها

سبک لیست برای لیست کشویی

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

سبک کشویی

از کلاس .link-check در ul برای دریافت سبک های نشان داده شده در کارت زیر استفاده کنید.

مثال کد
<div class="dropdown">
    <a class="btn btn-primary dropdown-toggle" href="#" type="button" data-bs-toggle="dropdown">دکمه کشویی</a>
    <div class="dropdown-menu">
    <ul class="link-list-opt">
        <li><a href="#"><span>تنظیمات پروفایل</span></a></li>
        <li><a href="#"><span>اطلاع رسانی ها</span></a></li>
        <li><a href="#"><span>یک اقدام دیگر</span></a></li>
        <li><a href="#"><span>چیز دیگری در اینجا</span></a></li>
    </ul>
    </div>
</div>
مرجع کلاس جزئیات
.dropup لیست های کشویی بالای عناصر را با افزودن .dropup به عنصر والد فعال کنید.
.dropright، .dropleft با افزودن .dropright|.dropleft به عنصر والد، لیست های کشویی را در سمت راست/چپ عناصر فعال کنید.
.dropdown-menu-end .dropdown-menu-end را به .dropdown-menu اضافه کنید تا لیست کشویی را به سمت چپ تراز کنید.
توجه: به طور پیش فرض، یک لیست کشویی به طور خودکار 100% از بالا و در امتداد سمت راست والد خود قرار می گیرد.
.dropdown-menu-{size} برای کنترل عرض از {size} به عنوان xl، lg، md، sm، xs، xxs در .dropdown-menu استفاده کنید.
مثال 1 - سبک گزینه

از کلاس .link-list-opt در ul استفاده کنید تا سبک های نشان داده شده در کارت زیر را دریافت کنید.

با خط حاشیه
مثال کد
<ul class="link-list-opt">
    <li><a href="#"><em class="icon ni ni-setting"></em><span>اقدام لیست</span></a></li>
    <li><a href="#"><em class="icon ni ni-notify"></em><span>یک اقدام دیگر</span></a></li>
    <li><a href="#"><em class="icon ni ni-activity-alt"></em><span>اقدامات بیشتر</span></a></li>
</ul>
بدون خط حاشیه
مثال کد
<ul class="link-list-opt no-bdr">
    <li><a href="#"><em class="icon ni ni-setting"></em><span>اقدام لیست</span></a></li>
    <li><a href="#"><em class="icon ni ni-notify"></em><span>یک اقدام دیگر</span></a></li>
    <li><a href="#"><em class="icon ni ni-activity-alt"></em><span>اقدامات بیشتر</span></a></li>
</ul>
با جداکننده
مثال کد
<ul class="link-list-opt no-bdr">
    <li><a href="#"><em class="icon ni ni-setting"></em><span>تنظیمات اقدام</span></a></li>
    <li><a href="#"><em class="icon ni ni-notify"></em><span>پوش نوتیفیکیشن</span></a></li>
    <li class="divider"></li>
    <li><a href="#"><em class="icon ni ni-activity-alt"></em><span>فعالیت ورود</span></a></li>
</ul>
مرجع کلاس جزئیات
.active از کلاس active با تگ a برای سبک فعال استفاده کنید
.no-bdr از کلاس no-bdr با تگ ul برای سبک لیست بدون خط حاشیه استفاده کنید
.divider از کلاس divider با تگ خالی li برای دریافت یک تقسیم کننده استفاده کنید.
مثال 2 - سبک ساده

از کلاس .link-list-plain در ul استفاده کنید تا سبک های نشان داده شده در کارت زیر را دریافت کنید.

با خط حاشیه
مثال کد
<ul class="link-list-plain">
    <li><a href="#"><em class="icon ni ni-setting"></em><span>تنظیمات اقدام</span></a></li>
    <li><a href="#"><em class="icon ni ni-notify"></em><span>پوش نوتیفیکیشن</span></a></li>
    <li><a href="#"><em class="icon ni ni-activity-alt"></em><span>فعالیت ورود</span></a></li>
</ul>
بدون خط حاشیه
مثال کد
<ul class="link-list-plain no-bdr">
    <li><a href="#"><em class="icon ni ni-setting"></em><span>تنظیمات اقدام</span></a></li>
    <li><a href="#"><em class="icon ni ni-notify"></em><span>پوش نوتیفیکیشن</span></a></li>
    <li><a href="#"><em class="icon ni ni-activity-alt"></em><span>فعالیت ورود</span></a></li>
</ul>
با جداکننده
مثال کد
<ul class="link-list-plain no-bdr">
    <li><a href="#"><em class="icon ni ni-setting"></em><span>تنظیمات پروفایل</span></a></li>
    <li><a href="#"><em class="icon ni ni-notify"></em><span>اطلاع رسانی ها</span></a></li>
    <li class="divider"></li>
    <li><a href="#"><em class="icon ni ni-activity-alt"></em><span>خروج</span></a></li>
</ul>
چند ستونه
مثال کد
<ul class="link-list-plain li-col3x text-center">
    <li><a href="#">فروردین</a></li>
    <li><a href="#">اردیبهشت</a></li>
    <li><a href="#">خرداد</a></li>
    <li><a href="#">تیر</a></li>
    <li><a href="#">مرداد</a></li>
    <li><a href="#">شهریور</a></li>
</ul>
مرجع کلاس جزئیات
.no-bdr از کلاس no-bdr با تگ ul.link-list-plain برای سبک لیست بدون خط حاشیه استفاده کنید.
توجه: این کلاس برای سبک دهی .li-{col} کار نخواهد کرد.
.divider از کلاس divider با تگ خالی li برای دریافت یک تقسیم کننده استفاده کنید.
.sm برای سبک فشرده از کلاس sm با ul.link-list-plain استفاده کنید.
.li-{col} از {col} به عنوان col2x، col3x، col4x با لیست ul.link-list-plain برای لیست ستونی استفاده کنید.
مثال 3 - سبک مرتب

از کلاس .link-tidy در ul برای دریافت سبک های نشان داده شده در کارت زیر استفاده کنید.

  • پیش فرض
  • بدون خط حاشیه
  • فشرده / کوچک
  • پیش نمایش
مثال کد
<ul class="link-tidy">
    <li>
        <div class="custom-control custom-control-sm custom-checkbox">
            <input type="checkbox" class="custom-control-input" checked="" id="cdp1-bl">
            <label class="custom-control-label" for="cdp1-bl">موجودی</label>
        </div>
    </li>
</ul>
مرجع کلاس جزئیات
.no-bdr از کلاس no-bdr با تگ ul.link-tidy برای سبک لیست بدون خط حاشیه استفاده کنید.
.sm برای سبک فشرده از کلاس sm با ul.link-tidy استفاده کنید.
مثال 4 - سبک منو

از کلاس .link-list-menu در ul استفاده کنید تا سبک های نشان داده شده در کارت زیر را دریافت کنید.

مثال کد
<ul class="link-list-menu">
    <li class="active"><a href="#"><span>تنظیمات حساب کاربری</span></a></li>
    <li><a href="#"><span>حساب کاربری من</span></a></li>
    <li><a href="#"><span>خروج</span></a></li>
</ul>
مرجع کلاس جزئیات
.active از کلاس active با تگ li برای سبک فعال استفاده کنید.
.divider از کلاس divider با تگ خالی li برای دریافت یک تقسیم کننده استفاده کنید.
مثال 5 - با عنوان

از کلاس .link-check در ul برای دریافت سبک های نشان داده شده در کارت زیر استفاده کنید.

مثال کد
<ul class="link-check">
    <li><span>نمایش</span></li>
    <li class="active"><a href="#">10 مورد</a></li>
    <li><a href="#">20 مورد</a></li>
    <li><a href="#">50 مورد</a></li>
</ul>
<ul class="link-check">
    <li><span>مرتب سازی بر اساس</span></li>
    <li class="active"><a href="#">نزولی</a></li>
    <li><a href="#">صعودی</a></li>
</ul>
مرجع کلاس جزئیات
.active از کلاس active با تگ li برای سبک فعال استفاده کنید
.divider از کلاس divider با تگ خالی li برای دریافت یک تقسیم کننده استفاده کنید.
البته می توانید از دو مجموعه ul با کلاس .link-check استفاده کنید
© تمام حقوق محفوظ است. فارسی و راستچین سازی شده توسط فرشید ترنیان