در برخی مواقع نیاز داریم تا کامپوننت هایی طراحی کنیم تا زمانی که با سایر المان های HTML مورد استفاده قرار گرفت ، ببینندگان سایت را جذب خود کند . آن ها می توانند labels ، آیکون های notification و یا دکمه های بزرگی مثل “Buy Now” ، “Grab it” و ... باشد . در ادامه برخی از این کامپوننت ها را بررسی می کنیم .
بخش 27 – طراحی وب واکنش گرا ، Label در bootstrap
در برخی مواقع نیاز داریم تا کامپوننت هایی طراحی کنیم تا زمانی که با سایر المان های HTML مورد استفاده قرار گرفت ، ببینندگان سایت را جذب خود کند . آن ها می توانند labels ، آیکون های notification و یا دکمه های بزرگی مثل “Buy Now” ، “Grab it” و ... باشد . در ادامه برخی از این کامپوننت ها را بررسی می کنیم .
Label
کامپوننت label بهترین راه حل برای نمایش متنی کوتاه درکنار سایر کامپوننت ها می باشد . گاهی اوقات نیاز به متن های مانند “New” و یا “Download Now” فرضن در کنار یک کنترل دیگر HTML داریم . در این گونه مواقع label دردسترس می باشد .
برای نمایش یک label شما نیاز به استفاده از کلاس label در یک کنترل HTML inline مانند i و یا span دارید . در اینجا میخواهیم از یک کنترل span برای نمایش یک label در تگ h3 استفاده کنیم .
بعد از اجرای کد بالا نتیجه بصورت زیر خواهد بود
کلاس های اضافه تری که به bootstrap میگوید ما چه مدل از label را نیاز داریم در زیر می بینید :
- Label-default برای رنگ خاکستری
- Label-primary برای آبی تیره
- Label-success برای سبز
- Label-info برای آبی روشن
- Label-warning برای نارنجی
- Label-danger برای قرمز
برای مثال ما کلاس Label-danger را بصورت زیر اضافه می کنیم
و نتیجه به شکل زیر در خواهد آمد
دانلود سورس تمرین این قسمت
شاد و سلامت باشید
محمد جعفری فوتمی