دوستان عزیز، توی این مطلب درخدمتتون هستیم با آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه هفتم که از وب سایت آموزش برنامه نویسی سورس باران مشاهده می نمایید. همونطور که گفته شده این دوره بصورت متنی می باشد و از منابع خارجی ترجمه شده که به صورت متنی در ادامه مطلب ارائه می شود.
Glyphicons یا آیکون های نمادین در بوت استرپ :
بوت استرپ 200 آیکن نمادین را از مجموعه ی آیکن های نمادین، در اختیار ما میگذارد که از این لینک میتونید ببینید. از این آیکون ها میتوان در متن ها ، دکمه ها ، جعبه ابزار ها ، نویگیشن ها ، فرم ها و دیگر جاها استفاده کرد. در ادامه با بعضی ازین آیکون های نمادین آشنا خواهیدشد.
سینتکس و نحوه ساخن یک آیکون Glyphicons در بوت استرپ :
یک آیکون Glyphicons در سینتکس و کد زیر قرار میگیرد، همچنین در قسمت name کد باید نام ایکون نمادین مورد نظر قرار بگیرد.
در مثال زیر با شیوه های مختلف استفاده از یک ایکون Glyphicons در بوت استرپ آشنا خواهید شد :
نکته : جهت دست یابی به منبع کاملی از تمام این ایکون ها به لینک روبرو مراجعه کنید : Bootstrap Glyphicon Reference
آموزش کار با مدال ها و برچسب های بوت استرپ :
مدال ها : (Badges)
مدال ها شاخص های عددی هستند که نشان میدهند چه تعداد ایتم در ارتباط با لینک ها هستند، مانند تصویر زیر که اعداد (2 ، 10 و 5) مدال هستند .
برای ساخت مدال ها بالا از کلاس .badge به همراه عنصر <span> استفاده می کنیم :
همچنین میتوان از مدال ها درون عناصر دیگری مانند دکمه ها نیز استفاده کرد :
مثال زیر نحوه ی اضافه کردن مدال به دکمه ها (تصویر بالا) را نشان می دهد :
برچسب ها : (Labels)
از برچسب ها برای ارائه توضیحات بیشتر در مورد چیزی استفاده میشود :
برای ساخت یک برچسب از کلاس .label به همراه یکی از کلاس های متنی .label-default, .label-primary, .label-success, .label-info, .label-warning یا .label-dangerدرون یک <span> استفاده می کنیم. کد تصویر بالا به شکل زیر می باشد :
همچنین مثال زیر تمام کلاس های برچسب متنی را نشان می دهد :
برای تازه شدن دیر نیست.
موفق و پیروز باشید
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.