سبد (0)

تبلیغات

انواع آیکن ها در بوت استرپ

آیکن های ارائه شده در بوت استرپ

Wiki

بوت استرپ 200 آیکن را از مجموعه ی آیکن های نمادین، ارائه می دهد.

این آیکن ها می توانند در متن، دکمه ها، نوار ابزارها، ناوبری ها، فرم ها و ... مورد استفاده قرار گیرند.

در زیر چند نمونه از این آیکن ها را مشاهده می کنید:

آیکن نمادین نامه:

آیکن نمادین پرینت:

آیکن نمادین جستجو:

آیکن نمادین دانلود:


نحوه ایجاد آیکن در بوت استرپ

Wiki

برای ایجاد یک آیکن می توانید به صورت زیر عمل کنید:

<span class="glyphicon glyphicon-name"></span>

 قسمت name از کد بالا، باید با نام مناسب آیکن مورد نظر جایگزین شود.

در مثال زیر، راه های مختلف استفاده از آیکن ها نشان داده شده است:

مثال (آیکن های بوت استرپ)

<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
  <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Search icon on a styled button:
  <button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
  <a href="#" class="btn btn-success btn-lg">
    <span class="glyphicon glyphicon-print"></span> Print
  </a>
</p>

خودتان امتحان کنید »

مدال ها(Badges) در بوت استرپ

Wiki

با استفاده از badge ها می توان تعداد آیتم ها را نشان داد:


اعداد 5و10و2 مدال(badge) می باشند.

برای ایجاد مدال ها(badge) می توانید از کلاس badge. در عناصر <span> استفاده کنید:

مثال (آیکن های بوت استرپ)

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>

خودتان امتحان کنید »

مدال ها(badge) می توانند درون عناصر دیگر، مانند دکمه ها، استفاده شوند:

مثال زیر نحوه ی اضافه کردن مدال ها(badge) را به دکمه ها نشان می دهد:

مثال (آیکن های نمادین بوت استرپ)

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>

خودتان امتحان کنید »

مرجع کامل آیکن های بوت استرپ

Wiki

برای دیدن یک مرجع کامل از تمام آیکن ها، مرجع آیکن های نمادین بوت استرپ را مشاهده نمایید.

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی