saeed410
شنبه 29 آذر 1393, 03:09 صبح
در این قسمت از آموزش ها با کامپوننت های بوت استرپ (http://Sypna.ir) اشنا خواهیم شد. این کامپوننت ها مجموعه ای از ابزارها و کلاس های CSS را در اختیار ما قرار میدهند که میتواند در توسعه سریع وب سایت و طراحی سایت (http://Sypna.ir) مورد استفاده قرار گیرد. در این آموزش قصد داریم با glyphicon ها آشنا شویم.
glyphicon چیست؟ Glyph به معنی علامت یا نشانه حجاری شده است. Glyphicon دسترسی به بیش از 200 آیکون و نشانه را در قالب فونت ها در اختیار ما قرار میدهد. مزیت فونت نسبت به آیکون این است که دیگر نیازی به دردسرهای اضافه کردن عکس و ... وجود ندارد. با افزودن یک کلاس CSS میتوانید آیکون های مختلف طراحی شده در این فونت را نمایش دهید. برای مشاهده لیست کامل آیکنهای میتوانید به وب سایت رسمی Glyphicons (http://glyphicons.com/)مراجعه کنید. این آیکون ها رایگان نیستند و نیاز به لایسنس و خریداری دارند. البته توسعه دهندگان این فونت ها ؛ آیکون ها را برای بوت استرپ به صورت رایگان در اختیار میگذارند. بنابراین اگر از بوت استرپ استفاده میکنید نیازی به پرداخت 59 دلار ندارید.
glyphicon ها در کجا قرار دارند؟ هنگامی که بوت استرپ را دانلودمیکنید این آیکون ها نیز به همراه آن دانلود میشوند و در پوشه fonts و به عنوان فونت قرار دارند.
کلاسهای بوت استرپ برای استفاده از glyphicons: برای مشاهده لیست کامل کلاسهای glyphicon در بوت استرپ میتوانید به این آدرس مراجعه کنید (http://www.tutorialspoint.com/bootstrap/bootstrap_glyph_icons.htm). در اینجا ما با یک مثال روش های استفاده از این کلاسها را به شما آموزش میدهیم .
روش استفاده از glyphicon : برای استفاده از آیکون های در هر جایی که میخواهید میتوانید از کد زیر استفاده کنید.
<span class="glyphicon glyphicon-search"></span>
در کد بالا ما آیکون جستجو را نمایش داده ایم. مثال زیر روش استفاده کامل از آیکون های مختلف را توضیح میدهد:
<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>
</p>
تصویر دموی این کد به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/GlyphIcons/Glyphicon-Bootstrap-Demo.JPG
در آموزش بعد با کامپوننت DropDown اشنا خواهیم شد.
در گروه: کامپوننت های لایه بندی (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/9/%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-%D9%87%D8%A7%DB%8C-%D9%84%D8%A7%DB%8C%D9%87-%D8%A8%D9%86%D8%AF%DB%8C)
منبع: طراحی سایت (http://Sypna.ir)
glyphicon چیست؟ Glyph به معنی علامت یا نشانه حجاری شده است. Glyphicon دسترسی به بیش از 200 آیکون و نشانه را در قالب فونت ها در اختیار ما قرار میدهد. مزیت فونت نسبت به آیکون این است که دیگر نیازی به دردسرهای اضافه کردن عکس و ... وجود ندارد. با افزودن یک کلاس CSS میتوانید آیکون های مختلف طراحی شده در این فونت را نمایش دهید. برای مشاهده لیست کامل آیکنهای میتوانید به وب سایت رسمی Glyphicons (http://glyphicons.com/)مراجعه کنید. این آیکون ها رایگان نیستند و نیاز به لایسنس و خریداری دارند. البته توسعه دهندگان این فونت ها ؛ آیکون ها را برای بوت استرپ به صورت رایگان در اختیار میگذارند. بنابراین اگر از بوت استرپ استفاده میکنید نیازی به پرداخت 59 دلار ندارید.
glyphicon ها در کجا قرار دارند؟ هنگامی که بوت استرپ را دانلودمیکنید این آیکون ها نیز به همراه آن دانلود میشوند و در پوشه fonts و به عنوان فونت قرار دارند.
کلاسهای بوت استرپ برای استفاده از glyphicons: برای مشاهده لیست کامل کلاسهای glyphicon در بوت استرپ میتوانید به این آدرس مراجعه کنید (http://www.tutorialspoint.com/bootstrap/bootstrap_glyph_icons.htm). در اینجا ما با یک مثال روش های استفاده از این کلاسها را به شما آموزش میدهیم .
روش استفاده از glyphicon : برای استفاده از آیکون های در هر جایی که میخواهید میتوانید از کد زیر استفاده کنید.
<span class="glyphicon glyphicon-search"></span>
در کد بالا ما آیکون جستجو را نمایش داده ایم. مثال زیر روش استفاده کامل از آیکون های مختلف را توضیح میدهد:
<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>
</p>
تصویر دموی این کد به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/GlyphIcons/Glyphicon-Bootstrap-Demo.JPG
در آموزش بعد با کامپوننت DropDown اشنا خواهیم شد.
در گروه: کامپوننت های لایه بندی (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/9/%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-%D9%87%D8%A7%DB%8C-%D9%84%D8%A7%DB%8C%D9%87-%D8%A8%D9%86%D8%AF%DB%8C)
منبع: طراحی سایت (http://Sypna.ir)