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

0 دیدگاه

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

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

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

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

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

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

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

<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>

<p>Envelope icon as a link:

</p>

<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>

<p>Search icon on a button:

<span class="glyphicon glyphicon-search"></span> Search

</button>

</p>

<p>Search icon on a styled button:

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

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

<a href="#">Comments <span class="badge">10</span></a><br>

<a href="#">Updates <span class="badge">2</span></a>

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

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

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

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

برچسب ها : (Labels)

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

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

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

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

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

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

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

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

نظرات

برچسب ها: آموزش متوسطه بوت استرپ

صابر بوستانی

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

دوره آموزش طراحی وب سایت مدرسه با PHP و MySql

انتشار: ۲۹ بهمن ۱۳۹۴

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

صابر بوستانی

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط