با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش کامل Bootstrap 4 ، را دنبال می کنند. اگر که در جریان روال آموزش Bootstrap 4 ، قرار گرفته باشید. ما اکنون وارد مباحث طراحی عناصر در Bootstrap 4 ، شده ایم و در این بخش از آموزش ها، قصد داریم به مبحث طراحی Button در Bootstrap 4 ، بپردازیم.
البته ما در بخش های قبل ، به طراحی برخی عناصر Bootstrap 4 طی این دوره ، از جمله طراحی هشدارها در Bootstrap 4 ، پرداختیم. و در بخش های قبل تر نیز، به مباحث مهم دیگری از جمله کار با تصاویر در Bootstrap 4 ، نیز اشاره شد.
اکنون به سراغ مبحث طراحی Button در Bootstrap 4 ، می رویم.
در Bootstrap 4 ، عناصر Button ، شامل طراحی های گوناگون و متنوعی می باشد.
مثال:
1 2 3 4 5 6 7 8 9 10 | <button type="button" class="btn">Basic</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-link">Link</button> |
کلاس ها ی Button ، می تواند در قالب تگ های <a> ، <button>
و <input>
، استفاده شود.
1 2 3 4 | <a href="#" class="btn btn-info" role="button">Link Button</a> <button type="button" class="btn btn-info">Button</button> <input type="button" class="btn btn-info" value="Input Button"> <input type="submit" class="btn btn-info" value="Submit Button"> |
Bootstrap 4 شامل ۸ طراحی برای ویژگی خط خارجی در عناصر Button ، می شود.
مثال:
1 2 3 4 5 6 7 8 | <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-light text-dark">Light</button> |
Bootstrap 4 اندازه های مختلف را برای عناصر Button ، در نظر گرفته است.
مثال:
1 2 3 | <button type="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary">Default</button> <button type="button" class="btn btn-primary btn-sm">Small</button> |
با افزودن کلاس .btn-block
، می توان ، خصوصیت block را برای عناصر Button ، در Bootstrap 4 ، فراهم کرد.
1 | <button type="button" class="btn btn-primary btn-block">Button 1</button> |
یک عنصر Button ، می تواند با استفاده از طراحی های آماده ی Bootstrap 4 ، بصورت فعال یا غیر فعال قرار بگیرد.
از کلاس .active
، برای فعال کردن ، و از کلاس disabled
، نیز برای غیر فعال کردن عناصر Button ، استفاده می شود.
نکته: اگر از تگ <a>
برای ایجاد Button ، استفاده می کنید . توجه داشته باشید که در این صورت باید از کلاس .disabled
، برای ایجاد Button غیر فعال ، استفاده کنید.
مثال:
1 2 3 | <button type="button" class="btn btn-primary active">Active Primary</button> <button type="button" class="btn btn-primary" disabled>Disabled Primary</button> <a href="#" class="btn btn-primary disabled">Disabled Link</a> |
در این بخش از آموزش های این دوره، ما شما را با طراحی های مختلفی که در Bootstrap 4 ، برای عناصر Button ، قرار دارد. و نحوه ی استفاده از آن ها در طراحی های متنوع و مخصوص در Button ، آشنا کردیم. امید است که این آموزش مورد استفاده ی تمامی کاربران ، قرار گرفته باشد.