برلیانس
برلیانس
خواندن ۱۲ دقیقه·۴ سال پیش

آموزش طراحی سایت-کار با List Group و Card در بوت استرپ 4


سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با مفاهیم زیر آشنا شدیم

  • آموزش ایجاد چرخنده Spiner در Bootstrap 4
  • آموزش صفحه بندی Pagination در Bootstrap 4
  • حال با ادامه آموزش بوت استرپ 4 از دوره آموزش طراحی سایت همراه باشید:

آموزش کار با لیست گروهی List Group در بوت استرپ 4

https://www.aparat.com/v/kzxVS

ساده ترین نوع لیست گروهی یک لیست بدون نشانه و ترتیب (Unordered list) با یک یا چندین آیتم درون آن است، همانند عکس زیر:

برای ایجاد یک لیست گروهی ساده در بوت استرپ 4، از یک تگ <ul> با کلاس list-group، استفاده می شود که هر آیتم درون آن با یک تگ <li> با کلاس list-group-item، تعیین خواهد شد، همانند کد مثال عملی زیر:

مثال 1

<ul class=&quotlist-group&quot>
  <li class=&quotlist-group-item&quot>First item</li>
  <li class=&quotlist-group-item&quot>Second item</li>
  <li class=&quotlist-group-item&quot>Third item</li>
</ul>
https://www.aparat.com/v/4gGj2

آموزش فعال کردن یک آیتم در لیست Active Item در دوره آموزش طراحی سایت:

اگر به یکی از آیتم های <li> درون یک لیست بوت استرپ 4، کلاس .active بدهید، آن آیتم به صورت فعال با پس زمینه رنگی (به صورت پیش فرض) و متمایز از بقیه نشان داده خواهد شد.

مثال: در کد مثال زیر، یک لیست گروهی در Bootstrap 4 ایجاد کرده ایم که آیتم اول آن به صورت فعال درآمده است :

مثال 2

<ul class=&quotlist-group&quot>
  <li class=&quotlist-group-item active&quot>Active item</li>
  <li class=&quotlist-group-item&quot>Second item</li>
  <li class=&quotlist-group-item&quot>Third item</li>
</ul>

آموزش ایجاد لیست با آیتم های لینک در Bootstrap 4:

برای ایجاد یک لیست گروهی با آیتم های لینک، از یک تگ <div> به جای تگ <ul> استفاده کرده و به جای آیتم های <li>، درون آن آیتم های <a> تعریف کنیم. همچنین در صورت تمایل می توانید برای اینکه در هنگام عبور موس کاربر از روی لینک ها، پس زمینه آن ها به صورت خاکستری داشته و حالت hover پیدا کنند، از کلاس .list-group-item-action در تگ های <a> استفاده نمایید، همانند کد مثال عملی زیر:

مثال 3

<div class=&quotlist-group&quot>
  <a href=&quot#&quot class=&quotlist-group-item list-group-item-action&quot>First item</a>
  <a href=&quot#&quot class=&quotlist-group-item list-group-item-action&quot>Second item</a>
  <a href=&quot#&quot class=&quotlist-group-item list-group-item-action&quot>Third item</a>
</div>

آموزش ایجاد یک آیتم غیر فعال (Disabled) در لیست Bootstrap 4:

برای تعیین یک آیتم در لیست به صورت غیر فعال (Disabled) بایستی کلاس .disabled را به عنصر اضافه کنید. در این حالت، رنگ نوشته آیتم به صورت خاکستری و کم رنگ در می آید و غیر فعال خواهد بود. همچنین در لیست های لینکی، قابلیت hover آن ها نیز از بین می رود.

مثال: در مثال زیر، یک لیست در بوت استرپ 4، ایجاد کرده ایم که آیتم اول و دوم آن، غیر فعال است.

مثال 4

