akofaraji.ir
مجموعه دکمه ها و نشان ها (badge)
نوشته شده در تاریخ 08 فروردین 1403
نظرات: 0 امتیاز: 5 زمان مطالعه: 15 دقیقه
 
 
دکمه ها در بوت استرپ
 
 

مجموعه دکمه ها در بوت استرپ

 

مجموعه دکمه ها یا button group ها همانطور که از نامشان مشخص است، مجموعه ای از چند دکمه هستند که در کنار هم قرار می گیرند. برای ساخت این دکمه ها باید از کلاس btn-group. استفاده کنید. به مثال زیر دقت کنید:

 

مشاهده ی خروجی در JSBin

 

شاید از خودتان بپرسید این مجموعه دکمه ها به چه دردی می خورند؟ در واقع استفاده از این دکمه ها به سلیقه ی شما برمیگردد. یکی از مواردی که می توانیم در آن ها از مجموعه دکمه ها استفاده کنیم، زمانی است که چند گزینه به هم مربوط و متعلق به یک واحد می باشند. مثلا برنامه ای داریم که گزینه های Cancel و OK و Save کنار هم هستند؛ در این حالت می توان از مجموعه دکمه ها استفاده کرد.

برای آنکه اندازه ی این مجموعه دکمه ها بزرگتر یا کوچکتر شود می توان از کلاس های btn-group-lg. و btn-group-sm. استفاده کرد:

 

مشاهده ی خروجی در JSBin

 

دکمه های عمودی

 

می توانید مجموعه دکمه ها را به صورت عمودی نیز قرار دهید. برای این کار از کلاس btn-group-vertical. استفاده کنید:

 

مشاهده ی خروجی در JSBin

 

دکمه های آبشاری (Dropdown)

 

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

 

مشاهده ی خروجی در JSBin

 

البته از طرفی می توان این دکمه را حفظ کرد و فقط بخشی از آن را به منوی آبشاری اختصاص داد. در این صورت می توان گفت:

 

مشاهده ی خروجی در JSBin

 

اگر بخواهیم این منوی آبشاری را در حالت عمودی نیز پیاده کنیم، چیزی مانع ما نخواهد شد بلکه باید از همان کلاس های قبلی استفاده کنیم:

 

مشاهده ی خروجی در JSBin

 

سوال: اگر دو مجموعه دکمه را پشت سر هم بنویسیم، چه می شود؟

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

 

مشاهده ی خروجی در JSBin

 

Badge یا نشان در بوت استرپ

 

کلمه ی Badge در لغت به معنی نشان است اما در بوت استرپ معنای کاربردی دیگری دارند. آن ها در واقع نشان هایی هستند که برای اطلاع رسانی اضافی به کاربر در مورد جزئیات یک مسئله به وجود آمده اند. ما می توانیم برای ساخت آن ها از کلاس badge. به همراه یک کلاس دیگر مانند badge-secondary. استفاده کنیم. در مثال زیر این کار را در تگ <span> انجام داده ایم. در این مثال توجه کنید که اندازه ی badge به همراه عنصر نگه دارنده اش تغییر می کند:

 

مشاهده ی خروجی در JSBin

 

در مثال بالا badge ای به نام new به تیترهای ما اضافه شده است. از این نوع badge می توان در وبلاگ ها استفاده کرد تا به کاربر بگویند فلان چیز جدیدا و اخیرا نوشته شده است. البته این تنها نوع badge نیست بلکه می توان از badge های دیگر استفاده کرد، همچنین با استفاده از دسته کلاس های *-badge. می توان رنگ این badge ها را تغییر داد:

 

مشاهده ی خروجی در JSBin

 

نشان های گرد

 

اگر می خواهید نشان هایتان به جای مستطیل، به شکل گردتری در بیایند می توانید از کلاس های badge-pill. استفاده کنید:

 

مشاهده ی خروجی در JSBin

 

استفاده از نشان درون دکمه ها

 

نشان ها می توانند درون دکمه ها نیز قرار بگیرند تا به نوعی اخطار یا اطلاع رسانی کنند. به طور مثال با قرار دادن یک نشان درون دکمه ی مربوط به پیام ها می توان به کاربر نشان داد که چند پیام نخوانده دارد:

 

مشاهده ی خروجی در JSBin

 

منبع: سایت روکسو


اگر احساس می کنید این مطلب برای شما مفید بود ، از 1 تا 10 به این مطلب امتیاز دهید

دیدگاه کاربران در مورد این مطلب

ثبت نظر
به نظر خوب میاد!
لطفا نام را وارد کنید
@
لطفا یک ایمیل منحصر به فرد و معتبر انتخاب کنید.
لطفا متن با کلمات و معانی مفهوم دار وارد نمایید