نمادها

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

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

» آموزش طراحی وب » آموزش Bootstrap » آموزش Bootstrap جلسه چهاردهم (Badges/Labels)

آموزش Bootstrap جلسه چهاردهم (Badges/Labels)

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

    در خدمت شما هستیم با آموزش Bootstrap جلسه چهاردهم (Badges/Labels)

    آموزش Bootstrap جلسه چهاردهم (Badges/Labels) از سری آموزش های تک قسمتی است

    سلام برنامه در این جلسه درباره برچسب ها و badges ها صحبت می کند

    به واسطه badge می توانید شماره هایی به لیست های خود و لینک های خود اضافه کنید

    این شماره ها هر چیزی میتوانند باشند مثلا تعداد محتویات یک لیست یا تعداد دفعات دانلود یک فایل

    همچنین این جلسه برچسب ها را هم بررسی می کنیم که از آنها برای نمایش tag در سایت استفاده می شود.

     

    دستور badge

    همانطور که توضیح داده شد از دستور badge برای نمایش تعداد محتوای درون یک لینک استفاده میشود.
    فرض کنید دسته بندی دارید که در آن ۵ ویدیو وجود دارد به کمک badge میتوانید تعداد ویدیو ها را نشان دهید.

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

    اگر بخواهیم مثالی از 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/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Badges</h2>
  <a href="#">News <span class="badge">5</span></a><br>
  <a href="#">Comments <span class="badge">10</span></a><br>
  <a href="#">Updates <span class="badge">2</span></a>
</div>

</body>
</html>

    در مثال بالا شما میتوانید کلاس badge و نحوه استفاده از آن را ببینید.

     

    کلاس Labels

    درباره کلاس Labels هم در بالا صحبت کردیم و همانطور که از نام آن مشخص است برای لیبل گذاری از آن استفاده می شود.
    لیبل ها بسیار پر کاربرد هستند و در موارد گوناگونی برای توضیحات اضافه از آن ها استفاده میشود.

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

    اگر بخواهیم مثالی از Labels بزنیم مثال زیر مناسب است:

    <!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/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
  <h2>Labels</h2>
  <h1>Example <span class="label label-default">New</span></h1>
  <h2>Example <span class="label label-default">New</span></h2>
  <h3>Example <span class="label label-default">New</span></h3>
  <h4>Example <span class="label label-default">New</span></h4>
  <h5>Example <span class="label label-default">New</span></h5>
  <h6>Example <span class="label label-default">New</span></h6>
</div>

</body>
</html>

     

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

    آموزش Bootstrap جلسه سیزدهم(Glyphicons)

    آموزش Bootstrap جلسه پانزدهم(Progress Bars)

     

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

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

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

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


    • تاریخ ارسال
      2019/5/08
    • ارسال شده توسط
      amir
    • دیدگاه ها
      ۱ دیدگاه
    • حجم دوره
      21.97 mb

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

    دانلود آموزش Bootstrap جلسه چهاردهم(Badges/Labels): نوع فایل:mp4 حجم فایل:21.97 مگابایت

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

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

    یک دیدگاه برای “آموزش Bootstrap جلسه چهاردهم (Badges/Labels)”

    1. saman lol گفت:
      می 9, 2019 در 8:09 ب.ظ

      جالب بود با آموزشاتون چیزای جدیدی از بوت استرپ یاد گرفتم

      پاسخ

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

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

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