Iconly/Curved/Arrow - Left 2Iconly/Curved/Arrow - CircleIconly/Curved/Arrow - SearchIconly/Curved/Arrow - cubeIconly/Curved/Arrow - checkIconly/Curved/Arrow - pieIconly/Curved/Arrow - plusIconly/Curved/Arrow - minusIconly/Curved/Arrow - heartIconly/Curved/Arrow - Arrow-downIconly/Curved/Arrow - WeatherIconly/Curved/Arrow - StarIconly/Curved/Home

لیست‌

لیست‌های پیش‌فرض

از کلاس .list-group برای تعریف لیست آیتم‌ها استفاده کنید و از .list-group-item برای مشخص کردن محتوای هر آیتم بهره ببرید.

  • طراحی لوگو
  • طراحی و توسعه وب
  • تجارت الکترونیک
  • سئو

لیست‌های فعال

برای مشخص کردن آیتم فعال، از کلاس .active روی .list-group-item استفاده کنید.

  • کیت‌های رابط کاربری
  • انیمیشن‌های Wow
  • نمودارهای Apex
  • کیت‌های شروع

لیست‌های بدون فاصله

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

  • محصول
  • جزئیات محصول
  • سبد خرید
  • تسویه حساب

لیست‌های افقی

برای تغییر چینش آیتم‌های گروه لیست از عمودی به افقی در تمام نقاط شکست، از .list-group-horizontal استفاده کنید. .list-group-horizontal-[sm/md/lg/xl/xxl].

  • محصول
  • جزئیات محصول
  • قیمت‌گذاری
  • جزئیات پرداخت
  • تسویه حساب
  • گزینه‌های پیشرفته
  • جدول پایه
  • جدول اندازه‌ها
  • جدول حاشیه‌ها
  • ورودی‌های پایه
  • اعتبارسنجی فرم
  • سبک تخت
  • سبک حاشیه‌ای
  • گروه دکمه‌ها
  • امتیازدهی
  • کریپتو
  • وبلاگ
  • جزئیات وبلاگ
  • وبلاگ تک
  • تاریخچه سفارش
  • شبکه گالری
  • توضیحات گالری
  • توضیحات Masonry

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

با استفاده از .list-group-item می‌توانید طراحی سفارشی برای تمام لیست‌ها ایجاد کنید.

profile
مینا

MollyBoake@rhyta.com

۵ روز پیش

گام بعدی انتخاب لحن مناسب برای نوع محتوای شماست. از لحن‌های دوستانه تا متقاعدکننده، یکی از ۲۰+ لحن موجود در dropdown انتخاب کنید. چرا گفتیم “snag eyeballs” به جای “get attention؟” چرا گفتیم “brick-and-mortar words” به جای “concrete words؟” چون در خطوط موضوع ایمیل شما، بهتر است از کلماتی استفاده شود که مردم بتوانند تصور کنند.

۲۰ هزار دنبال‌کننده
profile
شاهین

Gabrielle@dayrep.com

۱۰ روز پیش

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

۱۰۰ دنبال‌کننده
profile
مازیار

LucindaMoseley@teleworm.us

۳ روز پیش

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

۲۳ میلیون دنبال‌کننده

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

برای علامت زدن چک‌باکس‌ها از .form-check-input استفاده کنید.

لیست‌ها با رادیو

برای علامت زدن دکمه‌های رادیویی از .form-check-input استفاده کنید.

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

برای شماره‌گذاری ترتیب آیتم‌ها از .list-group-numbered استفاده کنید.

  1. شناخته شده برای ارائه راهکارهای مفید و کاربردی
  2. حل مشکلات شما با ما
  3. حرفه‌ای‌های تایید شده
  4. رشد محور

رفتار JavaScript

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

لیست‌های شماره‌دار با Badge

برای شماره‌گذاری آیتم‌های گروه لیست از کلاس .list-group-numbered استفاده کنید. شماره‌ها از طریق CSS تولید می‌شوند تا جایگذاری داخل آیتم‌های لیست بهتر انجام شود.

  1. مهتاب
    فریلنس
  2. بردیا
    مشکل
  3. سامان
    شبکه اجتماعی
  4. طاهر
    مشکل

لیست‌های غیرفعال

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