دکمه ها اصولا یکی از کاربردی ترین مورد ها در طراحی سایت می باشند ، معمولا از دکمه ها یا Button ها در مکان های خاص سایت به عناوین مختلفی استفاده می شود ، در این قسمت از اموزش ها قصد داریم تا نحوه ی صحیح ساخت Button های بوت استرپ 4 را به شما عزیزان اموزش دهیم پس تا انتهای این اموزش همراه ما باشید.
پیشنهاد میشود برای تکمیل کردن اطلاعاتتان سایر قسمت های دوره ی بوت استرپ را از سایت کدپز دنبال کنید.
استایل دکمه ها در بوت استرپ 4
بوت استرپ دکمه هایش را به شکل زیر ارائه می دهد.
حالت های کلی Button های بوت استرپ را در بالا مشاهده میکنید حال نوبت به نحوه ی تعریف انها میرسد ، به مثال زیر و ساختار کدها توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 |
<button type="button" class="btn">پایه</button> <button type="button" class="btn btn-primary">اولیه</button> <button type="button" class="btn btn-secondary">ثانویه</button> <button type="button" class="btn btn-success">موفق</button> <button type="button" class="btn btn-info">اطلاعات</button> <button type="button" class="btn btn-warning">اخطار</button> <button type="button" class="btn btn-danger">هشدار</button> <button type="button" class="btn btn-dark">تیره</button> <button type="button" class="btn btn-light">روشن</button> <button type="button" class="btn btn-link">لینک</button> |
در حالت کلی HTML برای تعریف کردن انواع دکمه ها از تگ button با type یا نوع button استفاده میشود. ولی در حالت کلی تعریف button در بوت استرپ 4 به شکل تگ button در HTML نیست بلکه با استفاده از تگ های input و a نیز قابل اجراست .
Button ها معمولا سه حالت اند ، یا لینک می شوند ، یا درون صفحه کاری را انجام میدهند ، یا برای فرم ها استفاده میشوند به مثال زیر توجه کنید :
|
1 2 3 4 |
<a href="#" class="btn btn-info" role="button">دکمه لینک شده</a> <button type="button" class="btn btn-info">دکمه</button> <input type="button" class="btn btn-info" value="دکمه ورودی"> <input type="submit" class="btn btn-info" value="دکمه تایید"> |
چرا از # در لینک استفاده کردیم ؟
استفاده از # در لینک به این منظور بود که شما عزیزان در ابتدای امر به جای دیگری خارج از سایت هدایت نشوید ، در وهله ی دوم چون لینک جای خاصی مد نظرمان نبود پس تصمیم گرفتیم از شارپ استفاده کنیم تا شما نه به صفحه ی دیگری هدایت شوید و نه دچار مشکل شوید.
طرح دیگری از دکمه ها
Bootstrap 4 هشت دکمه طرح دار / مرزی را به شکل زیر در اختیار شما قرار می دهد:
برای درک بهتر این موضوع به مثال زیر توجه کنید.
|
1 2 3 4 5 6 7 8 |
<button type="button" class="btn btn-outline-primary">اولیه</button> <button type="button" class="btn btn-outline-secondary">ثانویه</button> <button type="button" class="btn btn-outline-success">موفق</button> <button type="button" class="btn btn-outline-info">اطلاعات</button> <button type="button" class="btn btn-outline-warning">هشدار</button> <button type="button" class="btn btn-outline-danger">خطر</button> <button type="button" class="btn btn-outline-dark">تیره</button> <button type="button" class="btn btn-outline-light text-dark">روشن</button> |
سایز دکمه ها
خب به مرحله ای از کار رسیدیم که ابعاد برایمان شاید کاربردی و مهم باشد ، بوت استرپ 4 سه حالت را در اختیار شما عزیزان قرار داده است حالت اولیه را در کدهای بالا اجرا کردیم و برای کوچکتر شدن سایز دکمه ها از کلاس .btn-sm و برای بزرگتر شدن از حالت اولیه از کلاس .btn-lg به شکل زیر استفاده میکنیم:
|
1 2 3 |
<button type="button" class="btn btn-primary btn-lg">بزرگ</button> <button type="button" class="btn btn-primary btn-md">عادی</button> <button type="button" class="btn btn-primary btn-sm">کوچک</button> |
تمام عرض
شاید برخی از صفحات سایت شما نیازمند دکمه ای باشد که تمام عرض بلاک را بگیرد، اگر قصد دارید همچین Button هایی را طراحی کنید به سادگی مثال زیر انجام میشود :
|
1 |
<button type="button" class="btn btn-primary btn-block">دکمه تمام عرض</button> |
در مثال بالا دیدیم که تنها با افزودن کلاس .btn-block تمام سطح پوشش داده شد.
فعال یا غیرفعال !
تا به حال شده است برایتان پیش بیاید تا فرمی را پر نکنید دکمه ی ارسال ان فعال نشود ؟ به نظر من رو مخ ترین Button ها ، Button های غیرفعال اند ! این نوع دکمه ها تنها از نظر من برای رو مخ بودن طراحی شده اند !
برای طراحی این نوع دکمه ها به مثال زیر توجه کنید :
|
1 2 3 4 |
<button type="button" class="btn btn-primary">Primary Button</button> <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> |
به یاد داشته باشید که تنها تگ های a کلاس .disabled را نمی پذیرند و اگر از انها استفاده کنید تنها ظاهری به شما میدهند که در ظاهر غیرفعال باشد ! ولی در باطن عمل میکند!
دکمه های چرخش
برای حالت های مختلف لود نیز میتوانید از دکمه های زیر استفاده کنید ، در ادامه ی قسمت ها به توضیحات کاملتری در این باره خواهیم پرداخت.
این نوع دکمه ها به شکل زیر ساخته می شوند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> </button> <button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> <button class="btn btn-primary" disabled=""> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> <button class="btn btn-primary" disabled=""> <span class="spinner-grow spinner-grow-sm"></span> Loading.. </button> |
ویدیوی قسمت نهم
خب به انتهای این قسمت از اموزش های بوت استرپ 4 هم رسیدیم ، پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید و در صورت تمایل میتوانید سایر قسمت های دوره بوت استرپ را دنبال کنید.
موفق باشید.