<div class=&quotlist-group&quot>
  <a href=&quot#&quot class=&quotlist-group-item disabled&quot>Disabled item</a>
  <a href=&quot#&quot class=&quotlist-group-item disabled&quot>Disabled item</a>
  <a href=&quot#&quot class=&quotlist-group-item&quot>Third item</a>
</div>

آموزش حذف خطوط حاشیه (border) لیست در بوت استرپ 4:

در صورت استفاده از کلاس .list-group-flush در عنصر مادر لیست تگ <ul>، خطوط حاشیه یا Border دور لیست حذف شده و دیگر نوشته های آن گرد نیز نخواهد بود، همانند کد عملی مثال زیر :

مثال 5
<ul class=&quotlist-group list-group-flush&quot>
  <li class=&quotlist-group-item&quot>First item</li>
  <li class=&quotlist-group-item&quot>Second item</li>
  <li class=&quotlist-group-item&quot>Third item</li>
  <li class=&quotlist-group-item&quot>Fourth item</li>
</ul>

آموزش ایجاد لیست افقی Horizontal List در بوت استرپ 4:

اگر می خواهید آیتم های لیست در بوت استرپ 4، به صورت افقی یا Horizontal به جای عمودی Vertical (در کنار هم به جای قرار گرفتن بر روی هم) نمایش داده شوند، کلاس .list-group-horizontal را به عنصر مادر لیست (تگ <ul> یا <div> با کلاس list-group)، اضافه نمایید، همانند کد مثال عملی زیر:

مثال 6

<ul class=&quotlist-group list-group-horizontal&quot>
  <li class=&quotlist-group-item&quot>First item</li>
  <li class=&quotlist-group-item&quot>Second item</li>
  <li class=&quotlist-group-item&quot>Third item</li>
  <li class=&quotlist-group-item&quot>Fourth item</li>
</ul>

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

از کلاس های متنی رنگی ویژه بوت استرپ 4، یا کلاس های Contextual Classes که در بخش های قبل معرفی کردیم، برای تعیین رنگ پس زمینه آیتم های لیست استفاده نمایید. این رنگ ها مفهومی هستند و هریک پیام خاصی مثل موفقیت یا خطر را به کاربر نشان می دهد:

مثال: کلاس های رنگی متنی ویژه بوت استرپ 4، عبارتند از .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، که از هریک از آن ها در لیست زیر برای تعیین رنگ یک آیتم لیست، استفاده کرده ایم :

مثال 7

<ul class=&quotlist-group&quot>
  <li class=&quotlist-group-item list-group-item-success&quot>Success item</li>
  <li class=&quotlist-group-item list-group-item-secondary&quot>Secondary item</li>
  <li class=&quotlist-group-item list-group-item-info&quot>Info item</li>
  <li class=&quotlist-group-item list-group-item-warning&quot>Warning item</li>
  <li class=&quotlist-group-item list-group-item-danger&quot>Danger item</li>
  <li class=&quotlist-group-item list-group-item-primary&quot>Primary item</li>
  <li class=&quotlist-group-item list-group-item-dark&quot>Dark item</li>
  <li class=&quotlist-group-item list-group-item-light&quot>Light item</li>
</ul>

آموزش ایجاد لیست لینک دار رنگی در Bootstrap 4:

همانند مثال بخش های قبلی، می توانید از کلاس های رنگی ویژه بوت استرپ 4 در لیست های لینک دار هم استفاده کنید، با این تفاوت که در لیست های لینک دار از تگ های <div> به جای <ul> در عنصر مادر لیست و تگ <a> به جای تگ <li> برای تعریف هر آیتم استفاده می کنیم. کلاس رنگی را نیز بایستی به تگ <a> اعمال کنید و با به کار بردن کلاس .list-group-item-action در لینک ها، خاصیت hover یا تیره شدن رنگ در هنگام عبور موس بر روی آیتم، بدان اضافه خواهد شد.

مثال: به کد مثال عملی زیر دقت کنید و خروجی را مشاهده نمایید :

مثال 8

<div class=&quotlist-group&quot>
  <a href=&quot#&quot class=&quotlist-group-item list-group-item-action&quot>Action item</a>
  <a href=&quot#&quot class=&quotlist-group-item list-group-item-action list-group-item-success&quot>Success item</a>
  <a href=&quot#&quot class=&quotlist-group-item list-group-item-action list-group-item-secondary&quot>Secondary item</a>
  <a href=&quot#&quot class=&quotlist-group-item list-group-item-action list-group-item-info&quot>Info item</a>
  <a href=&quot#&quot class=&quotlist-group-item list-group-item-action list-group-item-warning&quot>Warning item</a>
  <a href=&quot#&quot class=&quotlist-group-item list-group-item-action list-group-item-danger&quot>Danger item</a>
  <a href=&quot#&quot class=&quotlist-group-item list-group-item-action list-group-item-primary&quot>Primary item</a>
  <a href=&quot#&quot class=&quotlist-group-item list-group-item-action list-group-item-dark&quot>Dark item</a>
  <a href=&quot#&quot class=&quotlist-group-item list-group-item-action list-group-item-light&quot>Light item</a>
</div>

آموزش ایجاد لیست های گروهی نشان دار Badges List در Bootstrap 4:

می توانید با ترکیب کلاس badge و چند کلاس کمکی دیگر در بوت استرپ 4، لیست هایی دارای نشانه های عمودی یا متنی (Badge List) ایجاد نمایید، همانند عکس زیر:

مثال: در کد مثال عملی زیر یک لیست نشان دار یا Badge List ایجاد کرده ایم. روال کار همانند یک لیست ساده بوت استرپ 4 است. با این تفاوت که برای اضافه کردن Badge یک تگ مثل <span> با کلاس .badge و یکسری کلاس کمکی دیگر، درون هر آیتم لیست قرار داده ایم:

مثال 9

<ul class=&quotlist-group&quot>
  <li class=&quotlist-group-item d-flex justify-content-between align-items-center&quot>
    Inbox
    <span class=&quotbadge badge-primary badge-pill&quot>12</span>
  </li>
  <li class=&quotlist-group-item d-flex justify-content-between align-items-center&quot>
    Ads
    <span class=&quotbadge badge-primary badge-pill&quot>50</span>
  </li>
  <li class=&quotlist-group-item d-flex justify-content-between align-items-center&quot>
    Junk
    <span class=&quotbadge badge-primary badge-pill&quot>99</span>
  </li>
</ul>

نکته :

می توانید اعداد درون Badge را به صورت ایستاتیک تعریف کرده یا با استفاده از jQuery و Ajax آن را به صورت دینامیک نیز تغییر دهید.

آموزش کار با کارت Card در Bootstrap 4

https://www.aparat.com/v/2h7oZ

یک کارت (Card) در بوت استرپ 4، یک جعبه یا Box با خطوط حاشیه به دور آن و مقداری حاشیه درونی یا Padding به دور محتویاتش است.

کارت یا Card در بوت استرپ 4، دارای قابلیت های مختلفی جهت اضافه کردن سر عنوان (Header)، پاورقی (Footer)، محتویات (Context)، رنگ بندی و Card... می باشد.

عکس زیر، یک کادر (Card) کامل در Bootstrap 4 را نشان می دهد :

آموزش ساخت کارت ساده Basic Card در Bootstrap 4:

یک کارت ساده (Basic Card) توسط یک المنت با کلاس Card ایجاد شده و محتویات آن درون یک المنت با کلاس .card-body قرار می گیرند :

<div class=&quotcard&quot>
  <div class=&quotcard-body&quot>Basic card</div>
</div>

اگر با چهارچوب کاری Bootstrap 3 آشنا هستید، کارت در Bootstrap 4 جایگزین پنل (Panel)، well و عکس های بند انگشتی (thumbnails) گردیده است.

آموزش ساخت Header و Footer برای کارت Bootstrap 4:

کلاس card-header. یک بخش سر عنوان (Header) و کلاس card-footer یه بخش پایین صفحه (Footer) به کارت اضافه می کند. در کد مثال عملی زیر، یک کارت را درون تگ <div> مادر ایجاد کرده و 3 بخش اصلی را برای آن تعیین کرده ایم :

مثال 2

<div class=&quotcard&quot>
  <div class=&quotcard-header&quot>Header</div>
  <div class=&quotcard-body&quot>Content</div>
  <div class=&quotcard-footer&quot>Footer</div>
</div>

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

جهت تعیین رنگ پس زمینه کارت (Card) در Bootstrap 4 می توانید از کلاس های رنگی متنی ویژه بوت استرپ 4 که در مباحث قبلی هم به آن ها استناد کرده ایم، استفاده کنید. این کلاس ها عبارتند از .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark و .bg-light.

مثال: در کد مثال عملی زیر، انواع Card با رنگ های مختلف را ایجاد کرده ایم :

مثال 3

<div class=&quotcontainer&quot>
<h2>Cards with Contextual Classes</h2>
 
<div class=&quotcard&quot>
<div class=&quotcard-body&quot>Basic card</div>
</div>
  
<div class=&quotcard bg-primary text-white&quot>
<div class=&quotcard-body&quot>Primary card</div>
</div>
  
<div class=&quotcard bg-success text-white&quot>
<div class=&quotcard-body&quot>Success card</div>
</div>
  
<div class=&quotcard bg-info text-white&quot>
<div class=&quotcard-body&quot>Info card</div>
</div>
 
<div class=&quotcard bg-warning text-white&quot>
<div class=&quotcard-body&quot>Warning card</div>
</div>
  
<div class=&quotcard bg-danger text-white&quot>
<div class=&quotcard-body&quot>Danger card</div>
</div>
  
<div class=&quotcard bg-secondary text-white&quot>
<div class=&quotcard-body&quot>Secondary card</div>
</div>
  
<div class=&quotcard bg-dark text-white&quot>
<div class=&quotcard-body&quot>Dark card</div>
</div>
<div class=&quotcard bg-light text-dark&quot>
<div class=&quotcard-body&quot>Light card</div>
</div>
</div>

آموزش ایجاد عنوان (title)، متن (text) و لینک در کارت :

از کلاس card-title. برای اضافه کردن عنوان به بخش هدر المنت استفاده می شود. از کلاس card-text. برای حذف مارجین پایینی یک المنت <p> (اگر آخرین یا تنها فرزند موجود در بخش card-body باشد)، استفاده می شود. همچنین کلاس card-link.، به لینک درون آن رنگ آبی داده و خاصیت عبور موس یا hover را به آن می دهد.

مثال: در کد مثال عملی زیر، یک کارت (Card) در Bootstrap 4 با عنوان، متن و دو لینک را ایجاد کرده ایم :

مثال 4

<div class=&quotcard&quot>
  <div class=&quotcard-body&quot>
    <h4 class=&quotcard-title&quot>Card title</h4>
    <p class=&quotcard-text&quot>Some example text. Some example text.</p>
    <a href=&quot#&quot class=&quotcard-link&quot>Card link</a>
    <a href=&quot#&quot class=&quotcard-link&quot>Another link</a>
  </div>
</div>

آموزش استفاده از عکس در کارت (Card) بوت استرپ 4:

به ترتیب کلاس های card-img-top. یا card-img-bottom. را به تگ اضافه کنید تا عکس مورد نظرتان در قسمت بالایی یا پایینی کارت (Card) قرار بگیرد.

توجه داشته باشید که در کد مثال عملی زیر، تگ image را خارج از المنت card-body قرار داده ایم تا کل عرض کارت را اشغال کند :

مثال 5

<div class=&quotcard&quot style=&quotwidth:400px&quot><img alt=&quotCard image&quot class=&quotcard-img-top&quot src=&quotimg_avatar1.png&quot>
<div class=&quotcard-body&quot>
<h4>John Doe</h4>
 
