آموزش دکمه ها در بوت استرپ
آموزش دکمه ها در بوت استرپ
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش دکمه ها در بوت استرپ خواهیم پرداخت.
بوت استرپ برخی از گزینه ها را برای استایل دهی دکمه ها ارائه می دهد، که به طور خلاصه در زیر آمده است –
- btn
دکمه پیش فرض / استاندارد.
- btn-basic
وزن بصری اضافی را فراهم می کند و عملکرد اصلی را در مجموعه ای از دکمه ها مشخص می کند.
- btn-success
یک عمل موفقیت آمیز یا مثبت را نشان می دهد.
- btn-info
دکمه متنی برای پیام های هشدار اطلاعاتی.
- btn-warning
نشان می دهد که باید با این عمل احتیاط کرد.
- btn-danger
یک عمل خطرناک یا بالقوه منفی را نشان می دهد.
- btn-link
با حفظ رفتار دکمه، یک دکمه را به صورت لینک در بیاورید.
مثال زیر تمام کلاس های دکمه فوق را نشان می دهد –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- Standard button --> <button type = "button" class = "btn btn-default">Default Button</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type = "button" class = "btn btn-primary">Primary Button</button> <!-- Indicates a successful or positive action --> <button type = "button" class = "btn btn-success">Success Button</button> <!-- Contextual button for informational alert messages --> <button type = "button" class = "btn btn-info">Info Button</button> <!-- Indicates caution should be taken with this action --> <button type = "button" class = "btn btn-warning">Warning Button</button> <!-- Indicates a dangerous or potentially negative action --> <button type = "button" class = "btn btn-danger">Danger Button</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type = "button" class = "btn btn-link">Link Button</button> |
اندازه دکمه
جدول زیر خلاصه ای از کلاسهای استفاده شده برای بدست آوردن دکمه هایی در اندازه های مختلف است –
- btn-lg.
این باعث می شود اندازه دکمه بزرگ باشد.
- btn-sm.
این باعث می شود اندازه دکمه کوچک باشد.
- btn-xs.
این باعث می شود اندازه دکمه خیلی کوچک شود.
- btn-block.
با این کار دکمه های سطح بلوک ایجاد می شود – دکمه هایی که در عرض کل والد قرار دارند.
مثال زیر این را نشان می دهد –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<p> <button type = "button" class = "btn btn-primary btn-lg"> Large Primary button </button> <button type = "button" class = "btn btn-default btn-lg"> Large button </button> </p> <p> <button type = "button" class = "btn btn-primary"> Default size Primary button </button> <button type = "button" class = "btn btn-default"> Default size button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-sm"> Small Primary button </button> <button type = "button" class = "btn btn-default btn-sm"> Small button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-xs"> Extra small Primary button </button> <button type = "button" class = "btn btn-default btn-xs"> Extra small button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-lg btn-block"> Block level Primary button </button> <button type = "button" class = "btn btn-default btn-lg btn-block"> Block level button </button> </p> |
حالت دکمه
بوت استرپ کلاس هایی را ارائه می دهد که به شما امکان می دهد حالت دکمه ها را به صورت فعال ، غیرفعال و غیره تغییر دهید که هرکدام از آنها در بخش های بعدی بحث می شود
حالت فعال
در صورت فعال بودن دکمه ها فشرده به نظر می رسند (با پس زمینه تیره تر، حاشیه تیره تر و سایه درج شده). جدول زیر خلاصه کلاسهایی است که برای فعال کردن عناصر دکمه و عناصر لنگر استفاده شده است -.
| عنصر | کلاس |
|---|---|
| Button element | برای نشان دادن فعال بودن از کلاس active. استفاده کنید. |
| Anchor element | از کلاس active. برای دکمه های <a> استفاده کنید تا نشان دهد |
مثال زیر این را نشان می دهد –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<p> <button type = "button" class = "btn btn-default btn-lg "> Default Button </button> <button type = "button" class = "btn btn-default btn-lg active"> Active Button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-lg"> Primary button </button> <button type = "button" class = "btn btn-primary btn-lg active"> Active Primary button </button> </p> |
حالت غیرفعال
وقتی یک دکمه را غیرفعال کنید ، 50٪ رنگ آن محو می شود و شیب آن از بین می رود.
جدول زیر خلاصه کلاسهایی است که برای غیرفعال کردن عنصر دکمه و عنصر لنگر استفاده شده است –
| عصر | کلاس |
|---|---|
| Button element | ویژگی disabled را به دکمه های <button> اضافه کنید. |
| Anchor element | کلاس disabled را به دکمه های <a> اضافه کنید.
توجه – این کلاس فقط ظاهر <a> را تغییر می دهد ، نه عملکرد آن. برای غیرفعال کردن پیوندها در اینجا باید از JavaScript سفارشی استفاده کنید. |
مثال زیر این را نشان می دهد –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<p> <button type = "button" class = "btn btn-default btn-lg"> Default Button </button> <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled"> Disabled Button </button> </p> <p> <button type = "button" class = "btn btn-primary btn-lg"> Primary button </button> <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled"> Disabled Primary button </button> </p> <p> <a href = "#" class = "btn btn-default btn-lg" role = "button"> Link </a> <a href = "#" class = "btn btn-default btn-lg disabled" role = "button"> Disabled Link </a> </p> <p> <a href = "#" class = "btn btn-primary btn-lg" role = "button"> Primary link </a> <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button"> Disabled Primary link </a> </p> |
تگ های دکمه ا
شما می توانید از کلاس های دکمه با عنصر <a> ، <button> یا <input> استفاده کنید. اما توصیه می شود که بیشتر از آن با عناصر <button> استفاده کنید تا از بروز موارد مغایرت مرورگر عبور نکند.
مثال زیر این را نشان می دهد –
|
1 2 3 4 |
<a class = "btn btn-default" href = "#" role = "button">Link</a> <button class = "btn btn-default" type = "submit">Button</button> <input class = "btn btn-default" type = "button" value = "Input"> <input class = "btn btn-default" type = "submit" value = "Submit"> |
لیست جلسات قبل آموزش بوت استرپ
.svg)
دیدگاه شما