نمادها

مطالب پربازدید

شما اینجا هستید

» آموزش طراحی وب » آموزش Bootstrap » آموزش Bootstrap 4 جلسه یازدهم (Badge)

آموزش Bootstrap 4 جلسه یازدهم (Badge)

  • دسته بندی :آموزش Bootstrap,آموزش طراحی وب
    • آموزش Bootstrap 4 جلسه یازدهم (Badge)

    در خدمت شما هستیم با آموزش Bootstrap 4 جلسه یازدهم (Badge)

    آموزش Bootstrap 4 جلسه یازدهم (Badge) از سری آموزش های تک قسمتی است.

     

    Badge چیست؟

    اگر بخواهیم معنی تحت الفظی آن را بگوییم به معنی نشانه است و کاربرد آن هم تقریبا با معنی آن یکسان است از badge ها برای متمایز کردن و توضیحات اضافه درباره چیزی استفاده میکنند مثلا فرض کنید چند محصول جدید دارید که میخواهید آنها را از باقی محصولات متمایز کنید به کمک badge میتوانید لیبلی با عنوان new روی آنها بزنید یا به عنوان مثال دکمه دانلودی دارید و میخواهید داخل دکمه تعداد دفعات دانلود آن فایل را نشان دهید به کمک badge میتوانید این کار را انجام دهید.

     

    چگونه Badge بسازیم؟

    بوت استرپ برای ساخت badge ها نیز مشابه باقی موارد برای راحتی کار شما کلاس آماده آن را ایجاد کرده است که کافیست از کلاس آن استفاده کنید و به راحتی استایل های آن به تگ های شما اضافه شود.badge هم مشابه alert و table یک کلاس ثابت دارد که با نام خودش است کافیست این کلاس را بنویسید تا صاحب یک نشان شوید البته در حالت عادی و تنها با استفاده از این کلاس ظاهر خاصی به تگ های شما داده نمیشود اگر قصد دارید در خروجی نیز تغییرات را ببینید به قسمت بعد آموزش توجه کنید.

     

    کلاس های رنگی در badge

    درست متوجه شدید نشان ها هم مانند دیگر موارد از کلاس های رنگی بوت استرپ پشتیبانی میکنند همانطور که در قسمت قبل گفتیم کلاس Badge ثابت است برای کلاس رنگی کافیست نام های رنگی را به badge اضافه کنید مانند badge-success به این صورت کلاس های رنگی به نشان ها اضافه شده و در خروجی میتوانید آن را کاملا مشهود ببینید برای واضح شدن موضوع کلاس های رنگی را با رنگ آنها برای شما لیست میکنیم:

    • badge-primary : به کمک ایم کلاس میتوانید رنگ آبی را به badge خود اضافه کنید.
    • badge-secondary : این کلاس رنگ خاکستری را به شما میدهد.
    • badge-success : رنگ این کلاس برای Badge سبز است.
    • badge-danger : این کلاس رنگ قرمز را به Badge میدهد.
    • badge-warning : رنگ نارنجی را میتوانید به کمک این کلاس بسازید.
    • badge-info : رنگ آبی کمرنگ توسط این کلاس ساخته میشود.
    • badge-light : این کلاس رنگ روشن و نزدیک به سفید میسازد.
    • badge-dark : این کلاس رنگ تیره و نزدیک به مشکی میسازد.

    برای واضح شدن موضوع یک مثال در کد زیر آورده ایم که Badge با رنگ سبز میسازد:

    <span class="badge badge-success">Success</span>

    نمایش badge به صورت pill 

    یکی دیگر از حالت های نمایش حالت pill است در حالت عادی کلاس های رنگی خمیدگی کمی در باکس ها میبینید که با حالت نمایش pill این خمیدگی زیاد میشود و به حالت بیضی نزدیک میشود. برای به وجود آوردن این حالت کافیست کلاس badge-pill را به کلاس های قبلی اضافه کنید به این صورت که کلاس ثابت badge را داشتیم سپس این کلاس را اضافه میکنیم و بعد کلاس رنگی به عنوان مثال badge-success را اضافه میکنیم به این صورت نشان هایی با خمیدگی بیشتر دارید برای واضح شدن موضوع میتوانید از کد زیر استفاده کنید:

    <span class="badge badge-pill badge-success">Success</span>

     

    قرار دادن badge در داخل المنت

    تا اینجای کار از Badge ها به صورت مستقل و جدا از هر المانی استفاده کردیم اگر قصد دارید از نشان ها داخل المان های دیگر استفاده کنید کافیست آن را در داخل هر تگی که مد نظرتان است قرار دهید به عنوان مثال دکمه دانلودی دارید که میخواهید داخل خود دکمه تعداد دفعات دانلود آن فایل را نشان دهید برای این کار کافیست دکمه را کاملا تعریف کرده و بین تگ باز و بسته button از تگ span با کلاس badge استفاده کنید و به این صورت نشان را داخل المان قرار دهید برای اینکه این موضوع واضح شود میتوانید از کد زیر کمک بگیرید:

    <button type="button" class="btn btn-primary">
  Download <span class="badge badge-light">4</span>
</button>

     

    بسیار خوب نکته دیگری درباره آموزش Bootstrap 4 جلسه یازدهم (Badge) نمی ماند.

    برای راحتی شما عزیزان تمام موارد آموزش را به صورت کامل در کد زیر قرار داده ایم:

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Badges</h2>
  <h1>Example heading <span class="badge badge-secondary">New</span></h1>
  <h2>Example heading <span class="badge badge-secondary">New</span></h2>
  <h3>Example heading <span class="badge badge-secondary">New</span></h3>
  <h4>Example heading <span class="badge badge-secondary">New</span></h4>
  <h5>Example heading <span class="badge badge-secondary">New</span></h5>
  <h6>Example heading <span class="badge badge-secondary">New</span></h6>
</div>

----------------------------------------------------------------------------
<div class="container">
  <h2>Contextual Badges</h2>
  <span class="badge badge-primary">Primary</span>
  <span class="badge badge-secondary">Secondary</span>
  <span class="badge badge-success">Success</span>
  <span class="badge badge-danger">Danger</span>
  <span class="badge badge-warning">Warning</span>
  <span class="badge badge-info">Info</span>
  <span class="badge badge-light">Light</span>
  <span class="badge badge-dark">Dark</span>
</div>


----------------------------------------------------------------------------
<div class="container">
  <h2>Pill Badges</h2>
  <span class="badge badge-pill badge-primary">Primary</span>
  <span class="badge badge-pill badge-secondary">Secondary</span>
  <span class="badge badge-pill badge-success">Success</span>
  <span class="badge badge-pill badge-danger">Danger</span>
  <span class="badge badge-pill badge-warning">Warning</span>
  <span class="badge badge-pill badge-info">Info</span>
  <span class="badge badge-pill badge-light">Light</span>
  <span class="badge badge-pill badge-dark">Dark</span>
</div>
----------------------------------------------------------------------------

<div class="container">
  <h2>Badge inside a Button</h2>
  <button type="button" class="btn btn-primary">
    Messages <span class="badge badge-success">4</span>
  </button>
  <button type="button" class="btn btn-danger">
    Notifications <span class="badge badge-light">7</span>
  </button>
</div>
----------------------------------------------------------------------------
<br>
</body>
</html>

     

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

    آموزش Bootstrap 4 جلسه دهم (Button Group)

    آموزش Bootstrap 4 جلسه دوازدهم (Progress Bar)

     

    شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

     

    همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

    اگر این مطلب آموزنده بود به ما امتیاز دهید

    میانگین امتیاز / 5. تعداد آرا:

    اولین کسی باشید که رای میدهید


    • تاریخ ارسال
      2019/6/18
    • ارسال شده توسط
      amir
    • دیدگاه ها
      بدون دیدگاه
    • حجم دوره
      25.75 mb

    این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

    دانلود آموزش Bootstrap 4 جلسه یازدهم (Badge): نوع فایل:mp4 حجم فایل:25.75 مگابایت

    هر پلیر اجرا کننده فایل ویدیویی

    بیشتر مشاهده کنید

    دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.