آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه هفتم

آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه هفتم

دوستان عزیز، توی این مطلب درخدمتتون هستیم با آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه هفتم که از وب سایت آموزش برنامه نویسی سورس باران مشاهده می نمایید. همونطور که گفته شده این دوره بصورت متنی می باشد و از منابع خارجی ترجمه شده که به صورت متنی در ادامه مطلب ارائه می شود.

 

 

Glyphicons یا آیکون های نمادین در بوت استرپ :

بوت استرپ 200 آیکن نمادین را از مجموعه ی آیکن های نمادین، در اختیار ما میگذارد که از این لینک میتونید ببینید. از این آیکون ها میتوان در متن ها ، دکمه ها ، جعبه ابزار ها ، نویگیشن ها ، فرم ها و دیگر جاها استفاده کرد. در ادامه با بعضی ازین آیکون های نمادین آشنا خواهیدشد.

 

سینتکس و نحوه ساخن یک آیکون Glyphicons در بوت استرپ :

یک آیکون Glyphicons در سینتکس و کد زیر قرار میگیرد، همچنین در قسمت name کد باید نام ایکون نمادین مورد نظر قرار بگیرد.

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

 

در مثال زیر با شیوه های مختلف استفاده از یک ایکون Glyphicons در بوت استرپ آشنا خواهید شد :

<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> 

جهت مشاهده دمو کلیک نمایید.

نکته : جهت دست یابی به منبع کاملی از تمام این ایکون ها به لینک روبرو مراجعه کنید : Bootstrap Glyphicon Reference

 

آموزش کار با مدال ها و برچسب های بوت استرپ :

مدال ها : (Badges)

مدال ها شاخص های عددی هستند که نشان میدهند چه تعداد ایتم در ارتباط با لینک ها هستند، مانند تصویر زیر که اعداد (2 ، 10 و 5) مدال هستند .

بوت استرپ

برای ساخت مدال ها بالا  از کلاس .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> 

همچنین میتوان از مدال ها درون عناصر دیگری مانند دکمه ها نیز استفاده کرد :

2

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

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

 

برچسب ها : (Labels)

از برچسب ها برای ارائه توضیحات بیشتر در مورد چیزی استفاده میشود :

3

برای ساخت یک برچسب از کلاس .label به همراه یکی از کلاس های متنی .label-default, .label-primary, .label-success, .label-info, .label-warning یا .label-dangerدرون یک <span> استفاده می کنیم. کد تصویر بالا به شکل زیر می باشد :

<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>

همچنین مثال زیر تمام کلاس های برچسب متنی را نشان می دهد :

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>

4

برای تازه شدن دیر نیست.

موفق و پیروز باشید

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

پکیج جامع و پروژه محور ASP.NET MVC + طراحی فروشگاه اینترنتی فروش فایل
  • انتشار: ۲۹ بهمن ۱۳۹۴

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.