آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه پنجمReviewed by صابر بوستانی on Jan 17Rating: 5.0
آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه پنجم

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

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

 

 

 

آموزش استرپ:

 

 

کلاس well در بوت استرپ :

دور عنصر یک کادر گرد شده با زمینه خاکستری و مقداری Padding اضافه می کند.

بوت استرپ

کد :

 

: Well اندازه

2

های بزرگ اندازه آن را تغییر دهید. Well برای .well-lg های کوچک و یا Well برای .well-sm با اضافه کردن کلاس

کد :

.است (medium) ها به صورت پیش فرض متوسط Well اندازه

هشدارهای بوت استرپ :

هشدار ها : بوت استرپ یک راه ساده برای ساخت پیام های هشدار از پیش تعیین شده در اختیار ما قرار میدهد .

3

این هشدارها توسط کلاس alert به همراه یکی از چهار کلاس متنی ساخته میشوند.

کلاس alert-danger و کلاس alert-warning  و کلاس alert-info و کلاس alert-success :

برای بستن یک پیغام هشدار class=”close” و data-dismiss=”alert” را به یک لینک و یا دکمه اضافه کنید.

:aria-* attribute و ×  توضیح خصوصیت

برای بهبود دسترسی کسانی که از صفحه خوان ها استفاده میکنند باید به هنگام ایجاد یک دکمه خروج خاصیت aria-label=”close را نیز اضافه کنند.

 

هشدار های متجرک در بوت استرپ :

کلاس های fade و in به هنگام بسته شدن پیغام هشدار، به آن یک افکت وحو شدن اضافه می کند.

مرجع کاملی از هشدار های بوت استرپ : برای دست یابی به مرجع کاملی از گزینه ها ، متد ها و رویداد های هشدار به bootstrap JS Alert Reference مراجعه کنید.

 

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

استایل دکمه ها : بوت استرپ هفت استایل دکمه ارائه میکند که در شکل زیر مشاهده می نمایید.

4

بوت استرپ کلاس های زیر را برای دست یابی به استایل دکمه های بالا ارائه میدهد :

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

در بالا دکمه هایی معرفی کردیم که در مثال زیر کد مورد نیاز برای هر دکمه را مشاهده میکنید :

جهت مشاهده آنلاین کلیک کنید

همچنین به شکل زیر هم میتونید دکمه های خودتون رو طراحی کنید :

جهت مشاهده آنلاین کلیک کنید

چرا در خصوصیت href یا لینک از # استفاده می کنیم؟ بخاطر اینکه هیچ پیج خاصی برای لینک کردن در اختیار نداریم ،و همچنین نمیخواهیم

با پیغام خطای “۴۰۴” مواجه شویم، از # به عنوان لینک استفاده میکنیم. با این وجود در موقعیت واقعی باید حتما از یک URL واقعی استفاده شود.

 

اندازه دکمه ها در بوت استرپ :

بوت استرپ چهار اندازه مختلف برای دکمه ها ارائه میدهد که در تصویر زیر مشاهده می نمایید:

5

کلاس های مختلفی که اندازه های مختلف را تعیین میکنند :

  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs

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

جهت مشاهده آنلاین کلیک کنید

دکمه های با عرض کامل در بوت استرپ : یک دکمه با عرض کامل، به اندازه ی عرض عنصر والد خود گسترده می شود.

6bb

 

 

برای ایجاد یک دکمه با عرض کامل از کلاس btn-block استفاده کنید که کدش در زیر ذکر شده :

 

دکمه های فعال/غیر فعال در بوت استرپ :

یک دکمه را میتوان ب حالت فعال (قابل کلیک کرد ن) یا غیرفعال(غیر قابل کلیک کردن) تنظیم کرد :

7

کلاس active دکمه را فعال و کلاس disabled دکمه را غیر فعال می کند.

کد زیر مثالی از دکمه فعال و غیر فعال در بوت استرپ که در تصویر بالا به شما دوستان عزیز معرفی شد رو نشون میده :

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

 

موفق و پیروز باشید : دوست دار شما گروه برنامه نویسی سورس باران