آموزش Glyphicons در بوت استرپ
آموزش Glyphicons در بوت استرپ
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش Glyphicons در بوت استرپ خواهیم پرداخت.
در این درس در مورد Glyphicons ، کاربرد آن و چند نمونه بحث خواهد شد. بسته های راه انداز 200 گلیم در قالب قلم را بسته بندی می کند. حالا بگذارید بفهمیم Glyphicons چیست.
Glyphicons چیست؟
Glyphicons قلم های آیکونی است که می توانید در پروژه های وب خود استفاده کنید. Glyphicons Halflings رایگان نیست و نیاز به مجوز دارد ، با این حال سازنده آنها آنها را بدون هزینه در اختیار پروژه های بوت استرپ قرار داده است.
Glyphicons را از کجا پیدا کنید؟
اکنون که نسخه Bootstrap 3.x را بارگیری کردیم و ساختار دایرکتوری آن را از فصل Environment Setup درک کردیم ، glyphicons را می توان در پوشه fonts پیدا کرد. این شامل پرونده های زیر است –
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
قوانین مرتبط CSS در پرونده های bootstrap.css و bootstrap-min.css در پوشه css پوشه dist وجود دارد. glyphicons موجود را می توانید در این لینک GLYPHICONS مشاهده کنید.
کاربردها
برای استفاده از نمادها ، به سادگی از کد زیر در هر قسمت از کد خود استفاده کنید. برای پر کردن مناسب بین آیکون و متن فاصله بگذارید.
|
1 |
<span class = "glyphicon glyphicon-search"></span> |
مثال زیر این را نشان می دهد –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<p> <button type = "button" class = "btn btn-default"> <span class = "glyphicon glyphicon-sort-by-attributes"></span> </button> <button type = "button" class = "btn btn-default"> <span class = "glyphicon glyphicon-sort-by-attributes-alt"></span> </button> <button type = "button" class = "btn btn-default"> <span class = "glyphicon glyphicon-sort-by-order"></span> </button> <button type = "button" class = "btn btn-default"> <span class = "glyphicon glyphicon-sort-by-order-alt"></span> </button> </p> <button type = "button" class = "btn btn-default btn-lg"> <span class = "glyphicon glyphicon-user"></span> User </button> <button type = "button" class = "btn btn-default btn-sm"> <span class = "glyphicon glyphicon-user"></span> User </button> <button type ="button" class = "btn btn-default btn-xs"> <span class = "glyphicon glyphicon-user"></span> User </button> |
لیست جلسات قبل آموزش بوت استرپ
- آموزش بوت استرپ
- بررسی اجمالی بوت استرپ
- آموزش راه اندازی بوت استرپ
- آموزش سیستم شبکه در بوت استرپ
- بررسی اجمالی CSS در بوت استرپ
- آموزش تایپوگرافی در بوت استرپ
- آموزش کد در بوت استرپ
- آموزش جدول در بوت استرپ
- آموزش فرم ها در بوت استرپ
- آموزش دکمه ها در بوت استرپ
- آموزش تصاویر در بوت استرپ
- آموزش کلاس های کمکی در بوت استرپ
- آموزش ابزارهای پاسخگو در بوت استرپ
.svg)
دیدگاه شما