ارسال نظر برای این مطلب
سید محمد میرعالی
امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.
دسته بندی مطالب
آمار سایت
کل مطالب : 39
کل نظرات : 6
افراد آنلاین : 1
تعداد اعضا : 0
آی پی امروز : 20
آی پی دیروز : 98
بازدید امروز : 147
باردید دیروز : 114
گوگل امروز : 0
گوگل دیروز : 0
بازدید هفته : 147
بازدید ماه : 399
بازدید سال : 10,519
بازدید کلی : 248,267
آموزش کار با Button در Bootstrap 4
در اين مطلب از سايت ميرممد با Button در بوتسترپ نسخه چهار كار خواهيم كرد.دکمه ها در بوتسترپ 4 شامل رنگ بندی های زیر میباشند :
<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>
خروجی کد بالا به ترتیب :
کلاس های دکمه ای که در بالا با رنگ سبز در کد مشخص شدند رو میتوان در المنت های a و Button و input به شکل زیر استفاده کرد :
<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">
خروجی کد بالا به ترتیب :
در بوتسترپ نسخه چهار یک سری دکمه با حاشیه و زیبا وجود دارد که در زیر توضیح میدم.
کلاس btn-outline-primary در بوتسترپ 4 :
<button type="button" class="btn btn-outline-primary">Primary</button>
خروجی کد بالا :
کلاس btn-outline-secondary در بوتسترپ 4 :
<button type="button" class="btn btn-outline-secondary">Primary</button>
خروجی کد بالا :
کلاس btn-outline-success در بوتسترپ 4 :
<button type="button" class="btn btn-outline-success">Primary</button>
خروجی کد بالا :
کلاس btn-outline-info در بوتسترپ 4 :
<button type="button" class="btn btn-outline-info">Primary</button>
خروجی کد بالا :
کلاس btn-outline-warning در بوتسترپ 4 :
<button type="button" class="btn btn-outline-warning">Primary</button>
خروجی کد بالا :
کلاس btn-outline-danger در بوتسترپ 4 :
<button type="button" class="btn btn-outline-danger">Primary</button>
خروجی کد بالا :
کلاس btn-outline-dark در بوتسترپ 4 :
<button type="button" class="btn btn-outline-dark">Primary</button>
خروجی کد بالا :
کلاس btn-outline-light در بوتسترپ 4 :
<button type="button" class="btn btn-outline-light text-dark">Primary</button>
خروجی کد بالا :
دکمه ها در بوتسترپ چهار دارای سه نوع سایز بزرگ معمولی و کوچیک هستند.در حالت عادی دکمه سایز معمولی هست پس دو کلاس بزرگ و کوچیک رو با هم میبینیم.
کلاس btn-lg در بوتسترپ 4 :
<button type="button" class="btn btn-primary btn-lg">Large</button>
خروجی کد بالا :
کلاس btn-sm در بوتسترپ 4 :
<button type="button" class="btn btn-primary btn-sm">Small</button>
خروجی کد بالا :
برای تمام عرض کردن یک دکمه هم از کلاس زیر استفاده میکنیم :
کلاس btn-block در بوتسترپ 4 :
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
خروجی کد بالا :
دکمه ها در بوتسترپ دارای سه حالت فعال ، غیرفعال و معمولی میباشند که در کد زیر سه نمونه رو میتونید ببینید :
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
خروجی کد بالا :
اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد
ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.
پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :