جستجو برای:
سبد خرید 0
  • خانه
  • آموزش وردپرس
  • قالب وردپرس
    • افزونه وردپرس
    • آموزش html
    • آموزش php
  • درباره ما
  • حساب کاربری
  • تماس با ما

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت
  • 02433763920 (ساعت 10 الی 14)
  • info@parniantarh.ir
perm_identity
سبد خرید 0
  • آخرین محصولات
  • آخرین مطالب آموزشی
0
پرنیان طرح
  • خانه
  • وردپرس
    • آموزش وردپرس
    • قالب وردپرس
    • افزونه وردپرس
  • آموزش برنامه نویسی
    • آموزش bootstrap
    • آموزش android
    • آموزش php
    • آموزش html
    • آموزش css
    • آموزش JavaScript
    • مقالات آموزشی
  • آموزش فتوشاپ
  • تماس با ما
  • درباره ما
ورود و ثبت نام

وبلاگ

گروه های لیست (List Groups) در بوت استرپ

access_time۱۳۹۸-۰۷-۱۹
perm_identity ارسال شده توسط بهاره حسنی
folder_open آموزش bootstrap
visibility 341 بازدید

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

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

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

با سلام خدمت شما همراهان عزیز وب سایت پرنیان طرح

با آموزشی دیگر از مبحث Bootstrap 4 در خدمت شما همراهان این سایت هستیم.

در این آموزش مبحث List Groups در بوت استرپ ۴ خواهیم آموخت.

 

گروه های لیست ساده (Basic List Groups) :

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

به این مثال توجه کنید:

PHP
1
2
3
4
5
6
7
8
<div class="container">
<h2>Basic List Group</h2>
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
</div>

تصویر یک گروه لیست ساده:

basic list group

حالت فعال (Active State):

از حالت active برای برجسته کردن آیتم اصلی استفاده میکنیم.

برای مثال:

PHP
1
2
3
4
5
6
7
8
<div class="container">
<h2>Active Item in a List Group</h2>
<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
</div>

تصویر حالت فعال گروه لیست :

active list groups

گروه های لیست با آیتم های لینک دار:

برای ایجاد یک گروه لیست با موارد مرتبط ، به جای <ul> از <div> و به جای <li> از <a> استفاده کنید.

در صورت تمایل از کلاس list-group-item-action. برای داشتن پس زمینه ی خاکستری هنگامی که hover میشود استفاده نمایید.

برای مثال:

PHP
1
2
3
4
5
6
7
8
<div class="container">
<h2>List Group With Linked Items</h2>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">First item</a>
<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
</div>

تصویر مثال بالا:

list group with linked

آیتم های غیر فعال(Disabled Item):

کلاس disabled. یک رنگ متن روشن تر را به مورد غیرفعال اضافه میکند.

و هنگامی که در لینک ها استفاده میشود حالت hover را ندارد.

مثال:

PHP
1
2
3
4
5
6
7
8
9
<div class="container">
<h2>List Group With a Disabled Item</h2>
<p>The disabled class adds a lighter text color to the disabled item. And if used on links, it will remove the default hover effect.</p>
<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
</div>

تصویر آیتم های غیرفعال:

disabled item

حذف حاشیه ها (Remove Borders):

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

برای توضیح به این مثال توجه کنید:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
<h2>Flush / Remove Borders</h2>
<p>Use the .list-group-flush class to remove some borders and rounded corners:</p>
</div>
 
<div class="container">
<ul class="list-group list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
</div>

تصویر زیر را ببینید:

remove border

گروه های لیست افقی (Horizontal List Groups):

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

مثال :

PHP
1
2
3
4
5
6
7
8
9
10
<div class="container">
<h2>Horizontal List Groups</h2>
<p>The .list-group-horizontal class displays the list items horizontally instead of vertically:</p>
<ul class="list-group list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
</div>

تصویر گروه های لیست افقی:

horizontal list groups

کلاسهای متنی (Contextual Classes):

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

کلاس های رنگی متن عبارتند از : list-group-item-success، list-group-item-info، list-group-item-warning، و list-group-item-danger .

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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
<h2>List Group With Contextual Classes</h2>
<ul class="list-group">
<li class="list-group-item list-group-item-success">Success item</li>
<li class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li class="list-group-item list-group-item-light">Light item</li>
</ul>
</div>

تصویر زیر را ببینید:

contexual classes

لیست های گروه با نشان ها (List Groups with Badgs):

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