<p>Some example text.</p>
<a class=&quotbtn btn-primary&quot href=&quot#&quot>See Profile</a></div>
</div>

آموزش ساخت کارت قابل کلیک در بوت استرپ 4:

چنانچه کلاس Stretched-link. را به یک لینک درون Card اضافه کنید، کل کارت قابل کلیک شدن شده و خاصیت عبور موس یا افکت hover به آن اضافه می شود (کل کارت به صورت یک لینک عمل می کند).

مثال: در کد مثال عملی زیر، کلاس stretched-link. را به لینک با متن See Profile اضافه کرده ایم و کل کارت قابل کلیک شده است :

مثال 6

<a href=&quot#&quot class=&quotbtn btn-primary stretched-link&quot>See Profile</a>

آموزش تعیین عکس به صورت تمام صفحه در کارت Bootstrap 4:

چنانچه به عنصر دربرگیرنده بدنه Card (مثلا تگ div)، کلاس card-img-overlay را اضافه کنید، عکس موجود در کارت به صورت تمام صفحه نشان داده شده و سایر محتویات بر روی عکس قرار می گیرند. به مثال زیر دقت نمایید :

مثال 7
<div class=&quotcard&quot style=&quotwidth:500px&quot>
  <img class=&quotcard-img-top&quot src=&quotimg_avatar1.png&quot alt=&quotCard image&quot>
  <div class=&quotcard-img-overlay&quot>
    <h4 class=&quotcard-title&quot>John Doe</h4>
    <p class=&quotcard-text&quot>Some example text.</p>
    <a href=&quot#&quot class=&quotbtn btn-primary&quot>See Profile</a>
  </div>
</div>

آموزش قرار دادن چندین Card در یک ستون بوت استرپ 4:

به کار بردن کلاس card-columns. در تگ اصلی کارت، یک جدول یا گرید کاشی مانند از چندین کارت در سطر و ستون های مختلف را ایجاد می کند.

به عبارت دیگر می توانید 2 یا چندین کارت را در یک کارت مادر در کنار هم چیده و نمایش دهید. قالب یا layout و نحوه قرارگیری کارت ها در این حالت، به صورت خودکار و بر حسب تعداد کارت های وارد شده، تغییر می کند.

نکته :

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

مثال: در کد مثال عملی زیر، 6 کارت را با رنگ های مختلف (که از کلاس های رنگی متنی ویژه بوت استرپ استفاده شده) را درون یک کارت مادر قرار داده ایم :

مثال 8

<div class=&quotcard-columns&quot>
  <div class=&quotcard bg-primary&quot>
    <div class=&quotcard-body text-center&quot>
      <p class=&quotcard-text&quot>Some text inside the first card</p>
    </div>
  </div>
  <div class=&quotcard bg-warning&quot>
    <div class=&quotcard-body text-center&quot>
      <p class=&quotcard-text&quot>Some text inside the second card</p>
    </div>
  </div>
  <div class=&quotcard bg-success&quot>
    <div class=&quotcard-body text-center&quot>
      <p class=&quotcard-text&quot>Some text inside the third card</p>
    </div>
  </div>
  <div class=&quotcard bg-danger&quot>
    <div class=&quotcard-body text-center&quot>
      <p class=&quotcard-text&quot>Some text inside the fourth card</p>
    </div>
  </div>
  <div class=&quotcard bg-light&quot>
    <div class=&quotcard-body text-center&quot>
      <p class=&quotcard-text&quot>Some text inside the fifth card</p>
    </div>
  </div>
  <div class=&quotcard bg-info&quot>
    <div class=&quotcard-body text-center&quot>
      <p class=&quotcard-text&quot>Some text inside the sixth card</p>
    </div>
  </div>
</div>




آموزش طراحی سایتآموزش Bootstrapفیلم آموزش طراحی سایتآموزش بوت استرپطراحی سایت
شاید از این پست‌ها خوشتان بیاید