مثال:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="container mt-3">
<h2>List Group With Badges</h2>
<p>Combine .badge classes with utility/helper classes to add badges inside the list group:</p>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary badge-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
</div>

نشان ها را در گروه لیست تصویر زیر مشاهده نمایید:

list group with badges
Rate this post
برچسب ها: bootstrapcontextual classesdisabled itemslist groupsآیتم های لینک دارگروه های لیست افقیلیست های گروه


ارسال این مطلب برای دوستان خود :
مطالب زیر را حتما بخوانید
  • جستجو
    آموزش Filters در بوت استرپ

    147 بازدید

  • اشیا رسانه ای
    آموزش اشیاء رسانه ای در بوت استرپ

    162 بازدید

  • آیکون ها
    آیکون ها (Icons) در بوت استرپ

    177 بازدید

  • جعبه ی محتوا
    آموزش Flexbox در بوت استرپ

    190 بازدید

  • کلاس های کاربردی
    آموزش کلاس های کاربردی (Utilities) در بوت استرپ

    193 بازدید

جدید تر یادگیری برنامه نویسی
قدیمی تر آموزش کارت ها (cards) در بوت استرپ

پاسخی بگذارید لغو پاسخ

جستجو برای:
  • جدید
  • محبوب
  • دیدگاه ها
قبلی بعدی
فروش ویژه
  • دانلود افزونه WP Rocket -افزایش سرعت سایت وردپرس 57,000 تومان 26,000 تومان
  • افزونه Livicons برای وردپرس افزونه Livicons برای وردپرس - نسخه 2.7.3 69,000 تومان 35,000 تومان
  • سورس سیستم تیکت (ارسال پیام) به زبانphp با فونت زبای ایران سنس 35,000 تومان 20,000 تومان
  • Munza | قالب چند منظوره وردپرس Munza | قالب چند منظوره وردپرس | قویترین پوسته 2019 79,000 تومان 49,000 تومان
  • دانلود افزونه visual composer ویژوال کامپوزر + آموزش 45,000 تومان 28,000 تومان
  • آموزش ووکامرس راه اندازه فروشگاه اینترنتی با ووکامرس
    امتیاز 5.00 از 5
    35,000 تومان 9,900 تومان
  • ipts نرم افزار افزایش بازدید سایت و کاهش رتبه ipts نسخه نهایی
    امتیاز 2.00 از 5
    19,900 تومان 7,900 تومان
  • دانلود افزونه ی UserPro - افزونه ی پروفایل حرفه ای 49,000 تومان 22,000 تومان
دسته‌ها
  • #ویدئوها
  • آموزش
  • آموزش bootstrap
  • آموزش css
  • آموزش html
  • آموزش JavaScript
  • آموزش اندروید
  • آموزش قالب
  • آموزش های دامنه
  • اخبار وردپرس
  • برنامه نویسی php
  • دسته‌بندی نشده
  • فتوشاپ
  • قالب های html – css
  • کسب و کار آنلاین
  • مقاله ها
  • هاست سی پنل Cpanel
  • وردپرس
جدیدترین نوشته ها
  • نحوه افزودن افزونه های (plugins) فتوشاپ به عناصر فتوشاپ ۱۳۹۸-۰۹-۲۴
  • آماده سازی تصاویر برای پرینت کردن در فتوشاپ ۱۳۹۸-۰۹-۲۳
  • آموزش قدم به قدم استفاده از ابزار Fading در Photoshop ۱۳۹۸-۰۹-۲۲
  • آموزش قدم به قدم زوم کردن روی بخش هایی از تصویر ۱۳۹۸-۰۹-۲۱
  • نحوه افزودن رنگ به تصویر اسکن شده با فتوشاپ ۱۳۹۸-۰۹-۲۰
  • ۳ راه برای حذف متن از یک عکس در فتوشاپ (روش سوم) ۱۳۹۸-۰۹-۱۹
  • ۳ راه برای حذف متن از یک عکس در فتوشاپ (روش دوم) ۱۳۹۸-۰۹-۱۸
  • ۳ راه برای حذف متن از یک عکس در فتوشاپ (روش اول) ۱۳۹۸-۰۹-۱۷

درباره پرنیان طرح

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




  • location_on
    زنجان ، میدان شورا ، مرکز رشد جهاد ، واحد 15
  • phone_android
    024-33763920
  • perm_phone_msg
    09190605638
  • email
    info@parniantarh.ir
تمامی حقوق متعلق به وبسایت پرنیان طرح میباشد.
طراحی شده با ❤️ در پرنیان طرح
keyboard_arrow_up